关于layui table回显以及选择下一页时记住上一页数据的问题

代码如下

php 复制代码
<div class="layui-form-item">
    <label class="layui-form-label">选择商品</label>
    <div class="layui-input-inline">
        <input type="text" name="keyword" id="keyword" placeholder="请输入关键字" class="layui-input">
    </div>
    <div class="layui-input-inline">
        <input type="button" class="layui-btn" id="searchBtn" value="搜索">
    </div>
</div>
<div class="layui-form-item">
    <table id="resultTable" lay-filter="resultTable"></table>
</div>
<div class="layui-form-item">
    <div class="layui-input-block">
        <button class="layui-btn" onclick="add()">确定</button>
    </div>
</div>
<input type="hidden" name="id" id="id" value="{$info.id}">
<input type="hidden" name="ids" id="ids" value="{$info.ids}">

<script>

    let selectedData = []; //用于存储选中的数据
    let pageData = []; //后台返回的数据

    layui.use(['form', 'table'], function () {
        let form = layui.form,
            table = layui.table;


        //搜索按钮点击事件
        $('#searchBtn').on('click', function () {
            let keyword = $('#keyword').val();
            table.reload('#resultTable', {
                where: {keyword: keyword},
                page: {curr: 1}
            });
        });

		//之前选中的id
        let ids = $('#ids').val();
        let beforeData = ids.split(",");
        beforeData.forEach(item => {
            selectedData.push(Number(item))
        })

        //渲染完成回调
        let myDone = function (res) {
            //找到框架渲染的表格
            let tbl = $('#resultTable').next('.layui-table-view');

            //记下当前页数据,Ajax 请求的数据集,对应你后端返回的数据字段
            pageData = res.data;
            let len = pageData.length;

            //遍历当前页数据,对比已选中项中的 id
            for (let i = 0; i < len; i++) {
                if (selectedData.indexOf(pageData[i]['data_id']) !== -1) {
                    //目前版本没有任何与数据或表格 id 相关的标识,不太好搞,土办法选择它吧
                    tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);
                }
            }
            //去掉全选按钮-(全选时 数据判断有问题 懒得搞 也不会存在全选的情况)
            $('th[data-field=0] div').replaceWith('<div class="layui-table-cell laytable-cell-5-0-0"><span>&nbsp;&nbsp;&nbsp;&ensp;</span></div>');
            //PS:table 中点击选择后会记录到 table.cache,没暴露出来,也不能 mytbl.renderForm('checkbox');
            //暂时只能这样渲染表单
            form.render('checkbox');
        };

        // 渲染表格
        table.render({
            elem: '#resultTable',
            id: '#resultTable',
            url: '',
            method: 'get',
            where: {keyword: ''}, //初始为空
            done: myDone,
            cols: [[
                {type: 'checkbox', width: '10%', align: 'center'},
                {field: 'data_id', title: 'ID', width: '30%', align: 'center'},
                {field: 'sku', title: 'SKU', width: '30%', align: 'center'},
                {field: 'name', title: '商品名称', width: '30%', align: 'center'},
                {field: 'customer_price', title: '商品价格', width: '30%', align: 'center'}
            ]],
            page: true,
            limit: 10,
            limits: [10, 20, 30],
        });

        //监听复选框点击事件
        table.on('checkbox(resultTable)', function (obj) {
        
            //全选或单选数据集不一样
            //(目前不存在全选的情况-全选按钮被我去掉了-可以自己加上。全选的话,obj.type='all')
            let data = obj.type === 'one' ? [obj.data] : pageData;
            //遍历数据
            $.each(data, function (k, v) {
                if (obj.checked) {
                    selectedData.push(obj.data.data_id);
                } else {
                    selectedData = selectedData.filter(function (item) {
                        return item !== obj.data.data_id;
                    });
                }
            });
        });

        //表单提交
        window.add = function () {
            let id = $('#id').val();
            let name = $('#name').val();
            let brand_name = $('#brand_name').val();
            let image = $('#image').val();
            let begin_time = $('#begin_time').val();
            let end_time = $('#end_time').val();
            let num = $('#num').val();
            let remark = $('#remark').val();

            let selectedIds = selectedData.map(function (item) {
                return item;
            }).join(',');
            if (selectedIds === '') {
                layer.msg('请选择商品');
                return
            }

            layer.confirm('已选中的材料ID为:[' + selectedIds + '], 确定提交吗?', function () {
                $.post('/your_url', {
                    id: id,
                    name: name,
                    brand_name: brand_name,
                    image: image,
                    begin_time: begin_time,
                    end_time: end_time,
                    num: num,
                    remark: remark,
                    ids: selectedIds
                }, function (res) {
                    if (res.code === 200) {
                        layer.alert(res.msg, {icon: 6}, function () {
                            // 获得frame索引
                            let index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                            parent.location.reload();
                        });
                    } else {
                        layer.alert(res.msg, {icon: 5})
                    }
                }, 'JSON');
            })
        }
    });
</script>

参考文章:Layui Table 分页记忆选中

相关推荐
2501_944521598 小时前
Ramda 跨端三方库仓颉适配全流程
开发语言·javascript·flutter·php
漠月瑾-西安9 小时前
PHP曝出两个严重RCE漏洞:CVE-2026-109618、CVE-2026-109619技术分析与修复指南
网络安全·php·漏洞分析·漏洞修复·远程代码执行
Ken_111510 小时前
小体积附件下载正常,大附件下载异常
javascript
变与不变80611 小时前
jQuery怎么使用
前端·javascript
paopaokaka_luck11 小时前
流浪动物救助与收养系统(DeepSeek AI对话、 ECharts多维分析、救助流程衔接、领养与回访衔接、 捐赠确认与公示、志愿者协作)
java·前端·javascript·人工智能·mysql·echarts·推荐算法
仰望.11 小时前
vue 表格组件 vxe-table 树表格懒加载支持拖拽排序的详细用法
前端·javascript·vue.js·vxe-table
程序员初一13 小时前
我把跑了两年 WordPress 的机器重装了一遍,顺便把面板卸了
javascript
kyriewen13 小时前
别再用防抖做懒加载了:120 张图只加载出 4 张
前端·javascript·程序员
CodeMi15 小时前
2026 CSS 接管了这些 JS 的活:6 个 Baseline 特性的落地取舍
javascript·css
大文说跨境15 小时前
亚马逊多店铺的图片素材怎么批量去重:EXIF 与哈希的处理流程
开发语言·php