jquery ztree実装ドロップダウンツリーボックスはjsonデータに使用されます

会社の最近のプロジェクトは木のドロップダウンボックスを使う必要があり、ネット上で多くのソースコードを探して、最後にzTreeを採用して実現しました.コードの移植性が高く、データの取得が簡単だからです.くだらないことは言わないで、直接コードをつけます.
index.jsp

 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  <br><!-- 
  <br>var setting = { 
  <br>view: { 
  <br>dblClickExpand: false 
  <br>}, 
  <br>data: { 
  <br>simpleData: { 
  <br>enable: true 
  <br>} 
  <br>}, 
  <br>callback: { 
  <br>beforeClick: beforeClick, 
  <br>onClick: onClick 
  <br>} 
  <br>}; 
  <br> 
  <br>//json   ，        json   ，    json  ，     
  <br>//var strNodes = '${jsonList}'; 
  <br>//var zNodes = eval("("+strNodes+")"); // json      json    ，strNode    "（）"，       
  <br>var zNodes =[ 
  <br>{id:1, pId:0, name:"  "}, 
  <br>{id:2, pId:0, name:"  "}, 
  <br>{id:3, pId:0, name:"  "}, 
  <br>{id:6, pId:0, name:"  "}, 
  <br>{id:4, pId:0, name:"   ", open:true}, 
  <br>{id:41, pId:4, name:"   "}, 
  <br>{id:42, pId:4, name:"  "}, 
  <br>{id:43, pId:4, name:"  "}, 
  <br>{id:44, pId:4, name:"  "}, 
  <br>{id:5, pId:0, name:"   ", open:true}, 
  <br>{id:51, pId:5, name:"  "}, 
  <br>{id:52, pId:5, name:"  "}, 
  <br>{id:53, pId:5, name:"  "}, 
  <br>{id:54, pId:5, name:"  "}, 
  <br>{id:6, pId:0, name:"   ", open:true}, 
  <br>{id:61, pId:6, name:"  "}, 
  <br>{id:62, pId:6, name:"  "}, 
  <br>{id:63, pId:6, name:"  "}, 
  <br>{id:64, pId:6, name:"  "} 
  <br>]; 
  <br> 
  <br>function beforeClick(treeId, treeNode) { 
  <br>var check = (treeNode && !treeNode.isParent); 
  <br>if (!check) alert("      ..."); 
  <br>return check; 
  <br>} 
  <br> 
  <br>function onClick(e, treeId, treeNode) { 
  <br>var zTree = $.fn.zTree.getZTreeObj("treeDemo"), 
  <br>nodes = zTree.getSelectedNodes(), 
  <br>v = ""; 
  <br>nodes.sort(function compare(a,b){return a.id-b.id;}); 
  <br>for (var i=0, l=nodes.length; i<l; i++) { 
  <br>v += nodes[i].name + ","; 
  <br>} 
  <br>if (v.length > 0 ) v = v.substring(0, v.length-1); 
  <br>var cityObj = $("#citySel"); 
  <br>cityObj.attr("value", v); 
  <br>} 
  <br> 
  <br>function showMenu() { 
  <br>var cityObj = $("#citySel"); 
  <br>var cityOffset = $("#citySel").offset(); 
  <br>$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast"); 
  <br> 
  <br>$("body").bind("mousedown", onBodyDown); 
  <br>} 
  <br>function hideMenu() { 
  <br>$("#menuContent").fadeOut("fast"); 
  <br>$("body").unbind("mousedown", onBodyDown); 
  <br>} 
  <br>function onBodyDown(event) { 
  <br>if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) { 
  <br>hideMenu(); 
  <br>} 
  <br>} 
  <br> 
  <br>$(document).ready(function(){ 
  <br>$.fn.zTree.init($("#treeDemo"), setting, zNodes); 
  <br>}); 
  <br>//--> 
  <br> 
  
 
  
 
  
 
  
 
  
      ，   Ctrl   Cmd        
 
  
   ： 
  
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 

スプリングバックグラウンド
jsonデータクラス

 
  
public class EquipTypeJson { 
  
private String id; 
  
private String pId; 
  
private String name; 
  
 
  
public String getId() { 
  
return id; 
  
} 
  
public void setId(String id) { 
  
this.id = id; 
  
} 
  
public String getPId() { 
  
return pId; 
  
} 
  
public void setPId(String pId) { 
  
this.pId = pId; 
  
} 
  
public String getName() { 
  
return name; 
  
} 
  
public void setName(String name) { 
  
this.name = name; 
  
} 
  
 
  
 
  
} 
  
 
 

コントロールページ

 
  
public ModelAndView List(HttpServletRequest request, HttpServletResponse response,Product prod) throws Exception { 
  
Map map=new HashMap(); 
  
List list = testService.getAllEquipType();//          
  
JSONArray jsonArray = JSONArray.fromObject(list); // list    json   
  
String json = jsonArray.toString(); // json        
  
map.put("jsonList", json); 
  
return new ModelAndView("equip/List").addAllObjects(map); 
  
}