html://随便写的,大概是这么个页面
<div>
<input type="hidden" name="store_id" value="{$store_id}">
<input type="hidden" name="id" value="{$id}">
<input name="online_id" value="{$online_id}" placeholder="输入ID" class="layui-input"/>
<input name="code" value="{$code}" placeholder="输入code" class="layui-input"/>
<button class="layui-btn layui-btn-xs search-btn"><i class="layui-icon"></i> 搜 索</button>
</div>
<table lay-data="{id:'lowest_price'}" lay-filter="price-filter" id="lowest_price-listing-table"></table>
<script type="text/javascript">
var checkArray = [];
var currentArray ;
let store_id = $('input[name="store_id"]').val();
let id = $('input[name="id"]').val();
layui.use(['table','form'], function()
{
var table = layui.table;
var form = layui.form;
var url = "{:url ('lowestPriceListing')}"+"store_id="+store_id+"&id="+id;
table.render({
elem: '#lowest_price-listing-table'
,url: url
,even: true
,page: true
,limit: 10 //每页显示的条数(默认:10)
,id: 'lowest_price'
,cols: [[
{type: 'checkbox'} // 多选
,{field: 'product_image', title: '图片', width: 120, height: 100, align: 'center',
templet: function (d)
{
return "<div><img data-tips-image='"+d.main_image+"' src='"+d.main_image+"' style='width: 80px;height: 80px;border:1px solid #ccc;'></div>";
}
}
]]
//回调函数,可用于渲染table页面
,done: function(res)
{
currentArray = res.data ;
var table = $('#lowest_price-listing-table').next('.layui-table-view');
let isCheck;
$.each(currentArray,function (key,val)
{
isCheck = $.inArray(val.online_id,checkArray);
if(isCheck > -1)
{
table.find('table>tbody>tr').eq(key).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);
}
})
form.render('checkbox');
}
});
//监听行单击事件,这里是根据后端返回的online_id作为判断是否选中的依据
table.on('checkbox(price-filter)', function(obj)
{
let checkData = obj.data ;
// 全选中
if(obj.type == 'all' && obj.checked)
{
let checkStatus = table.checkStatus('lowest_price');
data = checkStatus.data;
$.each(data,function (index,item)
{
if(checkArray.indexOf(data[index].online_id) == -1)
{
checkArray.push(data[index].online_id) ;
}
})
}
// 全不选中
else if(obj.type == 'all' && !obj.checked)
{
let currentIndex;
$.each(currentArray,function (index,item)
{
currentIndex = $.inArray(item.online_id,checkArray);
if(currentIndex > -1)
{
checkArray.splice(currentIndex, 1);
}
})
}
//单选
else
{
let online_id = checkData.online_id ;
let checkIndex = $.inArray(online_id,checkArray);
if(checkIndex > -1)
{
checkArray.splice(checkIndex, 1);
}else
{
checkArray.push(online_id) ;
}
}
console.log(currentArray);
console.log(checkArray);
});
//搜索事件
$('.search-btn').on('click', function()
{
let online_id = $('input[name="online_id"]').val();
let code = $('input[name="code"]').val();
table.reload('lowest_price', {
url: url
,where: {
online_id: online_id,
code: code
}
,page: {
curr: 1
}
,limit: 10
});
})
});
</script>
layui使用table.render实现表格跨页勾选+搜索
最新推荐文章于 2024-05-29 15:43:57 发布