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