通过读取json串来实现ext树

本文介绍了一种使用固定配置JSON数据构建树面板的方法。通过Ext.tree.TreePanel组件及树加载器,实现了不需要从数据库获取数据的静态树结构,并展示了具体的实现代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

      一般情况下,都是从数据库中获取树的节点。此种情况下可能数据是经常需要维护的,增删改查。如短信目录,物品管理之类的情况,但是也有一些情况是一些固定数据,所以就不用去实现一个动态的异步树。

      下面写个简单的列子:

            var json =[{'text':'A,'id':'11','leaf':false,
                 'children':[{'text':'A1,'id':'1','leaf':true},
                           {'text':'A2','id':'2','leaf':true}]},
           {'text':'B,'id':'22','leaf':false,
                 'children':[{'text':'B1,'id':'3','leaf':true},
                           {'text':'B2,'id':'4','leaf':true},
                           {'text':'B3,'id':'5','leaf':true},
                           {'text':'B4,'id':'6','leaf':true}]}];  需求者可以相应实现自己需要实现的树状结构的节点数据。

 

树面板对象

xinli.ui.HistoryTreePanel= Ext.extend(Ext.tree.TreePanel, {
 prodInstId : null,
 initComponent : function() {
  var prodInstId = this.prodInstId;
  Ext.apply(this, {
     region : 'west',
     width : 200,
     minSize : 200,
     maxSize : 250,
     border : true,
     frame : false,
     rootVisible : true,
     autoScroll : true,
     autoHeight : false,// 自动高
     containerScroll : true,
     split : true,
     root : new Ext.tree.AsyncTreeNode({
          id : '1',
          text : '根目录,
          expanded : true,
          children : json
         }),
        loader : new Ext.tree.TreeLoader(
        )
    });

  xinli.ui.HistoryTreePanel.superclass.initComponent.call(this);

  this.addListener('click', function(node) {

             do something........代码略

    }, this);
 }
});

     通过上面的代码,我们可以实现一个树。节点数据通过读取固定配置好的json串来实现一个树面板对象。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值