Layui Table 分页记忆选中

挺好的功能,之前为什么放弃了,哈哈哈!

后来在 Layui 社区中发现有人再次实现,这里备份一下。

Layui Table 分页记忆选中-LMLPHP

    <div class="layui-btn-group demoTable">
<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
<button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
<button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>
<table id="maintb" lay-filter="maintb"></table>
 layui.use(['table'], function() {
var table = layui.table,
layer = layui.layer,
$ = layui.$,
form = layui.form;
var mytbl;
//.存储当前页数据集
var pageData = [];
//.存储已选择数据集,用普通变量存储也行
layui.data('checked', null); //.渲染完成回调
var myDone = function(res) {
//.假设你的表格指定的 id="maintb",找到框架渲染的表格
var tbl = $('#maintb').next('.layui-table-view'); //.记下当前页数据,Ajax 请求的数据集,对应你后端返回的数据字段
pageData = res.data;
var len = pageData.length; //.遍历当前页数据,对比已选中项中的 id
for (var i = 0; i < len; i++) {
if (layui.data('checked', pageData[i]['id'])) {
//.选中它,目前版本没有任何与数据或表格 id 相关的标识,不太好搞,土办法选择它吧
tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);
}
} //.PS:table 中点击选择后会记录到 table.cache,没暴露出来,也不能 mytbl.renderForm('checkbox');
//.暂时只能这样渲染表单
form.render('checkbox');
}; //.渲染表格
mytbl = table.render({
elem: '#maintb',
id: 'maintb',
url: '/f/json/',
where: {},
page: true,
limit: 5,
done: myDone,
cols: [
[
{type: 'checkbox'},
{field:'id', title:'id'},
{field:'time', title: '时间'},
{field:'page', title:'page'}
]
]
}); //.监听选择,记录已选择项
table.on('checkbox(maintb)', function(obj) {
//.全选或单选数据集不一样
var data = obj.type == 'one' ? [obj.data] : pageData; //.遍历数据
$.each(data, function(k, v) {
//.假设你数据中 id 是唯一关键字
if (obj.checked) {
//.增加已选中项
layui.data('checked', {
key: v.id, value: v
});
} else {
//.删除
layui.data('checked', {
key: v.id, remove: true
});
}
});
}); //.官方示例代码
var active = {
getCheckData: function(){ //获取选中数据
//.看看已选中的所有数据
var mySelected = [];
$.each(layui.data('checked'), function(k, v) {
mySelected.push(v);
});
console.log(mySelected);
layer.alert(JSON.stringify(mySelected)); //.看 myDone 的注释得知,下面的方法就不可用了
//var checkStatus = table.checkStatus('maintb')
// ,data = checkStatus.data;
//layer.alert(JSON.stringify(data));
}
,getCheckLength: function(){ //获取选中数目
layer.msg('选中了:'+ Object.getOwnPropertyNames(layui.data('checked')).length + ' 个'); //var checkStatus = table.checkStatus('maintb')
// ,data = checkStatus.data;
//layer.msg('选中了:'+ data.length + ' 个');
}
,isAll: function(){ //验证是否全选
layer.msg('是否全选在这里没有意义了'); //var checkStatus = table.checkStatus('maintb');
//layer.msg(checkStatus.isAll ? '全选': '未全选')
}
}; $('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});

参考链接:

http://fly.layui.com/jie/18707/

05-11 16:04