layui table.render数据表格跨页勾选,获取数据以及回显勾选内容

     var mytbl;
        //.存储当前页数据集
        var pageData = [];
        //.存储已选择数据集,用普通变量存储也行
        layui.data('checked', null);
        $("#cbbrer").click(function () {
            debugger

            })
        //.渲染完成回调
        var myDone = function(res) {
            //.假设你的表格指定的 id="maintb",找到框架渲染的表格
            var tbl = $('#test').next('.layui-table-view');

            //.记下当前页数据,Ajax 请求的数据集,对应你后端返回的数据字段
            pageData = res.data;
            var len = pageData.length;

            //.遍历当前页数据,对比已选中项中的 id
            for (var i = 0; i < len; i++) {
                debugger
                if (layui.data('checked', pageData[i]['plan_id'])) {
                    //.选中它,目前版本没有任何与数据或表格 id 相关的标识,不太好搞,土办法选择它吧
                debugger
                    tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);
                }
            }

            //table 中点击选择后会记录到 table.cache,没暴露出来,也不能 mytbl.renderForm('checkbox');
            //.暂时只能这样渲染表单
            form.render('checkbox');
        };

        //.监听选择,记录已选择项
        table.on('checkbox(test)', function(obj) {
            //.全选或单选数据集不一样
            var data = obj.type == 'one' ? [obj.data] : pageData;

            //.遍历数据
            $.each(data, function(k, v) {
                //.假设你数据中 id 是唯一关键字
                if (obj.checked) {
                    debugger
                    //.增加已选中项
                    layui.data('checked', {
                        key: v.plan_id, value: v
                    });
                } else {
                    //.删除
                    layui.data('checked', {
                        key: v.plan_id, remove: true
                    });
                }
            });
        });
//数据表格
 mytbl = table.render({
                elem: '#test'
                ,id:'test'
                 ,method :'POST'
                , url: ??
                  , cols: [[]]
                ,done: myDone
                 });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: layui table.renderLayui框架中的一个表格渲染方法,用于渲染数据表格。它可以通过传入参数来设置表格的列数、数据源、分页等属性,同时还支持自定义表格样式和事件处理。使用layui table.render可以快速构建出一个美观、功能强大的数据表格,方便用户进行数据展示和操作。 ### 回答2: layui table.renderlayui框架中的一个核心组件,主要用于渲染数据表格。该组件支持数据的动态增删改查,同时也支持数据的筛、排序、分页等功能,可以快速方便地完成数据表格展示的操作。 table.render的使用非常简单,只需要按照一定的格式设置数据源(可以是JSON格式的数据、通过url获取数据等),并设置对应的表格列信息和表格渲染DOM,就可以将数据渲染到页面的表格中。 在设置表格列信息时,需要注意设置列的宽度、对齐方式、数据类型以及表头和单元格的渲染方式等。同时还可以添加复杂的自定义渲染方式,实现更加灵活的表格展示效果。 除了基本的表格展示功能外,layui table.render还支持表格数据的大量操作,如增加、删除一行数据、修改单元格数据等。同时也提供了行工具条、单元格编辑等强大的交互操作,使得表格展示功能更加完善。 总之,layui table.render是一个可以方便快捷地完成数据表格展示的工具,支持丰富的数据操作功能,可以帮助开发者提升开发效率和用户体验。 ### 回答3: layui表格渲染器(table.render)是一个强大的JavaScript工具,用于在Web页面上呈现数据表格。它是LayUI框架提供的一个核心模块,通过该模块可以轻松地将JSON数据渲染成表格形式。 table.render具有丰富的属性和方法,可以实现不同的表格样式和功能。可以通过设置属性来自定义表格的行高、宽度、单元格颜色和样式等。另外,table.render还提供了丰富的事件回调函数,可以在表格元素上进行各种操作,并实时更新表格数据。 对于开发者而言,使用table.render可以大大提高Web应用程序的开发效率和用户体验。因为表格是展示数据最常用的方式之一,能够简单地处理和呈现数据非常重要。因此,Table.renderLayUI框架中也变得越来越重要。 最后,需要注意的是,table.render并不是一个简单的工具,要想完全掌握和使用它,需要对HTML、CSS和JavaScript等相关技术有一定的掌握程度。如果你想在应用程序中使用table.render,请先学习相关技术和方法,并且要掌握其使用规则,才能开发出高质量的Web应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值