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（或者表格数据种其它可以作为唯⼀标识的数据）
elem:'#test',
url:'/test',
limit:20,//默认采⽤20
id:'test'
, cols:[[
{ type:'radio'},
{ field:'test1', title:'测试1', align:'center'},
{ field:'test2', title:'测试2', align:'center'},
function怎么记忆]],
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事件
<('radio(test)',function(obj){//test 是 table 标签对应的 lay-filter 属性
// console.log(obj); //当前⾏的⼀些常⽤操作集合
// console.log(obj.checked); //当前是否选中状态
// console.log(obj.data); //选中⾏的相关数据
getID = obj.data.id;
});
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。