`

[Ext扩展]JsonTreeLoader:一次加载所有树节点更新1.1版本

    博客分类:
  • Ext
阅读更多
仿照官网例子:XmlTreeLoader做的,下面有实例
注意:html文件的库引用请自行解决
/**
 * 通过读取JSON串生成树的层次结构,务必保证json数组中结点出现次序与树完全展开时一致!
 * (通过后台对编码进行排序来完成)
 * JSON串根节点默认为'list'
 * 父结点id字段为
 * 
 * 注意:
 * 1.因为是一次加载全部结点,节点数过多的话将严重影响性能,此时请使用异步加载!
 * 2.结点的id属性对应json中code属性,结点text属性对应json中name属性。
 * 3.根节点的直接子节点的parentcode字段为null或者空字符串都可以
 * 
 * v1.1改动:
 * 1.不再需要leaf属性!一个结点是否为叶子结点将基于json中下一个结点是否为其子节点来判断!
 * 本特性将提高转变叶子节点为父节点的操作效率,此时你在界面上给一个叶子结点添加一个子节点
 * 不用再修改叶子结点在后台的leaf属性,你要做的只是保证返回json中的编码规范以及出现次序。
 * 2.如果你设置了leaf属性则此属性将被忽略
 * 
 * @author chemzqm@gmail.com
 * 
 */
Ext.ns('Ext.ux.tree');


Ext.ux.tree.JsonTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
    root: 'list',
    paramName: {
        parentcode: 'parentcode',
        id: 'code'
    },
    
    // private override
    processResponse: function(response, node, callback){
        var json = response.responseText;
        var array = Ext.decode(json)[this.root];     
        try {
            node.beginUpdate();
            node.appendChild(this.parseArray(array));
            node.endUpdate();
            
            if (typeof callback == "function") {
                callback(this, node);
            }
        } 
        catch (e) {
            this.handleFailure(response);
        }
    },
    
    // private
    parseArray: function(array){
        var pnodes = [];
        var nodes = [];
       	for (var i = 0; i < array.length; i++) {
			var o =  array[i];//判断是否叶子结点
			if(array[i+1]&&array[i+1][this.paramName.parentcode]==o[this.paramName.id]){
				o.leaf = false;
			}else{
				o.leaf = true;
			}
			var treeNode = this.createNode(o);
			if (!o[this.paramName.parentcode]) {
				nodes.push(treeNode);
			}
			else {
				for (var j = pnodes.length - 1; j >= 0; j--) {
					if (pnodes[j].id == o[this.paramName.parentcode]) {
						pnodes[j].appendChild(treeNode);
						break;
					}
				}
			}
			if (!treeNode.leaf) {
				pnodes.push(treeNode);
			}
			
		}
        return nodes;
    },
    // private override node的id是json里面的code字段
    createNode: function(o){	
        var attr = {
            id: o.code,
            text: o.name
        };
        Ext.applyIf(attr, o);
        attr.loaded = true;
        
        this.processAttributes(attr);
        
        return Ext.ux.tree.JsonTreeLoader.superclass.createNode.call(this, attr);
    },
    
    /*
     * Template method intended to be overridden by subclasses that need to provide
     * custom attribute processing prior to the creation of each TreeNode.  This method
     * will be passed a config object containing existing TreeNode attribute name/value
     * pairs which can be modified as needed directly (no need to return the object).
     */
    processAttributes: Ext.emptyFn
});

//backwards compat
Ext.ux.JsonTreeLoader = Ext.ux.tree.JsonTreeLoader;

分享到:
评论
7 楼 chemzqm 2010-05-12  
joehe 写道
这样设计是不好的,不要把数据组织放到服务端

这个要看情况吧,如果是死的层次结构我把层次信息存在数据库敢问有合不妥?
6 楼 joehe 2010-05-12  
这样设计是不好的,不要把数据组织放到服务端
5 楼 chemzqm 2010-04-29  
air831 写道
我知道问题的原因了,
       "url": "Main.ASPX/Login/",
      "name": "管理信息系统",
      "code": "0",
      "leaf": false,
      "parentcode": "-1"   --------------根节点的parentcode必须要等于" "

在firefox中显示正常,但是在IE中无法加载,查了下,说是因为“Ext.tree.TreePanel 在IE下不正常加载”
需要加上监听,有其他什么好办法吗?
      listeners: {
              "loadexception": function(loader, node, response) {
                node.loaded = false;
                node.reload.defer(10, node); //不停的加载,直到true
              }
            }




我在ie6下测试了你的代码,没有发现任何问题啊,用不着加什么监听事件,出现loadexception可能是你在哪儿重复加载数据了吧
4 楼 air831 2010-04-29  
我知道问题的原因了,
       "url": "Main.ASPX/Login/",
      "name": "管理信息系统",
      "code": "0",
      "leaf": false,
      "parentcode": "-1"   --------------根节点的parentcode必须要等于" "

在firefox中显示正常,但是在IE中无法加载,查了下,说是因为“Ext.tree.TreePanel 在IE下不正常加载”
需要加上监听,有其他什么好办法吗?
      listeners: {
              "loadexception": function(loader, node, response) {
                node.loaded = false;
                node.reload.defer(10, node); //不停的加载,直到true
              }
            }



3 楼 air831 2010-04-29  
这次我配置了WEB环境,数据库返回的Json为以下格式,但是还是无法显示树
返回的Json
{
  "menu": [
    {
      "url": "Main.ASPX/Login/",
      "name": "管理信息系统",
      "code": "0",
      "leaf": false,
      "parentcode": "-1"
    },
    {
      "url": "Task.ASPX/Index",
      "name": "任务查询",
      "code": "1",
      "leaf": true,
      "parentcode": "0"
    },
    {
      "url": "BaseInfo.ASPX/Index",
      "name": "基础资料",
      "code": "2",
      "leaf": true,
      "parentcode": "0"
    }
  ]
}

生成树JS
        var menu = new Ext.tree.TreePanel({
          title: '功能菜单',
          region: "west",
          autoScroll: true,
          enableTabScroll: true,
          collapsible: true,
          collapsed: false,
          split: true,
          rootVisible: false,
          loader: new Ext.ux.tree.JsonTreeLoader({//这里配下就行了
            root: 'menu',
            dataUrl: contextpath + 'Main.ASPX/GetMenuTree'
          }),
          root: new Ext.tree.AsyncTreeNode()
        });
2 楼 chemzqm 2010-04-26  
air831 写道
请问,测试过吗?
为什么我下载例子后树无法显示出来?

当然,这里的树采用异步方式加载,直接用浏览器打开文件是无法向后端发起请求的,你需要配置一个web环境(譬如tomcat、IIS、jetty等)再通过url方式访问
1 楼 air831 2010-04-23  
请问,测试过吗?
为什么我下载例子后树无法显示出来?

相关推荐

    利用Ext来实现的静态树(一次加载所有节点的树)

    利用Ext实现静态树(一次加载所有节点的树) 在今天的IT行业中,树形结构是一种非常常见的数据结构,尤其是在Web应用程序中。在这种情况下,我们通常会遇到一个问题,即如何将树形结构的数据加载到前台,以便用户...

    ext 异步加载树完整版

    在这个场景下,"异步加载树"是指树形组件(Tree Panel)不一次性加载所有节点,而是根据用户滚动或展开节点时按需加载数据,从而提高页面性能。 EXT JS的Tree Panel允许开发者配置异步加载数据源,通常通过Ajax请求...

    Ext1.1中文文档

    ExtJS是一种基于JavaScript的UI库,它为Web...总之,"Ext1.1中文文档"对于想要学习和使用ExtJS的开发者来说是一份宝贵的资料,虽然可能在阅读上存在一定的挑战,但通过努力,可以全面掌握这一强大的JavaScript UI库。

    Ext的gridpanel控件二次加载问题

    然而,在实际应用中,可能会遇到一个常见的问题:当GridPanel需要进行第二次加载时,数据或者功能可能会丢失。这个问题主要源于GridPanel的生命周期管理和内存管理机制。为了解决这个问题,我们需要深入理解Ext JS的...

    ext扩展 延时加载

    在IT行业中,"ext扩展 延时加载"是一个关于前端开发的重要概念,特别是对于使用Ext JS框架的应用程序。Ext JS是一个强大的JavaScript库,用于构建数据驱动的富客户端应用程序。延时加载(Lazy Loading)是一种优化...

    Ext+json+jsp动态加载树

    4. **动态加载(Lazy Loading)**:动态加载是一种优化策略,只在需要时加载数据,而不是一次性加载所有数据。在树结构中,这通常意味着当用户展开一个节点时,才请求并加载其子节点。这减少了初始页面加载时间,...

    Ext TreePanel Checked Ext复选框树

    在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...

    ext1.1 api(chm_en)

    这份API文档是开发者理解和掌握EXT1.1版本核心功能的关键工具。 首先,EXT1.1 API文档详细阐述了EXT库中的各个类和方法,涵盖了从基础组件到高级组件的完整体系。开发者可以通过查阅文档了解如何创建窗口(Windows...

    ext生成树节点带链接

    这里定义了一个`TreePanel`,它使用`AsyncTreeNode`作为根节点,并配置了异步加载器(`TreeLoader`),该加载器指向了一个XML文件,该文件包含了树形菜单的具体数据。 #### 4. 添加链接及事件处理 为了让树形菜单中...

    ext树 无限级 json 数据格式 动态加载

    这样的结构在处理大型数据集时尤为有用,因为一次性加载所有数据可能会导致页面加载缓慢。 JSON是JavaScript Object Notation的缩写,是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在...

    Ext.tree.TreeLoader附带封装的json类

    `Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,非常适合于在服务器和客户端之间传输数据。我们将通过实例...

    EXT 布局 tab布局 普通拖拽 异步加载的树 节点可以编辑的树

    即:Ext.window 4.mainPage.html为tab布局,右面为tree中间为tab页面。 5.tz-normal-test.html为普通拖拽的练习。 6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-...

    ext 动态加载的树源码

    这种机制对于大型数据集尤其有用,因为它避免了一次性加载所有数据导致的性能问题。 源码中可能包括以下几个关键部分: 1. **TreePanel配置**:首先,我们需要创建一个`TreePanel`实例,设置其配置项,如`...

    Ext 异步加载添加 删除节点 修改combobox选择项

    在Ext JS中,异步加载是一种常见的数据处理方式,尤其在构建动态的用户界面时非常有用。本篇文章主要探讨了如何在异步加载的场景下,实现树形控件(TreePanel)中节点的动态添加、删除以及ComboBox选择项的修改。 ...

    Ext.net1.1

    Ext.NET 1.1 是一个基于.NET Framework的JavaScript库,专为开发人员提供构建富互联网应用程序(RIA)的工具。这个版本的更新主要是为了增强其对Internet Explorer 9的兼容性,同时也引入了新的Coolite功能,使得...

    ext 下拉树 ext2

    在大型应用中,这种特性尤为重要,因为它可以提高页面的加载速度,只在用户需要时才加载相关的树节点数据,而不是一次性加载所有数据。这种异步加载通常通过Ajax请求实现,能显著减少初始页面的加载时间,并且优化...

    Ext树创建说明.rar

    一个Ext树由节点(Nodes)构成,这些节点可以是叶子节点(没有子节点)或父节点(有子节点)。每个节点都有唯一的标识符,并可以携带额外的数据。节点间的关系通过层级关系建立,形成了树状结构。 创建Ext树的第一...

    EXT+S2SH整合动态加载树的列子

    这种动态加载功能对于处理大量数据或层次结构复杂的数据集非常有用,因为它可以避免一次性加载所有数据导致页面响应变慢的问题。用户可以逐级展开节点,只加载当前需要显示的数据,从而提高用户体验。 树形结构的...

    ext1.1帮助文档

    "ext1.1帮助文档"是针对一个名为"ext1.1"的软件或库的官方指导材料,它提供详尽的信息,帮助用户理解和使用这个技术。EXT在这里可能指的是一个JavaScript框架,如Ext JS,这是一个广泛用于构建富互联网应用程序(RIA...

    简单的EXT加载数据的例子

    本示例将详细介绍如何在EXT中加载数据,特别是通过EXT的Treepanel来呈现一个生成的树形结构。 首先,我们要理解EXT Treepanel。Treepanel是EXT中用于展示层次结构数据的组件,它可以用于创建多级目录、组织结构图等...

Global site tag (gtag.js) - Google Analytics