【LayUi】动态数据表格+分页+CheckBox

功能描述：

使用layui动态生成带有复选框的table，初始化打开时回显复选框选中项；翻页时记录勾选的数据；

效果展示：

aspx部分代码：

<div id="divResourcePackList">
    <p style="margin-bottom: 5px">共计资源包<span id="packCount" style="color: blue">0</span>个，已选<span id="checkedCount" style="color: red">0</span>个</p>
    <table id="tbResourcePack" lay-filter="tbResourcePack"></table>
</div>

JS部分代码：

<script>
    var data_view = new Vue({
        el: '#data_view',
        data: {
            brandList: [],   //品牌信息 
            storeList: [],  //品牌门店信息 
            CheckedArray: [], //记录选中行ID
            brandIndex: '1',
            pageSize: '10',
            brandIDs: '',
            form: '',
        }, 
        mounted: function () {
            var that = this;
            layui.use(['form', 'upload', 'laypage', 'table'], function () {
                form = layui.form; 

                form.render(); 
            })
        },
        methods: {  
            //加入资源包按钮点击事件
            addStoreToResourcePack: function () {
                var storeIds = "";
                var that = this;
                var brandID = $('#txtBrandId').val();
                var param = {
                    brandID: brandID,
                    flag: 'GetCakeStoreID'
                }
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: '../handle/Store.ashx',
                    data: param,
                    async: false,
                    success: function (data) {
                        //console.log(data) 

                        var storeIdList = data.data;
                        if (storeIdList.length > 0) {
                            var strStoreIds = "";
                            for (var i = 0; i < storeIdList.length; i++) {
                                strStoreIds += storeIdList[i].ID + ",";
                            }
                            storeIds = strStoreIds.substring(0, strStoreIds.length - 1);

                            //打开弹出框，生成table
                            that.OpenResourcePage(storeIds, brandID);
                        }
                    }
                });
            },

            OpenResourcePage: function (storeIds, storeBrandID) {
                var that = this;
                var params = {
                    flag: 'GetResourcePackList'
                }
                var layTable = layui.table;
                var dataArr = [];//当前页面数据  
                //打开弹出框页面
                layer.open({
                    type: 1,
                    title: ['加入资源包', 'font-size:16px;'],
                    area: ['900px'],
                    btn: ['确定', '取消'],
                    content: $('#divResourcePackList'),
                    success: function (layero, index) {
                        //加载layui-table实例
                        layTable.render({
                            id: 'tbResourcePack',
                            elem: '#tbResourcePack', //指定原始表格元素选择器（推荐id选择器） 
                            page: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                            limit: 10,

                            cols: [[ //标题栏，设置表头 
                                { checkbox: true, title: '全选' }
                                , { field: 'ID',  80, title: 'ID' }
                                , { field: 'ResourcePackNo',  120, title: '资源包编号' }
                                , { field: 'Name',  150, title: '资源包名称' }
                                , { field: 'Describe', title: '备注说明' }
                            ]],
                            method: 'post',
                            url: '../handle/Store.ashx',
                            contentType: 'application/x-www-form-urlencoded',
                            where: params,
                            request: {
                                pageName: 'pageIndex', //页码的参数名称，默认：page
                                limitName: 'pageSize' //每页数据量的参数名，默认：limit
                            },
                            parseData: function (res) {
                                //console.log(res)  
                                dataArr = res.data
                                return {
                                    "code": '0', //解析接口状态
                                    "msg": res.message, //解析提示文本
                                    "count": res.result, //解析数据长度
                                    "data": res.data //解析数据列表
                                };
                            },
                            done: function (res) {
                                //console.log(res)
                                //console.log(that.CheckedArray)
                                document.getElementById('packCount').innerHTML = res.count; //资源包总数  
                                document.getElementById('checkedCount').innerHTML = that.CheckedArray.length; //选中数量（回显）    

                                var data = res.data;    //资源包列表数据
                                var num = 0;
                                for (var i = 0; i < data.length; i++) {
                                    for (var j = 0; j < that.CheckedArray.length; j++) {
                                        if (data[i].ResourcePackNo == that.CheckedArray[j]) {
                                            num++;
                                            data[i]["LAY_CHECKED"] = 'true';    //真正的有效勾选，只有改变LAY_CHECKED的值， table.checkStatus才能抓取到选中的状态
                                            var index = data[i]['LAY_TABLE_INDEX'];
                                            $('#divResourcePackList tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                                            $('#divResourcePackList tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                                        }
                                    }
                                }
                                var limits = $(".layui-laypage-limits").find("option:selected").val(); //每页条数的选择项，值务必对应 limit 参数
                                //"全选"框被勾选
                                if ((num == limits || num == res.count) && res.count > 0) {
                                    $('#divResourcePackList .layui-table-header table.layui-table thead th input[type="checkbox"]').prop('checked', true);
                                    $('#divResourcePackList .layui-table-header table.layui-table thead th input[type="checkbox"]').next().addClass('layui-form-checked');
                                }
                            }
                        });

                        //复选框选中监听,将选中的id 设置到缓存数组,或者删除缓存数组
                        layTable.on('checkbox(tbResourcePack)', function (obj) {
                            if (obj.checked == true) {
                                if (obj.type == 'one') {
                                    that.CheckedArray.push(obj.data.ResourcePackNo);
                                } else {
                                    for (var i = 0; i < dataArr.length; i++) {
                                        that.CheckedArray.push(dataArr[i].ResourcePackNo);
                                    }
                                    //去重
                                    var array = [];
                                    for (var i = 0; i < that.CheckedArray.length; i++) {
                                        if (array.indexOf(that.CheckedArray[i]) === -1) {
                                            array.push(that.CheckedArray[i])
                                        }
                                    }
                                    that.CheckedArray = array;
                                }
                            } else {
                                if (obj.type == 'one') {
                                    for (var i = 0; i < that.CheckedArray.length; i++) {
                                        if (that.CheckedArray[i] == obj.data.ResourcePackNo) {
                                            that.removeByValue(that.CheckedArray, that.CheckedArray[i]);//调用自定义的根据值移除函数
                                        }
                                    }
                                } else {
                                    for (var i = that.CheckedArray.length - 1; i > -1; i--) {   //splice删除后会更改原数组下标所代表的值
                                        for (var j = dataArr.length - 1; j > -1; j--) {
                                            if (that.CheckedArray[i] == dataArr[j].ResourcePackNo) {
                                                that.removeByValue(that.CheckedArray, that.CheckedArray[i]);//调用自定义的根据值移除函数 
                                            }
                                        }
                                    }
                                }
                            }

                            document.getElementById('checkedCount').innerHTML = that.CheckedArray.length; //选中数量   
                            //console.log(that.CheckedArray)
                        });
                    },
                    yes: function (index, layero) { //点击弹出框的"确定"按钮
                        //var checkStatus = layTable.checkStatus('tbResourcePack');
                        var storeParams = {
                            storeBrandID: storeBrandID,
                            storeIds: storeIds,
                            //checkData: JSON.stringify(checkStatus.data),    //选中行数据
                            checkedResourceNo: JSON.stringify(that.CheckedArray),    //选中行数据：ResourceNo
                            loginer: '<%= Session["operName"]%>',
                            flag: 'AddStoreToResourcePack'
                        }

                        $.ajax({
                            type: "post",
                            dataType: "json",
                            url: '../handle/Store.ashx',
                            data: storeParams,
                            async: false,
                            cache: false,
                            success: function (data) {
                                //console.log(data)   
                                if (data.result == "0") {
                                    layer.alert('操作成功', {
                                        icon: 1,
                                        title: '提示',
                                        closeBtn: 0,
                                        yes: function () {
                                            window.location.reload();
                                        }
                                    });
                                } else {
                                    layer.alert('操作失败', {
                                        icon: 2,
                                        title: '提示',
                                        closeBtn: 0
                                    });
                                }
                            }
                        });
                    }
                });
            },

            //自定义方法，根据值去移除 
            removeByValue: function (arr, val) {
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i] == val) {
                        arr.splice(i, 1);
                        break;
                    }
                }
            },
        }
    })
