Ext.js入门：TreePanel（九）
一：最简单的树
二：通过TreeNode自定义静态树
三：用TreeLoader加载数据生成树
四：解决IE下非正常加载节点问题
五：使用TreeNodeUI
六：带有checkbox的树
七：编辑树
简单的案例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
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,//节点之间连接的横竖线
root:new Ext.tree.AsyncTreeNode({
id:"root",
text:"根节点",//节点名称
expanded:true,//展开
leaf:false,//是否为叶子节点
children: [{ text: '子节点一', leaf: true }, { id: 'child2', text: '子节点二', children: [{ text: "111", leaf: true}]}]
})
});
mytree.render();//不要忘记render()下,不然不显示
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
效果图：
TreePanel基本配置参数:
//TreePanel配置参数
1.animate:true//展开,收缩动画,false时,则没有动画效果
2.autoHeight:true//自动高度,默认为false
3.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
4.enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
5.enableDrop:true//仅仅drop
6.lines:true//节点间的虚线条
7.loader:Ext.tree.TreeLoader//加载节点数据
8.root:Ext.tree.TreeNode//根节点
9.rootVisible:false//false不显示根节点,默认为true
10.trackMouseOver:false//false则mouseover无效果
11.useArrows:true//小箭头
1.animate:true//展开,收缩动画,false时,则没有动画效果
2.autoHeight:true//自动高度,默认为false
3.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
4.enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
5.enableDrop:true//仅仅drop
6.lines:true//节点间的虚线条
7.loader:Ext.tree.TreeLoader//加载节点数据
8.root:Ext.tree.TreeNode//根节点
9.rootVisible:false//false不显示根节点,默认为true
10.trackMouseOver:false//false则mouseover无效果
11.useArrows:true//小箭头
通过TreeNode自定义静态树
TreeNode的基本配置参数:
//TreeNode常用配置参数
1.checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
2.expanded:fasle//展开,默认不展开
3.href:"http:/www.cnblogs.com"//节点的链接地址
4.hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
5.leaf:true//叶子节点,看情况设置
6.qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下
7.text:"节点文本"//节点文本
8.singleClickExpand:true//用单击文本展开,默认为双击
1.checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
2.expanded:fasle//展开,默认不展开
3.href:"http:/www.cnblogs.com"//节点的链接地址
4.hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
5.leaf:true//叶子节点,看情况设置
6.qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下
7.text:"节点文本"//节点文本
8.singleClickExpand:true//用单击文本展开,默认为双击
二：动态加载树：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var mytree = new Ext.tree.TreePanel({
el: "container",
animate: true,
title: "Extjs动态树",
collapsible: true,
enableDD: true,
enableDrag: 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: "news",
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: "deleteNews",
text: "删除新闻"
}));
root.appendChild(sub1);
mytree.setRootNode(root); //添加到根节点中
mytree.render();
});
</script>
</head>
<body>
<div style="float:left">
<div id="container"></div>
</div>
<div style="float:left">
<iframe name="mainFrame" id="mainFrame" height="500px" width="800px" src="about:blank"></iframe>
</div>
</body>
</html>
效果：
三：用TreeLoader加载数据生成树
//TreeLoader的参数
dataUrl:“*****.**”//地址
url:“****.**”//url参数和dataUrl参数一样
dataUrl:“*****.**”//地址
url:“****.**”//url参数和dataUrl参数一样
前端的代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
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",
listeners: {
"beforeload": function(treeloader, node) {
treeloader.baseParams = {
id: node.id,
method: 'POST'
};
},
//解决IE浏览器的不兼容问题
"loadexception": function(loader, node, response) {
node.loaded = false;
node.reload.defer(10, node); //不停的加载，直到true
}
}
})
});
//根节点
var root = new Ext.tree.AsyncTreeNode({
id: "0",
text: "控制面板",
expanded: true
});
mytree.setRootNode(root);
mytree.render(); //不要忘记render()下,不然不显示哦
root.on("click", function(node) {
node.getUI().getTextEl().innerHTML = "点击后";
node.getUI().getIconEl().src = "images/node.gif";
});
});
</script>
</head>
<body>
<div style="float:left">
<div id="container"></div>
</div>
</body>
</html>
后台代码：
public class json : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string jsons = "";
if (context.Request["id"] == null)
jsons = "{success:false}";
else
{
int id = int.Parse(context.Request["id"].ToString());
if (id == 0)
jsons = "[{\"id\":\"1\",\"checked\":true, \"text\":\"人事管理\",
\"url\":null,\"iconCls\":\"rsgl\",\"leaf\":false},{\"id\":\"2\",\"checked\":true,
\"text\":\"系统管理\",\"url\":null,\"iconCls\":\"xtgl\",\"leaf\":false},{\"id\":\"3\",\"checked\":true,
\"text\":\"个人专区\",\"url\":null,\"iconCls\":\"grzq\",\"leaf\":false},{\"id\":\"4\",\"checked\":true,
\"text\":\"内部邮箱\",\"url\":null,\"iconCls\":\"lbyx\",\"leaf\":false},{\"id\":\"5\",\"checked\":true,
\"text\":\"日程管理\",\"url\":null,\"iconCls\":\"rcgl\",\"leaf\":false},{\"id\":\"6\",\"checked\":true,
\"text\":\"文档管理\",\"url\":null,\"iconCls\":\"wdgl\",\"leaf\":false},{\"id\":\"7\",\"checked\":true,
\"text\":\"工单管理\",\"url\":null,\"iconCls\":\"gdgl\",\"leaf\":false},{\"id\":\"8\",\"checked\":true,
\"text\":\"工资管理\",\"url\":null,\"iconCls\":\"gzgl\",\"leaf\":false},{\"id\":\"9\",\"checked\":true,
\"text\":\"考勤管理\",\"url\":null,\"iconCls\":\"kqgl\",\"leaf\":false}]";
else if (id == 1)
jsons = "[{\"id\":\"11\",\"checked\":true, \"text\":\"机构管理\",
\"url\":null,\"iconCls\":\"jggl\",\"leaf\":true},{\"id\":\"12\",\"checked\":true,
\"text\":\"部门管理\",\"url\":null,\"iconCls\":\"bmgl\",\"leaf\":true},{\"id\":\"13\",
\"checked\":true, \"text\":\"员工管理\",\"url\":null,\"iconCls\":\"yggl\",\"leaf\":true}]";
}
context.Response.Write(jsons);
}
public bool IsReusable {
get {
return false;
}
}
效果图：
效果：
使用TreeNodeUI
在node中我们可以用专门的类控制node的UI.
//TreeNodeUI的基本配置参数,node.getUI()=>TreeNodeUI
1.addClass("class")//添加css类
2.getAnchor()//返回a元素(对象),控制a链接
3.getIconEl()//返回img元素(对象),控制icon图标
4.getTextEl()//返回span元素(对象),控制节点文本
5.hide()
6.show()
7.removeClass()
1.addClass("class")//添加css类
2.getAnchor()//返回a元素(对象),控制a链接
3.getIconEl()//返回img元素(对象),控制icon图标
4.getTextEl()//返回span元素(对象),控制节点文本
5.hide()
6.show()
7.removeClass()
带有checkbox的树
//关键代码
1.node.getUI().checkbox.checked//返回节点选择,true和fasle
3.checkchange事件,选择变化时激发
1.node.getUI().checkbox.checked//返回节点选择,true和fasle
3.checkchange事件,选择变化时激发
问:如何隐藏复选框前的文件夹等小图标?
//答:图标img元素的css的class名为x-tree-node-icon,把display设为none就可以了
//答:图标img元素的css的class名为x-tree-node-icon,把display设为none就可以了
带复选框的菜单：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
function mytoggleChecked(node) {
//迭代复选=>父节点影响子节点选择,子节点不影响父节点
if (node.hasChildNodes()) {
node.eachChild(function(child) {
//实现选中的状态
child.getUI().toggleCheck(node.attributes.checked);
child.attributes.checked = node.attributes.checked; //有其父必有其子
//利用递归
child.on("checkchange", function(sub) {
mytoggleChecked(sub);
});
mytoggleChecked(child);
})
}
}
Ext.onReady(function() {
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: "checkjson.ashx",
listeners: {
"beforeload": function(treeloader, node) {
treeloader.baseParams = {
id: node.id,
method: 'POST'
};
}
}
})
});
var root = new Ext.tree.AsyncTreeNode({
id: "0",
text: "根节点",
checked: false,
listeners: {
"checkchange": function(node) {
mytoggleChecked(node);
}
},
expanded: true
});
mytree.setRootNode(root);
mytree.render();
root.expand(true); //让根节点展开
new Ext.Button(
{
text: "选中的ID",
handler: function() {
var b = mytree.getChecked();
var checkIds = new Array();
for (var i = 0; i < b.length; i++) {
if (b[i].leaf) {
checkIds.push(b[i].id);
}
}
alert(checkIds.toString());
}
}
).render(document.body, "btn");
});
</script>
</head>
<body>
<div id="container">
</div>
<div id="btn"></div>
</body>
</html>
效果图：
