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; }); })