项目总结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. hdu5001 Walk 概率DP

    I used to think I could be anything, but now I know that I couldn't do anything. So I started travel ...

  2. java_线程

    线程1    与线程相关的概念    线程与进程的区别    线程创建策略    线程组        线程创建策略        并发应用中一般有两种不同的线程创建策略        1直接控制线程 ...

  3. 解决ansible上传速度慢的问题

    问题: 假如有A.B.C.D....等机器,机器A为Ansible服务器,机器B.C.D...等为Ansible管理的节点服务器,A机器与其他机器都不在同一个网络,也就是A机器必须添加VPN之后才能与 ...

  4. 3.1 MathType上标位置调整的两种方法

    具体操作步骤如下: 1.打开MathType窗口后在工作区域中编辑好公式. 2.调整上标位置有两种方法: (1)选中要调整的上标,按下“Ctrl+↑,Ctrl+↓,Ctrl+←,Ctrl+→”进行调整 ...

  5. 4、Linux常用命令

    1.查看端口占用(8080) lsof -i:8080 2.杀死进程PID kill -9 41726 3.查看防火墙状态 firewall-cmd --state 4.停止防火墙 systemctl ...

  6. js 遍历EL表达式 list对象

    无法直接通过"${topicList}"获取对象,需要通过<c:forEach>获取list里的对象: var topicListArry = new Array(); ...

  7. Linux scp命令详解

    Linux scp命令 Linux scp命令用于Linux之间复制文件和目录. scp是 secure copy的缩写, scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令. 语法: ...

  8. Windows下好用的git客户端--GitExtentions

    用git: https://git-scm.com/downloads GitExtentions: https://sourceforge.net/projects/gitextensions/ B ...

  9. html5-websocket实现基于远程方法调用的数据交互

    html5-websocket实现基于远程方法调用的数据交互   一般在传统网页中注册用户信息都是通过post或ajax提交到页面处理,到了HTML5后我们有另一种方法就是通过websocket进行数 ...

  10. Windows程序设计_21_Win32文件操作

    没什么新的内容,自己的练习代码,供大家点评. /* Windows系统编程--实例 1)复制文件 */ #define UNICODE //#define _UNICODE #include < ...