今天在web开发时遇到一个问题,查了很多说是:①lay-ui数据表格格式问题 ②json格式问题
首先看数据表格的js格式,其中url是你后台数据接口的路径(后台具体某一个方法的路径),有id的话,其值为table中id的值
//数据表格的js格式
function tRender(){
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#main_table'
,height: 600
,url: '/Building/building/all' //数据接口
,page: true //开启分页
// ,data: data
,cols: [[ //表头
{type:'checkbox', fixed: 'left'}
,{field: 'building_id', title: '楼层标识ID', width:200, sort: true, fixed: 'left'}
,{field: 'building_name', title: '楼层名称', width:200}
,{field: 'description', title: '楼层大小', width:200, sort: true}
,{field: 'building_position', title: '楼层位置', width:200}
,{field: 'comment', title: '备注', width: 200}
,{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}
]]
});
});
}
再看一下html的结构
<table class="layui-table" lay-data="{width: 1300, url:'/Building/building/all', page:true, id:'idTest'}" lay-filter="demo">
<thead>
<tr>
<th lay-data="{type:'checkbox', fixed: 'left'}"></th>
<th lay-data="{field:'building_id', width:200, sort: true, fixed: true}">楼层标识ID</th>
<th lay-data="{field:'building_name', width:200}">大楼名称</th>
<th lay-data="{field:'description', width:200, sort: true}">描述</th>
<th lay-data="{field:'building_position', width:200}">大楼位置</th>
<th lay-data="{field:'comment', width:200}">备注</th>
<th lay-data="{fixed:'right', width:200, align:'center', toolbar: '#barDemo'}"></th>
</tr>
</thead>
</table>
然后看显示数据的json格式,其每一个key必须加英文格式的双引号 ""
{
"en_US": {
"building": [
{
"id": "building_id",
"name": "大楼编号"
},
{
"id": "building_name",
"name": "大楼名称"
},
{
"id": "building_position",
"name": "大楼位置"
},
{
"id": "building_direction",
"name": "大楼朝向"
},
{
"id": "building_date",
"name": "建楼时间"
},
{
"id": "floor",
"name": "楼层"
},
{
"id": "description",
"name": "描述"
},
{
"id": "comment",
"name": "备注"
}],
"enterprise": [],
"staff": []
},
"zh_CN": {
"building": [
{
"id": "building_id",
"name": "大楼编号"
},
{
"id": "building_name",
"name": "大楼名称"
},
{
"id": "building_position",
"name": "大楼位置"
},
{
"id": "building_direction",
"name": "大楼朝向"
},
{
"id": "building_date",
"name": "建楼时间"
},
{
"id": "floor",
"name": "楼层"
},
{
"id": "description",
"name": "描述"
},
{
"id": "comment",
"name": "备注"
}],
"enterprise": [],
"staff": []
}
}
这是我自己的json格式,但从layui官网以及大多数用户的写法来看是以下这样的,需要注意的问题是:"code":0以及"msg":""
{
"code": 0,
"msg": "",
"count": 10
"data": [
{
"id": "building_id",
"name": "大楼编号"
},
{
"id": "building_name",
"name": "大楼名称"
},
{
"id": "building_position",
"name": "大楼位置"
}
]
}
但我的问题不是以上前端问题,而是管理数据方法的路径问题,即传给前端的url的路径有问题,这时一定要看浏览器请求时的控制台报 的错误,对你会有很大帮助。
我的问题由于是url问题,所以报404