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

})
经验分享 程序员 微信小程序 职场和发展