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

})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值