项目总结19：layui实现表格渲染、表格搜索、数据获取

1-参考资料：https://www.layui.com/demo/table/reload.html

2-本次总结的是layui的表格功能，主要功能如下：

  • 对后台的传来的数据进行表格进行分页展示，数据是服务端分页
  • 对表格支持模糊搜索，搜索的本质是对服务器进行重新请求(附加搜索条件)
  • 获取表格某行数据，并进行业务处理

3-效果展示

4-代码明细-（更具体的使用，可以参考官网文档）

  • js引用(需要自己去官网下载)
        <script src="plugins/layer/layer.js"></script>

        <script src="plugins/layui/layui.all.js"></script>

        <link rel="stylesheet" href="plugins/layer/layui.css" />

        <style>

            img{

                border:0;

                display:inline;

            }

            hr{font-weight:bold}

        </style>
  • HTML代码
<body>

    <div class="layui-container">

        <input type="hidden"  id="id" value="${entity.id}" />

        <fieldset class="layui-elem-field">

            <legend class="strong">关联会场</legend>

            <%--搜索栏目--%>

            <div class="layui-inline">

                <input class="layui-input" name="exhibitionInput" id="exhibitionInput" autocomplete="off" placeholder="请输入会场名称">

            </div>

            <button class="layui-btn" id="searchExhibition" data-type="reload">搜索</button>

            <%--保存按钮--%>

            <script type="text/html" id="exhibitionToolbar">

                <div class="layui-btn-container">

                    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">关联被选中的会场</button>

                </div>

            </script>

            <%--表格--%>

            <table id="exhibitionTable" lay-filter="exhibitionFilter"></table><%--layui初始化需要的table--%>

        </fieldset>

    </div>

</body>
  • JS代码(当前代码需要放在HTML代码下方，否则会表格渲染失败)
<script>

    /*使用layui的表格功能*/

    layui.use('table', function(){

        var table = layui.table;

        /*layui渲染表格*/

        table.render({

            elem: '#exhibitionTable',//实例化需要的table的id

            height: 360,//容器高度

            url: 'exhibition/rest/list',//请求参数URL

            method:"get",//GET方法

            where:{},//用户自定义请求参数(直接跟在url?后面)

            parseData: function(res){ //res 即为原始返回的数据

                return {//对返回数据的参数名称进行映射

                    "code": 0, //解析接口状态

                    "msg": res.msg, //解析提示文本

                    "count": res.total, //解析数据长度

                    "data": res.rows //解析数据列表

                };

            },

            request: {//请求参数名称映射配置

                pageName: 'pageNum' //页码的参数名称，默认：page

                ,limitName: 'limit' //每页数据量的参数名，默认：limit

            },

            limit:5,

            limits:[5,25,50],

            toolbar: '#exhibitionToolbar',//初始化保存按钮

            page: true ,//开启分页

            cols: [[ //表头

                {type:'radio'}

                ,{type:'numbers', title: '序号', width:50, sort: true}

                ,{field: 'name', title: '会场名称', width:250}

                ,{field: 'statusName', title: '会场状态',width:120}

                ,{field: 'logoUrl', title: '封面图片', width:200, templet: '#logoTpl',sort: true}/*//templet参数用户定制列的数据特殊标签处理*/

            ]]

        });

        /*表格重载(搜索的点击时间调用的是方法)*/

        var $ = layui.$, active = {

            reload: function(){

                var exhibitionInput = $('#exhibitionInput');

                //执行重载

                table.reload('exhibitionTable', {

                    page: {

                        curr: 1 //重新从第 1 页开始

                    }

                    ,where: {

                        name: exhibitionInput.val()

                    }

                });

            }

        };

        /*绑定搜索点击事件*/

        $('#searchExhibition').on('click', function(){

            var type = $(this).data('type');

            active[type] ? active[type].call(this) : '';

        });

        /*//头工具栏事件*/

        table.on('toolbar(exhibitionFilter)', function(obj){

            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态

            switch(obj.event){

                case 'getCheckData':

                    var data = checkStatus.data;  //获取选中行数据

                    var exhibitionId =data[0].id;

                    saveLinkInfo(exhibitionId,'<%=BannerLinkTypeEnum.EXHIBITION.getKey()%>');

                    console.log("exhibitionId" + exhibitionId);

                    break;

            };

        });

    });

</script>

<%--定制列样式，展示图片--%>

<script type="text/html" id="logoTpl">

    <img style="width:75px;height:50px" src="{{d.logoUrl}}">

</script>
  • 后台数据请求接口
    /**

     * 列表

     */

    @RequestMapping(value = { "/rest/list" }, method = {RequestMethod.GET }, produces = {JSON_UTF8})

    @ResponseBody

    public String restList(@RequestParam Map<String, String> map){

       //.....省略业务实现

       //返回的数据格式：{"code":"200","msg":"sucess","total":"1000","rows":[{"data":"data"},{"data":"data"}]}

        //返回的数据格式和layui可以接受的数据格式不一致，需要在前端初始化layui表格是进行参数映射

    }

