开发项目过程种发现layui数据表格自带的单选框功能,切换页回来后已选择的radio会消失的问题。于是想到了一个解决方案,解决了该问题
解决方案
<table id="test" class="layui-hide" lay-filter="test"></table>
layui.use(['table'], function () {
var table = layui.table;
var getID = null;//声明一个变量记住已选内容的id(或者表格数据种其它可以作为唯一标识的数据)
table.render({
elem: '#test',
url: '/test',
limit: 20, //默认采用20
id: 'test'
, cols: [[
{ type: 'radio' },
{ field: 'test1', title: '测试1', align: 'center' },
{ field: 'test2', title: '测试2', align: 'center' },
]],
done: function (res) {
if (getID) {
var getAllTableInfo = res.data;//获取表格所有数据
var trList = $("tbody").children();//获取tbody所有tr
$.each(getAllTableInfo, function (index, item) {
if (item.id == getID) {//判断表格数据id是否和所选id一致
//设置radio的class已选样式
trList.eq(index).attr("class", "layui-table-click");
trList.eq(index).find(".layui-form-radio").attr("class", "layui-unselect layui-form-radio layui-form-radioed");
trList.eq(index).find(".layui-icon").attr("class", "layui-anim layui-icon layui-anim-scaleSpring");
trList.eq(index).find(".layui-icon").text("");
}
})
}
}
});
//数据表格自带的监听radio事件
table.on('radio(test)', function (obj) { //test 是 table 标签对应的 lay-filter 属性
// console.log(obj); //当前行的一些常用操作集合
// console.log(obj.checked); //当前是否选中状态
// console.log(obj.data); //选中行的相关数据
getID = obj.data.id;
});
})
版权声明:本文为weixin_41614732原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。