如果你在layui的toolbar中定义了按钮方法,你会发现使用table.reload之后,这些方法不能用 或者不执行了。
首先看看你在toolbar中定义的方法是不是写在了 layui.use之中?
如图 ,我的这个查询只有更新页面之后才能使用,table.reload方法执行之后就不能用了
但是如果你单独定义onclick 方法在layui.use之外,如图
这种方式就不会被 toolbar 头部工具所约束,可以正常的使用。
那么如何在toolbar中使用查询按钮,或执行其他方法呢?
首先在<button> class 中设置查询按钮的别名 search_btn,id有没有都不影响
<button type="button" class="layui-btn search_btn" data-type="reload" id="find">查询</button>
然后在layui.use中进行定义,toorbar()方法,并将toolbar中的方法放在这里面,这样每次reload()都会再调用这个方法,并再render中渲染
<script>
layui.use(['table','form'], function(){
var table = layui.table;
//table 表数据
table.render({
//此处为table的ID
elem: '#expert_message_table'
,url:'/ems/expert/getList'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增'
,title:'专家数据表'
,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
, layEvent: 'LAYTABLE_TIPS'
, icon: 'layui-icon-tips'
}]
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'expert_code', title: '专家编号', sort: true}
,{field:'expert_name', title: '专家姓名', sort: true}
,{field:'expert_age', title: '专家年龄', sort: true}
,{field:'expert_sex', title: '专家性别'}
,{field:'expert_phone', title: '专家电话', sort: true}
,{field:'expert_level', title: '专家等级', sort: true, templet:function (item){
if(item.expert_level === 0){
return "初级专家";
}else {
return "资深专家";
}
}}
,{field:'expert_major', title: '专家专业'}
,{field:'expert_address', title: '专家住址', templet:function(item){
return item.expert_address.address_name}}
,{field:'expert_message', title: '专家描述', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
,{field:'expert_review_num',title: '评审项目数量', sort: true}
,{field:'expert_status', title: '专家状态',templet: function (item) {
if (item.expert_status === 0) {
return "在职";
} else if (item.expert_status === 1) {
return "退休";
} else if (item.expert_status === 2){
return "离职";
}}}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,page: true
,done: function(){
toolbar();
}
});
function toolbar() {
//查询
$(".search_btn").on("click",function (){
table.reload("expert_message_table",{
page:{
curr:1
}, where: {
expert_name:$('#expert_name').val(),
expert_phone:$('#expert_phone').val(),
expert_code:$('#expert_code').val(),
}
});
})
//批量删除
$("#delExpertList").click(function () {
//获取选中状态
var checkStatus = table.checkStatus('expert_message_table');
var data = checkStatus.data;
var expert_id = "";
if (data.length > 0) {
for (var i in data) {
expert_id += data[i].expert_id + ",";
}
console.log(data);
layer.confirm('确定删除选中的用户?', {icon: 3, title: '提示信息'}, function (index) {
$.post('expert/delAll/' + expert_id, function (data) {
location.reload();
layer.close(index);
layer.msg(data.msg);
});
})
} else {
layer.msg("请选择需要删除的用户");
}
});
}
//监听行工具事件
//此处tool()中 的数据为 lay—filter定义的名称 <table> 删除行
table.on('tool(table-test)', function(obj){
var data = obj.data;
console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
$.ajax({
type:"DELETE",
dataType:"json",
url:"expert/delExpert/"+data.expert_id,
data:{"expert_id":data.expert_id},
success:function (data){
obj.del();
layer.close(index);
layer.msg(data.msg);
}
})
});
}
if(obj.event === "detail"){
var max=layer.open({
type:2,
content: "expert/goToDetailExpertPage/"+data.expert_id, //添加页,后台controller转发到指定页
title: ['专家详情'],
fixed: false,
shadeClose: true,
maxmin:true,
isOutAnim:false,
end: function () { //刷新页面
location.reload();
}
})
layer.full(max);
}
});
});