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

首先定义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:

首先定义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();
                      }
                  );
              }
          });
      },
  };