最后一篇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列表，实现多条件查询列表的功能。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
