dynamictreebuilder.js
来自「javascript 写的动态树,里面有两个示例文件一看就会用。」· JavaScript 代码 · 共 550 行 · 第 1/2 页
JS
550 行
} else {
active.parentNode.appendChild(node);
}
this.updateHtml();
};
this.insertInsideAtStart = function(id, text, type, object) {
if (!this.mayInsertInside()) {
throw this.id+'.insertInsideAtStart() failed, illegal action';
}
var node = this.createNode(id, text, type, object);
var active = this.allNodes[this.active];
if (active.childNodes.length) {
active.appendChildAtIndex(node, 0);
} else {
active.appendChild(node);
}
this.updateHtml();
};
this.insertInsideAtEnd = function(id, text, type, object) {
if (!this.mayInsertInside()) {
throw this.id+'.insertInsideAtEnd() failed, illegal action';
}
var node = this.createNode(id, text, type, object);
var active = this.allNodes[this.active];
active.appendChild(node);
this.updateHtml();
};
this.remove = function() {
var node = this.allNodes[this.active];
node.parentNode.removeChild(node);
this.allNodes[this.active] = null;
this.active = "";
this.updateHtml();
};
function Node(id, text, parentNode, childNodes, isDoc, isFolder) {
this.id = id;
this.text = text;
this.parentNode = parentNode;
this.childNodes = childNodes;
this.isDoc = isDoc;
this.isFolder = isFolder;
this.href = "";
this.title = "";
this.target = "";
this.isFirst = function() {
if (this.parentNode) {
return this.parentNode.childNodes[0].id == this.id;
}
throw "DynamicTreeBuilder.Node.isFirst() failed, this func cannot be called for the root element";
};
this.isLast = function() {
if (this.parentNode) {
return this.parentNode.childNodes.getLast().id == this.id;
}
throw "DynamicTreeBuilder.Node.isLast() failed, this func cannot be called for the root element";
};
this.getLevel = function() {
var level = 0;
var node = this;
while (node.parentNode) {
level++;
node = node.parentNode;
}
return level;
};
this.getNextSibling = function() {
if (this.parentNode) {
var nodes = this.parentNode.childNodes;
var start = false;
for (var i = 0; i < nodes.length; i++) {
if (start) { return nodes[i]; }
if (!start && this.id != nodes[i].id) { continue; }
start = true;
}
return false;
}
throw "DynamicTreeBuilder.Node.getNextSibling() failed, this func cannot be called for the root element";
};
this.getPreviousSibling = function() {
if (this.parentNode) {
var nodes = this.parentNode.childNodes;
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].id == this.id) {
if (i) { return nodes[i-1]; }
else { return false; }
}
}
throw "DynamicTreeBuilder.Node.getPreviousSibling() failed, unknown error";
}
throw "DynamicTreeBuilder.Node.getPreviousSibling() failed, this func cannot be called for the root element";
};
this.getIndex = function() {
if (this.parentNode) {
var nodes = this.parentNode.childNodes;
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].id == this.id) { return i; }
}
throw "DynamicTreeBuilder.Node.getIndex() failed, unknown error";
}
throw "DynamicTreeBuilder.Node.getIndex() failed, this func cannot be called for the root element";
};
this.removeChild = function(node) {
this.childNodes.removeByIndex(node.getIndex());
node.parentNode = null;
};
this.appendChild = function(node) {
this.childNodes.push(node);
node.parentNode = this;
};
this.appendChildAtIndex = function(node, index) {
this.childNodes.pushAtIndex(node, index);
node.parentNode = this;
};
this.toHtml = function() {
var s = '<div class="?" id="?">'.format((this.isFolder ? "folder" : "doc"), this.id);
if (this.isFolder) {
var nodeIcon;
if (this.childNodes.length) {
nodeIcon = (self.opened.contains(this.id) ? (this.isLast() ? self.img.nodeOpenEnd : self.img.nodeOpen) : (this.isLast() ? self.img.nodeEnd : self.img.node));
} else {
nodeIcon = (this.isLast() ? self.img.leafEnd : self.img.leaf);
}
var icon = ((self.opened.contains(this.id) && this.childNodes.length) ? self.img.folderOpen : self.img.folder);
if (this.childNodes.length) { s += '<a href="javascript:void(0)" onclick="?.nodeClick(\'?\')">'.format(self.id, this.id); }
s += '<img id="?-node" src="?" width="18" height="18" alt="" />'.format(this.id, nodeIcon);
if (this.childNodes.length) { s += '</a>'; }
s += '<img id="?-icon" src="?" width="18" height="18" alt="" />'.format(this.id, icon);
s += '<span id="?-text" class="text?" onclick="?.textClick(\'?\')">?</span>'.format(this.id, (self.active == this.id ? '-active' : ''), self.id, this.id, this.text);
if (this.childNodes.length) {
s += '<div class="section?" id="?-section"'.format((this.isLast() ? " last" : ""), this.id);
if (self.opened.contains(this.id)) {
s += ' style="display: block;"'; }
s += '>';
for (var i = 0; i < this.childNodes.length; i++) {
s += this.childNodes[i].toHtml();
}
s += '</div>';
}
}
if (this.isDoc) {
s += '<img src="?" width="18" height="18" alt="" /><img src="?" />'.format((this.isLast() ? self.img.leafEnd : self.img.leaf), self.img.doc);
s += '<span id="?-text" class="text?" onclick="?.textClick(\'?\')">?</span>'.format(this.id, (self.active == this.id ? '-active' : ''), self.id, this.id, this.text);
}
s += '</div>';
return s;
};
}
function Cookie() {
this.get = function(name) {
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; ++i) {
var a = cookies[i].split("=");
if (a.length == 2) {
a[0] = a[0].trim();
a[1] = a[1].trim();
if (a[0] == name) {
return unescape(a[1]);
}
}
}
return "";
};
this.set = function(name, value, seconds, path, domain, secure) {
var cookie = (name + "=" + escape(value));
if (seconds) {
var date = new Date(new Date().getTime()+seconds*1000);
cookie += ("; expires="+date.toGMTString());
}
cookie += (path ? "; path="+path : "");
cookie += (domain ? "; domain="+domain : "");
cookie += (secure ? "; secure" : "");
document.cookie = cookie;
};
this.del = function(name) {
document.cookie = name + "=; expires=Thu, 01-Jan-70 00:00:01 GMT";
};
}
function Listener() {
this.funcs = [];
this.add = function(func) {
this.funcs.push(func);
};
this.call = function() {
for (var i = 0; i < this.funcs.length; i++) {
this.funcs[i]();
}
};
}
var self = this;
this.id = id;
this.tree = new Node("tree", "", null, new Array(), false, true);
this.allNodes = {}; // id => object
this.opened = []; // opened folders
this.active = ""; // active node, text clicked
this.cookie = new Cookie();
this.imgObjects = [];
this.count = 0;
this.textClickListener = new Listener(); // other modules also may need to know when user clicks on text
}
/* Check whether array contains given string */
if (!Array.prototype.contains) {
Array.prototype.contains = function(s) {
for (var i = 0; i < this.length; ++i) {
if (this[i] === s) { return true; }
}
return false;
};
}
/* Remove elements with such value (mutates) */
if (!Array.prototype.removeByValue) {
Array.prototype.removeByValue = function(value) {
var i, indexes = [];
for (i = 0; i < this.length; ++i) {
if (this[i] === value) { indexes.push(i); }
}
for (i = indexes.length - 1; i >= 0; --i) {
this.splice(indexes[i], 1);
}
};
}
/* Remove elements judged 'false' by the passed function (mutates) */
if (!Array.prototype.filter) {
Array.prototype.filter = function(func) {
var i, indexes = [];
for (i = 0; i < this.length; ++i) {
if (!func(this[i])) { indexes.push(i); }
}
for (i = indexes.length - 1; i >= 0; --i) {
this.splice(indexes[i], 1);
}
};
}
/* Get the last element from the array */
if (!Array.prototype.getLast) {
Array.prototype.getLast = function() {
return this[this.length-1];
};
}
/* Strip whitespace from the beginning and end of a string */
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s*|\s*$/g, "");
};
}
/* Replace ? tokens with variables passed as arguments in a string */
String.prototype.format = function() {
if (!arguments.length) { throw "String.format() failed, no arguments passed, this = "+this; }
var tokens = this.split("?");
if (arguments.length != (tokens.length - 1)) { throw "String.format() failed, tokens != arguments, this = "+this; }
var s = tokens[0];
for (var i = 0; i < arguments.length; ++i) {
s += (arguments[i] + tokens[i + 1]);
}
return s;
};
/* Remove element with given index (mutates) */
if (!Array.prototype.removeByIndex) {
Array.prototype.removeByIndex = function(index) {
this.splice(index, 1);
};
}
/* Push an element at specified index */
if (!Array.prototype.pushAtIndex) {
Array.prototype.pushAtIndex = function(el, index) {
this.splice(index, 0, el);
};
}
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?