我在用layui数据表格时用到了表单查询后重载表格以及toolbar头部工具栏弹窗查询重载表格，但遇到的问题是：如果先表单查询，再toolbar查询都没问题，但是如果先toolbar查询再表单查询就会出现结果总是toolbar查询的结果，控制台的网络里能看到原因是此时表单查询获取到结果的同时也触发了toolbar查询导致结果被覆盖了，但我找到代码里哪里有关联的地方，请指点一下。
代码是php和javascript结合的
<table class="layui-hide" id="myTable" lay-filter="myTable" ></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<a class="layui-btn layui-btn-radius layui-btn layui-bg-purple" lay-on="test-offset-l" lay-event="yxfilter">过滤</a>
<a class="layui-btn layui-btn-radius layui-btn layui-bg-blue" lay-on="test-offset-l" lay-event="paiwei">排位</a>
<a class="layui-btn layui-btn-radius layui-btn" lay-on="test-offset-l" lay-event="clearFilter">数据刷新</a>
</div>
</script>
<script>
// 自定义模块
layui.config({
base: 'lst/ext/', // 模块目录
version: 'v1.6.2'
}).extend({ // 模块别名
soulTable: 'soulTable'
});
layui.use(['form', 'table','soulTable','slider'], function () {
var table = layui.table,
soulTable = layui.soulTable,
$ = layui.$,
slider = layui.slider,
form = layui.form;
var myTable = table.render({
elem: '#myTable'
,height: $(document).height() - $('#myTable').offset().top - 220
,even: true
,totalRow: true
,limit: 15
,limits:[15,20,25,30]
,overflow: 'tips'
,page: true
,id:myTable
,toolbar: '#toolbarDemo'
,defaultToolbar: ['filter','print'] //这里定义右边显示
,cols: [[
{type:'numbers', title: '序号', hide:true},
{field: 'year', merge: true,title: 'Year', width: 80, sort: true, filter: true, hide:true, totalRowText: '合集'},
{field: 'gx_name',title: 'GXMC', width: 270, sort: true, filter: true},
{field: 'zyz_name', title: 'ZYZ', width: 200, sort: true, filter: true},
{field: 'zf', title: 'TDF', width: 110, sort: true, filter: true},
{field: 'tdxlx', title: 'TDLX', width: 110, sort: true, filter: true},
{field: 'bkkzx_db', title: 'BKX', width: 110, sort: true, filter: true},
{field: 'tskzx_db', title: 'TZX', width: 110, sort: true, filter: true},
{field: 'bdrs', title: 'BDRS', width: 110, sort: true, filter: true},
{field: 'ljrs', title: 'LJRS', width: 110, sort: true, filter: true},
{field: 'gx_note', merge: true,title: 'LQSM', width: 155, sort: true, filter: true},
]]
,excel:{ // 导出excel配置, （以下值均为默认值）
on: false,} //是否启用, 默认开启
,done: function () {
soulTable.render(this)
}
});
search({});
function search(data) {
$.ajax({
url: 'tdx_data.php',
data: data,
dataType: 'json',
success: function (res) {
table.reload('myTable', {
data: res.data
})
}
})
}
var isQueryTriggered = false; // 新增标志变量
table.on('toolbar(myTable)', function(obj) {
switch (obj.event) {
case 'clearFilter':
layer.msg('数据重新载入！', {icon:1,time:1000},function(){
setTimeout('window.location.reload()',1000);
});
break;
case 'yxfilter':
layer.open({
type: 2,
anim: 'slideRight',
area: ['590px', '95%'],
shade: 0.1,
shadeClose: true,
title: '条件过滤：',
content: 'gx_filter.php',
});
break;
}
})
$("#multi_searchBtn").on('click',function(){
isQueryTriggered = true; // 设置查询标志
var price_min = $("#price_min").val();
var price_max = $("#price_max").val();
var gxmc = $("#gxmc").val();
var zyz = $("#zyz").val();
var tdlx = $("#tdlx").val();
console.log(price_min);
console.log(price_max);
console.log(gxmc);
console.log(zyz);
console.log(tdlx);
// 重载数据前检查查询标志
if (isQueryTriggered) {
$.ajax({
type: 'POST',
url: 'multi_query.php',
data: {
price_min: price_min,
price_max: price_max,
gxmc: gxmc,
zyz: zyz,
tdlx: tdlx
},
success: function(res) {
table.reload('myTable', {
data: res.data
});
}
});
} else {
// 如果需要，可以在这里处理非查询触发的情况
}
return false; //防止查询结果被默认数据二次覆盖！
});
})
</script>
先toolbar查询后表单查询的控制台截图
我将表单查询的表格重载改为仅数据重载后，控制台网络里只触发toolbar查询filter_schooldata.php一次，比之前减少一次，但还是数据被覆盖着：
success: function (res) {
table.reloadData('myTable', {
data: res.data
})
}
我重新调整了一下代码，将toolbar触发事件弹窗查询改到了和表单查询按钮一起，去除了toolbar，但还是同样情况，只要先弹窗查询 再表单查询 就会出现弹窗查询的结果把表单查询结果覆盖，而且是上一次弹窗查询的结果，不是重新触发的新弹窗查询数据，而且如果先表单查询，再弹窗查询结果是没部题，但弹窗触发按钮总是第一次点击是重载表格，第二才正常弹窗显示，不知道什么这样？
<button type="submit" class="layui-btn layui-btn-danger" lay-submit lay-filter="multi_query" id="multi_searchBtn">查询</button>
</div>
</form>
<button type="submit" class="layui-btn" lay-submit lay-filter="gx_filter" id="gx_filter">过滤</button>
</div>
</div>
</div>
<table class="layui-hide" id="myTable" lay-filter="myTable" ></table>
<script>
// 自定义模块
layui.config({
base: 'lst/ext/', // 模块目录
version: 'v1.6.2'
}).extend({ // 模块别名
soulTable: 'soulTable'
});
layui.use(['form', 'table','soulTable','slider'], function () {
var table = layui.table,
soulTable = layui.soulTable,
$ = layui.$,
slider = layui.slider,
form = layui.form;
var myTable = table.render({
elem: '#myTable'
,height: $(document).height() - $('#myTable').offset().top - 220
,even: true
,totalRow: true
,limit: 15
,limits:[15,20,25,30]
,overflow: 'tips'
,page: true
,id:myTable
,toolbar: '#toolbarDemo'
,defaultToolbar: ['filter','print'] //这里定义右边显示
,cols: [[
{type:'numbers', title: '序号', hide:true},
{field: 'year', merge: true,title: 'Year', width: 80, sort: true, filter: true, hide:true, totalRowText: '合集'},
{field: 'gx_name',title: 'GXMC', width: 270, sort: true, filter: true},
{field: 'zyz_name', title: 'ZYZ', width: 200, sort: true, filter: true},
{field: 'zf', title: 'TDF', width: 110, sort: true, filter: true},
{field: 'tdxlx', title: 'TDLX', width: 110, sort: true, filter: true},
{field: 'bkkzx_db', title: 'BKX', width: 110, sort: true, filter: true},
{field: 'tskzx_db', title: 'TZX', width: 110, sort: true, filter: true},
{field: 'bdrs', title: 'BDRS', width: 110, sort: true, filter: true},
{field: 'ljrs', title: 'LJRS', width: 110, sort: true, filter: true},
{field: 'gx_note', merge: true,title: 'LQSM', width: 155, sort: true, filter: true},
]]
,excel:{ // 导出excel配置, （以下值均为默认值）
on: false,} //是否启用, 默认开启
,done: function () {
soulTable.render(this)
}
});
form.on('submit(multi_query)', function(multi_data){
var field = multi_data.field; // 获取表单字段值
soulTable.clearFilter('myTable') // 清除条件数据
console.log(field);
$.ajax({
type:'POST',
url: 'multi_query.php',
data: multi_data.field,
success: function (res) {
table.reloadData('myTable', {
data: res.data
});
return false; //防止查询结果被默认数据二次覆盖！
}
}, 100)
return false; //防止查询结果被默认数据二次覆盖！
});
search({});
function search(data) {
$.ajax({
url: 'tdx_data.php',
data: data,
dataType: 'json',
success: function (res) {
table.reload('myTable', {
data: res.data
});
}
});
}
$("#gx_filter").on('click', function() {
layer.open({
type: 2,
anim: 'slideRight',
area: ['590px', '95%'],
shade: 0.1,
shadeClose: true,
title: '条件过滤：',
content: 'gx_filter.php',
});
});
})
</script>
