码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI Tree_box 配合后台

时间:2015-08-17 13:37:34      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:

 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="width: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=‘width:100%;height:100%‘ name="dataFrame"
 6                         src="/xx/xx/blank.html"></iframe>
 7             </div>
 8         </div>
 9     </div>
10     <div region="west" style="width: 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来获取其全部子项。

EasyUI Tree_box 配合后台

标签:

原文地址:http://www.cnblogs.com/huanzei/p/4736205.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!