经典树形菜单

时间：2022-07-02 15:06:39 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<htm>
<head>
</head>
<body>
<div id="treeArea"></div>
<script language="javascript">
function Node(parentId, id, openStatus, text, url, color){
this.parentId = parentId; // 父节点的id
this.id     = id;    // 自身id
this.href   = url;
this.color  = color;
this.openStatus = openStatus; // 当前的打开状态
this.haveChild = false;  // 为了便于显示，增加了该属性，判断该节点是否有子节点，默认为没有
this.text  = text; // 显示的文本信息
}
// 定义一个数组用来保存所有的节点(Node)包括根节点(RootNode), 也可以用其他的方式来保存
var arrTree = new Array();
//为了在使得创建节点更方便点，定义了下面的函数：
function createNode(parentId, id, openStatus, text, url, color){
// 这里检验一下输入的parentId是否存在，不存在则提示错误
// checkParent(parentId);
// 检验输入的id是否已经存在,如果存在做相应的处理， 这里我就不写了
// checkId(id);
// 设置该parentId有子节点
if( parentId > -1 ){
if(!arrTree[parentId].hasChild)
arrTree[parentId].hasChild = true;
}
var node = new Node(parentId, id, openStatus, text, url, color);
arrTree[arrTree.length] = node;
}
/*-1这里定义为根节点的父节点，不存在这样的节点，所以，判断节点的父节点为-1时，标识当前节点时父节点*/
createNode(-1/*上面的注释*/, 0/*节点id*/, true/*关闭*/, "ExtJs2.02实例教程", '','green');
createNode(0, 1,  true, "1.ExtJs简介");
createNode(0, 2,  true, "2.网格(Grids)");
createNode(0, 3,  true, "3.标签(tabs)");
createNode(0, 4,  true, "4.窗体(Windows)");
createNode(0, 5,  true, "5.树(Trees)");
createNode(0, 6,  true, "6.布局管理器");
createNode(0, 7,  true, "7.组合框(ComboBox)");
createNode(0, 8,  true, "8.表单(Forms)");
createNode(0, 9,  true, "9.工具条和菜单");
createNode(0, 10, true, "10.其他分类");
createNode(1, 11, false, "1.1 ExtJs简介", "http://onlyaa.com/html/project/extjs/200805/21-2146.html", "blue");
createNode(1, 12, false, "1.2 ExtJs入门");
createNode(2, 21, false, "2.1 基本数组网格(Basic Array Grid)");
createNode(2, 22, false, "2.2 XML网格(XML Grid)");
createNode(2, 23, false, "2.3 JSON网格(JSON Grid)");
createNode(2, 24, false, "2.4 可编辑的网格(Editable Grid))");
createNode(2, 25, false, "2.5 分页(Paging)");
createNode(2, 26, false, "2.6 分组(Grouping)");
createNode(2, 27, false, "2.7 实时分组统计(Live Group Summary)");
createNode(2, 28, false, "2.8 定制:网格插件(Customizing: Grid Plugins)");
createNode(3, 31, false, "3.1 基本标签(Basic Tabs)");
createNode(3, 32, false, "3.2 实时标签");
createNode(4, 41, false, "4.1 Hello World");
createNode(4, 42, false, "4.2 对话框(MessageBox)");
createNode(4, 43, false, "4.3 布局窗口(Layout Window)");
createNode(5, 51, false, "5.1 拖放排列(Drag and Drop Reordering)");
createNode(5, 52, false, "5.2 多棵树(Multiple trees)");
createNode(5, 53, false, "5.3 定制:列树(Customizing: Column Tree)");
createNode(6, 61, false, "6.1 区域布局(Border Layout)");
createNode(6, 62, false, "6.2 固定布局(Anchor Layout)");
createNode(6, 63, false, "6.3 定制:门户网站(Customizing: Portals)");
createNode(7, 71, false, "7.1 基本组合框(Basic ComboBox)");
createNode(7, 72, false, "7.2 定制:组合框模板(Customizing: ComboBox Templates)");
createNode(8, 81, false, "8.1 动态表单(Dynamic Forms)");
createNode(8, 82, false, "8.2 AJAX生成的XML表单(Ajax with XML Forms)");
createNode(8, 83, false, "8.3 定制:搜索框(Customizing: Search Field)");
createNode(9, 91, false, "9.1 基本工具条(Basic Toolbar)");
createNode(9, 92, false, "9.2 Ext 动作(Ext Actions)");
createNode(10, 101, false, "10.1 数据视图(DataView)");
createNode(10, 102, false, "10.2 数据视图(Advanced DataView)");
createNode(10, 103, false, "10.3 进度条(Progress Bar)");
createNode(10, 104, false, "10.4 模版(Templates)");
createNode(10, 105, false, "10.5 面板(Panels)");
createNode(10, 106, false, "10.6 调整大小(Resizable)");/*
这里简单的创建了一棵树，但是还没有显示，下面要做的就是怎么显示:
可能方法是有点笨拙，不要见怪
…. 显示树
// 这个思路很容易理解，就是从根节点开始， 在arrTree数组超找该根节点的子节点并显示，
这里用的是递归方式去遍历每棵树， 由于简单的结构很简单的想法，所以没有考虑算法的效率问题
*/
function doRender(){
var r = appendNode(0)
treeArea.appendChild(r);
}
// AppendNode(node), 将该节点的子节点加载到container里面， 就是div对象
function appendNode(id){
node = arrTree[id]
var id = node.id;
var area = document.createElement("div");
var expand = document.createElement("span");
var textNode = document.createElement("span");
var subarea = document.createElement("div");
var str = ''
if( node.href ){
str += '<a href="'+node.href+'" target="_blank" ';
if( node.color )
str += ' style="color:'+node.color+';"';
str += '>'+ node.text + '</a> ';
} else {
if( node.color )
str += '<font color="'+node.color+'">'+ node.text+'</font>';
else
str = node.text;
}
textNode.innerHTML = str;
expand.style.fontFamily = 'Fixedsys';
expand.style.cursor = 'hand';
expand.style.color = 'red';
expand.style.padding = '5px';
expand.innerText = '-';
subarea.style.paddingLeft = '30px';
subarea.style.line;
if( !node.openStatus ){
subarea.style.display = 'none';
}
area.style.padding = '4px';
area.appendChild(expand);
area.appendChild(textNode);
area.appendChild(subarea);
if(node.hasChild){
expand.innerText = '+';
if( node.openStatus ) {expand.innerText = '-'; }
expand.onclick = function(){
if( subarea.style.display == '' ){
node.openStatus = false;
this.innerHTML = '+';
subarea.style.display = 'none';
} else {
node.openStatus = true;
this.innerHTML = '-';
subarea.style.display = '';
}
}
for(var i=1/*因为根节点在0位置，所以从1开始查找*/; i < arrTree.length; i++ ){
if( arrTree[i].parentId == id ){
var c = appendNode(i);
subarea.appendChild(c);
}
}
}
return area; // 返回div对象，里面包含了子树的信息
}
doRender();
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

经典树形菜单

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程