ExtJS实现异步Tree的节点搜索

最新推荐文章于 2017-07-06 09:38:24 发布

iteye_3482

最新推荐文章于 2017-07-06 09:38:24 发布

阅读量669

点赞数

分类专栏： ExtJS 文章标签： extjs tree

本文链接：https://blog.csdn.net/iteye_3482/article/details/82325131

版权

本文介绍了在ExtJS中如何实现动态异步加载Tree的节点搜索功能，避免全量加载导致的性能问题。通过在服务器端查找匹配节点并返回路径，然后使用Ext.tree.TreePanel的expandPath方法在客户端展开并选中搜索结果节点。实现过程包括Ajax通信、服务器端查找节点路径以及客户端处理路径并展开节点。

摘要由CSDN通过智能技术生成

前言：在任何一个Tree树中，提供查找功能无疑会大大方便用户。不用睁大眼睛一级一级去展开，只要输入关键字，回车就能自动定位到节点，岂不快哉？这样的用户体验是相当完美的。但在动态异步加载的Tree树中，客户端实现这样的功能就有点困难，因为节点是异步动态加载的。默认是没有全部从服务器端取回的，通常的做法是默认加载第一级，其他级的节点都是惰性按需加载的，用户点了才会展开。而对于这个没有完全加载的树，用户希望搜索节点，怎么实现？笨办法是先展开树的所有节点，然后再在树中搜索。这样的话在服务器数据量大的情况下会非常慢。所以在数据量大的情况下，是不采取这种实现方式的，这里的实现方法是在服务器端的Servlet中查找，通过AJAX返回第一个匹配节点的路径Path，然后展开这个路径，选中这个搜索到节点。

效果图:

一、先展开树的所有节点，然后再在树中搜索

Ext.onReady(function() {
            Ext.QuickTips.init();
            Ext.BLANK_IMAGE_URL = "../../resources/images/default/s.gif";
            var mytree = new Ext.tree.TreePanel({
		region: 'center',
		title : "简单Extjs动态树",
                //el : "container",
                animate : true, //展开,收缩动画,false时,则没有动画效果    
                collapsible : true,
                enableDD : true,//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
                enableDrag : true,//仅仅drop 
                rootVisible : true,//false不显示根节点,默认为true 
                autoScroll : true,
                autoHeight : true,
                width : 150,
				//tbar:new Ext.Toolbar(),
				tbar:[' ',
					new Ext.form.TextField({
						width:150,
						emptyText:'快速检索',
						enableKeyEvents: true,
						listeners:{
							keyup:function(node, event) {
								findByKeyWordFiler(node, event);
							},
							scope: this
						}
					})
				],
				root:new Ext.tree.AsyncTreeNode({
					id:"root",  
                    text:"树的根",  
                    leaf:false, 
					//expanded:true,
					children: [{
						id: 'level',
						text: '用户类型',
						children: [{
							id: 'allLevel',
							text: '全部',
							leaf: true
						}, {
							id: 'noSupport',
							text: '无支持',
							leaf: true
						}, {
							id: 'month'