Ext的异步加载树

        项目需求：要实现一个上下级的关系的管理。而且是单击一个节点，则根据这个节点去加载对应的数据。
        解决思路：要实现一个有上下级的管理，自然而然的想到用树形结构去实现。用到了ext就会想到用ext的treePanel了。但是也考虑一个问题，是一次性加载所有的数据还是每次需要的时候加载呢？数据量大的话，前一种方式肯定不太行，如果每一次请求都取全部数据，对系统资源是一种浪费。所以，决定采用第二种方式，即异步加载tree。
        1、新建一个TreePanel，包含了一个loader和一个root节点。

var billConfigTree = new Ext.tree.TreePanel({

        	columnWidth:.33,
        	//columnHeight:.100,
        	height:600,
        	collapsible: true,
        	margins:'5 0 5 5',
        	cmargins:'5 5 5 5',
        	rootVisible:false,
        	lines:true,        		
        	autoScroll:true,
        	root: new Ext.tree.AsyncTreeNode({
        		id:'root',
        		text:'分组信息',
        		expanded :true
        	}),
        	collapseFirst:false,	
        	loader:new Ext.tree.TreeLoader({
        		dataUrl:'getNodeData.action'
        	})
		});

        2、然后我们再设置一个加载前的触发事件。

billConfigTree.on('beforeload',function(node){        
            billConfigTree.loader.dataUrl = 'getNodeData.action?nodeId='+node.id;
        });

        这样，我们就完成了一个异步加载的树形结构了。是不是很简单呢？呵呵。
         需要注意的一点是：上级节点和下级节点的id不能相同，否则会出现点击上级节点的“+”可以展开下级节点，但是如果点击“-”却不能收起下级节点的问题了。

评论

4 楼 henchong 2012-10-10  

我现在遇到个问题，treepanel 如何设置，加载页面的时候不加载树呢？
然后我点击按钮的时候再加载数据，也是异步加载的。

3 楼 八岭书生 2012-01-11  

如果我用节点名称来模糊查询来它的树  该怎么弄啊 

2 楼 laitaogood 2009-06-30  

引用

可是当你在收起节点后，在打开某个节点时，tree还会去访问后台代码，加载节点吗，感觉好像去的是浏览器上面的缓存哦

在树加载节点之前是需要访问后台获得数据的，所以这里就没有从缓存中取数据。

引用

节点前面的图标呈现好像有点问题，老是展示不出来，用右键点“显示图像”它就又出来了

这个可以通过设置页面缓存来做，只要第一次显示出了，貌似以后就都能显示了

呵呵，谢谢你的评论。

1 楼 flybird1985 2009-06-29  

首先，定一下，确实可以做到异步加载节点的效果。
可是当你在收起节点后，在打开某个节点时，tree还会去访问后台代码，加载节点吗，感觉好像去的是浏览器上面的缓存哦，这样就会造成和数据库中节点的定义严重不吻合的情况啊。怎么样才能在每次打开节点的时候，特别是在节点收起，然后再打开的时候，也强制让tree去访问后台代码，加载节点呀。
我还有一个情况，不知道你遇到过没有，就是在在网络部怎么稳定的情况下，节点前面的图标呈现好像有点问题，老是展示不出来，用右键点“显示图像”它就又出来了，但是操作一会，又出现了现实不出来的问题，我怀疑是不是还是缓存的问题啊！
希望能和你探讨一下啦，呵呵！