对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 相关文章推荐
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
es6函数之尾调用优化实例分析
Apr 25 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写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
php图像处理类实例
2015/07/28 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
JavaScript 的继承
2011/10/01 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
js密码强度校验
2015/11/10 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
总结python实现父类调用两种方法的不同
2017/01/15 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
合作经营协议书
2014/04/17 职场文书
初二学习计划书范文
2014/04/27 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
抵押贷款承诺书
2014/05/30 职场文书
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle