最後一篇LayUi前端框架的介紹視頻，介紹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>
<blockquote class="layui-elem-quote news_search">
<div class="layui-row">
<form class="layui-form layui-col-md12 x-so" id="complain_search">
服務編號:
<div class="layui-input-inline">
<input type="text" name="serviceCode" id="serviceCode"
placeholder="請輸入服務編號" autocomplete="off" class="layui-input">
</div>
訂單號:
<div class="layui-input-inline">
<input type="text" name="compOrder" id="compOrder"
placeholder="請輸入訂單號" autocomplete="off" class="layui-input">
</div>
投訴類型:
<div class="layui-input-inline">
<select name="compType" id="compType">
<option value="">---請選擇---</option>
<option value="0">醫院</option>
<option value="1">科室</option>
<option value="2">醫生</option>
</select>
</div>
投訴狀態:
<div class="layui-input-inline">
<select name="complainState" id="complainState">
<option value="">---請選擇---</option>
<option value="0">未處理</option>
<option value="1">已處理</option>
</select>
</div>
<button id="search" class="layui-btn" lay-submit
lay-filter="provinceSearch">
<i class="layui-icon"></i>
</button>
</form>
</div>
<table class="layui-hide" id="complainTable" lay-filter="complainList"></table>
</blockquote>
<script type="text/html" id="complain_toolbar">
<div class="layui-btn-container">
<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]
});
table.on('toolbar(complainList)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id),
data = checkStatus.data;
data = eval("(" + JSON.stringify(data) + ")");
switch(obj.event) {
case 'add':
layer.open({
type: 2,
title: "添加省份頁面",
area: ['35%', '60%'],
fix: false,
maxmin: true,
shadeClose: true,
shade: 0.4,
skin: 'layui-layer-rim',
content:["/medicaladmin/complain/complainAdd", "no"],
});
break;
}
});
table.on('tool(complainList)', function(obj) {
var data = obj.data;
json = JSON.stringify(data);
switch(obj.event) {
case 'detail':
console.log("投訴詳情");
var index = layer.open({
type: 2,
title: "投訴詳情頁面",
area: ['30%', '60%'],
fix: false,
maxmin: true,
shadeClose: true,
shade: 0.4,
skin: 'layui-layer-rim',
content: ["/medicaladmin/complain/complainRead", "no"],
});
break;
case 'edit':
var index = layer.open({
type: 2,
title: "編輯投訴頁面",
area: ['30%', '60%'],
fix: false,
maxmin: true,
shadeClose: true,
shade: 0.4,
skin: 'layui-layer-rim',
content: ["/medicaladmin/complain/complainEdit", "no"],
});
break;
case 'del':
var delIndex = layer.confirm('真的刪除id爲' + data.id + "的信息嗎?", function(delIndex) {
$.ajax({
url: '/medicaladmin/complain/delete/'+data.id,
type: "post",
success: function(suc) {
if(suc.code == 200) {
obj.del(); //刪除對應行（tr）的DOM結構，並更新緩存
layer.close(delIndex);
console.log(delIndex);
layer.msg("刪除成功", {
icon: 1
});
} else {
layer.msg("刪除失敗", {
icon: 5
});
}
}
});
layer.close(delIndex);
});
break;
}
});
form.render();
form.on('submit(provinceSearch)', function(data) {
var formData = data.field;
console.debug(formData);
var serviceCode = formData.serviceCode,
compOrder = formData.compOrder,
compType = formData.compType,
complainState = formData.complainState;
table.reload('provinceReload', {
page: {
curr: 1
},
where: {
serviceCode:serviceCode,
compOrder:compOrder,
compType:compType,
complainState:complainState
},
method: 'post',
contentType: "application/json;charset=utf-8",
url: '/medicaladmin/complain/queryComplainByCondition',
});
return false;
});
});
</script>
</body>
</html>
先介紹一下新增操作，和查看，編輯，刪除操作所不同的是，新增操作使用的是toolbar操作，也是Switch語句判斷一下lay-event，然後在寫新增操作，通過Url跳轉新增頁面。
頁面查詢功能，也就是條件查詢，查詢條件和Table要放在blockquote標籤內。每一個條件的輸入框Input中要設置一個id。然後在form.on(‘submit(provinceSearch)’, function(data)方法中取值，然後通過後臺接口多條件查詢列表。
table.reload方法重新渲染Table列表，實現多條件查詢列表的功能。