2010.08.20——— jstree 异步加载
2010.08.20——— jstree 异步加载参考：http://junchao.iteye.com/blog/698823
http://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;}
页:
[1]