00001- 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: '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();
                      }
                  );
              }
          });
      },
  };