对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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
初识JQuery 实例一(first)
Mar 16 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 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中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
PHP数据类型的总结分析
2013/06/13 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
python中的函数用法入门教程
2014/09/02 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
门卫班长岗位职责
2013/12/15 职场文书
家长会演讲稿范文
2014/01/10 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
学校评语大全
2014/05/06 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
感谢信格式范文
2015/01/22 职场文书
交警失职检讨书
2015/01/26 职场文书
锅炉工岗位职责
2015/02/13 职场文书
离婚起诉书怎么写
2015/05/19 职场文书