开发工具: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="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',80">Item ID</th> 10 11 <th data-options="field:'name',100">姓名</th> 12 13 <th data-options="field:'tel',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 800, 18 19 height: 250, 20 21 fitColumns: true, 22 23 singleSelect: true, 24 25 columns:[[ 26 27 {field:'id',title:'Item ID',80}, 28 29 {field:'name',title:'姓名',80}, 30 31 {field:'tel',title:'电话',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',80},
{field:'name',title:'姓名',80},
{field:'tel',title:'电话',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