项目总结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表格是进行参数映射 }