列表上移下移功能实现

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

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

目录

列表增加属性

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());}
}

总结

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