Layui Table 分页记忆选中

挺好的功能，之前为什么放弃了，哈哈哈！

在最早的版本中，layui 的 table 会记录每页的勾选状态，但很多用户反馈这是 bug，因为当他们获取选中数据时，其它页的勾选数据也包含进来让他们有点莫名。。。迫于无奈，我干脆放弃了这项功能

后来在 Layui 社区中发现有人再次实现，这里备份一下。

    <div class="layui-btn-group demoTable">

        <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>

        <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>

        <button class="layui-btn" data-type="isAll">验证是否全选</button>

    </div>

    <table id="maintb" lay-filter="maintb"></table>

 layui.use(['table'], function() {

        var table   = layui.table,

            layer   = layui.layer,

            $       = layui.$,

            form    = layui.form;

        var mytbl;

        //.存储当前页数据集

        var pageData = [];

        //.存储已选择数据集，用普通变量存储也行

        layui.data('checked', null);

        //.渲染完成回调

        var myDone = function(res) {

            //.假设你的表格指定的 id="maintb"，找到框架渲染的表格

            var tbl = $('#maintb').next('.layui-table-view');

            //.记下当前页数据，Ajax 请求的数据集，对应你后端返回的数据字段

            pageData = res.data;

            var len = pageData.length;

            //.遍历当前页数据，对比已选中项中的 id

            for (var i = 0; i < len; i++) {

                if (layui.data('checked', pageData[i]['id'])) {

                    //.选中它，目前版本没有任何与数据或表格 id 相关的标识，不太好搞，土办法选择它吧

                    tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);

                }

            }

            //.PS：table 中点击选择后会记录到 table.cache，没暴露出来，也不能 mytbl.renderForm('checkbox');

            //.暂时只能这样渲染表单

            form.render('checkbox');

        };

        //.渲染表格

        mytbl = table.render({

            elem: '#maintb',

            id: 'maintb',

            url: '/f/json/',

            where: {},

            page: true,

            limit: 5,

            done: myDone,

            cols: [

                [

                    {type: 'checkbox'},

                    {field:'id', title:'id'},

                    {field:'time', title: '时间'},

                    {field:'page', title:'page'}

                ]

            ]

        });

        //.监听选择，记录已选择项

        table.on('checkbox(maintb)', function(obj) {

            //.全选或单选数据集不一样

            var data = obj.type == 'one' ? [obj.data] : pageData;

            //.遍历数据

            $.each(data, function(k, v) {

                //.假设你数据中 id 是唯一关键字

                if (obj.checked) {

                    //.增加已选中项

                    layui.data('checked', {

                        key: v.id, value: v

                    });

                } else {

                    //.删除

                    layui.data('checked', {

                        key: v.id, remove: true

                    });

                }

            });

        });

        //.官方示例代码

        var active = {

            getCheckData: function(){ //获取选中数据

                //.看看已选中的所有数据

                var mySelected = [];

                $.each(layui.data('checked'), function(k, v) {

                    mySelected.push(v);

                });

                console.log(mySelected);

                layer.alert(JSON.stringify(mySelected));

                //.看 myDone 的注释得知，下面的方法就不可用了

                //var checkStatus = table.checkStatus('maintb')

                //    ,data = checkStatus.data;

                //layer.alert(JSON.stringify(data));

            }

            ,getCheckLength: function(){ //获取选中数目

                layer.msg('选中了：'+ Object.getOwnPropertyNames(layui.data('checked')).length + ' 个');

                //var checkStatus = table.checkStatus('maintb')

                //    ,data = checkStatus.data;

                //layer.msg('选中了：'+ data.length + ' 个');

            }

            ,isAll: function(){ //验证是否全选

                layer.msg('是否全选在这里没有意义了');

                //var checkStatus = table.checkStatus('maintb');

                //layer.msg(checkStatus.isAll ? '全选': '未全选')

            }

        };

        $('.demoTable .layui-btn').on('click', function(){

            var type = $(this).data('type');

            active[type] ? active[type].call(this) : '';

        });

    });

参考链接：

http://fly.layui.com/jie/18707/

巴特西

Layui Table 分页记忆选中

Layui Table 分页记忆选中

最新文章

热门文章