项目总结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: '序号', 50, sort: true}
,{field: 'name', title: '会场名称', 250}
,{field: 'statusName', title: '会场状态',120}
,{field: 'logoUrl', title: '封面图片', 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="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表格是进行参数映射 }