layui数据表格 table.render 报错的解决方法


Posted in Javascript onSeptember 29, 2019

一、报错信息

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)

二、问题处理

layui数据表格 table.render 报错的解决方法

根据官网给出的代码,我们会发现 cols: 属性后面的参数“[[ ]] ” ,前后两个中括号是连在一起的。使用的时候必须把它们分开,不然就会报错,最好的选择就是换行,比如像下面这样

layui数据表格 table.render 报错的解决方法

到这里我们发现,像这一类的错误相对于layui这样商业化的框架来说也算是属于比较”低级“的了。但为什么官方迟迟还不修复这个BUG呢,原因很简单 因为它和 thymeleaf 冲突。

当你的项目采用的是 thymeleaf模板引擎 作为前端数据铺显的时候,你会发现想要在js 中获取后端传入的参数 必须以这样的方式取值

layui数据表格 table.render 报错的解决方法

key必须放在 [[ … ]] 中否则无法获取值,这种语法的语句称为“内联”。而这个时候layui 网格加载数据的属性 cols: [[ … ]] 恰好用的也是[[…],所以thymeleaf会把它当做后端的传入的参数来进行解析,自然就报错了。

layui数据表格 table.render 报错的解决方法

解决办法非常简单,在 script 标签中加入属性 th:inline=“none”,指定该标签内的js 不使用”内联“获取参数。

layui数据表格 table.render 报错的解决方法

如果你需要在js 中获取后端传入的参数,把th:inline="none"改成th:inline="javascript"就可以获取了

layui数据表格 table.render 报错的解决方法

如果这个时候页面不报错,却没有数据。可能是返回的数据格式不正确,必须严格按照官方给出的数据格式来封装

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": []
}

以上这篇layui数据表格 table.render 报错的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
javascript 必知必会之closure
Sep 21 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
JavaScript实现秒杀时钟倒计时
Sep 29 #Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 #Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 #jQuery
JavaScript获取页面元素的常用方法详解
Sep 28 #Javascript
解决Layui数据表格的宽高问题
Sep 28 #Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 #Javascript
layui table 列宽百分比显示的实现方法
Sep 28 #Javascript
You might like
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
php数组查找函数总结
2014/11/18 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
js中判断控件是否存在
2010/08/25 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
python访问系统环境变量的方法
2015/04/29 Python
python获取当前日期和时间的方法
2015/04/30 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
一套软件开发工程师笔试题
2015/05/18 面试题
新锐科技Java程序员面试题
2016/07/25 面试题
数控专业个人求职信范例
2013/11/29 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
redis 解决库存并发问题实现数量控制
2022/04/08 Redis
Nginx 常用配置
2022/05/15 Servers
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers