项目总结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. 664. Strange Printer

    class Solution { public: int dp[100][100]; int dfs(const string &s, int i,int j) { if(i>j)ret ...

  2. sails.js mvc framework learning

    目的:加快开发速度,总结使用方法: menu list: custom controller custom 模块使用 custom model custom middleware custom ser ...

  3. xamarin C# 安卓实现 ListView 放大缩小

    翻译自java示例https://raw.githubusercontent.com/Xjasz/AndroidZoomableViewGroup/master/ZoomListView.java u ...

  4. MySQL Error--Error Code

    mysql error code(备忘) 1005:创建表失败 1006:创建数据库失败 1007:数据库已存在,创建数据库失败 1008:数据库不存在,删除数据库失败 1009:不能删除数据库文件导 ...

  5. Zookeeper的下载、安装和启动

    一.下载Zookeeper 版本 zookeeper-3.4.13 下载地址:https://archive.apache.org/dist/zookeeper/ 解压后放在/usr/local/zo ...

  6. bootstrap之navbar

    container:固定960px宽度,(如果又引入了响应式样式,则会适当调整,例如1600*900,它会显示1200px) container-fluid:自适应屏幕宽度,即满屏显示. row和co ...

  7. ClassNotFoundException与NoClassDefFoundError异常

    方法 loadClass()抛出的是 java.lang.ClassNotFoundException异常(一般是jar冲突或者没有引入jar):方法 defineClass()抛出的是 java.l ...

  8. 删除iis日志（deliislogs.vbs）

    'path 目录 'ext 文件扩展名'expiredDays 保留多少天以内的文件Sub LogCleaner(path,ext,expiredDays) On Error Resume Next ...

  9. Linux查看线程

    我的程序在其内部创建并执行了多个线程,我怎样才能在该程序创建线程后监控其中单个线程?我想要看到带有它们名称的单个线程详细情况(如,CPU/内存使用率). 线程是现代操作系统上进行并行执行的一个流行的编 ...

  10. django之COOKIE 与 SESSION

    COOKIE 与 SESSION 概念 cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. cookie ...