:TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍几个extjs中treepanel例子
一、TreePanel基本配置参数:
JScript 代码 复制![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
//TreePanel配置参数
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
animate:true//展开,收缩动画,false时,则没有动画效果
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
autoHeight:true//自动高度,默认为false
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
enableDrop:true//仅仅drop
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
lines:true//节点间的虚线条
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
loader:Ext.tree.TreeLoader//加载节点数据
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
root:Ext.tree.TreeNode//根节点
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
rootVisible:false//false不显示根节点,默认为true
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
trackMouseOver:false//false则mouseover无效果
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
useArrows:true//小箭头
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
二、TreeNode的基本配置参数:
JScript 代码 复制![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
//TreeNode常用配置参数
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
expanded:fasle//展开,默认不展开
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
href:"http:/www.cnblogs.com"//节点的链接地址
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
leaf:true//叶子节点,看情况设置
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
text:"节点文本"//节点文本
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
singleClickExpand:true//用单击文本展开,默认为双击
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
三、treepanel实例
1.第一个静态树--最简单的树
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/ExpandedBlockStart.gif)
Ext.onReady(function(){![]()
var mytree=new Ext.tree.TreePanel({
![]()
el:"container",//应用到的html元素id
![]()
animate:true,//以动画形式伸展,收缩子节点
![]()
title:"Extjs静态树",
![]()
collapsible:true,
![]()
rootVisible:true,//是否显示根节点
![]()
autoScroll:true,
![]()
autoHeight:true,
![]()
width:150,
![]()
lines:true,//节点之间连接的横竖线
![]()
loader:new Ext.tree.TreeLoader(),//
![]()
root:new Ext.tree.AsyncTreeNode({
![]()
id:"root",
![]()
text:"根节点",//节点名称
![]()
expanded:true,//展开
![]()
leaf:false,//是否为叶子节点
![]()
children:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:"111"}]}]
![]()
})
![]()
});
![]()
mytree.render();//不要忘记render()下,不然不显示哦
![]()
})
效果图:
2.通过TreeNode自定义静态树
html代码
<body style="margin:10px;">
<div id="container">
</div>
<iframe name="mainFrame" id="mainFrame" height="100px" width="200px" src="jstest.htm"></iframe>
</body>
JScript 代码 复制![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/ExpandedBlockStart.gif)
Ext.onReady(function(){![]()
Ext.QuickTips.init();
![]()
var mytree=new Ext.tree.TreePanel({
![]()
el:"container",
![]()
animate:true,
![]()
title:"Extjs静态树",
![]()
collapsible:true,
![]()
enableDD:true,
![]()
enableDrag:true,
![]()
rootVisible:true,
![]()
autoScroll:true,
![]()
autoHeight:true,
![]()
width:150,
![]()
lines:true
![]()
});
![]()
![]()
![]()
//根节点
![]()
var root=new Ext.tree.TreeNode({
![]()
id:"root",
![]()
text:"控制面板",
![]()
expanded:true
![]()
});
![]()
![]()
![]()
//第一个子节点及其子节点
![]()
var sub1=new Ext.tree.TreeNode({
![]()
id:"news",
![]()
text:"新闻管理",
![]()
singleClickExpand:true
![]()
});
![]()
sub1.appendChild(new Ext.tree.TreeNode({
![]()
id:"addNews",
![]()
text:"添加新闻",
![]()
href:"http://www.baidu.com",
![]()
hrefTarget:"mainFrame",
![]()
qtip:"打开百度",
![]()
listeners:{//监听
![]()
"click":function(node,e){
![]()
alert(node.text)
![]()
}
![]()
}
![]()
}));
![]()
sub1.appendChild(new Ext.tree.TreeNode({
![]()
id:"editNews",
![]()
text:"编辑新闻"
![]()
}));
![]()
sub1.appendChild(new Ext.tree.TreeNode({
![]()
id:"delNews",
![]()
text:"删除新闻"
![]()
}));
![]()
![]()
![]()
root.appendChild(sub1);
![]()
![]()
![]()
root.appendChild(new Ext.tree.TreeNode({
![]()
id:"sys",
![]()
text:"系统设置"
![]()
}));
![]()
![]()
![]()
mytree.setRootNode(root);//设置根节点
![]()
![]()
![]()
mytree.render();//不要忘记render()下,不然不显示哦
![]()
})
效果图
3.用TreeLoader加载数据生成树
JScript 代码 复制![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/ExpandedBlockStart.gif)
Ext.onReady(function(){![]()
Ext.QuickTips.init();
![]()
var mytree=new Ext.tree.TreePanel({
![]()
el:"container",
![]()
animate:true,
![]()
title:"简单Extjs动态树",
![]()
collapsible:true,
![]()
enableDD:true,
![]()
enableDrag:true,
![]()
rootVisible:true,
![]()
autoScroll:true,
![]()
autoHeight:true,
![]()
width:150,
![]()
lines:true,
![]()
//这里简简单单的loader的几行代码是取数据的,很经典哦
![]()
loader:new Ext.tree.TreeLoader({
![]()
dataUrl:"json。ashx"
![]()
})
![]()
});
![]()
![]()
![]()
//根节点
![]()
var root=new Ext.tree.AsyncTreeNode({
![]()
id:"root",
![]()
text:"控制面板",
![]()
expanded:true
![]()
});
![]()
![]()
![]()
mytree.setRootNode(root);
![]()
mytree.render();//不要忘记render()下,不然不显示哦
![]()
})
json。ashx代码
C# 代码 复制![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
using System;
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
using System.Web;
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
using System.Collections.Generic;
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
using System.Web.Script.Serialization;
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
public class jsondata
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/None.gif)
![](http://www.studyofnet.com/Codefan-Controls/OutliningIndicators/ExpandedBlockStart.gif)
{![]()
//定义jsondata类,存放节点数据
![]()
public string id;
![]()
public string text;
![]()
public bool leaf;
![]()
public List<jsondata> children=new List<jsondata>();//存放子节点
![]()
}
![]()
![]()
![]()
public class json : IHttpHandler {
![]()
public List<jsondata> jsdata=new List<jsondata>();
![]()
public void ProcessRequest (HttpContext context) {
![]()
![]()
![]()
for (int i = 1; i < 5; i++)
![]()
{
![]()
jsondata jd = new jsondata();
![]()
jd.id="num"+i;
![]()
jd.text = "节点"+i;
![]()
jd.leaf = false;
![]()
for (int j = 1; j < 3; j++)
![]()
{
![]()
jsondata subjd = new jsondata();
![]()
subjd.id = "sub" + j;
![]()
subjd.text = "子节点" + j;
![]()
subjd.leaf = true;
![]()
jd.children.Add(subjd);
![]()
}
![]()
jsdata.Add(jd);
![]()
}
![]()
context.Response.Write(ToJson(jsdata.ToArray()));//ToArray()在IE里面好像缺了不行
![]()
}
![]()
![]()
![]()
public bool IsReusable {
![]()
get {
![]()
return false;
![]()
}
![]()
}
![]()
![]()
![]()
public string ToJson(object o)
![]()
{
![]()
//序列化对象为json数据,很重要!
![]()
JavaScriptSerializer j = new JavaScriptSerializer();
![]()
return j.Serialize(o);
![]()
}
![]()
}
效果图