layui的数据表格开启单选框radio切换页码带记忆功能
开发项目过程种发现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;
});
})
