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="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来获取其全部子项。