項目總結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表格是進行參數映射 }