Spring boot+Thymeleaf+easyui集成:js创建组件页面报错


开发工具:Ideal

       使用场景:Demo

前提:
       环境:Spring boot +Thymeleaf+easyui

        引入thymeleaf模板引擎

 1 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 2          Html页面引入easyui需要的文件
 3 
 4 <link href="/js/jquery-easyui-1.5.3/themes/gray/easyui.css" rel="stylesheet"/>
 5 
 6 <link href="/js/jquery-easyui-1.5.3/themes/icon.css" rel="stylesheet"/>
 7 
 8 <script src="/js/jquery-easyui-1.5.3/jquery.min.js"></script>
 9 
10 <script src="/js/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
11 
12 <script src="/js/jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>

当以标签属性创建easyui组件时,页面正常显示。
以标签属性创建easyui组件:

 1 <table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
 2 
 3        data-options="singleSelect:true,collapsible:true,url:'/getUsers',method:'get'">
 4 
 5     <thead>
 6 
 7         <tr>
 8 
 9             <th data-options="field:'id',width:80">Item ID</th>
10 
11             <th data-options="field:'name',width:100">姓名</th>
12 
13             <th data-options="field:'tel',width:80,align:'right'">电话</th>
14 
15         </tr>
16 
17     </thead>
18 
19 </table>

       页面效果:

 

 

当以js形式创建组件时出现问题
以js创建easyui组件

 1 <table id="dg"></table>
 2 
 3 <script type="text/javascript">
 4 
 5     $(function(){
 6 
 7         $('#dg').datagrid({
 8 
 9             url: '/getUsers',
10 
11             method: 'get',
12 
13             title: '用户表',
14 
15             iconCls: 'icon-save',
16 
17             width: 800,
18 
19             height: 250,
20 
21             fitColumns: true,
22 
23             singleSelect: true,
24 
25             columns:[[
26 
27                 {field:'id',title:'Item ID',width:80},
28 
29                 {field:'name',title:'姓名',width:80},
30 
31                 {field:'tel',title:'电话',width:80}
32 
33             ]]
34 
35         });
36 
37     });
38 
39 </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)

解决方式:

1 <script type="text/javascript" >

改为

1 <script type="text/javascript" th:inline="none">

总结:

在easyui页面中,script执行easyui自己的方法要加入:

1 <script th:inline="none">

 

原文参考:https://blog.csdn.net/xlzwhq0000004/article/details/83144440


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM