layui table 分页还原已勾选行状态的方法

最新推荐文章于 2024-03-18 14:58:39 发布
qq_39704803
最新推荐文章于 2024-03-18 14:58:39 发布
阅读量1.5k
点赞数
分类专栏：前端 jQuery
本文链接：https://blog.csdn.net/qq_39704803/article/details/90402418
版权
前端同时被 2 个专栏收录
47 篇文章 0 订阅
订阅专栏
jQuery
27 篇文章 0 订阅
订阅专栏
转载：https://fly.layui.com/jie/18707/
<!DOCTYPE html>
<html>
    <header>
      <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
      <script src="layui/layui.all.js"></script>
    </header>
    <body>
        <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>
    </body>
    <script>
    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',
    // url:'f/json/index.json',
    where: {},
            page: true,
            limit: 5,
            done: myDone,
    cellMinWidth: 80 ,//全局定义常规单元格的最小宽度，layui 2.2.1 新增,
    data:[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}],
    cols: [[
    {type: 'checkbox'},
      {field:'id', width:80, title: 'ID', sort: true},
      {field:'username', width:80, title: '用户名'},
      {field:'sex', width:80, title: '性别', sort: true},
      {field:'city', width:80, title: '城市'},
      {field:'sign', title: '签名', width: '30%', minWidth: 100},
      {field:'experience', title: '积分', sort: true},
      {field:'score', title: '评分', sort: true},
      {field:'classify', title: '职业'},
      {field:'wealth', width:137, title: '财富', sort: true}
    ]]
  });

        //.监听选择，记录已选择项
        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) : '';
        });
    });

    </script>
</html>