对layui中table组件工具栏的使用详解


Posted in Javascript onSeptember 19, 2019

layui工具栏

第一步:在table中引入table,在table控件下加入:

fixed:'right',title:'操作',width:"28%",align:'center',toolbar:"#barlist"

第二步:在table标签中加入以下js代码:

<script type="text/html" id="barlist">
      <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
      {{# if(d.forbidden=="0"){ }}
      <a class="layui-btn layui-btn-xs" lay-event="jinyong">禁用</a>
      {{# } else if(d.forbidden=="1"){}}
      <a class="layui-btn layui-btn-xs" lay-event="jiechu">解除</a>
      {{# } }}

      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

第三步:监听工具栏

table.on('tool(listfilter)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
      var data = obj.data //获得当前行数据
          , layEvent = obj.event; //获得 lay-event 对应的值
      if (layEvent === 'detail') {
        layer.msg('ID:' + data.id + ' 的查看操作');
      } else if (layEvent === 'del') {
        layer.confirm('真的删除行么', function (index) {
          obj.del(); //删除对应行(tr)的DOM结构
          console.log(data.id)
          $.ajax({
            url: "",
            type: "DELETE",
            data: {"id": data.id},
            dataType: "json",
            beforeSend: function (request) {
              request.setRequestHeader("Authorization", window.sessionStorage.token);
            },
            success: function (data) {
              if (data.code == 200) {
                obj.del();
                layer.close(index);
                layer.msg(data.msg, {icon: 6});
                parent.table.reload('list', {});

              } else if (data.code == 401) {
                obj.del();
                layer.close(index);
                layer.msg("登陆已过期,请重登", {icon: 6});
                location.href = "./login.html";
              }
              else {
                layer.msg(data.msg, {icon: 5});
              }
            }
          });
          layer.close(index);
          //向服务端发送删除指令
        });
      } else if (layEvent === 'edit') {
        console.log(data)

        x_admin_show('编辑', 'admin-edit.html?id=' + data.id, '900', '500');

//        layer.msg('编辑操作');
      } else if (layEvent === 'jinyong') {
        var x = this;
        layer.confirm('确定要禁用此用?赭?, function (index) {
          $(x).text("解除");
          $.ajax({
            url: "",
            type: "PUT",
            data: {
              "id": data.id,
              "forbidden": "1"
            },
            dataType: "json",
            beforeSend: function (request) {
              request.setRequestHeader("Authorization", window.sessionStorage.token);
            },
            success: function (data) {
              if (data.code == 200) {
                layer.close(index);
                layer.msg(data.msg, {icon: 6});
              } else if (data.code == 401) {
                layer.close(index);
                layer.msg("登陆已过期,请重登", {icon: 6});
                location.href = "./login.html";
              }
              else {
                layer.msg(data.msg, {icon: 5});
              }
            }
          });
        });
//        layer.msg('编辑操作');
      } else if (layEvent === 'jiechu') {
        var x = this;

        layer.confirm('确定要解除禁用麽', function (index) {
          $(x).text("解除");
          $.ajax({
            url: "http://134.175.36.40/api/admin/usual",
            type: "PUT",
            data: {
              "id": data.id,
              "forbidden": "0"
            },
            dataType: "json",
            beforeSend: function (request) {
              request.setRequestHeader("Authorization", window.sessionStorage.token);
            },
            success: function (data) {
              if (data.code == 200) {
                layer.close(index);
                layer.msg(data.msg, {icon: 6});
              } else if (data.code == 401) {
                layer.close(index);
                layer.msg("登陆已过期,请重登", {icon: 6});
                location.href = "./login.html";
              }
              else {
                layer.msg(data.msg, {icon: 5});
              }
            }
          });
        });
      }
    });

以上这篇对layui中table组件工具栏的使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现倒计时时钟的示例代码
Dec 17 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
Electron vue的使用教程图文详解
Jul 05 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
layui自定义工具栏的方法
Sep 19 #Javascript
Node 代理访问的实现
Sep 19 #Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 #Javascript
微信小程序进入广告实现代码实例
Sep 19 #Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 #Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 #Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 #Javascript
You might like
基于mysql的论坛(2)
2006/10/09 PHP
PHP中的类-什么叫类
2006/11/20 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
Python面向对象编程基础解析(二)
2017/10/26 Python
python代码实现ID3决策树算法
2017/12/20 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
python中eval与int的区别浅析
2019/08/11 Python
python应用文件读取与登录注册功能
2019/09/23 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
.NET概念性的面试题
2012/02/29 面试题
医学院毕业生自荐信
2013/11/08 职场文书
车间主管岗位职责
2013/11/14 职场文书
借款民事起诉状范文
2015/05/19 职场文书
大学生实习证明
2015/06/16 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书