ExtJs+SHH实现异步树节点搜索和查找
来源:互联网 发布:微星 主机 知乎 编辑:程序博客网 时间:2024/06/06 21:03
ExtJs+SHH实现异步树节点搜索和查找
摘要:在任何一个Tree树中,提供查找功能无疑会大大方便用户。不用睁大眼睛一级一级去展开,只要输入关键字,回车就能自动定位到节点,岂不快哉?。这样的用户体验是相当完美的。但在动态异步加载的Tree树中,客户端实现这样的功能就有点困难,因为节点是异步动态加载的。默认是没有全部从服务器端取回的,通常的做法是默认加载第一级,其他级的节点都是惰性按需加载的,用户点了才会展开。而对于这个没有完全加载的树,用户希望搜索节点,怎么实现?笨办法是先展开树的所有节点,然后再在树中搜索。这样的话在服务器数据量大的情况下会非常慢。这里的实现方法是在服务器端的Servlet中查找,通过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方法展开节点。
以下是具体实现:
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+SHH实现异步树节点搜索和查找
- extjs+s2sh实现异步Tree的节点搜索和查找下一个(FindNext)
- extjs实现全局搜索节点方法
- extjs异步加载树的子节点
- Extjs tree 实现父节点和子节点联动
- 二叉搜索树的节点插入,查找。
- 二叉树的建立、节点查找以及节点删除C和C++实现
- 二叉树的建立、节点查找以及节点删除C和C++实现
- 二叉查找树后继节点和前驱节点查找
- 二叉查找树后继节点和前驱节点查找
- 查找二叉搜索树中小于某个节点的最大值
- ExtJs树节点属性
- extjs 树节点操作
- 二叉搜索树节点删除 java实现
- ExtJS 异步加载树
- Extjs异步加载树
- 查找和编辑节点
- 找出二叉搜索树的最大节点和最小节点
- Java JVM(一):内存结构 和 相关内存参数
- mac 下安装wget 源码
- Yahoo(雅虎)宣布停止开发YUI
- Cocos2d-x3.2实现虚拟摇杆多点触摸
- Ubuntu 12.04 samba 配置
- ExtJs+SHH实现异步树节点搜索和查找
- Android近场通信---NFC基础(四)
- hdu 2037
- java读写文件大全
- IOS 中storyboard拼接方案
- Android 程序框架设计
- iOS8开发~Xcode6下载
- QT设置界面相关问题
- Android近场通信---NFC基础(五)