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