利用jquery-ui实现后台列表的拖拽排序_成都网站制作
最近遇到需要使用拖拽改变列表排序的需求,实现的过程倒是相对简单,问题点在于这个拖拽改变排序的缺点是对于其他页码的数据,无法跨页改变排序,所以只能通过拖拽排序和手动输入序号改变排序。以下是实现思路:HTML:引入jquery-ui.min.js,jquery-ui.min.css文件
列表结构部分:
Sortable的类名用于js的调用;id是数据的id,用于后台修改对应id数据的排序;disable的类名,用于禁止该tr进行拖拽;tbody class=sortable{foreach name=list[list] item=vo}tr id={$vo[id]}td class=col-50input type=checkboxclass=child name=selid[] value={$vo.id} lay-skin=primary/td!-- tdinput type=text placeholder=排序 autocomplete=offclass=layui-input sort data-id={$vo.id} url={:url(sort)} lay-filter=sort value={$vo.sort}/td --tddiv class=layui-table-cell laytable-cell-1-0-5span{$vo.sort}/span/div/tdtd style=background: #cccc;div class=layui-table-cell laytable-cell-1-0-5a href=javascript:; onClick=showImg(this)data-href={$vo.picture|ImgPath}img src={$vo.picture|ImgPath}width=80/a/div/tdtddiv class=layui-table-cell laytable-cell-1-0-5span{$vo.title}/span/div/tdtd class=layui-form col-80input type=checkbox lay-verify=required lay-filter=status name=is_indexdata-id={$vo.id} lay-skin=switch url={:url(status)} lay-text=是|否 value=1 {ifcondition=$vo[is_index] eq 1 }checked{/if}/tdtd class=layui-form col-80input type=checkbox lay-verify=required lay-filter=status name=statusdata-id={$vo.id} lay-skin=switch url={:url(status)} lay-text=正常|禁止 value=1 {ifcondition=$vo[status] eq 1 }checked{/if}/tdtddiv class=layui-table-cell laytable-cell-1-0-5span{$vo.create_time}/span/div/tdtd class=col-150div class=layui-table-cell laytable-cell-1-0-5a href={:url(edit,array(id=$vo[id]))} data-width=100%data-height=100% title=修改信息class=layui-btn layui-btn-normal layui-btn-xs fw_openi class=layui-icon layui-icon-edit/i修改/aa href={:url(copy,array(id=$vo[id]))} data-width=100%data-height=100% title=复制信息class=layui-btn layui-btn-xs fw_openi class=layui-icon layui-icon-edit/i复制/aa href={:Url(delete,array(id=$vo[id]))} title=确定要删除吗?class=layui-btn layui-btn-danger layui-btn-xs fw_deletei class=layui-icon layui-icon-delete/i删除/a/div/td/tr{/foreach}tr class=disabletd colspan=100span type=submit href={:url(delete)} class=fw_all_delete layui-btn layui-btn-sm layui-btn-danger i class=layui-icon layui-icon-delete/i删除/span/td/tr/tbodyJS代码:
script$(function() {$(.sortable).sortable({cursor: move,items: tr:not(.disable), //只是tr可以拖动cancel: .disable,opacity: 0.6, //拖动时,透明度为0.6revert: true, //释放时,增加动画axis: y,//只能在水平或垂直方向上被拖拽,x,ydelay:150,//鼠标按下后直到排序开始的时间,以毫秒计update: function(event, ui) { //更新排序之后var sort = $(this).sortable(toArray, {attribute: id});//获取改变顺序后的idvar page = $(.pagination).find(li.active span).text();//获取当前页码console.log(sort);var $this = $(this);$.ajax({url: {:url(edit_sort)},type: post,data: {sort: sort,page:page,},success: function(json) {if (json == 1) {layer.msg(移动成功, {icon: 1});window.location.reload(.content-iframe)} else {$this.sortable(cancel);layer.msg(移动失败, {icon: 2});}}});}});$(.sortable).disableSelection();});/script后台代码:
public function edit_sort(){if ($this-request-isAjax()) {$param = $this-request-post();$sort = $param[sort];$page = $param[page];if(empty($page)){$page = 1;}foreach ($sort as $k = $v) {$data[sort] = (($page-1)*10)+($k+1);$this-ModelObj-where(id, $v)-save($data);}$json = 1;return json($json);}}jquery-ui直接去官网下载即可。
利用jquery-ui实现后台列表的拖拽排序_成都网站制作 https://cdnanqi.cn/wangzhanzhizuo/10940.html
- 云南锡伯龙职业培训学校开班设微信营销零基础-微信营销朋友圈推广
- 10 个令人难以置信的 CSS、JavaScript 和 SVG 标志设计示例_成都网站搭建
- SEO优化外包公司来解决网站上容易发现的问题_宜宾seo优化
- 如何在网站设计中运用色彩层次搭配创造精致与独特感_成都做网站
- 网站建设经验总结:如何提升网站的用户体验度_宜宾做网站
- 网站SEO优化方法介绍-成都seo优化-成都网站优化
- 为什么网站与搜索引擎之间缺乏信任感增强搜索引擎的信任度变得越来越重要-成都seo优化-成都网站优化
- 做好站内SEO和站外SEO可稳定网站排名-射洪SEO优化
- 研究关键词真的能做好搜索引擎优化吗-成都seo优化-成都网站优化
- SEO也应该改变营销思维,这才是出路-巴中SEO优化