后台管理某列表需实现上移下移功能，并与前端展示列表排序相关。
现将开发完成过程笔记记录下来。
目录
列表增加属性
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());
}
}总结
上移下移的列表功能前端脚本加后端结合实现。
