写了一个简单的 JS 树，可以通过 面向对象 的方式构建一棵树。如下面这种方式：
var container = document.getElementById("treeContainer"); //
var tree = new Tree(container);
var rootItem1 = new TreeItem(tree,"node1","img/folder.gif","#",true);
var item11 = new TreeItem(rootItem1,"node1 1","img/file.png", "#");
var item12 = new TreeItem(rootItem1,"node1 2","img/file.png");
效果如下：
完整的代码如下：
<html>
<head>
<title>Tree Main</title>
<link rel="StyleSheet" href="tree.css" type="text/css">
<script type="text/javascript" src="tree.js"></script>
<script type="text/javascript">
window.onload = function() {
var container = document.getElementById("treeContainer");
var tree = new Tree(container);
var rootItem1 = new TreeItem(tree,"node1","img/folder.gif","#",true);
var item11 = new TreeItem(rootItem1,"node1 1","img/file.png", "#");
var item12 = new TreeItem(rootItem1,"node1 2","img/file.png");
var rootItem2 = new TreeItem(tree,"node2","img/folder.gif");
var item21 = new TreeItem(rootItem2,"node2 1","img/folder.gif");
var item211 = new TreeItem(item21,"node2 1 1","img/file.png");
var item212 = new TreeItem(item21,"node2 1 2","img/file.png");
var item22 = new TreeItem(rootItem2,"node2 2","img/file.png");
var rootItem3 = new TreeItem(tree,"node3","img/file.png");
};
</script>
</head>
<body>
<div id="treeContainer" class="tree">
</div>
<br>
<br>
<div>
copyright
</div>
</body>
</html>
Tree.js 代码：
var tabSize = "20px";
function Tree(container) {
if(!container)
return;
this.type = 0;
this.component = document.createElement("div");
container.appendChild(this.component);
this.subs = new Array();
}
function TreeItem(parent,text,imgSrc,url,opened) {
if(!parent)
return;
this.type = 1;
this.parent = parent;
this.opened = opened;
if(this.opened == undefined) {
this.opened = false;
}
this.component = document.createElement("div");
if(this.parent.type && !this.parent.opened)
this.component.style.display = "none";
// img
if(imgSrc) {
this.img = document.createElement("img");
this.img.src = imgSrc;
this.component.appendChild(this.img);
this.img.parent = this;
this.img.onclick = function() {
var subs = this.parent.subs;
if(this.parent.opened) {
this.parent.opened = false;
for(var child in subs) {
subs[child].component.style.display = "none";
}
} else {
this.parent.opened = true;
for(var child in subs) {
subs[child].component.style.display = "block";
}
}
}
}
// url and text
if(url) {
this.textNode = document.createElement("span");
this.textNode.innerHTML = text;
this.link = document.createElement("a");
this.link.href = url;
this.link.appendChild(this.textNode);
this.component.appendChild(this.link);
} else {
this.textNode = document.createElement("span");
this.textNode.innerHTML = text;
this.component.appendChild(this.textNode);
}
this.component.style.paddingLeft = parent.type?tabSize:"0px";
this.parent.component.appendChild(this.component);
this.subs = new Array();
this.parent.subs[this.parent.subs.length] = this;
}
附1：onload 方法
function addload(func) {
if(window.onload) {
var oldFuncs = window.onload;
window.onload = function() {
oldFuncs();
func();
}
} else {
window.onload = func;
}
}
- 大小: 4.9 KB
分享到：
相关推荐
JavaScript Tree是一种在Web开发中用于数据可视化，特别是组织和展示层次结构数据的常见技术。它通常用JavaScript实现，可以与HTML、CSS以及Ajax等技术结合，以动态交互的方式展示信息。"javascript Tree"可能指的是...
JavaScript Tree效果是一种在网页上创建树状结构的交互式组件，常用于展现层级关系的数据，如目录、组织架构或文件系统。它通过JavaScript语言实现，能够动态地展示、展开、折叠节点，提供用户友好的操作体验。在...
JavaScript Tree是一种广泛应用于Web开发中的组件，主要用于展示层次结构的数据，比如目录结构、组织结构或者层级关系的数据。在本场景中，提及的"javascript tree"可能是指一款基于JavaScript实现的树形控件，可能...
JavaScript Tree Menu是一种常见的网页交互元素，它用于在网站上创建可折叠、层次分明的菜单结构。这个技术基于JavaScript，一种广泛使用的客户端脚本语言，它允许动态地更新和操作HTML内容，提供更丰富的用户交互...
JavaScript Tree是一种轻量级、功能丰富的库，用于在Web页面上呈现树形视图。它在前端开发中扮演着重要角色，特别是在数据层级结构展示、导航菜单或文件系统目录等场景下。标题“非常小巧功能强大的js tree”揭示了...
JavaScript树形目录（Tree）是一种数据结构，常用于在网页中展示层次化的信息，比如文件系统、组织架构或导航菜单。这种数据结构以节点的形式表示，每个节点可以有零个或多个子节点，形成一种“父节点-子节点”的...
自己手写一个tree实例，tree实现其实很简单，主要先弄清楚html如何显示tree，可以先查看html元素，会发现tree的每个节点都是...然后使用javascript操作dom，例子中有些使用javascript的面向对象，tree计算核心为递归。
JavaScript Tree是一种交互式的前端UI组件，它以树形结构展示数据，常用于网站或应用程序的导航、目录组织或数据层级展示。"Checkbox Tree"是这种树结构的一个扩展，它在每个节点上添加了复选框，允许用户进行多选...
JavaScript Tree Menu是由Morten开发的一种开源的网页交互组件，主要功能是为网站提供类似Windows资源管理器的层级式菜单结构。这种菜单系统利用了Ecma/JavaScript（通常简称为JavaScript）语言，使得用户能够在网页...
JavaScript treemenu：http://www.enet521.com gs.enet521.com m.enet521.com xs.enet521.com非常全的一个使用JavaScript treemenu实例文档欢迎大家下载
在这个场景中，"xml javascript tree"指的是利用JavaScript动态构建基于XML数据的树形结构。 在Web应用中，树形结构通常用于展现层次化的信息，如目录结构、组织架构或导航菜单。在描述中提到的，数据是通过AJAX...
jsTree大集合:纯JavaScript+树形菜单、基于js的无限树形菜单(dtree)、史上最完美最简单js树形菜单、树形菜单显示集锦、树形菜单演示程序、jstree+JS树形菜单合集、js树形菜单
JavaScript Tree集合，通常被称为“树状菜单”或“JS树”，是前端开发中常用的一种数据结构展示方式。这种集合主要用于构建层次化的数据展示，比如网站的导航菜单、文件目录结构等。JavaScript Tree允许用户以图形化...