LayUi渲染Table數據表格，效果圖如下：
如圖，這是一個LayUi的Table頁面， 接下來詳細講解一下，怎麼渲染出來Table數據表格的。先放一下完整版的代碼，然後慢慢分析：
<!DOCTYPE html>
<html>
<head th:include="common/header::commonHeader">
<!-- <meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" /> -->
<!-- 注意：如果你直接複製所有代碼到本地，上述css路徑需要改成你本地的 -->
</head>
<body>
<table class="layui-hide" id="complainTable" lay-filter="complainList"></table>
<script type="text/html" id="complain_toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delBatchAll"><i class="layui-icon"></i>批量刪除</button>
<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon"></i>添加</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-1.4.4.min.js}"></script>
<!-- 注意：如果你直接複製所有代碼到本地，上述js路徑需要改成你本地的 -->
<script type="text/javascript" >
layui.use(['table','layer','form','laypage'], function(){
var table = layui.table,
layer = layui.layer,
form = layui.form,
laypage = layui.laypage;
table.render({
id:"provinceReload"
,elem: '#complainTable'
,url:'/medicaladmin/complain/list'
,page: true
,method:'post'
,toolbar: '#complain_toolbar'
,limit:10
,response:{
statusName:'code',
msgName:'message',
statusCode:200,
dataName:'beans',
countName:'page',
}
,request:{
pageName: 'page',
limitName: 'size'
}
,cols: [
[
{checkbox:true}//開啓多選框
,{field:'id', width:150,title: '投訴ID'}
,{field:'serviceCode',width:150, title: '服務編號'}
,{field:'compType',width:150, title: '服務類型' , templet : function (d){
if(d.compType == 0){
return '<span style="color: #D03948;">醫院</span>';
}else if(d.compType == 1){
return '<span style="color: #18A4D0;">科室</span>';
}else if(d.compType == 2){
return '<span style="color: #5CD03F;">醫生</span>';
}
}}
,{field:'compOrder',width:150, title: '投訴訂單號'}
,{field:'compReason',width:150,title: '投訴原因'}
,{field:'compDetail',width:150, title: '投訴詳情'}
,{field:'complainState', width:150, title: '投訴狀態', templet : function(d){
if(d.complainState == 0){
return '<span style="color: #D03948;">未處理</span>';
}else if(d.complainState == 1){
return '<span style="color: #18A4D0;">已處理</span>';
}
}}
,{field:'validFlag', width:150, title: '數據狀態',templet: function (d) {
if(d.validFlag == true){
return '<span style="color: #18A4D0;">有效</span>';
}else{
return '<span style="color: #D03948;">無效</span>';
}
}},
,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
]
]
,limits: [5,10,20,50]
});
});
</script>
</body>
</html>
首先，先看一下LayUi官方的文檔：LayUi數據表格文檔
如文檔所說，創建一個table實例最簡單的方式是，在頁面放置一個元素：
<table id="demo"></table>
然後通過table.render()方法指定該容器。
好的，我們先寫一個table標籤，
<table class="layui-hide" id="complainTable" lay-filter="complainList"></table>
lay-filter這個標籤是後續爲了實現增加操作，需要用的屬性，這裏先不用管。
然後我們開始渲染數據，官方文檔介紹了三種初始化渲染方式，這裏我們選擇官方推薦的方法級渲染。
Table.render()裏，我們通過Url調取後臺的接口，返回數據。返回數據的格式官方文檔中有，可以查看。
介紹一下各種設置的含義：
page: true ：開啓分頁
limit:10 默認分頁Size是10
response:{
statusName:‘code’,
msgName:‘message’,
statusCode:200,
dataName:‘beans’,
countName:‘page’,
}
Response中的各種參數名稱，這個要看你的後臺接口。
request:{
pageName: ‘page’,
limitName: ‘size’
}
LayUi默認的分頁參數是 page, limit 但是我的後臺數據接口分頁參數是 page，size。使用這個設置可以改變Layui默認的分頁參數。
cols裏就是你的字段名稱。
在cols裏，可以根據數據的值顯示不同的樣式。比如上述例子中，我的投訴狀態字段，在數據庫中存的是0和1，判斷之後顯示在頁面上的是未處理和已處理。
至此，渲染Table數據表格就搞定了，一定要注意後臺接口的數據格式，也就是JsonType，看看是否和官方要求的一樣。後臺接口測試沒有問題後，前端展示數據就是小意思嘍