关于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 分页记忆选中

相关推荐
BillKu几秒前
Element Plus 对话框 el-dialog 和 抽屉 el-drawer 的使用注意项(使用 div 包裹)
javascript·vue.js·elementui
layman05281 分钟前
Vue 中的配置代理
前端·javascript·vue.js
BillKu7 分钟前
Vue3 + TypeScript 中 hook 优化记录
开发语言·javascript·typescript
未来之窗软件服务11 分钟前
jquery 赋值时不触发change事件解决——仙盟创梦IDE
前端·javascript·jquery·仙盟创梦ide·东方仙盟
AnyaPapa16 分钟前
【解决方案】Vue 常见问题大全
前端·javascript·vue.js
浩宇软件开发1 小时前
JavaScript 数组常用方法 find, findIndex, filter, map, flatMap, some
前端·javascript·vue.js
永生辉皇1 小时前
JS红宝书笔记 8.3 继承
开发语言·javascript·笔记
前端Hardy1 小时前
前端性能飞跃!9大高级API实战指南,80%的开发者只知其三
前端·javascript
永生辉皇2 小时前
JS红宝书笔记 8.2 创建对象
javascript·笔记·原型模式
上单带刀不带妹2 小时前
解锁 JavaScript 模块化:ES6 Module 语法深度指南
开发语言·前端·javascript·es6