项目总结19：layui实现表格渲染、表格搜索、数据获取的更多相关文章

  1. React之Antd table表格渲染按钮问题

    问题描述:table表格渲染表格数据时,会自动触发操作列中Button的onClick函数,表格渲染完成后,点击Button按钮,onClick函数不能被触发. // 定义表格表头数据 问题写法:  ...

  2. LayUI-Table表格渲染

    记项目中又一表格使用方法,项目首选是使用BootstrapTable的,但是经过多番查证与调试,始终没有把固定列的功能调试成功,找到的成功的例子原样照搬都不行,文件引入也都没有问题,实在搞不懂了,如果 ...

  3. LayUI之table数据表格获取行、行高亮等相关操作

    前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...

  4. 超全table功能Datatables使用的填坑之旅--1: 无法渲染表格数据: ajax调用了参数 : success

    问题:Datatables: 无法渲染表格数据 原因:datatables的ajax 传了"success":function(){},导致无法渲染数据. ajax 删掉" ...

  5. render 函数渲染表格的当前数据列使用

    columns7: [ { title: '编号', align: 'center', width: 90, key: 'No', render: (h, params) => { return ...

  6. 基于.NetCore开发博客项目 StarBlog - (19) Markdown渲染方案探索

    前言 笔者认为,一个博客网站,最核心的是阅读体验. 在开发StarBlog的过程中,最耗时的恰恰也是文章的展示部分功能. 最开始还没研究出来如何很好的使用后端渲染,所以只能先用Editor.md组件做 ...

  7. 关于layui中tablle 渲染数据后 sort排序问题

    最近在使用easyweb框架做后台管理,案例可见https://gitee.com/whvse/EasyWeb. 其中遇到了 sort排序问题, html代码:<table class=&quo ...

  8. layui navTree 动态渲染菜单组件介绍

    navTree.js 简介 extends/navTree.js 是一个基于 layui 扩展的模块化组件,用于构建后台布局系统中的垂直导航菜单与水平导航菜单. extends/navTree.js ...

  9. CSharpGL(19)用glReadPixels把渲染的内容保存为PNG图片(C#)

    CSharpGL(19)用glReadPixels把渲染的内容保存为PNG图片(C#) 效果图 本文解决了将OpenGL渲染出来的内容保存到PNG图片的方法. 下载 CSharpGL已在GitHub开 ...

随机推荐

  1. if 循环

    age_of_princal = 56guess_age = int(input(">>:")) if guess_age == age_of_princal: pri ...

  2. VS2010添加虚拟机发布的WebService引用

    首先,WebServer已在虚拟机中完成发布.在网页中浏览可以看到如下所示内容 需要注意的是在发布时要给网站设置IP地址.如果在添加网站时没有设置,之后可以在网站绑定中进行修改.步骤如下: 1.选中网 ...

  3. 【java编程】java中的移位运算符

    java中有三种移位运算符 <<      :     左移运算符,num << 1,相当于num乘以2 >>      :     右移运算符,num >& ...

  4. python selenium 定制启动Chrome的选项注意事项（十九）

    自动化测试的时候为了避免每个case均需要登录的操作,所以把登录后的cookie信息保存下来,在有效期内使用cookie的方式实现登录操作,为了避免展现太多的登录操作,需要通过设置浏览器的option ...

  5. select2 清除选中项解决办法

    在项目中使用select2:选中项 设置可清除. 代码中加上了allowClear : true $.get("/Work/Ajax/Select.ashx", function ...

  6. 域名到站点的负载均衡技术一览（主要是探讨一台Nginx抵御大并发的解决方案）（转）https://www.cnblogs.com/EasonJim/p/7823410.html

    一.问题域 Nginx.LVS.Keepalived.F5.DNS轮询,往往讨论的是接入层的这样几个问题: 1)可用性:任何一台机器挂了,服务受不受影响 2)扩展性:能否通过增加机器,扩充系统的性能 ...

  7. 对中断interrupt的理解

    一.中断 线程的几种状态:新建.就绪.运行.阻塞.死亡.参考:线程的几种状态转换 线程的可运行状态并不代表线程一定在运行(runnable != running ) . 大家都知道:所有现代桌面和服务 ...

  8. The 'INFORMATION_SCHEMA.GLOBAL_STATUS' feature is disabled; see the documentation for 'show_compatibility_56'

    --从mysql5.7.6开始information_schema.global_status已经开始被舍弃,为了兼容性,此时需要打开 show_compatibility_56 mysql> ...

  9. 文件管理 - Ring3创建目录

    //多字符集 #include "stdafx.h" #include <Windows.h> #include <iostream> using name ...

  10. [UE4]Input Key Selector

    一.Input Key Selector:按键设置 二.On Key Selected:按键收集完毕后触发该事件. 三.点击On Key Selected控件后,会显示“...”,表示可以接受键盘输入 ...