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

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

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

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

3-效果展示

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

  • js引用(需要自己去官网下载)
  1.         <script src="plugins/layer/layer.js"></script>
  2.         <script src="plugins/layui/layui.all.js"></script>
  3.         <link rel="stylesheet" href="plugins/layer/layui.css" />
  4.         <style>
  5.             img{
  6.                 border:0;
  7.                 display:inline;
  8.             }
  9.             hr{font-weight:bold}
  10.         </style>
  • HTML代码
  1. <body>
  2.     <div class="layui-container">
  3.         <input type="hidden"  id="id" value="${entity.id}" />
  4.         <fieldset class="layui-elem-field">
  5.             <legend class="strong">关联会场</legend>
  6.  
  7.             <%--搜索栏目--%>
  8.             <div class="layui-inline">
  9.                 <input class="layui-input" name="exhibitionInput" id="exhibitionInput" autocomplete="off" placeholder="请输入会场名称">
  10.             </div>
  11.             <button class="layui-btn" id="searchExhibition" data-type="reload">搜索</button>
  12.  
  13.             <%--保存按钮--%>
  14.             <script type="text/html" id="exhibitionToolbar">
  15.                 <div class="layui-btn-container">
  16.                     <button class="layui-btn layui-btn-sm" lay-event="getCheckData">关联被选中的会场</button>
  17.                 </div>
  18.             </script>
  19.  
  20.             <%--表格--%>
  21.             <table id="exhibitionTable" lay-filter="exhibitionFilter"></table><%--layui初始化需要的table--%>
  22.  
  23.         </fieldset>
  24.     </div>
  25. </body>
  • JS代码(当前代码需要放在HTML代码下方，否则会表格渲染失败)
  1. <script>
  2.     /*使用layui的表格功能*/
  3.     layui.use('table', function(){
  4.         var table = layui.table;
  5.         /*layui渲染表格*/
  6.         table.render({
  7.             elem: '#exhibitionTable',//实例化需要的table的id
  8.             height: 360,//容器高度
  9.             url: 'exhibition/rest/list',//请求参数URL
  10.             method:"get",//GET方法
  11.             where:{},//用户自定义请求参数(直接跟在url?后面)
  12.             parseData: function(res){ //res 即为原始返回的数据
  13.                 return {//对返回数据的参数名称进行映射
  14.                     "code": 0, //解析接口状态
  15.                     "msg": res.msg, //解析提示文本
  16.                     "count": res.total, //解析数据长度
  17.                     "data": res.rows //解析数据列表
  18.                 };
  19.             },
  20.             request: {//请求参数名称映射配置
  21.                 pageName: 'pageNum' //页码的参数名称，默认：page
  22.                 ,limitName: 'limit' //每页数据量的参数名，默认：limit
  23.             },
  24.             limit:5,
  25.             limits:[5,25,50],
  26.             toolbar: '#exhibitionToolbar',//初始化保存按钮
  27.             page: true ,//开启分页
  28.             cols: [[ //表头
  29.                 {type:'radio'}
  30.                 ,{type:'numbers', title: '序号', width:50, sort: true}
  31.                 ,{field: 'name', title: '会场名称', width:250}
  32.                 ,{field: 'statusName', title: '会场状态',width:120}
  33.                 ,{field: 'logoUrl', title: '封面图片', width:200, templet: '#logoTpl',sort: true}/*//templet参数用户定制列的数据特殊标签处理*/
  34.             ]]
  35.         });
  36.         /*表格重载(搜索的点击时间调用的是方法)*/
  37.         var $ = layui.$, active = {
  38.             reload: function(){
  39.                 var exhibitionInput = $('#exhibitionInput');
  40.                 //执行重载
  41.                 table.reload('exhibitionTable', {
  42.                     page: {
  43.                         curr: 1 //重新从第 1 页开始
  44.                     }
  45.                     ,where: {
  46.                         name: exhibitionInput.val()
  47.                     }
  48.                 });
  49.             }
  50.         };
  51.         /*绑定搜索点击事件*/
  52.         $('#searchExhibition').on('click', function(){
  53.             var type = $(this).data('type');
  54.             active[type] ? active[type].call(this) : '';
  55.         });
  56.         /*//头工具栏事件*/
  57.         table.on('toolbar(exhibitionFilter)', function(obj){
  58.             var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
  59.             switch(obj.event){
  60.                 case 'getCheckData':
  61.                     var data = checkStatus.data;  //获取选中行数据
  62.                     var exhibitionId =data[0].id;
  63.                     saveLinkInfo(exhibitionId,'<%=BannerLinkTypeEnum.EXHIBITION.getKey()%>');
  64.                     console.log("exhibitionId" + exhibitionId);
  65.                     break;
  66.             };
  67.         });
  68.     });
  69. </script>
  70. <%--定制列样式，展示图片--%>
  71. <script type="text/html" id="logoTpl">
  72.     <img style="width:75px;height:50px" src="{{d.logoUrl}}">
  73. </script>
  • 后台数据请求接口
  1.     /**
  2.      * 列表
  3.      */
  4.     @RequestMapping(value = { "/rest/list" }, method = {RequestMethod.GET }, produces = {JSON_UTF8})
  5.     @ResponseBody
  6.     public String restList(@RequestParam Map<String, String> map){
  7.        //.....省略业务实现
  8.        //返回的数据格式：{"code":"200","msg":"sucess","total":"1000","rows":[{"data":"data"},{"data":"data"}]}
  9.         //返回的数据格式和layui可以接受的数据格式不一致，需要在前端初始化layui表格是进行参数映射
  10.     }

项目总结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. 看淘宝营销api 文档有感

    total: use appkey & secrect variance naming rule 提供沙箱环境 使用api gateway 使用rest(但返回结果包裹了 isp.thread ...

  2. Vue组件的介绍与使用

    组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 全局组件的使用 <!DO ...

  3. PythonStudy——列表与字典推导式 List and dictionary derivation

    # 快速生成列表或字典的语法糖,且能在生成过程中添加简单的逻辑 # 能被列表推导式推导的数据源必须在循环取值时可以得到一个值 ls = [v for v in range(1, 6)] print(l ...

  4. mvc项目用log4net 记录错误日志

    1.  首先下载lognet 下载地址 http://logging.apache.org/log4net/download_log4net.cgi 2.找到bin文件中的net文件夹  之后看你电脑 ...

  5. Game Physics Cookbook (Gabor Szauer 著)

    Chapter1: Vectors Chapter2: Matrices Chapter3: Matrix Transformations Chapter4: 2D Primitive Shapes ...

  6. oracle-pl/sql之三

    集合与记录 set serveroutput on create or replace package my_types authid definer is type my_rec is record ...

  7. Python hashlib&hmac 模块

    用于加密相关的操作,主要提供 SHA1, SHA224, SHA256, SHA384, SHA512 ,MD5 算法 hashlib模块示例: import hashlib m = hashlib. ...

  8. SVN 撤回已提交的代码

    1. TortoiseSVN -----> Show log 2.右键点击你想撤回的提交 -> Revert changes from this revision ----->Rev ...

  9. ubuntu-docker入门到放弃（八）创建支持SSH服务的镜像

    我们知道进入docker容器可以使用attach.exec等命令来操作和管理,但是如果需要远程登录并管理容器,就需要ssh服务的支持了. 1.基于commit命令创建 docker提供了commit命 ...

  10. autofac中文文档

    https://autofaccn.readthedocs.io/zh/latest/index.html