回答问题: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();
分享到:
相关推荐
ExtJs Tree
最近在学习extjs tree,有两个不错的例子,希望对需要的朋友有所帮助!
extjs tree 异步加载树型完整的一个web工程,自已已经试过,可用。
Extjs Tree + JSON + Struts2 例子
ExtJs 2.2.1 tree实例,内附mysql数据文件 1. 数据节点一次性加载 2. 节点分为两个类(项目和设备) 3. 右键菜单 4. 节点增、删、改操作 ....... 后台是java struts1。 本例旨在说明extjs的tree操作,后台操作很简陋...
Extjs的tree Extjs的tree Extjs的tree Extjs的tree Extjs的tree
extjs tree 学习资料extjs tree 学习资料extjs tree 学习资料extjs tree 学习资料
ExtJs自定义消息框,自带的消息框,可以下载来了解一下。
Extjs Tree + JSON + Struts2 示例源代码
区别在于,远程脚本调用方式加载树节点信息使用的是WebInvokeTreeLoader,需要通过fn属性来指定用于加载数据的远程方法,并在...而传统的树节点加载器是Ext.tree.TreeLoader,需要指定一个url来获得json数据。
extjs的tree的使用.doc
extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件
Extjs的Tree和Pane配合使用使用json做tree数据交互,感谢csdn,所以我也得做些贡献,获得一些积分
Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例
ExtJs4 Checkbox tree
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
在网上下载别人的代码,改进加上CHECKBOX ,但是批量删除做不出来,希望高手完成并分享。
access 数据库,可增加 删除树节点!!
分享一个ExtJs Tree, 完整的带有复选框的树形结构
extjs tree + json+struts2示例源代码extjs tree + json+struts2示例源代码