編寫如下代碼:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../layui/css/layui.css" media="all" />
<script src="../layui/layui.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<table class="layui-table" lay-data="{url:'../From_JSON/AfterAssembly.json'}" lay-filter="myTable">
<thead>
<tr>
<th lay-data="{checkbox:true}"></th>
<th lay-data="{field:'Name',title:'姓名',align:'center'}"></th>
<th lay-data="{field:'Section',title:'性別',align:'center'}"></th>
<th lay-data="{field:'content',title:'年齡',align:'center'}"></th>
</tr>
</thead>
</table>
<button id="btnSave" class="layui-btn" type="button" runat="server">提交</button>
</form>
</body>
</html>
接口數據:
{
"code": 0,
"msg": "",
"count": 3,
"data": [
{
"Name": "名稱1",
"Section": "11",
"content": "內容1"
},
{
"Name": "名稱2",
"Section": "22",
"content": "內容2"
},
{
"Name": "名稱3",
"Section": "33",
"content": "內容3"
}
]
}
測試窗口:
竟然不顯示數據。
更改後代碼:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../layui/css/layui.css" media="all" />
<script src="../layui/layui.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<table class="layui-table" lay-data="{url:'../From_JSON/AfterAssembly.json'}" lay-filter="myTable">
<thead>
<tr>
<th lay-data="{checkbox:true}"></th>
<th lay-data="{field:'Name',title:'姓名',align:'center'}"></th>
<th lay-data="{field:'Section',title:'性別',align:'center'}"></th>
<th lay-data="{field:'content',title:'年齡',align:'center'}"></th>
</tr>
</thead>
</table>
<button id="btnSave" class="layui-btn" type="button" runat="server">提交</button>
</form>
<script>
layui.use('table', function () {
var table = layui.table;
});
</script>
</body>
</html>