layUI初始化表格时,按钮功能加载多次问题
根据需求的不同,页面需要加载多个带有查询条件的表格,根据点击事件切换表格进行刷新,需要把layui加载表格写在方法里,就比如以下代码:
function getData(clickFlag){
$('#clickFlag').val(clickFlag)
//主题精选
if(clickFlag == 1){
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#LAY_table_user'
,url:'/recommend/recommendList'
,where: { typeFlag: 1 }
,cols: [[
{type:'numbers',align:'center', width:'6%',title: '序号'}
,{field:'title',align:'center', width:'13%', title: '主题名称'}
,{field:'goodsNum',align:'center', width:'10%', title: '主题单品'}
,{field:'statusFlag',align:'center', width:'12%', title: '当前状态'}
,{field:'topFlag',align:'center', width:'5%',title: '置顶'}
,{field:'createTime',align:'center',width:'13%',title:'创建时间'}
,{field:'upTime',align:'center', width:'13%', title: '上线时间'}
,{field:'topEndTime',align:'center', width:'13%', title: '下线时间'}
,{fixed:'right',align:'center', width:'10%', toolbar: '#barDemo',title: '操作'}
]]
,page: true
,id: 'reload'
});
var $ = layui.$, active = {
reload: function(){
var topStartTime = $('#startTime1');
var topEndTime = $('#endTime1');
var statusFlag = $("#state");
var topFlag = $("#type1");
table.reload('reload', {
where: {
typeFlag :1,
topStartTime : topStartTime.val(),
topEndTime : topEndTime.val(),
statusFlag : statusFlag.val(),
topFlag : topFlag.val()
},page: {
curr: 1
}
});
}
};
$('.btn-danger').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
但点击事件来回切换时,都会对表格的“查询”按钮绑定一次事件,就是下面这一句
$(’.btn-danger’).on(‘click’, function(){
var type = $(this).data(‘type’);
active[type] ? active[type].call(this) : ‘’;
});
就是说加载了三次表格也对“查询”按钮绑定了三次事件,一次点击就会造成三次执行
在layui社区也没找到关于解决这一块的方法
我想的是只对“按钮”绑定一次事件,定义一个全局变量orderTableFlag,默认为true,第一次加载完成后置为false,在此切换时,就不进行绑定了
如下代码:
if(orderTableFlag){
var $ = layui.$, active = {
reload8: function(){
var orderNum = $('#orderNum');
var startTime = $('#startTime8');
var endTime = $('#endTime8');
var userIds = $("#userId").val();
sumMoney(2,1,userIds,startTime.val(),endTime.val());
table.reload('reload8', {
where: {
orderNo: orderNum.val(),
payTime : startTime.val(),
settleTime : endTime.val(),
userId: userIds
},page: {
curr: 1
}
});
}
};
$('.selectTable8 .btn-danger').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
orderTableFlag = false;
};
目前就想到这么个方法,大家还有好的方法么,支个招呀!