Spring boot+Thymeleaf+easyui整合：js建立元件頁面報錯
阿新 • • 發佈：2018-11-10
開發工具：Ideal
使用場景：Demo
前提：
環境：Spring boot +Thymeleaf+easyui
引入thymeleaf模板引擎
<html lang="en" xmlns:th="http://www.thymeleaf.org">
Html頁面引入easyui需要的檔案
<link href="/js/jquery-easyui-1.5.3/themes/gray/easyui.css" rel="stylesheet"/> <link href="/js/jquery-easyui-1.5.3/themes/icon.css" rel="stylesheet"/> <script src="/js/jquery-easyui-1.5.3/jquery.min.js"></script> <script src="/js/jquery-easyui-1.5.3/jquery.easyui.min.js"></script> <scriptsrc="/js/jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>
當以標籤屬性建立easyui元件時，頁面正常顯示。
以標籤屬性建立easyui元件：
<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px" data-options="singleSelect:true,collapsible:true,url:'/getUsers',method:'get'"> <thead> <tr> <th data-options="field:'id',width:80">Item ID</th> <th data-options="field:'name',width:100">姓名</th> <th data-options="field:'tel',width:80,align:'right'">電話</th> </tr> </thead> </table>
頁面效果：
當以js形式建立元件時出現問題
以js建立easyui元件
<table id="dg"></table> <script type="text/javascript"> $(function(){ $('#dg').datagrid({ url: '/getUsers', method: 'get', title: '使用者表', iconCls: 'icon-save', width: 800, height: 250, fitColumns: true, singleSelect: true, columns:[[ {field:'id',title:'Item ID',width:80}, {field:'name',title:'姓名',width:80}, {field:'tel',title:'電話',width:80} ]] }); }); </script>
效果：
後臺報以下錯誤：
[THYMELEAF][http-nio-8080-exec-1] Exception processing template "user": Could not parse as expression: "
{field:'id',title:'Item ID',width:80},
{field:'name',title:'姓名',width:80},
{field:'tel',title:'電話',width:80}
" (template: "user" - line 26, col 27)
解決方式：
將
<script type="text/javascript" >
改為
<script type="text/javascript" th:inline="none">