列表上移下移功能实现

后台管理某列表需实现上移下移功能，并与前端展示列表排序相关。

现将开发完成过程笔记记录下来。

目录

列表增加属性

JQuery脚本

服务端

控制器

服务层

总结

列表增加属性

在循环渲染时，在table表格的tr上增加id和排序的属性值，以便传输后端修改相应记录。

代码如下：

{foreach name="list" item="v"}
<tr class="hover edit" data-val="{$v.sort}" data-id="{$v.id}">
    <td>{$v.title}</td>
    <td>￥{$v.reward_price}</td>
    <td>{$v.sales_price}</td>
    <td>{if $v.type == 1} - {else} {$v.sales_num} {/if}</td>
    <td>
        {if $v.type == 1}
        -
        {else}
        <input type="button" class="dsui-btn-edit up" value="上移">
        <input type="button" class="dsui-btn-edit down" value="下移">
        {/if}
    </td>
    <td class="align-center">
        <a href="javascript:void(0)" onclick="rewardEdit({$v.id})" class="dsui-btn-edit"><i class="iconfont"></i>编辑</a>
        {if $v.type == 0}
        <a href="javascript:void(0)" onclick="submit_delete({$v.id})" class="dsui-btn-del"><i class="iconfont"></i>删除</a>
        {/if}
    </td>
</tr>
{/foreach}

JQuery脚本

在jquery脚本中，编写上移下移事件，通过按钮上绑定的类名进行触发。

获取通过tr上设定的id和sort，传递给后端修改相应记录。

上移时需判断表格行是否第一行，这里因为我的第一行没有上下移动功能，故改为这样。

下移时，需判断表格是否最后一行。

代码如下：

$(function () {
    // 上移
    var up = $(".up");
    up.click(function () {
        var $tr = $(this).parents('tr');
        var now_id = $tr.attr('data-id');
        var now_val = $tr.attr('data-val');
        if (now_val > 2) {
            var last_id = $tr.prev().attr('data-id');
            var last_val = $tr.prev().attr('data-val');
            var data = {'id1':now_id, 'sort1':now_val, 'id2':last_id, 'sort2':last_val};
            editSort(data);
        }
    });

    // 下移
    var down = $(".down");
    var len = down.length;
    down.click(function () {
        var $tr = $(this).parents('tr');
        var now_id = $tr.attr('data-id');
        var now_val = $tr.attr('data-val');
        if ($tr.index() != len) {
            var last_id = $tr.next().attr('data-id');
            var last_val = $tr.next().attr('data-val');
            var data = {'id1':now_id, 'sort1':now_val, 'id2':last_id, 'sort2':last_val};
            editSort(data);
        }
    });

    /**
     * 修改排序
     * @param data
     */
    function editSort(data) {
        $.getJSON("{:url('YttReward/editSort')}", data, function(res){
            if (res.code != 1) {
                layer.msg(res.msg, {icon: 1});
            } else {
                window.location.reload();
            }
        });
    }
});

服务端

控制器

/**
 * 编辑奖励排序
 * @return void
 */
public function editSort()
{
// 接收所有值
    $param = $this->request->param();
    $res = $this->Service->editSort($param);
// 返回json格式数据
    ds_json_encode($res['code'], $res['msg']);
}

服务层

在服务层处理具体业务：验证参数，查询记录，修改记录。

代码如下：

/**
 * 编辑奖励排序
 * @param $param
 * @return array
 */
public function editSort($param)
{
    $rules      = [
        'id1'   => 'require|number',
        'sort1' => 'require|number',
        'id2'   => 'require|number',
        'sort2' => 'require|number',
    ];
    $messages   = [
        'id1.require'   => '请选择奖励',
        'id1.number'    => '奖励id参数为数字',
        'sort1.require' => '请输入排序',
        'sort1.number'  => '排序值为数字',
        'id2.require'   => '请选择奖励',
        'id2.number'    => '奖励id参数为数字',
        'sort2.require' => '请输入排序',
        'sort2.number'  => '排序值为数字',

    ];
    $validate = validate($rules, $messages);
    if (!$validate->check($param)) {
        return ds_callback(0, $validate->getError());
    }

    try {
        $info1 = $this->getInfo(['id' => $param['id1']]);
        $info2 = $this->getInfo(['id' => $param['id2']]);
        if (!$info1 || !$info2) {
            return ds_callback(0, '该记录不存在');
        }
        if ($info1['type'] == 1 || $info2['type'] == 1) {
            return ds_callback(0, '新手奖励不可修改排序');
        }
        $this->editData(['sort' => $param['sort2']], ['id' => $param['id1']]);
        $this->editData(['sort' => $param['sort1']], ['id' => $param['id2']]);
        return ds_callback(1, '操作成功');
    } catch (\Exception $e) {
        return ds_callback(0, $e->getMessage());
    }
}

总结

上移下移的列表功能前端脚本加后端结合实现。