layui table 跨页记忆选择

Posted 2021-03-22 1994jinnan

layui 表格功能目前默认不支持跨页记忆选择

下面来实现layui table跨页记忆选择实现

基于layui版本 1.4.5

表格跨页通用方法

//表格分页复选框
layui.define([‘jquery‘, ‘table‘], function (exports) {
    var $ = layui.jquery
        , table = layui.table;
 
    //记录选中表格记录编号http://www.1994july.club/seo/?p=2797
    var checkedList = {};
 
    var tableCheckBoxUtil = {
        /*初始化分页设置*/
        init: function (settings) {
            var param = {
                //表格id
                gridId: ‘‘
                //表格lay-filter值
                , filterId: ‘‘
                //表格主键字段名
                , fieldName: ‘‘
            };
            $.extend(param, settings);
 
            //设置当前保存数据参数http://www.1994july.club/seo/?p=2800
            if (checkedList[param.gridId] == null) {
                checkedList[param.gridId] = [];
            }
 
            //监听选中行
            table.on(‘checkbox(‘ + param.filterId + ‘)‘, function (obj) {
                var type = obj.type;
                var checked = obj.checked;
                console.log(table);
 
                //当前页数据
                var currentPageData = table.cache[param.gridId];
                //当前选中数据
                var checkRowData = [];
                //当前取消选中的数据
                var cacelCheckedRowData = [];
 
                //debugger;
                //选中
                if (checked) {
                    checkRowData = table.checkStatus(param.gridId).data;
                }
                //取消选中
                else {
                    if (type == ‘all‘) {
                        cacelCheckedRowData = currentPageData;
                    }
                    else {
                        cacelCheckedRowData.push(obj.data);
                    }
                    //console.log(cacelCheckedRowData);
                }
                //debugger;
                //清除数据
                $.each(cacelCheckedRowData, function (index, item) {
                    var itemValue = item[param.fieldName];
 
                    checkedList[param.gridId] = checkedList[param.gridId].filter(function (fItem, fIndex) {
                        return fItem != itemValue;
                    })
                });
 
                //添加选中数据
                $.each(checkRowData, function (index, item) {
                    var itemValue = item[param.fieldName];
                    if (checkedList[param.gridId].indexOf(itemValue) < 0) {
                        checkedList[param.gridId].push(itemValue);
                    }
                });
 
                console.log(checkedList);
            });
        }
        //设置页面默认选中（在表格加载完成之后调用http://www.1994july.club/seo/?p=2803）
        , checkedDefault: function (settings) {
            var param = {
                //表格id
                gridId: ‘‘
                //表格主键字段名
                , fieldName: ‘‘
            };
 
            $.extend(param, settings);
 
            //当前页数据
            var currentPageData = table.cache[param.gridId];
            if (checkedList[param.gridId] != null && checkedList[param.gridId].length > 0) {
                $.each(currentPageData, function (index, item) {
                    var itemValue = item[param.fieldName];
 
                    if (checkedList[param.gridId].indexOf(itemValue) >= 0) {
                        //设置选中状态
                        item.LAY_CHECKED = true;
 
                        var rowIndex = item[‘LAY_TABLE_INDEX‘];
                        updateRowCheckStatus(param.gridId, ‘tr[data-index=‘ + rowIndex + ‘] input[type="checkbox"]‘);
                    }
                });
            }
            //判断当前页是否全选
            var currentPageCheckedAll = table.checkStatus(param.gridId).isAll;
            if (currentPageCheckedAll) {
                updateRowCheckStatus(param.gridId, ‘thead tr input[type="checkbox"]‘);
            }
            //console.log(table.cache[param.gridId]);
        }
        //获取当前获取的所有集合值
        , getValue: function (settings) {
            var param = {
                //表格id
                gridId: ‘‘
            };
            $.extend(param, settings);
 
            return checkedList[param.gridId];
        }
        //设置选中的id（一般在编辑时候调用初始化选中值）
        , setIds: function (settings) {
            var param = {
                gridId: ‘‘
                //数据集合
                , ids: []
            };
            $.extend(param, settings);
 
            checkedList[param.gridId] = [];
            $.each(param.ids, function (index, item) {
                checkedList[param.gridId].push(parseInt(item));
            });
        }
    };
 
    var updateRowCheckStatus = function (gridId, ele) {
        var layTableView = $(‘.layui-table-view‘);
        //一个页面多个表格，这里防止更新表格错误http://www.1994july.club/seo/?p=2805
        $.each(layTableView, function (index, item) {
            if ($(item).attr(‘lay-id‘) == gridId) {
                $(item).find(ele).prop(‘checked‘, true);
                $(item).find(ele).next().addClass(‘layui-form-checked‘);
            }
        });
    }
    //输出
    exports(‘tableCheckBoxUtil‘, tableCheckBoxUtil);
});

