对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获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
js 对象是否存在判断
Jul 15 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
Vant picker 多级联动操作
Nov 02 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
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP令牌 Token改进版
2008/07/18 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python中的装饰器用法详解
2015/01/14 Python
OpenCV实现人脸识别
2017/04/07 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Python中的枚举类型示例介绍
2019/01/09 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
家长学校工作方案
2014/05/07 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
Linux安装apache服务器的配置过程
2021/11/27 Servers
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python