</script>

保存复选框勾选数据时，添加新勾选的数据，删除取消勾选的数据

public static bool UpdateHotProducts(string ModularType, List<string> newGoodsId)
{
    try
    {
        List<string> sqlList = new List<string>();
        DataTable tableGoods = GetHotProductList(ModularType, "", "", 0, 0); //原热门推荐商品列表
        List<string> goodsId = new List<string>();
        string flName = GetFloorName(ModularType);

        if (tableGoods != null && tableGoods.Rows.Count > 0)
        {
            foreach (DataRow item in tableGoods.Rows)
            {
                goodsId.Add(item["GoodsID"].ToString()); //添加原商品id
            }
        }

        foreach (var newItem in newGoodsId)
        {
            //保存的勾选中的热门推荐商品中有，原热门推荐商品列表没有就新增
            if (!goodsId.Contains(newItem))
            {
                sqlList.Add(string.Format(@" insert into dbo.GoodProduct ( GoodsId, CreateTime, DeleteStatus, Sort, ModularType, ModularName )  
                                    values ('{0}', getdate(), 0, 0, '{1}', '{2}') ", newItem, ModularType, flName));
            }
        }
        foreach (var item in goodsId)
        {
            //原热门推荐商品有，保存的勾选中的热门推荐商品没有就删除
            if (!newGoodsId.Contains(item))
            {
                //删除取消勾选的热门推荐商品
                sqlList.Add(string.Format(@"  delete dbo.GoodProduct where GoodsID='{0}' and ModularType='{1}' ", item, ModularType));
            }
        }

        Ruby_DAL.DbHelperSQL.ExecuteSqlTran(sqlList);
        return true;
    }
    catch (Exception ex)
    {
        Ruby_Common.LogRecord.WriteLog.WriteLog_Info("Info", new System.Diagnostics.StackTrace().GetFrame(0).GetMethod().ReflectedType.Name, new System.Diagnostics.StackTrace().GetFrame(0).GetMethod().Name, "设置热门推荐商品出现错误，错误信息：" + ex.Message);
        return false;
    }
}