手机进入网站自动识别,查看网站外链代码,网站开发和软件开发有什么区别,wordpress会员中心后台管理某列表需实现上移下移功能#xff0c;并与前端展示列表排序相关。 现将开发完成过程笔记记录下来。 目录
列表增加属性
JQuery脚本
服务端
控制器
服务层
总结 列表增加属性
在循环渲染时#xff0c;在table表格的tr上增加id和排序的属性值#xff0c;以便传… 后台管理某列表需实现上移下移功能并与前端展示列表排序相关。 现将开发完成过程笔记记录下来。 目录
列表增加属性
JQuery脚本
服务端
控制器
服务层
总结 列表增加属性
在循环渲染时在table表格的tr上增加id和排序的属性值以便传输后端修改相应记录。
代码如下
{foreach namelist itemv}
tr classhover edit data-val{$v.sort} data-id{$v.id}td{$v.title}/tdtd{$v.reward_price}/tdtd{$v.sales_price}/tdtd{if $v.type 1} - {else} {$v.sales_num} {/if}/tdtd{if $v.type 1}-{else}input typebutton classdsui-btn-edit up value上移input typebutton classdsui-btn-edit down value下移{/if}/tdtd classalign-centera hrefjavascript:void(0) onclickrewardEdit({$v.id}) classdsui-btn-editi classiconfont/i编辑/a{if $v.type 0}a hrefjavascript:void(0) onclicksubmit_delete({$v.id}) classdsui-btn-deli classiconfont/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());}
} 总结
上移下移的列表功能前端脚本加后端结合实现。
