【学习笔记】解决layui的table分页没有checkbox记忆功能！！！

<form class="layui-fluid layui-form">
  <table id="sale-data" lay-filter="sale-data"></table>
</form>

var element,$,layer,laydate,laypage,table,form;
layui.use(['element','jquery','layer','laydate','laypage','table'], function () {
        element = layui.element;
        $ = layui.$;
        layer = layui.layer;
        laydate = layui.laydate;
        laypage = layui.laypage;
        table = layui.table;
        form = layui.form;

        //阻止from表单默认行为
        form.on('submit(*)', function (data) {
            return false;
        });

        //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
        element.init();
    });

//记录当前页数据的临时变量
var cookiePageArray = [];

var saleInfoCols = [[ //表头
    {
        type: 'checkbox', fixed: 'left',LAY_CHECKED : false, filter : 'checkboxid'
    },
    {
        field: 'realName',
        title: '病人姓名',
        sort: true
    },
    {
        field: 'combinationItemName',
        title: '项目名称',
    },
    {
        field: 'noteTime',
        title: '实际录入时间',
    },
    {
        field: 'price',
        title: '项目价格',
    },
    {
        field: 'discount',
        title: '折扣',
        sort: true//允许排序
        ,edit: 'text'//允许编辑
    },
    {
        field: 'reportTime',
        title: '出报告时间',
        sort: true//允许排序
        ,edit: 'text'//允许编辑
    },
    {
        field: 'invoiceTime',
        title: '开票日期',
        sort: true//允许排序
        ,edit: 'text'//允许编辑
    },
    {
        field: 'realPrice',
        title: '实收金额',
        sort: true//允许排序
        ,edit: 'text'//允许编辑
    }
    ,{fixed: 'right', title:'操作', toolbar: '#sale-data-bar', width:80}
]];

//存储已选择数据集，用普通变量存储也行，就是一个缓存变量
layui.data('checked', null);
//第一个实例
var mytbl = table.render({
    elem: '#sale-data',
    id : 'jzbbxh',//checkbox取值使用的
    title : "列表",
    skin: 'row', //行边框风格
    method : 'get',
    even: true, //开启隔行背景
    height: 'full-185',//满屏
    url: '/lis/searchSaleinfoData', //数据接口 controller
    page: true, //开启分页
    limit : 13,//每页多少行
    limits : [13,30,90],//分页条目
    loading : true,//显示加载条
    where : {},//这里是传参，我这里没有参数
    text: {
        none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
    },
    cols: saleInfoCols,//绑定的列表头部
    done:function(res,curr,count){
        //.假设你的表格指定的 id="sale-data"，找到框架渲染的表格
        var tbl = $('#sale-data').next('.layui-table-view');
        //记下当前页数据，Ajax 请求的数据集，对应你后端返回的数据字段
        cookiePageArray = res.data;
        //记录当前也选中的chechbox个数(判断全选使用的)
        var len = 0;
        //遍历当前页数据，对比已选中项中的 id
        for (var index = 0; index < cookiePageArray.length; index++) {
            if (layui.data('checked', cookiePageArray[index]['jzbbxh'])) {
                //逐个判断是否选中，如果已经选中就改变选中模式
                var i = cookiePageArray[index]['LAY_TABLE_INDEX'];
                var checkbox = $('.layui-table tr[data-index=' + i + '] input[type="checkbox"]');
                checkbox.prop('checked', true);
                checkbox.next().addClass('layui-form-checked');
                //为了设置全选的
                len++;
            }
        }

        console.log(this.limit+"====="+len)
        //设置全选checkbox的选中状态，只有改变LAY_CHECKED的值， table.checkStatus才能抓取到选中的状态
        if(len === this.limit){
            var checkboxAll = $('.layui-table-header th[data-field=0] input[type="checkbox"]');
            checkboxAll.prop('checked', true);
            checkboxAll.next().addClass('layui-form-checked');
        }

        //暂时只能这样渲染表单
        form.render('checkbox');
    }
});
/**
 * 复选框的点击事件
 * 主要操作为：
 * 将所有的勾选成功的id储存传入后台拉取数据存到本地销售数据库
 */
table.on('checkbox(sale-data)', function(obj){
   //console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
    //全选或单选数据集不一样
    var data = 'one' === obj.type  ? [obj.data] : cookiePageArray;
    //遍历数据
    $.each(data, function(index, item) {
        //假设你数据中 id 是唯一关键字
        if (obj.checked) {
            //.增加已选中项
            layui.data('checked', {
                key: item.jzbbxh, value: item
            });
        } else {
            //.删除
            layui.data('checked', {
                key: item.jzbbxh, remove: true
            });
        }
    });
    console.log(layui.data('checked'));
});

<div class="layui-table-cell laytable-cell-2-0-0 laytable-cell-checkbox">
  <input type="checkbox" name="layTableCheckbox" lay-skin="primary">
  <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
    <i class="layui-icon layui-icon-ok"></i>
  </div>
</div>

<div class="layui-table-cell laytable-cell-2-0-0 laytable-cell-checkbox">
  <input type="checkbox" name="layTableCheckbox" lay-skin="primary">
  <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
    <i class="layui-icon layui-icon-ok"></i>
  </div>
</div>

var checkboxs = $('.layui-table-view tbody input[type="checkbox"]');
 checkboxs .each(function(index, item){
       console.log(item);
});