当前位置:首页 » 《关于电脑》 » 正文

【前端】Layui动态数据表格拖动排序

5 人参与  2024年04月14日 08:36  分类 : 《关于电脑》  评论

点击全文阅读


目录

一、下载layui-soul-table

二、使用

三、Layui实际使用

1、html代码

2、JS代码

3、PHP后台代码


目的:使用Layui的数据表格,拖动行进行排序。

使用插件:layui-soul-table 和 Layui  

1.layui-soul-table文档:https://soultable.yelog.org/#/zh-CN/component/start/install

2.layui文档:Layui table模块 | 数据表格 | datatable - 在线演示

结合Layui并参看layui-soul-table官方教程,写的比较详细页比较简单。

实现效果:可以拖动行进行排序,可以搜索

一、下载layui-soul-table

把下载好的文件放到项目中,比如说放到public文件夹下的/ext/soulTable/下,下载的内容很多,不需要全部都放到目录下,只需要把用到拷贝进来就行,如下图

二、使用

因为需求是实现拖动排序,所以只用到了soulTable.slim.js

layui.config({base: '/ext/',   // 第三方模块所在目录version: 'v1.6.4' // 插件版本号}).extend({                         soulTable: 'soulTable/soulTable.slim'// 模块});

三、Layui实际使用

1、html代码

有几个需要注意的地方:

1、搜索按钮的lay-filter要一致

2、lay-event对应下面的toolbar

<div class="layui-form layui-card-header layuiadmin-card-header-auto"><!-- 搜索 start --><form  class="layui-form layui-form-pane"  style="float:left"><div class="layui-form-item"><label class="layui-form-label">视频名称</label><div class="layui-input-inline"><input type="text" name="filename" placeholder="视频名称" autocomplete="off" class="layui-input" value=""></div><button class="layui-btn layui-btn-normal" lay-submit lay-filter="demo-table-search"><i class="fa fa-search" aria-hidden="true"></i> 搜 索</button></div></form><!-- 搜索 end --></div><div class="layui-card-body" style="width: 96%; margin: 0 auto; overflow-x: auto;"><table id="myTable" lay-filter="test" id="test"></table><!-- <script type="text/html" id="myBar"> </script> --><script type="text/html" id="preview"><button type="button" class="layui-btn layui-btn-sm" lay-event="preview"> <i class="fa fa-eye" aria-hidden="true"></i> 预览</button></script><script type="text/html" id="barDemo">  <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit"><i class="fa fa-edit" aria-hidden="true"></i> 修改 </a><a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="del"> <i class="fa fa-trash" aria-hidden="true"></i> 删除</a></script></div>

2、JS代码

1、引入soulTable,注意路径,我存放的路径是在/public/ext/soulTable/下

2、extend引入的模块可以根据自己需求添加

3、table.render()下的id和elem要和上面HTML中的table的id一致

4、rowDrag下的done里面的是拖动时触发的事件,可以从这里获取拖动行的数据信息,并在这里更新数据库

5、cols里的就是列名,列名对应上就行

6、done下的代码是刷新拖动之后的表格的,勿删

7、搜索提交:其实就是数据表格的重载,可以参考Layui官网,我这里为了后端接收方便,所有和Layui官网的示例有些出入。注意lay-filter监听要一致,其中table.reload下的myTable也要和上面HTML的一致,用于标识重载的表格

8、监听行工具事件:根据event的不同,处理不同的业务

layui.config({    base: '/ext/',   // 第三方模块所在目录    version: 'v1.6.4' // 插件版本号}).extend({                             soulTable: 'soulTable/soulTable.slim'// 模块});layui.use(['element', 'layer','form','table','soulTable'], function(){var $ = layui.jquery,layer = layui.layer,element = layui.element,form = layui.form,table = layui.table,soulTable = layui.soulTable;var myTable = table.render({        id: 'myTable'        ,elem: '#myTable'        ,url: 'videoquery'        // ,toolbar: '#myBar'        ,height: 500        ,rowDrag: {done: function(obj) {            // 完成时(松开时)触发            // 如果拖动前和拖动后无变化,则不会触发此方法            // console.log(obj.row) // 当前行数据            // console.log(obj.cache) // 改动后全表数据            // console.log(obj.oldIndex) // 原来的数据索引            // console.log(obj.newIndex) // 改动后数据索引            var row_id = obj.row.id  // 当前id            var row_sort = obj.newIndex+1 // 拖动后的排序            // console.log(row_id)            // console.log(row_sort)            $.ajax({            url:'/teacher/video/upsort',            type:'POST',            dataType:'JSON',            data:{id:row_id,sort:row_sort},            success:function (res) {            console.log(res)                    layer.msg(res.message, {  time: 2000 //2秒关闭(如果不配置,默认是3秒)    }, function(){  //do something            location.reload()});            }            })        }}        ,totalRow: true        ,cols: [[            {field: 'filename', title: '视频名称', width: '20%', fixed: 'left'},            {field: 'kejian', title: '关联课件', width: '30%', height:'auto', fixed: 'left'},            {fixed: 'right', title:'预览', toolbar: '#preview', width:'20%'},            {fixed: 'right', title:'操作', toolbar: '#barDemo', width:'30%'}        ]]        ,page: true        ,done: function () {            soulTable.render(this)        }    });    // 搜索提交  form.on('submit(demo-table-search)', function(data){    var field = data.field; // 获得表单字段    // console.log(field)    // 执行搜索重载    table.reload('myTable', {      page: {        curr: 1 // 重新从第 1 页开始      },      where: field // 搜索的字段    });    return false; // 阻止默认 form 跳转  });//监听行工具事件table.on('tool(test)', function(obj){    var data = obj.data;    //console.log(obj)    if(obj.event === 'preview'){    // console.log(data)    // 预览      window.open(data.path);    }else if(obj.event === 'del'){    // console.log(data.id)    layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){      $.ajax({url:"del",type:"POST",dataType:"JSON",data:{id:data.id},success:function (res) {if (res.code == 200) {layer.msg(res.message);        obj.del();}else{layer.msg(res.message);return false;}}})      });    } else if(obj.event === 'edit'){    // console.log(data.id)      window.location.href='edit.html?id='+data.id;    }});});  

3、PHP后台代码

主要是添加了搜索,返回的是JSON数据

public function videoquery() {    $map = array();    $page = input('page');  //页码    $limit = input('limit');  //分页    $filename = trim(input('param.filename'));    if (!empty($filename)) {        $map['video.filename'] = array('like',"%$filename%");    }        // 列表    $data= model('Video')->getList($this->tid,$map,$page,$limit);    // 个数    $count = model('Kejian')->gerKejianCount($this->tid,$map);    $result = array(       'code'=>0,       'msg'=>'',       'count'=>$count,       'data'=> $data    );    return $result; }

另外一种使用jquery ui实现表格拖动排序 

Jquery UI +PHP 实现表格拖动排序icon-default.png?t=N7T8https://blog.csdn.net/qq_25285531/article/details/134287545?spm=1001.2014.3001.5502


点击全文阅读


本文链接:http://zhangshiyu.com/post/95056.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 俞晓小说完结篇(豪门骗嫁:腹黑总裁步步谋婚)章节前文+全篇阅读(俞晓)最近更新
  • 手撕冒充我身份抢拉布布的第三者故事会_老公赵桐州陆雅宁免费阅读_小说后续在线阅读_无删减免费完结_
  • 以前不喜欢的人,以后也不会喜欢全文免费阅读无弹窗大结局_林雨浔楚淮晏最新章节列表_笔趣阁(以前不喜欢的人,以后也不会喜欢:完结+结局+番外)
  • 救命血被抽干,中了绝情蛊的老公弟弟双双傻眼了免费赏析_弟弟月儿谢总全文+后续_小说后续在线阅读_无删减免费完结_
  • 愿意季清涟小说番外+结局(心上音)小说在线阅读
  • 莫斯科没有眼泪好评_林陌瑾修许青青后续+完结_小说后续在线阅读_无删减免费完结_
  • 宠妻上瘾:霸道老公坏死了(秦慕辰苏莫浅)整本+后续+(宠妻上瘾:霸道老公坏死了)结局在线阅读
  • 林雨浔楚淮晏:+后续+番外以前不喜欢的人,以后也不会喜欢无删减小说在线无广告高口碑小说
  • (凌烬寒戚无筝)她见过他爱过的模样小说最终篇章章节在线无广告高口碑小说
  • 小说宋可清(宋可清)已更新+无删减(完蛋!我把反派大佬撩红温了)
  • 唐圆圆小说(七十年代养娃后成为对照组)起点章节+全篇阅读热门作品预订
  • 沈棠陆凌枭小说(重生拥有死神眼,大义灭亲全家哭)(沈棠陆凌枭)在线畅读阅读连载中

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1