对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 select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 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 Undefined index报错的修复方法
2011/07/17 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
python如何把字符串类型list转换成list
2020/02/18 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
母婴店促销方案
2014/03/05 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
亮剑观后感500字
2015/06/05 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
《实心球》教学反思
2016/02/23 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python