<div class="layui-form-item">
<label class="layui-form-label">选择商品</label>
<div class="layui-input-inline">
<input type="text" name="keyword" id="keyword" placeholder="请输入关键字" class="layui-input">
</div>
<div class="layui-input-inline">
<input type="button" class="layui-btn" id="searchBtn" value="搜索">
</div>
</div>
<div class="layui-form-item">
<table id="resultTable" lay-filter="resultTable"></table>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" onclick="add()">确定</button>
</div>
</div>
<input type="hidden" name="id" id="id" value="{$info.id}">
<input type="hidden" name="ids" id="ids" value="{$info.ids}">
<script>
let selectedData = []; //用于存储选中的数据
let pageData = []; //后台返回的数据
layui.use(['form', 'table'], function () {
let form = layui.form,
table = layui.table;
//搜索按钮点击事件
$('#searchBtn').on('click', function () {
let keyword = $('#keyword').val();
table.reload('#resultTable', {
where: {keyword: keyword},
page: {curr: 1}
});
});
//之前选中的id
let ids = $('#ids').val();
let beforeData = ids.split(",");
beforeData.forEach(item => {
selectedData.push(Number(item))
})
//渲染完成回调
let myDone = function (res) {
//找到框架渲染的表格
let tbl = $('#resultTable').next('.layui-table-view');
//记下当前页数据,Ajax 请求的数据集,对应你后端返回的数据字段
pageData = res.data;
let len = pageData.length;
//遍历当前页数据,对比已选中项中的 id
for (let i = 0; i < len; i++) {
if (selectedData.indexOf(pageData[i]['data_id']) !== -1) {
//目前版本没有任何与数据或表格 id 相关的标识,不太好搞,土办法选择它吧
tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);
}
}
//去掉全选按钮-(全选时 数据判断有问题 懒得搞 也不会存在全选的情况)
$('th[data-field=0] div').replaceWith(' ');
//PS:table 中点击选择后会记录到 table.cache,没暴露出来,也不能 mytbl.renderForm('checkbox');
//暂时只能这样渲染表单
form.render('checkbox');
};
// 渲染表格
table.render({
elem: '#resultTable',
id: '#resultTable',
url: '',
method: 'get',
where: {keyword: ''}, //初始为空
done: myDone,
cols: [[
{type: 'checkbox', width: '10%', align: 'center'},
{field: 'data_id', title: 'ID', width: '30%', align: 'center'},
{field: 'sku', title: 'SKU', width: '30%', align: 'center'},
{field: 'name', title: '商品名称', width: '30%', align: 'center'},
{field: 'customer_price', title: '商品价格', width: '30%', align: 'center'}
]],
page: true,
limit: 10,
limits: [10, 20, 30],
});
//监听复选框点击事件
table.on('checkbox(resultTable)', function (obj) {
//全选或单选数据集不一样
//(目前不存在全选的情况-全选按钮被我去掉了-可以自己加上。全选的话,obj.type='all')
let data = obj.type === 'one' ? [obj.data] : pageData;
//遍历数据
$.each(data, function (k, v) {
if (obj.checked) {
selectedData.push(obj.data.data_id);
} else {
selectedData = selectedData.filter(function (item) {
return item !== obj.data.data_id;
});
}
});
});
//表单提交
window.add = function () {
let id = $('#id').val();
let name = $('#name').val();
let brand_name = $('#brand_name').val();
let image = $('#image').val();
let begin_time = $('#begin_time').val();
let end_time = $('#end_time').val();
let num = $('#num').val();
let remark = $('#remark').val();
let selectedIds = selectedData.map(function (item) {
return item;
}).join(',');
if (selectedIds === '') {
layer.msg('请选择商品');
return
}
layer.confirm('已选中的材料ID为:[' + selectedIds + '], 确定提交吗?', function () {
$.post('/your_url', {
id: id,
name: name,
brand_name: brand_name,
image: image,
begin_time: begin_time,
end_time: end_time,
num: num,
remark: remark,
ids: selectedIds
}, function (res) {
if (res.code === 200) {
layer.alert(res.msg, {icon: 6}, function () {
// 获得frame索引
let index = parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
parent.location.reload();
});
} else {
layer.alert(res.msg, {icon: 5})
}
}, 'JSON');
})
}
});
</script>
参考文章:Layui Table 分页记忆选中