遇到的问题
在使用Ext树形组件的时候,下层节点的刷新,总是需要下层节点全部搜索然后再展开,如果需要实时的从后台获取数据,改变某些节点的text或者icon时,就显得不够优雅了。
解决方案
负责树形组件TreePanle的TreeLoader是负责获取数据的,集成该类,然后在除第一次刷新之后的加载,将获取后的数据(比如节点的text、icon)更改到现有节点上,就可以很好的完成不收缩刷新
代码
/****************************************************
* goal:为了让树的节点内容更新(目前包括text iconCls)
* 而不让树形下层节点收缩带来的更好的用户体验
* disadvantage:不能增删节点
* createDate: 2009.09.24
* author: LXL
*****************************************************/
Ext.namespace('SMN.ux.TreeLoader');
SMN.ux.TreeLoader = function(config) {
config = config || {};
SMN.ux.TreeLoader.prototype.processResponse = function(response, node, callback){
var json = response.responseText;
try {
var o = response.responseData || Ext.util.JSON.decode(json);
node.beginUpdate();
var responseNodes = o;
var treeNodes = node.childNodes;
if (treeNodes.length == 0) {
// 第一次加载
for(var i = 0, len = responseNodes.length; i < len; i++){
var n = this.createNode(responseNodes[i]);
if(n){
node.appendChild(n);
}
}
} else {
// 以后加载
for (var i = 0; i < treeNodes.length; i++) {
var treeNode = treeNodes[i];
for (var j = 0; j < responseNodes.length; j++) {
var responseNode = responseNodes[j];
if (treeNode.attributes.id == responseNode.id) {
// 同一个节点
// 更新text
treeNode.setText(responseNode.text);
// 更新iconCls
treeNode.getUI().getIconEl().className = 'x-tree-node-icon' + ' ' + responseNode.iconCls;
}
}
}
}
node.endUpdate();
if(typeof callback == "function"){
callback(this, node);
}
}catch(e){
this.handleFailure(response);
}
};
SMN.ux.TreeLoader.prototype.load = function(node, callback){
// Ext.log('into Ext.ux.TreeLoader.prototype.load');
if(this.doPreload(node)){ // preloaded json children
if(typeof callback == "function"){
callback();
}
}else if(this.dataUrl||this.url){
this.requestData(node, callback);
}
};
SMN.ux.TreeLoader.superclass.constructor.call(this, config);
}
Ext.extend(SMN.ux.TreeLoader, Ext.tree.TreeLoader);
缺点和解决方案
当TreeLoader从后台获取的下层节点不再是目前的节点数量时,比如多了一个孩子节点或者少了一个孩子节点,以上代码是不能完成该功能的,所以可以增加if分支,从后台获取数据后,先比较下层孩子节点数据,遍历节点ID,将需要删除的孩子节点删除,多出来的孩子节点增加上,其他的更新text和icon。
注:本博客文章均已注明原创和转载,如转载本博客文章,需注明原文出处或征求原作者同意。
分享到:
相关推荐
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
可实现选中父节点,自动选中子节点,选中子节点,自动遍历选中父节点
主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 ...11. 树形的拖放 12. 判断拖放目标 13. 树之间的拖放 14. 过滤器 15. 对树进行排序 16. 对树增加复选框 代码中有详尽的注释。
TreePanel的checkbox节点操作及父子节点联动的演示DEMO,前面那个有Bug,选中子节点时,没能选择父节点。 这个版本修正了
获取Extjs中的TreePanel中所有的被checked的叶子节点的id
TreePanel的checkbox节点操作及父子节点联动的演示DEMO
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219418
引用ExtJS5.0 实现一个树形菜单的后台管理demo
直接可以用的tree,使用JSON。 界面没关 操作方便
该代码中提供了TreePanel树形菜单的生成代码!而且可以很方便的添加一个右键弹出菜单!(添加一个contextmenu)希望大家多多交流!
treepanel 和 tabpanel 合在一起使用,可直接使用
向各位推荐一下用Coolite来部局,用后台数据库数据绑定到TreePanel上,当点不同的节点,在TabPanel上添加一个Tab。并显示要显示的网页。
extjs 如图,实现带有复选框的树,选中父节点时,选中所有子节点。取消所有子节点时,才能取消根节点。 代码如下: var Fpanel = new Ext.tree.TreePanel({ id:’ptree’, region:’west’, layout:’anchor’, border...
关于TreePanel的一些文档,有点杂,不过内容比较多
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
基于extjs 3.2,右侧折叠面板,然后面板里面包含了树,点击树节点以后,会把树的href里面的地址加载到右边的tabpanel。代码清晰简单。
NULL 博文链接:https://yjzagan2003.iteye.com/blog/1110742
NULL 博文链接:https://wangtata.iteye.com/blog/678536
TreePanel的各项属性能帮助我们动态加载extjs tree