`

javascript树

JavaScriptEXTAjaxjsonXML 
阅读更多
<html> 
<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.push( 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.lineHeight = '2'; 
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>
分享到：
| java 乱码处理注意编码顺序
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript 树形菜单

    总的来说，JavaScript树形菜单是通过DOM操作和事件处理来实现的。在实际项目中，可能会结合使用前端框架如React、Vue或Angular，以及第三方库如jQuery UI或jsTree，以简化开发并提供更丰富的功能。在压缩包中的"树形...

    javascript 树形目录 大家可以看看学习··

    JavaScript树形目录是一种在网页应用中组织数据结构的方法，它以层级关系呈现，类似于计算机文件系统的目录结构。这种数据结构在各种应用场景中都非常常见，比如网站导航、文件管理器、组织图表等。在这个主题中，...

    javascript树形菜单

    javascript树形菜单

    百万节点javascript树

    "百万节点javascript树"项目专注于解决这个问题，允许开发者创建一个包含100万个节点的树。这种能力对于处理大量数据，如文件系统、组织架构或者复杂的依赖关系图，具有重要意义。 在JavaScript中，树通常通过对象...

    javascript 树形控件

    JavaScript树形控件是一种在网页中用于展示层次结构数据的交互式组件，它通常以节点的形式呈现，每个节点可以展开或折叠，展示其子节点。这种控件在各种应用场景中非常常见，例如文件目录浏览、组织结构展示、菜单...

    javascript 树形菜单

    总的来说，构建JavaScript树形菜单涉及的技术包括HTML结构设计、CSS样式控制、JavaScript DOM操作、事件处理、数据结构和算法（如遍历树形结构）、以及可能的异步加载和动画效果。通过这些技术的组合，我们可以创建...

    Javascript树

    JavaScript树是一种在Web应用中常用来展示层次结构数据的交互式元素。在JavaScript中实现树形结构，可以方便用户以图形化方式查看和操作数据，比如文件系统、组织架构或菜单系统。"Javascript树"通常涉及到DOM操作、...

    jsv.rar_javascript_javascript 树

    实现JavaScript树形菜单的基本步骤包括： 1. **定义节点对象**：创建一个Node类或对象，包含节点值、子节点数组和其他属性（如是否展开等）。 2. **构建数据结构**：根据实际需求，构建树的数据结构，即定义各个...

    带复选框JS树 Javascript树 JS树 树形菜单

    JavaScript树形菜单是一种在网页中实现层次结构数据展示的交互方式，它通常用于导航、文件管理、选项配置等场景。"带复选框"的JS树形菜单则更进一步，允许用户通过勾选复选框来选择或操作树节点，为用户提供了一种...

    JavaScript 树形目录 tree

    JavaScript树形目录（Tree）是一种数据结构，常用于在网页中展示层次化的信息，比如文件系统、组织架构或导航菜单。这种数据结构以节点的形式表示，每个节点可以有零个或多个子节点，形成一种“父节点-子节点”的...

    javascript树形控件

    JavaScript树形控件是一种在网页上实现层次结构展示的用户界面元素，通常用于展示目录结构、组织架构或者数据分类等。由于HTML标准中并未内置这样的组件，开发者需要借助JavaScript库或者自定义代码来创建这样的功能...

    超级简单的javascript树

    JavaScript树是一种数据结构，它代表了层次化的节点集合，这些节点通过父节点和子节点的关系组织起来，类似于自然界中的树状结构。在编程中，树常用于表示具有层级关系的数据，例如文件系统、HTML DOM（文档对象模型...

    javaScript树

    JavaScript树在Web开发中是一种常见的数据结构，常用于构建导航菜单、组织结构图或文件系统目录等。在JavaScript中实现树形结构，主要是通过对象和数组来模拟实际的树节点和层级关系。在这个场景下，"给定当前节点的...

Magicbox
Global site tag (gtag.js) - Google Analytics