Layui+SSM实现数据表格的重载

最新推荐文章于 2023-08-08 14:09:46 发布

原创最新推荐文章于 2023-08-08 14:09:46 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#数据表格重载 #layui #SSM

SSM 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了实现layui数据表格重载的方法。首先需在项目中引入layui，接着展示了页面及代码，包括条件查询区、数据表格重载核心代码，还说明了数据表格的id和条件查询区的class，最后给出了后台数据接口的主要代码及需注意的后台接受条件和处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文是实现layui数据表格的重载
话不多说，直接开始：

1、项目引入layui，引入较为简单，不会的也可以百度百度，这里不再说明！！！

2、页面展示
在这里插入图片描述 3、页面代码展示
3.1 条件查询区

<div style="padding: 2%" class="demoTable">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名：</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="memberName" id="demoReloadMemberName" placeholder="请输入需查询的姓名" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">部门：</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="department" id="demoReloadDepartment" placeholder="请输入需查询的部门名" autocomplete="off" class="layui-input">
                        </div>
                        <button class="layui-btn" data-type="reload">查询</button>
                    </div>

                </div>

3.2 重点重点，数据表格重载核心
var $ = layui.$, active = {
reload: function(){
var demoReloadMemberName = $(’#demoReloadMemberName’),
demoReloadDepartment = $(’#demoReloadDepartment’);

            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    memberName: demoReloadMemberName.val(),
                    department: demoReloadDepartment.val()

                }
            });
        }
    };

    $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

要注意的是：testReload 和 demoTable
3.3 demoTable 是条件查询区的class
在这里插入图片描述
3.4 testReload 是数据表格的id

4、数据表格的代码

table.render({
            elem: '#demo'
            , height: 480
            , url: '${ctx}/member/queryAll/' //数据接口
            , title: '成员表'
            ,id: 'testReload'
            , limit: 10  //要传向后台的每页显示条数
            , page: {
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                ,limits:[10, 15, 100]
                ,first: false //不显示首页
                ,last: false //不显示尾页
            }
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: true //开启合计行
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                .......
                , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
            ]]
        });

5、根据以上代码，可知数据表格的数据接口是url: '${ctx}/member/queryAll/' //数据接口
后台数据接口的主要代码：

@RequestMapping("/queryAll")
    @ResponseBody
    public Map<String, Object> queryAll(int page, int limit, String memberName, String department){
        //page、limit是前端传递过来的数据，page代表的是当前是第几页， limit代表的是每页有多少条数据
        Map<String, Object> map = new HashMap<>();
        //查询所有的成员信息
      。。。。。。
        //查询一共有多少成员
      。。。。。。
        //检查前端是否传递条件查询数据
        if(memberName == null && department == null){
            //传递的条件查询数据为空
            map.put("count", count);
        }else {
            //传递的条件查询数据不为空
            map.put("count", memberList.size());
        }
       。。。。。。
             return map;
    }

5.1 需要注意的是后台接受的条件，以及如何处理的：
在这里插入图片描述
现数据重载