2010.08.20——— jstree 异步加载

2010.08.20——— jstree 异步加载

参考： http://junchao.iteye.com/blog/698823
      h ttp://blog.csdn.net/am20100204/archive/2010/07/07/5719623.aspx

目标：不完全加载 点击根节点，加载一点数据 避免大数据量加载 速度过慢

用品：jstree0.99和jquery-1.3.2.js

注意： 0.99a以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\"

  }

]

注：
第一个attributes是为节点添加个属性id，这个id可以从前台传过来，用于取该id节点的子节点，可以为多个参数，多个参数时 需要修改前

台的befordata方法
例如：

beforedata : function(node,tree_obj){  
                        return {id : $(node).attr("id") || 0,rel : $(node).attr("rel")};//进行以异步传参   
}

第二个data是节点数据信息；
第三个state为closed时表示前台该节点状态为关闭，也 只有节点状态为关闭时点击节点会触发异步回传、当state为open时表示前台节点状态

为打开，点击时并不会异步回传。

方法：

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;
	}