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

layui版本2.8以上

实现效果如图:

html 复制代码
<input type="hidden" name="id" id="id" value="{:g_val( 'id',0)}">
<div id="tableDiv">
    <table class="layui-hide" id="table_list" lay-filter="table_list"></table>
</div>

<script src="layui/layui.js"></script>
javascript 复制代码
//方法级渲染
       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) {
                $("[data-field='status']").children().each(function () {
                    if ($(this).text() == '1') {
                        $(this).text("播放中")
                    } else if ($(this).text() == '2') {
                        $(this).text("休息中")
                    }
                });
                $("[data-field='deleted']").children().each(function () {
                    if ($(this).text() == '1') {
                        $(this).text("正常")
                    } else if ($(this).text() == '0') {
                        $(this).text("禁用")
                    }
                });

                $.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();
                                }
                            })
                        }
                    }
                });
            }
        });
相关推荐
Jonathan Star3 分钟前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
做好一个小前端17 分钟前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
第七种黄昏21 分钟前
前端面试-箭头函数
前端·面试·职场和发展
Youyzq23 分钟前
前端box-shadow出现兼容性问题如何处理
前端
携欢31 分钟前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
三小河38 分钟前
工作中的Ai工具汇总
前端
mapbar_front1 小时前
react项目开发—关于代码架构/规范探讨
前端·react.js
二木一夕1 小时前
Vue 3 的组合式 API和传统选项式 API区别(vue2转vue3,两者差异)
前端
LuckySusu1 小时前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js