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