javascript 트리
7193 단어 JavaScripthtmlcssXHTMLprototype
function Node(id, pid, name) {
this.index;
this.id = id;
this.pid = pid;
this.name = name;
this.isLeaf = true;
this.lastSibling = false;
this.isClose = true;
}
function Tree() {
// this.icon = { empty:" ", folder:"■", join:"┠", joinbottom:"┖",
// line:"┃", page:"◇"
// }
this.icon = {
empty:"<img src='img/empty.gif' />",
folder:"img/folder.gif",
folderopen:"img/folderopen.gif",
plus:"img/plus.gif",
plusbottom:"img/plusbottom.gif",
minus:"img/minus.gif",
minusbottom:"img/minusbottom.gif",
join:"<img src='img/join.gif' />",
joinbottom:"<img src='img/joinbottom.gif' />",
line:"<img src='img/line.gif' />",
page:"<img src='img/page.gif' />"
};
this.root = null;
this.nodes = [];
this.indents = [];
this.str = "";
}
Tree.prototype.addNode = function(id, pid, name) {
var len = this.nodes.length;
this.nodes[len] = new Node(id, pid, name);
this.nodes[len].index = len;
}
Tree.prototype.toString = function() {
this.str = "<div class=\"dtree\">";
this.initRoot();
this.travel(this.root);
this.str += "</div>";
window.clipboardData.setData("text", this.str);
return this.str;
}
Tree.prototype.initRoot = function() {
var i = 0;
var pNode = this.nodes[i];
for(i=1; i<this.nodes.length; i++)
if(this.nodes[i].id==pNode.pid) {
pNode = this.nodes[i];
i = 1;
continue;
}
if(i==this.nodes.length)
this.root = pNode;
}
Tree.prototype.travel = function(pNode) {
this.setLS(pNode);
this.visit(pNode);
if(!pNode.isLeaf) {
if(pNode.isClose)
this.str += "<div id=\"clip" + pNode.index + "\" class=\"clip\" style=\"display:none\" >";
else
this.str += "<div id=\"clip" + pNode.index + "\" class=\"clip\" style=\"display:block\" >";
this.indents.push(pNode.lastSibling);
for(var i=0; i<this.nodes.length; i++) {
if(this.nodes[i].pid==pNode.id)
this.travel(this.nodes[i]);
}
this.indents.pop();
this.str += "</div>";
}
}
Tree.prototype.visit = function(node) {
if(this.root!=node && node.isClose)
this.str += "<div id=\"doc" + node.index + "\" class=\"dTreeNode\" style=\"display:none\" >";
else
this.str += "<div id=\"doc" + node.index + "\" class=\"dTreeNode\" style=\"display:block\" >";
for(var i=0; i<this.indents.length; i++)
this.str += this.indents[i]?this.icon.empty:this.icon.line;
if(node.isLeaf) {
this.str += node.lastSibling?this.icon.joinbottom:this.icon.join;
this.str += this.icon.page;
} else {
this.str += "<a href=\"javascript: d.o(" + node.index + ");\">"
this.str += "<img id=\"join" + node.index + "\" src=\"";
this.str += node.lastSibling?(node.isClose?this.icon.plusbottom:this.icon.minusbottom):(node.isClose?this.icon.plus:this.icon.minus);
this.str += "\" />"
this.str += "</a>"
this.str += "<img id=\"folder" + node.index + "\" src=\"" + this.icon.folder + "\" />";
}
this.str += node.name;
this.str += "</div>";
}
Tree.prototype.o = function(index) {
var pNode = this.nodes[index];
document.getElementById("clip"+index).style.display = pNode.isClose?"block":"none";
document.getElementById("join"+index).src = pNode.isClose?this.icon.minusbottom:this.icon.plusbottom;
document.getElementById("folder"+index).src = pNode.isClose?this.icon.folderopen:this.icon.folder;
for(var i=0; i<this.nodes.length; i++) {
if(this.nodes[i].pid==pNode.id) {
document.getElementById("doc"+this.nodes[i].index).style.display = pNode.isClose?"block":"none";
}
}
pNode.isClose = !pNode.isClose;
}
Tree.prototype.setLS = function(node) {
var lastNode;
for(var i=0; i<this.nodes.length; i++) {
if(this.nodes[i].pid == node.id)
node.isLeaf = false;
if(this.nodes[i].pid == node.pid)
lastNode = this.nodes[i];
}
if(lastNode == node)
node.lastSibling = true;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Destroydrop » Javascripts » Tree</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="xtree.js"></script>
</head>
<body>
<h1><a href="/">Destroydrop</a> » <a href="/javascripts/">Javascripts</a> » <a href="/javascripts/tree/">Tree</a></h1>
<h2>Example</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new Tree();
d.addNode(0,-1,'My example tree');
d.addNode(1,0,'Node 1');
d.addNode(2,0,'Node 2');
d.addNode(3,1,'Node 1.1');
d.addNode(4,0,'Node 3');
d.addNode(5,3,'Node 1.1.1');
d.addNode(6,5,'Node 1.1.1.1');
d.addNode(7,0,'Node 4');
d.addNode(8,1,'Node 1.2');
d.addNode(9,0,'My Pictures');
d.addNode(10,9,'The trip to Iceland');
d.addNode(11,9,'Mom\'s birthday');
d.addNode(12,0,'Recycle Bin');
document.write(d);
//-->
</script>
</div>
<p><a href="mailto:drop@destroydrop.com">©2002-2003 Geir Landrö</a></p>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.