前言：在任何一个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',
text: '包月',
leaf: true
}, {
id: 'year',
text: '包年',
leaf: true
}, {
id: 'always',
text: '终身',
leaf: true
}]
}, {
id: 'outOfDate',
text: '是否过期',
children: [{
id: 'allOutOfDate',
text: '全部',
leaf: true
}, {
id: 'notOutOfDate',
text: '未过期',
leaf: true
}, {
id: 'alreadyOutOfDate',
text: '已过期',
leaf: true
}]
}, {
id: 'report',
text: '统计图表',
children: [{
id: 'levelReport',
text: '按用户类型',
leaf: true
}, {
id: 'outOfDateReport',
text: '按是否过期',
leaf: true
}]
}]
}),
lines : true//节点间的虚线条
});
//mytree.expandAll();
//mytree.render();
/*
var filterTreeFiled = new Ext.form.TextField({
width:150,
emptyText:'快速检索',
enableKeyEvents: true
});
var tbar = mytree.getTopToolbar();
tbar.add(filterTreeFiled);
tbar.doLayout();*/
var timeOutId = null;
var treeFilter = new Ext.tree.TreeFilter(mytree, {
clearBlank : true,
autoClear : true
});
// 保存上次隐藏的空节点
var hiddenPkgs = [];
var findByKeyWordFiler = function(node, event) {
clearTimeout(timeOutId);// 清除timeOutId
mytree.expandAll();// 展开树节点
// 为了避免重复的访问后台，给服务器造成的压力，采用timeOutId进行控制，如果采用treeFilter也可以造成重复的keyup
timeOutId = setTimeout(function() {
// 获取输入框的值
var text = node.getValue();
// 根据输入制作一个正则表达式，'i'代表不区分大小写
var re = new RegExp(Ext.escapeRe(text), 'i');
// 先要显示上次隐藏掉的节点
Ext.each(hiddenPkgs, function(n) {
n.ui.show();
});
hiddenPkgs = [];
if (text != "") {
treeFilter.filterBy(function(n) {
// 只过滤叶子节点，这样省去枝干被过滤的时候，底下的叶子都无法显示
return !n.isLeaf() || re.test(n.text);
});
// 如果这个节点不是叶子，而且下面没有子节点，就应该隐藏掉
mytree.root.cascade(function(n) {
if(n.id!='0'){
if(!n.isLeaf() &&judge(n,re)==false&& !re.test(n.text)){
hiddenPkgs.push(n);
n.ui.hide();
}
}
});
} else {
treeFilter.clear();
return;
}
}, 500);
}
// 过滤不匹配的非叶子节点或者是叶子节点
var judge =function(n,re){
var str=false;
n.cascade(function(n1){
if(n1.isLeaf()){
if(re.test(n1.text)){ str=true;return; }
} else {
if(re.test(n1.text)){ str=true;return; }
}
});
return str;
};
// 给输入框绑定keyup事件,需要加上enableKeyEvents:true才能让extjs的textfield代理鼠标事件
//filterTreeFiled.on("keyup", function(node, event) {
//findByKeyWordFiler(node, event);
//});
var eventPanel = new Ext.Panel({
width : 680,
height : 350,
renderTo : 'container',
layout: 'border',
items:[mytree]
});
});
注意ext-base.js和ext-all.js的引用顺序
，具体的可以查看INCLUDE_ORDER.txt
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="treenode.js"></script>
<body>
<div id="container"></div>
</body>
二、
通过AJAX返回第一个匹配节点的路径Path，然后展开这个路径，选中这个搜索到节点
要实现此功能需解决三个问题：
1. 通过Ajax将节点id或text传回服务器。
2. 在服务器端查找到节点path，path由节点id号和“/”构成。注意path的格式，如：'/0/4/7'。此处0表示根节点id，7表示被查找的节点id。
3. 将path传回客服端，Extjs将通过Ext.tree.TreePanel
的expandPath
方法展开节点。
在ExtJS中，AsyncTreeNode是异步节点，TreeLoader实现对树结点的异步加载，即使服务器取到大量的数据，也没有问题，异步加载能保证性能和节点的按需加载。服务端需要生成指定格式的Json字符串。
var eventTree = new Ext.tree.TreePanel({
region: 'center',
collapsible: false,
title: '导航',
xtype: 'treepanel',
id:'event-west-tree',
width: 180,
animate:false, //展开,收缩动画
autoScroll: true,
enableDD:true,
split: true,
loader: new Ext.tree.TreeLoader({
dataUrl:'ruleGroupTree.do?json=1'
}),
root: new Ext.tree.AsyncTreeNode({
text: '分类规则组',
draggable:false,
//expanded:true, //默认展开第一级
id:'0'
}),
tbar:[{
iconCls: 'icon-expand-all',
tooltip: '展开',
handler: function(){ eventTree.expandAll(); },
scope: this
}, '-', {
iconCls: 'icon-collapse-all',
tooltip: '收缩',
handler: function(){ eventTree.collapseAll(); },
scope: this
}, new Ext.form.TextField({
width: 115,
emptyText:'快速检索',
enableKeyEvents: true,//给输入框绑定keyup事件,需要加上enableKeyEvents:true才能让extjs的textfield代理鼠标事件
listeners:{
keyup:function(node, event) {
findByKeyWordFiler(node, event);
},
scope: this
}
})]
});
eventTree.expandAll();
var filterTreeFiled = new Ext.form.TextField({
width:115,
emptyText:'快速检索',
enableKeyEvents: true
});
var tbar = eventTree.getTopToolbar();
tbar.add(filterTreeFiled);
tbar.doLayout();
var selectNode = function(node) {
node.ensureVisible();
node.select();
node.fireEvent('click', node);
}
function onExpandPathComplete(bSuccess, oLastNode) {
if (!bSuccess)
return;
// focus 节点，并选中节点！
selectNode(oLastNode);
}
var findByKeyWordPath = function(node, event) {
clearTimeout(timeOutId);
timeOutId = setTimeout(function() {
var text = node.getValue().trim();
// 采用ajax获得需要展开的路径
if (text != "") {
Ext.Ajax.request({
params : {
keyWord : text
},
url : 'ruleGroupTree.do?json=1',
method : 'POST',
async : false,
success : function(response, opts) {
var obj = Ext.decode(response.responseText);
eventTree.expandPath('/0/101/10101','id',onExpandPathComplete);
eventTree.expandPath('/0/101/10101', 'id', function(bSucess,oLastNode){
eventTree.getSelectionModel().select(oLastNode);
});
if(obj.success){
var length = obj.length;
eventTree.root.reload();
//eventTree.expandAll();
for (var i = 0; i < length; i++) {
var path = obj[i].path;
eventTree.expandPath('/0/101/275','id',onExpandPathComplete);
}
},
failure : function(response, opts) {
Ext.Msg.alert("错误提示", "请求失败,请与开发人员联系。").setIcon(Ext.MessageBox.ERROR);
}
});
} else {
}
}, 500);
}
filterTreeFiled.on("keyup", function(node, event) {
findByKeyWordPath(node, event);
});
以下是具体实现：
1. servlet端要实现的功能就是封装path，将path发送到客服端即可，格式如上。代码省略。
2. 客户端代码：
// 查找树节点
searchNode : function() {
var searchForm = Ext.getCmp("searchForm").getForm();
var param = searchForm.getValues();
if(searchForm.isValid()){
Ext.Ajax.request({
url: 'dept!search.action',
params:{formData:Ext.encode(param)},
success:function(response){
var o = Ext.decode(response.responseText);
if(o.success){
var tree = Ext.getCmp('sysOrgs');
path=o.message;
tree.expandPath(path, 'id', this.onExpandPathComplete
);
}
},
failure:function(response){
},
scope:this
});
}
},
onExpandPathComplete:
function(bSuccess, oLastNode) {
if(!bSuccess)
return;
//focus 节点，并选中节点！，以下代码不可少
oLastNode.ensureVisible();
oLastNode.select();
oLastNode.fireEvent('click', oLastNode);
}
关于tree.expandPath方法的使用具体参照API文档。
分享到：
相关推荐
异步加载树型是 ExtJS Tree 的一个重要特性，允许只在需要时动态加载子节点，从而提高页面的加载速度和用户体验。 异步加载通常通过 AJAX 请求实现，只有当用户展开一个节点时，才会向服务器请求该节点的子节点数据...
ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件，它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景，比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...
在ExtJS 3中，实现异步下拉树涉及到几个关键概念和技术。 首先，理解“异步”意味着数据不是一次性加载完毕，而是按需加载。在下拉树中，当用户展开树节点时，只加载该节点及其子节点的数据，这减少了初始页面加载...
ExtJS的Tree组件还提供了一系列事件，如`beforeitemexpand`、`itemexpand`、`itemcollapse`等，这些事件可以在节点展开或收起时触发，允许你在这些时刻执行自定义代码，增加更多功能或进行状态管理。 ### 样式与...
"ExtJs_TreeDemo"是一个示例，展示了如何在ExtJs中实现树形菜单的功能。 在ExtJs中，树形菜单（Tree）是通过`Ext.tree.Panel`类来创建的。这个类提供了丰富的配置选项和事件处理机制，使得开发者可以定制各种交互...
ExtJS AJAX Tree是一种基于JavaScript的动态树形结构，它利用AJAX技术来异步加载节点数据，无需在服务器端生成完整的树结构。这种方式可以显著提高页面加载速度，尤其是在处理大量数据时。ExtJS是一个功能丰富的...
这个"extjs-tree.zip"文件包含了使用Java编写的ExtJS异步树形控件的示例代码，旨在帮助开发者快速理解和应用这一功能。ExtJS是Sencha公司开发的一个前端框架，广泛应用于构建富互联网应用程序（RIA）。 在ExtJS中，...
本文将深入探讨如何使用ExtJS构建动态异步加载的树形结构，结合AJAX技术实现JSON数据的高效传输。 首先，我们要理解什么是动态异步加载。在传统的网页开发中，如果一次性加载所有数据，可能会导致页面加载速度慢，...
ExtJS Tree是基于ExtJS框架实现的一种数据结构展示方式，它主要用于展示层级关系的数据，例如组织结构、文件系统等。ExtJS是一个强大的JavaScript库，专为构建富客户端Web应用程序而设计，提供了丰富的组件化功能和...
在ExtJS Tree中实现动态加载，主要涉及以下几个关键概念： 1. **TreeStore**: TreeStore是ExtJS Tree的数据源，负责管理树节点的数据。它可以配置为从服务器异步获取数据，通过`proxy`配置项来指定数据源类型，通常...
ExtJS的Tree组件是Sencha ExtJS框架中的一个重要部分，用于构建可交互的树形结构数据展示。在ExtJS中，TreePanel是用来显示和操作树形数据的主要组件，它可以用于组织层次化的信息，如文件系统、组织架构或者分类...
在ExtJS中，这种功能主要通过`Ext.tree.TreePanel`或其现代版本`Ext.tree.View`来实现。 一、ExtJS 动态树基础 1. `Ext.tree.TreePanel`：这是ExtJS中用于创建树形结构的主要组件。它具有丰富的配置项和事件，支持...
ExtJS Tree + JSON + Struts2 示例源代码是结合了三种技术来实现一个动态的、交互式的树形数据展示的应用。这个示例中，ExtJS用于前端UI的构建，JSON作为数据交换格式，而Struts2则作为后端MVC框架处理请求和返回...
- **异步加载**：通过`Ext.tree.TreeLoader`实现数据的异步加载，其中`dataUrl`指定了获取数据的URL路径。 - **根节点配置**：通过`root`属性指定树的根节点，该节点可配置自己的`text`、`iconCls`和`id`等属性。 #...
在Ext Js 2中，实现异步树的关键是使用`TreeLoader`对象。这个对象负责与服务器进行通信，获取并解析JSON数据。JSON数据通常包含节点的ID、文本、子节点数组等信息。例如，一个简单的JSON节点数据可能如下所示： ``...
ExtJS Tree 示例是一种基于ExtJS库实现的交互式树形组件，它允许用户在Web应用程序中展示层次结构数据。在本示例中，我们将探讨如何使用ExtJS来创建、访问和操作一个树形结构，特别是在数据库操作方面，如添加和删除...
7. **异步加载**：对于拥有大量子节点的树，EXTJS支持延迟加载或按需加载。只有当用户展开父节点时，才会请求并加载其子节点，这样可以显著提高性能。 8. **搜索性能优化**：在处理大量数据时，可以考虑对树进行...
在3.2.0版本中，TreePanel支持异步加载，可以通过Ajax请求获取节点数据，实现动态加载，提高页面性能。 2. **ASP.NET**：这是一种微软提供的服务器端编程平台，用于构建动态Web应用程序。在这个项目中，ASP.NET可能...
6. **优化用户体验**: 为了提高用户体验，可以添加异步加载节点的特性，即当用户展开节点时才加载其子节点，这可以通过设置TreeLoader的`async`属性和`loadChildren`方法实现。 总结来说，"Extjs chekboxtree ...
ExtJS Tree 是一个功能强大的JavaScript组件，用于在Web应用程序中创建和展示层次结构的数据，它在ExtJS框架中扮演着重要角色。这个压缩包“extjs tree 学习资料”显然是为那些希望深入理解并掌握ExtJS Tree组件的...