layui实现数据列表的复选框回显

layui版本2.8以上

实现效果如图:

<div id="tableDiv">
    <table class="layui-hide" id="table_list" lay-filter="table_list"></table>
</div>
<script src="layui/layui.js"></script>
//方法级渲染
       table.render({
            elem: '#table_list'
            , url: "/admin/****/****_search"
            , cols: [[
                {type:'checkbox'}
                ,{field: 'name', title: '设备名称', width: 200}
                , {field: 'model_number', title: '设备型号', width: 200}
                , {field: 'merchant_name', title: '所属商户', width: 200}
                , {field: 'status', title: '设备状态', width: 120}
                , {field: 'remark', title: '备注', width: 200}
                , {field: 'create_time', title: '创建时间', width: 250}
                , {field: 'update_time', title: '更新时间', width: 250}
            ]]
            // , page: true
            // , limit: 30
            // , height: document.documentElement.offsetHeight - 100
            , height:  'full-180'  // 表格高度根据浏览器自适应
            , page: false// 取消分页时使用
            , limit: Number.MAX_VALUE// 取消分页时使用
            , done: function (res, curr, count) {
                //以下是回显操作代码-----开始
                $.ajax({
                    url: "/admin/****/get****",
                    type: "post",
                    data: { id: $('#id').val()},
                    success: function (data) {
                        //遍历ajax返回的结果
                        //打印出data的格式为数组实例:[1,2,3,6]
                        for (var i = 0; i < data.length; i++) {
                            //遍历数据表格
                            $.each(res.data, function (index, row) {
                                //判断ajax返回的id是否与数据行中的id相等
                                if (row.id == data[i]) {
                                    // console.log(row.LAY_INDEX);
                                    // console.log(row.LAY_TABLE_INDEX);
                                    $('#tableDiv tr[data-index=' + row.LAY_INDEX + '] input[type="checkbox"]').next().eq(0).click();
                                    $('#tableDiv tr[data-index=' + row.LAY_INDEX + '] input[type="checkbox"]').next().eq(1).click();
                                }
                            })
                        }
                    }
                });
                //以上是回显操作代码-----结束
            }
        });

参考资源链接:[layui表格复选框解决方案](https://wenku.youkuaiyun.com/doc/6412b714be7fbd1778d49048?utm_source=wenku_answer2doc_content) 在layui表格中实现复选框并修复二次点击问题,关键在于理解layui表格数据渲染和事件管理机制。推荐参考《layui表格复选框解决方案》,这份资料详细讲解了如何通过编程技巧来实现复选框以及避免二次点击问题。 首先,使用`table.render()`方法初始化和渲染表格,然后通过`done`调函数处理数据,根据业务逻辑设置复选框的选中状态。在这个过程中,直接操作复选框的`class`属性会导致问题,因为layui会在每次点击事件后动态添加或移除`layui-form-checked`类,从而需要点击两次才能改变复选框的状态。 为了避免这种情况,我们不应该直接修改复选框的`class`属性,而是应该通过触发模拟点击事件来设置状态。这可以通过调用复选框元素的`click()`方法来实现,从而正确触发layui内部的逻辑,保证复选框状态的正确,同时避免了二次点击的bug。 具体实现代码可以参考下面的示例,通过`done`调函数遍历数据并根据条件触发复选框的点击事件,这样就能够在页面加载完成后正确复选框状态,而不会出现二次点击的问题。这种技巧不仅适用于当前版本的layui,还能够帮助你更好地理解前端事件处理和状态管理的原理。 在解决了这个具体问题后,为了进一步提升你的开发技能,建议继续深入学习layui的事件系统和数据处理机制,这将帮助你更好地掌握前端开发的高级技巧。 参考资源链接:[layui表格复选框解决方案](https://wenku.youkuaiyun.com/doc/6412b714be7fbd1778d49048?utm_source=wenku_answer2doc_content)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值