3.16

layUI 表格追加显示数据

layUI的表格一般是用table模块，该模块集成了很多方法和属性，可以方便的使用table表格来展示数据。

table模块加载数据有两种方式，一种是异步api获取数据加载；一种是在使用时直接把数据赋值到data属性即可。前者的数据追加直接按文档返回count和数据即可，这里着重说一下后者的数据追加。
初始化模块

我们采用方案2直接赋值data为数据

layui.use('table', function(){

table = layui.table;

//第一个实例

table.render({

elem: '#demo',

height: 312,

// 方案1 异步接口api返回数据，设置接口url即可

// url: '/demo/table/user/', //数据接口

// 方案2 直接把数据赋值data即可

data: data,

page: true, //开启分页

cols: [[ //表头

{field: 'id', title: 'ID', 100, sort: true, fixed: 'left'},

{field: 'username', title: '用户名', 100}

]]

});

!DOCTYPE html>
<html>
<head th:include="common/header::commonHeader">


</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>


<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', 150,title: '投诉ID'}
,{field:'serviceCode',150, title: '服务编号'}
,{field:'compType',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',150, title: '投诉订单号'}
,{field:'compReason',150,title: '投诉原因'}
,{field:'compDetail',150, title: '投诉详情'}
,{field:'complainState', 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', 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>
原文链接：https://blog.csdn.net/DCFANS/article/details/91895820

根据csdn上的一篇博客解决了layuitable的一个查询的bug。