layui: 使用数据表格 table.render 报错处理
一、报错信息
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
Wed Jan 23 15:20:18 CST 2019
There was an unexpected error (type=Internal Server Error, status=500).
An error happened during template parsing (template: "class path resource [templates/Page/test/test.html]")
org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/Page/test/test.html]")
at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parse(AbstractMarkupTemplateParser.java:241)
at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parseStandalone(AbstractMarkupTemplateParser.java:100)
org.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:93)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
at java.lang.Thread.run(Thread.java:748)
Caused by: org.attoparser.ParseException: Could not parse as expression: "
{field: 'code', width: 80, title: 'ID', sort: true},
{field: 'name', width: 100, title: '用户名'},
{field: 'age', width: 80, title: '年龄'},
{field: 'gender', width: 80, title: '性别'},
{field: 'create_time', width: 80, title: '创建时间'},
{field: 'update_time', width: 80, title: '修改时间'},
" (template: "Page/test/test" - line 57, col 25)
at org.attoparser.MarkupParser.parseDocument(MarkupParser.java:393)
at org.attoparser.MarkupParser.parse(MarkupParser.java:257)
at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parse(AbstractMarkupTemplateParser.java:230)
... 64 more
Caused by: org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "
{field: 'code', width: 80, title: 'ID', sort: true},
{field: 'name', width: 100, title: '用户名'},
{field: 'age', width: 80, title: '年龄'},
{field: 'gender', width: 80, title: '性别'},
{field: 'create_time', width: 80, title: '创建时间'},
{field: 'update_time', width: 80, title: '修改时间'},
" (template: "Page/test/test" - line 57, col 25)
at org.thymeleaf.standard.expression.StandardExpressionParser.parseExpression(StandardExpressionParser.java:131)
二、问题处理
根据官网给出的代码,我们会发现 cols: 属性后面的参数“[[ ]] ” ,前后两个中括号是连在一起的。使用的时候必须把它们分开,不然就会报错,最好的选择就是换行,比如像下面这样
<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}
, {field: 'city', width: 80, title: '城市'}
, {field: 'sign', title: '签名', width: '30%', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
, {field: 'experience', title: '积分', sort: true}
, {field: 'score', title: '评分', sort: true}
, {field: 'classify', title: '职业'}
, {field: 'wealth', width: 137, title: '财富', sort: true}
]
]
});
});
</script>
如果这个时候页面不报错,却没有数据。可能是返回的数据格式不正确,必须严格按照官方给出的数据格式来封装
1、table 组件默认规定的数据格式为:
{
"code": 0,
"msg": "",
"count": 1000,
"data": [{}, {}]
}
参考数据
{
"code": 0,
"msg": "",
"count": 1000,
"data": [
{
"id": 10000,
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "签名-0",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
}
]
}
2、自定义返回数据格式,想重新规定返回的数据格式,那么可以借助 response 参数,如:
table.render({
elem: '#demp'
,url: ''
,response: {
statusName: 'status' //规定数据状态的字段名称,默认:code
,statusCode: 200 //规定成功的状态码,默认:0
,msgName: 'hint' //规定状态信息的字段名称,默认:msg
,countName: 'total' //规定数据总数的字段名称,默认:count
,dataName: 'rows' //规定数据列表的字段名称,默认:data
}
//,…… //其他参数
});
那么上面所规定的格式为:
{
"status": 200,
"hint": "",
"total": 1000,
"rows": []
}