永兴集团(中国区)官方网站-Macau App Station

400-800-9385
网站建设资讯详细

利用jquery-ui实现后台列表的拖拽排序

发表日期：2023-04-25 09:34:49   作者来源：黎云辉   浏览：1493   标签：    
当前位置：首页 - 永兴集团官网 - 网站建设
最近遇到需要使用拖拽改变列表排序的需求，实现的过程倒是相对简单，问题点在于这个拖拽改变排序的缺点是对于其他页码的数据，无法跨页改变排序，所以只能通过拖拽排序和手动输入序号改变排序。以下是实现思路：
 
HTML：
引入jquery-ui.min.js，jquery-ui.min.css文件

jquery

列表结构部分：

列表

Sortable 的类名用于js的调用；id是数据的id，用于后台修改对应id数据的排序；disable的类名，用于禁止该tr进行拖拽；

{foreach name="list['list']" item="vo"}


class="child"  name="selid[]"  value="{$vo.id}" lay-skin="primary">


{$vo.sort}





data-href="{$vo.picture|ImgPath}">
width="80">



{$vo.title}




data-id="{$vo.id}" lay-skin="switch" url="{:url('status')}" lay-text="是|否" value="1" {if
condition="$vo['is_index'] eq 1" }checked{/if}>



data-id="{$vo.id}" lay-skin="switch" url="{:url('status')}" lay-text="正常|禁止" value="1" {if
condition="$vo['status'] eq 1" }checked{/if}>


{$vo.create_time}





data-height="100%" title="修改信息"
class="layui-btn layui-btn-normal layui-btn-xs fw_open">
修改


data-height="100%" title="复制信息"
class="layui-btn  layui-btn-xs fw_open">
复制


class="layui-btn layui-btn-danger layui-btn-xs fw_delete">
删除




{/foreach}


删除



 
 
JS代码：

js代码

 

 
后台代码：

网站代码

 
 
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直接去官网下载即可。
如没特殊注明，文章均为永兴集团原创,转载请注明来自/news/6756.html
上一篇： 微交互驱动用户体验的转变方式
下一篇： 网站背景图片的选择与趋势风格分析
相关网站设计案例
相关资讯
常见问题
最新文章
XML 地图