zoukankan      html  css  js  c++  java
  • EasyUI Tree_box 配合后台

     1 $(function () {
     2             var first = true;
     3             $("#tree_box").tree({
     4                 cache: false,
     5                 url: "/xx/em/product_tree.action",
     6                 animate: true,
     7                 dnd: true,
     8                 lines: true,
     9                 loadFilter: function (data) {//loading root
    10                     if (first) {
    11                         var root = [];
    12                         var node = {text: '菜单', state: 'open', id: "0"};
    13                         node.children = data;
    14                         root.push(node);
    15                         first = false;
    16                         return root;
    17                     } else {
    18                         return data;
    19                     }
    20                 },
    21                 onClick: function (node) {
    22                     if (node.id != "0")
    23                         frames["dataFrame"].location.href = "/xx/xx/xx.action?id="+node.id;
    24                     else
    25                         frames["dataFrame"].location.href = "/xx/xx/blank.html";
    26                 }
    27             });
    28         });

    以上是Js代码,loadFilter 加载过滤实现的是在,在生成的树上加一个根节点。

     下面插入局部Html代码,主要是前端的一个基本的布局,和树的显示条件。

     1 <div class="easyui-layout" style="1330px;height:610px;">
     2     <div region="center">
     3         <div class="easyui-tabs" fit="true" border="false" id="tabs">
     4             <div title="数据维护">
     5                 <iframe frameborder='0' scrolling='auto' style='100%;height:100%' name="dataFrame"
     6                         src="/xx/xx/blank.html"></iframe>
     7             </div>
     8         </div>
     9     </div>
    10     <div region="west" style=" 230px;padding:15px;background-color: #D4E3F6;" title="菜单" split="true">
    11         <ul id="tree_box"></ul>
    12     </div>
    13 </div>

    后台是用Spring Mvc实现的,下面插入局部后台代码,返回数据类型是Json 类型。

     1  public Object productTree(String id) {
     2         try {
     3             id = StringUtil.nullToAnother(id, "0");
     4             //sql
     5             StringBuilder sqlStr = new StringBuilder();
     6             sqlStr.append(" select e.n_id id, e.vc_name   text, " +
     7                     "   decode(e.n_parid,'0','closed','open') state " +
     8                     "   from table e " +
     9                     "  where "+
    10                     "    and e.n_parid = '" + id + "'");
    11             //jsonArray
    12             JSONArray jsonArray = new JSONArray();
    13             List<Map<String, Object>> trees = jdbcTemplate.queryForList(sqlStr.toString());
    14             for (Map map : trees) {
    15                 JSONObject json = new JSONObject();
    16                 json.element("id", map.get("ID"));
    17                 json.element("text", map.get("TEXT"));
    18                 json.element("pid", map.get("PID"));
    19                 json.element("state", map.get("STATE"));
    20                 jsonArray.add(json);
    21             }
    22             
    23             return jsonArray.toString();
    24         } catch (Exception ex) {
    25             logger.error("");
    26             ex.printStackTrace();
    27             return null;
    28         }
    29 
    30     }

    实现原理,初始化的时候,显示在根节点的数据是在id在一个特定值的时候,比如是空值,或者给它一个特定的值,后面相应的子选项,通过点击等相应事件来传递id来获取其全部子项。

  • 相关阅读:
    【11.5】生成器进阶--send、close和throw方法
    【11.4】协程是什么?
    【python】IO多路复用(select、poll、epoll)介绍及select、epoll的实现
    【11.3】select+回调+事件循环获取html
    【11.2】C10K问题和io多路复用(select、poll和epoll)
    【11.1】并发、并行、同步、异步、阻塞、非阻塞
    【10.10】进程间通信--Queue、Pipe、Manager
    set autotrace on 报cannot set autotrace 错误解决方法
    通配符获取文件
    日期函数
  • 原文地址:https://www.cnblogs.com/huanzei/p/4736205.html
Copyright © 2011-2022 走看看