项目总结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. python------Socket网略编程

    上节课程回顾: 静态变量:与类无关,不能访问类里的任何属性和方法. 类方法:只能访问类变量. 属性:把一个方法变成静态属性, 反射: __new__:先于__init__执行: __call__: c ...

  2. 生产redis client 连接无法释放

    原因是spring配置文件,开启了事务导致的,redis是缓存用的,不需要开启事务,正确的配置如下: <!--redis操作模版,使用该对象可以操作redis --> <bean i ...

  3. 查看linux系统CPU及内存配置

    总核数 = 物理CPU个数 X 每颗物理CPU的核数 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 查看物理CPU个数 cat /proc/cpuinfo| grep & ...

  4. Vue 表单校验 vee-validate

    gitHub 地址:https://github.com/baianat/vee-validate 官网API 地址:https://baianat.github.io/vee-validate/ap ...

  5. webpack 中，importloaders 配置项的含义

    importLoaders:用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader. 0 => no loaders (default); 1 => p ...

  6. Excel技巧--反向查询

    当要从左侧的表格,查询某人所在的部门时,那么需要逆向查询.VLOOKUP函数只能正向查询.可以使用Match和index函数: Match函数:查询某个值在指定区域所在的位置: Index函数:查询指 ...

  7. DateUtils时间单元说明

    CompareDate 函数 比较两个日期时间值日期部分的大小 CompareDateTime 函数 比较两个日期时间值的大小 CompareTime 函数 比较两个日期时间值时间部分的大小 Date ...

  8. DokuWiki 插件使用

    本身DokuWiki提供了一些公共,但是不是很强大,所以可以安装一些插件. 安装方法可以参考:https://www.dokuwiki.org/extensions 下面列举出我觉得好用的一些插件: ...

  9. Python的Django

    1   第一部分目录详解 修改django的项目当中的url中的配置: from django.contrib import admin from django.conf.urls import ur ...

  10. 20165312 2017-2018-2 《JAVA程序设计》第4周学习总结

    一.课本五六章知识点总结 1.第五章 继承是一种由已有的类创建新类的机制 子类继承父类的成员变量和方法 子类继承的方法只能操作子类继承和隐藏的成员变量 子类重写或新增的方法只能操作子类继承和新声明的成 ...