您的当前位置:首页>全部文章>文章详情

layui.table 支持表格跨页多选的方法

发表于:2022-12-16 17:26:17浏览:1273次TAG: #layui #Table #表格跨页多选

layui版本:2.7.6
使用数据表格时可能会需要在翻页时保留各个页面选中行的信息,效果如下。

实现思路:1.选中的时候刷新全选框状态 2.全选/全不选的时候刷新勾选框状态 3.翻页后刷新勾选和全选状态。

$('body').on('click','.add-question',function(){
            let questionTable;
            // 设置变量保存选中行信息
            let ids = new Array();
            // 保存当前页全部数据id,点击全选时使用
            let tableIds = new Array();
            let qBox = $(this).parents('.question-item');
            layer.open({
                title: '选择试题',
                area: ['600px', '590px'],
                type: 1,
                content: '<div class="picker-table">\
                    <form class="layui-form pb-2">\
                        <div class="layui-input-inline" style="width:480px;">\
                        <input type="text" name="keywords" placeholder="试题" class="layui-input" autocomplete="off" />\
                        </div>\
                        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search_contract">提交搜索</button>\
                    </form>\
                    <div id="questionTable"></div></div>',
                success: function () {
                    questionTable = table.render({
                        elem: '#questionTable'
                        , url: '/train/api/get_question'
                        , page: true //开启分页
                        , limit: 10
                        , where:{qids:get_qids()}
                        , cols: [[
                            { type: 'checkbox', title: '选择' }
                            , { field: 'id', width: 80, title: '试题编号', align: 'center' }
                            , { field: 'title', title: '试题题干' }
                        ]]
                        , done: function (res) {
                            // 设置当前页全部数据id到全局变量
                            tableIds = res.data.map(function (value) {
                                return value.id;
                            });
                            // 设置当前页选中项
                            $.each(res.data, function (idx, val) {
                                if (ids.indexOf(val.id) > -1) {
                                    val["LAY_CHECKED"] = 'true';
                                    //找到对应数据改变勾选样式,呈现出选中效果
                                    let index = val['LAY_TABLE_INDEX'];
                                    $('tr[data-index=' + index + '] input[type="checkbox"]').click();
                                    form.render('checkbox'); //刷新checkbox选择框渲染
                                }
                            });
                            // 获取表格勾选状态,全选中时设置全选框选中
                            let checkStatus = table.checkStatus('test');
                            if (checkStatus.isAll) {
                                $('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                                form.render('checkbox'); //刷新checkbox选择框渲染
                            }
                        }
                    });
                    //项目搜索提交
                    form.on('submit(search_contract)', function (data) {
                        questionTable.reload({ where: { keywords: data.field.keywords,qids:get_qids()}, page: { curr: 1 } });
                        return false;
                    });                    

                    // 监听勾选事件
                    table.on('checkbox(questionTable)', function (obj) {
                        if (obj.checked == true) {
                            if (obj.type == 'one') {
                                ids.push(obj.data.id);
                            } else {
                                for (let i = 0; i < tableIds.length; i++) {
                                    //当全选之前选中了部分行进行判断,避免重复
                                    if (ids.indexOf(tableIds[i]) == -1) {
                                        ids.push(tableIds[i]);
                                    }
                                }
                            }
                        } else {
                            if (obj.type == 'one') {
                                let i = ids.length;
                                while (i--) {
                                    if (ids[i] == obj.data.id) {
                                        ids.splice(i, 1);
                                    }
                                }
                            } else {
                                let i = ids.length;
                                while (i--) {
                                    if (tableIds.indexOf(ids[i]) != -1) {
                                        ids.splice(i, 1);
                                    }
                                }
                            }
                        }
                    });
                },
                btn: ['确定'],
                btnAlign: 'c',
                yes: function () {
                    if (ids.length > 0) {                        
                        console.log(ids);
                        $.ajax({
                            url: "/train/api/get_question",
                            type:'get',
                            data:{ids:ids},
                            success:function(res){
                                layer.closeAll();
                                console.log(res.data);
                                let tr='';
                                for(var i=0;i<res.data.length;i++){
                                    tr+='<tr>\
                                        <td width="100">'+res.data[i].id+'</td>\
                                        <td width="100">'+res.data[i].score+'</td>\
                                        <td width="100">'+res.data[i].cate+'</td>\
                                        <td width="100">'+res.data[i].type_str+'</td>\
                                        <td width="100">'+res.data[i].level_str+'</td>\
                                        <td style="text-align:left;">'+res.data[i].title+'</td>\
                                        <td width="100"><span class="red question-del">删除</span></td>\
                                    </tr>';
                                }
                                qBox.find('table').append(tr).find('.question-none').remove();
                            }
                        });
                    }
                    else {
                        layer.msg('请先选择试题');
                        return false;
                    }
                }
            })
        })