thymeleaf关于js的⼀些坑（数组定义）
js中免不了的要⽤的数组，⼀维的⼆维的三维的，但是当⽤到thymeleaf作为模版时候会有⼀些坑，导致数组不能⽤
先来看个异常
Caused by: ptions.TemplateProcessingException: Could not parse as expression: "
{field:'checkBox',checkbox: true, fixed: true}
,{field:'username', title: '⽤户名'} //width ⽀持：数字、百分⽐和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最⼩宽度，layui 2.2.1 新增
,{field:'mobile', title: '⼿机号', sort: true}
,{field:'nickname', title: '昵称'}
,{field:'lastLoginTime', title: '最后登录时间'}
,{field:'ip', title: '最后登录ip', align: 'center'} //单元格内容⽔平居中
,{field:'op',title: '操作', align:'center', toolbar: '#toolBars'} //这⾥的toolbar值是模板元素的选择器
" (template: "platform/user/list" - line 48, col 20)
at org.pression.StandardExpressionParser.parseExpression(StandardExpressionParser.java:131) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.R    at org.pression.StandardExpressionParser.parseExpression(StandardExpressionParser.java:62) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.R    at org.pression.StandardExpressionParser.parseExpression(StandardExpressionParser.java:44) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.R    at ine.EngineEventUtils.parseAttributeExpression(EngineEventUtils.java:220) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
at ine.EngineEventUtilsputeAttributeExpression(EngineEventUtils.java:207) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
thymeat org.thymeleaf.standard.processor.AbstractStandardExpressionAttributeTagProcessor.doProcess(AbstractStandardExpressionAttributeTagProcessor.java:10 
  at org.thymeleaf.processor.element.AbstractAttributeTagProcessor.doProcess(AbstractAttributeTagProcessor.java:74) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RE    at org.thymeleaf.processor.element.AbstractElementTagProcessor.process(AbstractElementTagProcessor.java:95) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELE    at org.thymeleaf.util.ProcessorConfigurationUtils$ElementTagProcessorWrapper.process(ProcessorConfigurationUtils.java:633) ~[thymeleaf-3.0.9.RELEASE.ja    at ine.ProcessorTemplateHandler.handleOpenElement(ProcessorTemplateHandler.java:1314) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEAS    at ine.OpenElementTag.beHandled(OpenElementTag.java:205) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
at ine.TemplateModel.process(TemplateModel.java:136) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
at ine.TemplateManager.process(TemplateManager.java:519) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
at org.thymeleaf.util.LazyProcessingCharSequence.writeUnresolved(LazyProcessingCharSequence.java:85) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]    at org.thymeleaf.util.AbstractLazyCharSequence.write(AbstractLazyCharSequence.java:103) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
at ine.AbstractTextualTemplateEvent.writeContent(AbstractTextualTemplateEvent.java:224) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE    at ine.Text.write(Text.java:78) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
at ine.OutputTemplateHandler.handleText(OutputTemplateHandler.java:71) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
... 96 common frames omitted
这⾥只接触最外层异常，⽽出现异常的位置
<script>
var cols=[[
{field:'checkBox',checkbox: true, fixed: true}
,{field:'username', title: '⽤户名'} //width ⽀持：数字、百分⽐和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最⼩宽度，layui 2.2.1 新增
,{field:'mobile', title: '⼿机号', sort: true}
,{field:'nickname', title: '昵称'}
,{field:'lastLoginTime', title: '最后登录时间'}
,{field:'ip', title: '最后登录ip', align: 'center'} //单元格内容⽔平居中
,{field:'op',title: '操作', align:'center', toolbar: '#toolBars'} //这⾥的toolbar值是模板元素的选择器
]];
</script>
乍⼀看，没问题，也许对应⽤过thymeleaf的⼩伙伴来说⼀眼就看出了问题，但是对于新⼿确实很难发现，thymeleaf会把[[]]中的内容作为
内联取值块解析，⽽不是数组。
解决办法：
⽅法⼀：回车换⾏如下：
<script>
var cols=[
[
{field:'checkBox',checkbox: true, fixed: true}
,{field:'username', title: '⽤户名'} //width ⽀持：数字、百分⽐和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最⼩宽度，layui 2.2.1 新增                ,{field:'mobile', title: '⼿机号', sort: true}
,{field:'nickname', title: '昵称'}
,{field:'lastLoginTime', title: '最后登录时间'}
,{field:'ip', title: '最后登录ip', align: 'center'} //单元格内容⽔平居中
,{field:'op',title: '操作', align:'center', toolbar: '#toolBars'} //这⾥的toolbar值是模板元素的选择器
]
];
</script>
⽅法⼆：添加th:inline="javascript"或者th:inline="none"，默认是th:inline="text"
<script th:inline="none">
</script>
建议⽅法⼆，因为数据定义靠换⾏总觉得怪怪的，你说呢？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。