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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
jQuery的文档处理程序详解
May 10 Javascript
简单的JS轮播图代码
Jul 18 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
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
一次编写,随处运行
2006/10/09 PHP
简单易用的计数器(数据库)
2006/10/09 PHP
NT IIS下用ODBC连接数据库
2006/10/09 PHP
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
详解php协程知识点
2018/09/21 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
<script defer> defer 是什么意思
2009/05/10 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
webpack打包js的方法
2018/03/12 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
python类型强制转换long to int的代码
2013/02/10 Python
介绍Python中几个常用的类方法
2015/04/08 Python
python实现二叉查找树实例代码
2018/02/08 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
护理专业自荐信
2013/12/03 职场文书
2016年教师节感言
2015/12/09 职场文书