2010.8.20———jstree非同期荷重

2010.8.20———jstree非同期荷重
参考:
http://junchao.iteye.com/blog/698823
      h
ttp://blog.csdn.net/am20100204/archive/2010/07/07/5719623.aspx
目標：ルートノードを完全にロードしないで、データを少しロードして、大きなデータ量のロード速度が遅すぎないようにします。
用品：jstee 0.99とjquery-1.3.2.js
注意:
0.99 aはjquery-1.3.2.jsをjsライブラリとして構築し、後者1.0はjquery-1.4.2.jsを基礎として構築する。
準備:
jsonデータフォーマット:

[

  {

      \"attributes\" : { \"id\" : \"1\" },

      \"data\" : {\"title\" : \"  1\",\"attributes\" : { \"href\" :   \"http://jstree.com\" }} ,

      \"state\": \"closed\"

  }

  ,              

  {

      \"attributes\" : { \"id\" : \"2\" },

      \"data\" : {\"title\" : \"  2\",\"attributes\" : { \"href\" : \"http://2jstree.com\" }},

      \"state\": \"closed\"

  }

]

注:
最初のatributesは、ノードのための属性IDを追加し、このIDは、フロントから伝達され、このidノードのサブノードを取るために、複数のパラメータであってもいいです。複数のパラメータの場合は、修正前に必要です。
台のbefordataの方法
たとえば:

beforedata : function(node,tree_obj){  
                        return {id : $(node).attr("id") || 0,rel : $(node).attr("rel")};//          
}

第二のdataはノードデータ情報である。
三つ目のstateがclosedの時にフロントのノードの状態を表します。
ノード状態がクローズの場合のみ、ノードをクリックして非同期フィードバックをトリガし、stateがオープンの場合はフロントノードの状態を表します。
開くためにクリックしても、非同期ではないです。
方法:
jsp:

<script src="${pageContext.request.contextPath}/js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jstree/jquery.tree.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
	$.ajaxSetup({cache:false});//ajax       
	// 
	$("#menuTree").tree({
			ui : {             
				theme_name : "classic"        
			},
	        data : {
	          type : "json",
	          async : true,
	          opts : {
	          	method: "POST",
	           	url : "RGNCDTree.action"
	          }
	       	},
	       	types :{  
		        "default" : {  
		        	draggable : false //          
		        }  
	        },
	        callback : {
			
	        	//beforedata   id                
			// node：   tree_obj：tree  
	        	beforedata : function(node,tree_obj){  
                        return {id : $(node).attr("id") || 0,flat : $(node).attr("flat")};//          
                },
                //                     
                onselect : function(node,tree_obj){
                	if($(node).attr("flat")=="gongcheng"){
                		window.open("http://www.baidu.com");
                	}
                }
		    }  
	      });
});

</script>

java

/**
	 *            
	 * @author 
	 *
	 * @param name
	 * @param id
	 * @return
	 */
	private Map makeTree(String name,String id,String flat){
		Map map = new HashMap();
		map.put("data", name);
		map.put("state", "closed");

		Map tempMap = new HashMap();
		tempMap.put("id", id);
		tempMap.put("flat",flat);
		map.put("attributes", tempMap);
		return map;
	}

これはJsonデータを生成するために使います。

/**
	 *        
	 * @author 
	 *
	 * @return
	 * @throws IOException 
	 */
	public String RGNCDTree() throws IOException{
		HttpServletRequest request = ServletActionContext.getRequest();
		String id = request.getParameter("id");
		String flat = request.getParameter("flat");
		System.out.println(id+" "+flat);
		List jsonArray = new ArrayList();
		
		if(id.equals("0")){//               
			List<GC_RGNCD> list = this.GC_RGNCDService.getAll();
			for(GC_RGNCD rgncd : list){
				Map map = makeTree(rgncd.getRGNNM(),rgncd.getRGNCD(),"diqu");
				jsonArray.add(map);
			}
		}else if(flat.equals("diqu")){//              
			List<GC_GCXX2> list = this.GC_GCXX2Service.getByRGNCD_GCXZ(id, "");
			for(GC_GCXX2 gcxx : list){
				Map map = this.makeTree(gcxx.getXMMC(), gcxx.getGCBM(),"gongcheng");
				jsonArray.add(map);
			}
		}
		JSONArray json = JSONArray.fromObject(jsonArray);
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		log.info(json.toString());
		out.print(json.toString());
		return NONE;
	}