EXTJs 树的实现
<script type="text/javascript">
Ext.onReady(function()
{
//树形结构
//创建一棵树：
var tree = new Ext.tree.TreePanel(
{el:'tree'}//表示渲染的DOM的id.界面中有<div id = "tree"></div>相对应最后这棵树就出现在这个div位置上
);
//创建根节点：
var root = new Ext.tree.TreeNode({text:'山东'});
tree.setRootNode(root);//把根节点添加到树中
tree.render();//对树进行渲染
//添加枝叶
var node1 = new Ext.tree.TreeNode({text:'济南'});
var node11 = new Ext.tree.TreeNode({text:'市中区'});
var node12 = new Ext.tree.TreeNode({text:'章丘市'});
var node2 = new Ext.tree.TreeNode({text:'青岛'});
var node21 = new Ext.tree.TreeNode({text:'黄岛区'});
var node22 = new Ext.tree.TreeNode({text:'城阳区'});
var node3 = new Ext.tree.TreeNode({text:'淄博'});
var node31 = new Ext.tree.TreeNode({text:'沂源'});
var node32 = new Ext.tree.TreeNode({text:'张店'});
var node33 = new Ext.tree.TreeNode({text:'博山'});
root.appendChild(node1);
root.appendChild(node2);
root.appendChild(node3);
node1.appendChild(node11);
node1.appendChild(node12);
node2.appendChild(node21);
node2.appendChild(node22);
node3.appendChild(node31);
node3.appendChild(node32);
node3.appendChild(node33);
root.expand(true,true);//加载后立即展开树
}
);
</script>
<2>使用TreeLoader加载数据：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>Tree</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="localXHR.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel(
{
el: 'tree',
//TreeLoader完成数据转换和装配节点的功能
loader: new Ext.tree.TreeLoader({dataUrl: '03-03.txt'})
}
);
//Ext.tree.TreeNode换成Ext.tree.AsyncTreeNode实现异步加载效果
var root = new Ext.tree.AsyncTreeNode({text:'CHINA'});
tree.setRootNode(root);
tree.render();
//只展开第一层节点
root.expand();
//展开全部节点
//root.expand(true,true);
}
);
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="tree" style="height:300px;"></div>
</body>
</html>
03-03.txt
[
{
text:'SHANDONG',
children:[
{text:'QINGDAO',leaf:true},
{
text:'ZIBO',
children:[
{text:'ZHANGDIAN',leaf:true},
{text:'YIYUAN',leaf:true}
]
},
{text:'JINAN',leaf:true}
]
},
{text:'BEIJING',leaf:true}
]
注意：<script type="text/javascript" src="localXHR.js"></script>
下载localXHR.js：点击打开链接
<3>树的事件
//添加事件监听机制
tree.on("expandnode",function(node){
Ext.Msg.alert(node + "展开了");
});
tree.on("collapsenode",function(node){
Ext.Msg.alert(node + "折叠了");
});
tree.on("click",function(node){
Ext.Msg.alert("你单击了" + node);
});
tree.on("dblclick",function(node){
Ext.Msg.alert("你双击了" + node);
});
alert() 无法触发双击事件。
<4>右键菜单
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ext Buttons</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<script type="text/javascript">
Ext.onReady(function()
{
//树形结构
//创建一棵树：
var tree = new Ext.tree.TreePanel(
{el:'tree'}//表示渲染的DOM的id.界面中有<div id = "tree"></div>相对应最后这棵树就出现在这个div位置上
);
//创建根节点：
var root = new Ext.tree.TreeNode({text:'山东'});
tree.setRootNode(root);//把根节点添加到树中
tree.render();//对树进行渲染
//添加枝叶
var node1 = new Ext.tree.TreeNode({text:'济南'});
var node11 = new Ext.tree.TreeNode({text:'市中区'});
var node12 = new Ext.tree.TreeNode({text:'章丘市'});
var node2 = new Ext.tree.TreeNode({text:'青岛'});
var node21 = new Ext.tree.TreeNode({text:'黄岛区'});
var node22 = new Ext.tree.TreeNode({text:'城阳区'});
var node3 = new Ext.tree.TreeNode({text:'淄博'});
var node31 = new Ext.tree.TreeNode({text:'沂源'});
var node32 = new Ext.tree.TreeNode({text:'张店'});
var node33 = new Ext.tree.TreeNode({text:'博山'});
root.appendChild(node1);
root.appendChild(node2);
root.appendChild(node3);
node1.appendChild(node11);
node1.appendChild(node12);
node2.appendChild(node21);
node2.appendChild(node22);
node3.appendChild(node31);
node3.appendChild(node32);
node3.appendChild(node33);
//<1>制作自定义菜单
var contextmenu = new Ext.menu.Menu(
{
id:'theContextMenu',
items:[
{
text:'添加',
handler:function(){
alert("还未实现添加功能");
}
},
{
text:'删除',
handler:function(){
alert("还未实现删除功能");
}
},
{
text:'修改',
handler:function(){
alert("还未实现修改功能");
}
}
]
}
);
//<2>绑定contextMenu事件
tree.on('contextMenu',function(node,e){
//防止浏览器弹出他默认的功能菜单
e.preventDefault();
//选中当前节点
node.select();
//在点击的位置弹出菜单
contextmenu.showAt(e.getXY());
});
}
);
</script>
</head>
<body>
<div id = "tree">
</div>
</body>
</html>
<5>修改节点的默认图标
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ext Buttons</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<style type="text/css">
.x-tree-node-leaf .icon-male {
background-image: url(user_male.png)
}
</style>
<script type="text/javascript">
/*
每个树形结点都有icon和iconCls属性，他们负责指定结点的图标。
<1>使用icon属性：
var node = new Ext.tree.TreeNode({text:'淄博',icon:'user_female.png'});
<2>使用iconCls属性，我们还需要在HTML中添加对应的CSS定义。
var node = new Ext.tree.TreeNode({text:'淄博',iconCls:'icon-male'});
<style type="text/css">
.x-tree-node-leaf .icon-male {
background-image: url(user_male.png)
}
注意：x-tree-node-leaf .icon-male和代码中iconCls:'icon-male'相对应。
</style>
*/
Ext.onReady(function()
{
//树形结构
//创建一棵树：
var tree = new Ext.tree.TreePanel(
{el:'tree'}//表示渲染的DOM的id.界面中有<div id = "tree"></div>相对应最后这棵树就出现在这个div位置上
);
//创建根节点：
var root = new Ext.tree.TreeNode({text:'山东',icon:'user_male.png'});
tree.setRootNode(root);//把根节点添加到树中
tree.render();//对树进行渲染
//添加枝叶
var node3 = new Ext.tree.TreeNode({text:'淄博',icon:'user_female.png'});
var node31 = new Ext.tree.TreeNode({text:'沂源',icon:'user_female.png'});
var node32 = new Ext.tree.TreeNode({text:'张店',icon:'user_female.png'});
var node33 = new Ext.tree.TreeNode({text:'博山',iconCls:'icon-male'});
root.appendChild(node3);
node3.appendChild(node31);
node3.appendChild(node32);
node3.appendChild(node33);
}
);
</script>
</head>
<body>
<div id = "tree">
</div>
</body>
</html>
<6>从节点弹出对话框
tree.on('click',function(node){
Ext.Msg.show(
{
title:'提示',
msg:'你点击了'+node,
animEl:node.ui.textNode
}
);
});
<7>节点提示信息
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ext Buttons</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<script type="text/javascript">
/*
为每个节点添加qtip:'xxxx'属性。
在JavaScript中对Ext的提示功能进行初始化。Ext.QuickTips.init();
*/
Ext.onReady(function()
{
Ext.QuickTips.init();
//树形结构
//创建一棵树：
var tree = new Ext.tree.TreePanel(
{el:'tree'}//表示渲染的DOM的id.界面中有<div id = "tree"></div>相对应最后这棵树就出现在这个div位置上
);
//创建根节点：
var root = new Ext.tree.TreeNode({text:'山东'});
tree.setRootNode(root);//把根节点添加到树中
tree.render();//对树进行渲染
//添加枝叶
var node3 = new Ext.tree.TreeNode({text:'淄博',qtip:'中国历史文化名城，国家园林城市，中国瓷都。历史文化源远流长，曾作为山东政治中心近两千年，有“齐国故都”之称'});
var node31 = new Ext.tree.TreeNode({text:'沂源',qtip:'沂源县是山东古人类发源地、山东屋脊生态高地、中国北方溶洞之乡和牛郎织女之乡'});
var node32 = new Ext.tree.TreeNode({text:'张店'});
var node33 = new Ext.tree.TreeNode({text:'博山'});
root.appendChild(node3);
node3.appendChild(node31);
node3.appendChild(node32);
node3.appendChild(node33);
}
);
</script>
</head>
<body>
<div id = "tree">
</div>
</body>
</html>
<8>为节点设置超链接
var node32 = new Ext.tree.TreeNode({text:'张店',href:'tree事件监听.html',hrefTarget:'_blank'});
<9>直接修改树节点名称
//只要创建一个TreeEditor，再把TreePanel放进去就可以了。
var treeEditor = new Ext.tree.TreeEditor(tree,{
allowBlank:false
});