先看下Json數據：
[{"name":"定/即時采集","code":"TIMER","value":"11111aaa"},
{"name":"設備管理員","code":"MANAGER","value":"2222bbb"},
{"name":"設備位置","code":"LOCATION","value":"3333ccc"},
{"name":"用電屬性","code":"POWER_ATTR","value":"44444dddd"}]
在layui中，我們需要將這種json數據的格式轉換成數組格式：
存放進data中去
然后以這種格式發送到前台；
前台就可以通過layui的方式將這個json數據以表格的形式顯示出來了：
通用的列表格式：
<!DOCTYPE html>
<html>
<head>
<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="//res.layui.com/layui/dist/css/layui.css" media="all">
<!-- 注意：如果你直接復制所有代碼到本地，上述css路徑需要改成你本地的 -->
</head>
<body>
<table class="layui-hide" id="test"></table>
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接復制所有代碼到本地，上述js路徑需要改成你本地的 -->
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/demo/table/user/'
,cellMinWidth: 80 //全局定義常規單元格的最小寬度，layui 2.2.1 新增
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用戶名'}
,{field:'sex', width:80, title: '性別', sort: true}
]]
});
});
</script>
</body>
</html>
自己寫的這個列表格式：
<table class="layui-hide" id="demo" lay-filter="test"></table> <script type="text/html" id="barDemo"> <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>
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
var laydate = layui.laydate //日期
,laypage = layui.laypage //分頁
,layer = layui.layer //彈層
,table = layui.table //表格
,carousel = layui.carousel //輪播
,upload = layui.upload //上傳
,element = layui.element //元素操作
,slider = layui.slider //滑塊
table.render({
elem: '#demo'
,url: _path +'/channel/ExtendValues2.do?channelId='+channelId
,cellMinWidth: 80 //全局定義常規單元格的最小寬度，layui 2.2.1 新增
,totalRow : false
,unresize : false
,cols: [[
{
field : 'seq',
title : '序號',
event : 'monthSign',
width : '10%',
align : 'center',
templet : function(row) {
return row.seq;
}
},
{
field : 'name',
title : '用戶名',
event : 'monthSign',
width : '30%',
align : 'center',
templet : function(row) {
return row.name;
}
},
{
field : 'value',
title : '對應值',
width : '32%',
event : 'monthSign',
align : 'center',
templet : function(row) {
return row.value;
}
},
{
fixed: 'right',
align:'center',
toolbar: '#barDemo'
}
]],
done : function(res, curr, count) {
}
});
});