00001- layui 表格的默认工具栏添加自定义按钮

逻辑寻梦
• 阅读 2554

首先定义table:

var tableIns = table.render({
            elem:'#businessUserListTable'
            ,url: ctx+'/business/businessUser/query'
            ,error:admin.error
            ,cellMinWidth: 80
//       ,width:3700
            ,toolbar: '#businessUserListTable-toolbar'
            ,defaultToolbar: [{
                title: '条件过滤' //标题
                ,layEvent: 'searchDiv' //事件名,用于 toolbar 事件中使用
                ,icon: 'layui-icon-search' //图标类名
            },
                'filter', 'print', 'exports']
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'userName', title: '用户帐号', align: 'center',width:130 }
                ,{field:'name', title: '姓名', align: 'center',minWidth:130 }
                ,{field:'department', title: '部门', align: 'center',width:130 }
                ,{field:'role', title: '角色', align: 'center',width:130 }
                ,{field:'position', title: '职位信息', align: 'center',width:130 }
                ,{field:'tel', title: '手机', align: 'center',width:130 }
//                ,{field:'sex', title: '性别', align: 'center',width:130,templet:tplSex }
                ,{field:'isLeader', title: '是否领导', align: 'center',width:130,templet:tplIsLeader }
                ,{field:'status', title: '状态', align: 'center',width:130,templet:tplStatus}
                ,{title:'操作', toolbar: '#businessUserListTable-bar', width:180}
            ]]
            ,page: true
            ,limit: 10
            ,limits: layui.setter.limits
            ,done: function(res, curr, count){
            }
            ,height: 'full-1'
        });

其中defaultToolbar 中的:

{
    title: '条件过滤' //标题
    ,layEvent: 'searchDiv' //事件名,用于 toolbar 事件中使用
    ,icon: 'layui-icon-search' //图标类名
}

这就是我添加的自定义 搜索按钮。

搜索事件的监听代码:

table.on('toolbar(businessUserListTable)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
        case 'addRec':
            active.addRec()
            break;
        case 'delRec':
            active.delRec(checkStatus)
            break;
        case 'searchDiv':
            active.searchDiv();
            break;
    };
});

其中 case 'searchDiv': 与 layEvent: 'searchDiv' 是对应的。

方法的定义如下:

var active = {
      searchDiv: function(){
          top.layui.admin.popupRight({
              id: 'LAY_business_PopupLayer'
              ,area: '350px'
              ,success: function(layero,index){
                  var sexArr = top.layui.dict.options("sex");
                  var statusArr = top.layui.dict.options("status");
                  top.layui.view(this.id).render('business/businessUserSearch',$.extend(search_field,{
                      sexArr:sexArr,
                      statusArr:statusArr
})).done(
                      function () {
                          top.layui.form.render();
                      }
                  );
              }
          });
      },
  };
点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Stella981 Stella981
3年前
SpringBoot学习:整合shiro自动登录功能(rememberMe记住我功能)
首先在shiro配置类中注入rememberMe管理器!复制代码(https://oscimg.oschina.net/oscnet/675f5689159acfa2c39c91f4df40a00ce0f.gif)/cookie对象;rememberMeCookie()方法是设置Cookie的生成模
Wesley13 Wesley13
3年前
GoJS API学习
varnode{};node"key""节点Key";node"loc""00";//节点坐标node"text""节点名称";//添加节点通过按钮点击,添加新的节点到画布myDiagram.model.addNodeData(nod
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
MySql 相关函数
SELECTGROUP\_CONCAT(column\_name)FROMtable\_namegroupbytable\_name,table\_name2...FIELD()函数自定义排序select\fromuserwheretypein(1,2,3)orderbyFIELD(column,str1,st
Stella981 Stella981
3年前
ELK学习笔记之配置logstash消费kafka多个topic并分别生成索引
0x00 filebeat配置多个topicfilebeat.prospectors:input_type:logencoding:GB2312fields_under_root:truefields:添加字段
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Easter79 Easter79
3年前
SpringBoot学习:整合shiro自动登录功能(rememberMe记住我功能)
首先在shiro配置类中注入rememberMe管理器!复制代码(https://oscimg.oschina.net/oscnet/675f5689159acfa2c39c91f4df40a00ce0f.gif)/cookie对象;rememberMeCookie()方法是设置Cookie的生成模
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable