zoukankan      html  css  js  c++  java
  • 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="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

  • 相关阅读:
    mysql查找有某列但没有此列索引的表
    mysql找到所有索引
    mysq在某一刻同时获取主从库的位置点
    新书《深入应用C++11:代码优化与工程级应用》出版,感谢支持
    c++11实现一个简单的lexical_cast
    应该用bind+function取代虚函数吗?
    《深入应用C++11:代码优化与工程级应用》开始发售
    一个更好的C++序列化/反序列化库Kapok
    C++技术沙龙主要内容
    C++11模版元编程
  • 原文地址:https://www.cnblogs.com/116970u/p/10556409.html
Copyright © 2011-2022 走看看