ExtJS Tree载入自定义数据

最新推荐文章于 2018-08-21 19:42:11 发布

最新推荐文章于 2018-08-21 19:42:11 发布 · 157 阅读

文章标签：

#EXT #J#

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一种使用ExtJS在前端构建树形结构的方法，通过递归地解析和组织数据来形成树状结构，并提供了具体的代码实现。

回答问题:http://www.iteye.com/problems/20463

一般情况下最好是能在后台组装好格式再传递给前台展示.

但是如果基于某些设计上的原因或者是后台不可控的情况下,

可以在前台转换,

方法有很多种,一种是在前台遍历数据,构造出符合tree的数据.

还有一种是直接遍历添加到Tree,如下:

Ext.onReady(function(){  
  Ext.BLANK_IMAGE_URL = '/images/s.gif';  
  Ext.QuickTips.init();  
  testTreeCustomData();  
});  
  
function testTreeCustomData(){
  //如下数据,要求是对于unit_path为11或12的是1的子节点，111、112为11的子节点，121、122为12的子节点，以此类推。 
  var dataArr = [  
    {unit_path:1,text:1},  
    {unit_path:11,text:11},  
    {unit_path:12,text:12},  
    {unit_path:111,text:111},  
    {unit_path:121,text:121},  
    {unit_path:112,text:112},  
    {unit_path:122,text:122}  
    //,{unit_path:222,text:'xx'}  
    //,{unit_path:132,text:'xx'}  
  ];  
    
  var tree = new Ext.tree.TreePanel({  
    useArrows: true,  
    autoScroll: true,  
    animate: true,  
    collapsible:true,  
    containerScroll: true,  
    frame:true,  
    width:200,  
    height:400,  
    renderTo:document.body,  
    autoHeight:true,  
    //rootVisible:false,  
    root:new Ext.tree.TreeNode({  
      //id:'root',  
      text: '根节点',  
      expanded:true,  
      draggable: false  
    }),  
    loadCustomData:function(dataArr){  
      for(var i=0;i<dataArr.length;i++){  
        var obj=dataArr[i];  
        var path=obj.unit_path.toString();  
        var parentNode=null;  
        var node = new Ext.tree.TreeNode({  
          //id: path,  
          text: obj.text,  
          //自定义属性,可以在后文通过node.attributes.unit_path读取
          unit_path: path,  
          qtip:'',  
          draggable: false  
        });  
          
        //如果没有该属性,或者属性长度为1,则放到根节点  
        parentNode = this.root;  
        if(!Ext.isEmpty(path)){  
          for(var j=0;j<path.length-1;j++){  
            //从头到尾找到父节点  
            parentNode = parentNode.findChild('unit_path',path.substring(0,j+1));  
            //TODO:判断异常情况,如有path=132,但是对应的13节点不存在。  
            //parentNode = Ext.value(parentNode.findChild('unit_path',path.substring(0,j+1)),parentNode);  
           }  
        }  
        parentNode.appendChild(node);  
      }  
    }  
  });  
  tree.loadCustomData(dataArr);  
  tree.expandAll();