html

@{
    ViewBag.Title = "View";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using MKAdmin.Web.App_Start
 
@section Styles {
    @Styles.Render(PageCssFilesConfig.CheckBoxTableIndex)
}
 
<div class="page-content-wrap wx_p20">
    <div class="zf-wx-index-main">
        <form class="layui-form cc-padding-top pr" action="">
            <div class="layui-input-block zf-margin-left">
                <input type="text" name="title"
                       id="txt_BasicIndex_Name" placeholder="请输入姓名"
                       class="layui-input zf-fixed-length zf_h25 w_200">
                <a class="layui-btn layui-btn-normal btn_color_confirm zf_h25"
                   id="btn_CheckBoxSearch" data-type="reload">搜索</a>
 
                <a class="layui-btn layui-btn-normal btn_color_confirm zf_h25"
                   id="btn_CheckBoxTableGetValue" data-type="reload">获取选中编号</a>
            </div>
        </form>
 
    </div>
    <table id="grid_CheckBoxTable" lay-filter="ft_CheckBoxTable"></table>
</div>
 
@section Scripts {
    @Scripts.Render(PageJsFilesConfig.CheckBoxTableIndex)
}

Js调用

//表格管理 - 基本表格http://www.1994july.club/seo/?p=2807
layui.use([‘jquery‘, ‘table‘, ‘tableCheckBoxUtil‘], function () {
        var table = layui.table,
            $ = layui.jquery,
            tableCheckBoxUtil = layui.tableCheckBoxUtil;
 
        //表格渲染
        table.render({
            id: ‘cn_GridCheckBoxTable‘
            , elem: ‘#grid_CheckBoxTable‘
            , method: ‘post‘
            , url: ‘/table/basictable/list‘
            //启动分页
            , page: true
            , height: ‘full-100‘
            , where: {
                name: ‘‘
            }
            , cols: [[
                { checkbox: true }
                , { field: ‘EmployeeId‘, width: 80, title: ‘编号‘ }
                , { field: ‘EmployeeName‘, width: 150, title: ‘姓名‘ }
                , { field: ‘EmployeeAge‘, title: ‘年龄‘, width: 100 }
                , { field: ‘Education‘, width: 180, title: ‘学历‘ }
            ]]
            , done: function (data) {
                //2.初始化表格行选中状态
                tableCheckBoxUtil.checkedDefault({
                    gridId: ‘cn_GridCheckBoxTable‘
                    , fieldName: ‘EmployeeId‘
                });
            }
        });
 
        //1.初始化分页设置
        tableCheckBoxUtil.init({
            gridId: ‘cn_GridCheckBoxTable‘
            , filterId: ‘ft_CheckBoxTable‘
            , fieldName: ‘EmployeeId‘
        });
 
        //3.获取选中编号
        $("#btn_CheckBoxTableGetValue").on(‘click‘, function () {
            var selectedData = tableCheckBoxUtil.getValue({
                gridId: ‘cn_GridCheckBoxTable‘
            });
 
            alert(selectedData);
        });
 
    });

预览：

http://www.1994july.club/seo/?p=2812