对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 相关文章推荐
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
详解Vue 单文件组件的三种写法
Feb 19 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隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
一个JS翻页效果
2007/07/23 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
谈谈vue中mixin的一点理解
2017/12/12 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
对Python 数组的切片操作详解
2018/07/02 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
python清空命令行方式
2020/01/13 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python基于内置函数type创建新类型
2020/10/22 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
共产党员公开承诺书范文
2014/03/28 职场文书
保险公司演讲稿
2014/09/02 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android