当前位置: 代码迷 >> Web前端 >> 小弟我的新tree
  详细解决方案

小弟我的新tree

热度:150   发布时间:2012-09-22 21:54:54.0
我的新tree


function Node(id, pid, text, href, icon) {
?this.id = id;
?this.pid = pid || null;
?this.text = text || null;
?this.href = href || null;
?this.icon = icon || null;
?this.leaf = true;
?this.level = 0;
?this.parent = null;
?this.tabletree = null;
?this.childNodes = [];
?var chk = document.createElement("input");
?chk.type = "checkbox";
?chk.value = this.id;
?chk.onclick = function () {
??if (this.checked) {
???this.node.checked();
??} else {
???this.node.unchecked();
??}
?};
?this.chk = chk;
?this.chk.node = this;
?var getElByClass = function (cls, tag) {
??var els = [];
??var all = document.getElementsByTagName(tag || "*");
??for (var i = 0; i < all.length; i++) {
???if (all[i].className == cls) {
????els[els.length] = all[i];
???}
??}
??return els;
?};
?var txt = document.createElement("span");
?txt.innerHTML = this.text;
?txt.className = "nodetxt";
?/**txt.onmouseover = function () {
??????? var els = getElByClass("nodetxt", "span");
??????? for (var k in els) {
??????????? els[k].className = "nodetxt";
??????? }
??????? this.className = "hover";
??? };**/
?txt.onclick = function () {
??var els = getElByClass("clicked", "span");
??for (var k in els) {
???els[k].className = "nodetxt";
??}
??this.className = "clicked";
??this.node.tabletree.selectedNode = this.node;
?};
?this.txt = txt;
?this.txt.node = this;
?var sw = document.createElement("img");
?sw.setAttribute("src", "../../images/minus-nl.gif");
?sw.setAttribute("width", "16");
?sw.setAttribute("height", "18");
?sw.setAttribute("align", "bottom");
?sw.onclick = function () {
??var src = this.getAttribute("src");
??if (src == "../../images/plus-nl.gif") {
???this.setAttribute("src", "../../images/minus-nl.gif");
???this.node.expand();
??} else {
???this.setAttribute("src", "../../images/plus-nl.gif");
???this.node.collapse();
??}
?};
?this.sw = sw;
?this.sw.node = this;
?var nodeui = document.createElement("div");
?this.nodeui = nodeui;
}
Node.prototype.expand = function () {
?var child = this.childNodes;
?for (var k in child) {
??child[k].nodeui.style.display = "block";
?}
};
Node.prototype.collapse = function () {
?var child = this.childNodes;
?for (var k in child) {
??child[k].nodeui.style.display = "none";
??child[k].sw.setAttribute("src", "../../images/plus-nl.gif");
??child[k].collapse();
?}
};
Node.prototype.checked = function () {
?var node = this;
?var level = node.level;
?node.tabletree.checkednodes.push(node);
?for (var k = level; k > 1; k--) {
??if (!node.parent.chk.checked) {
???node.parent.chk.checked = true;
???node.tabletree.checkednodes.push(node.parent);
??}
??node = node.parent;
?}
};
Node.prototype.unchecked = function () {
?var node = this;
?var arr = node.tabletree.checkednodes;
?for (var i in arr) {
??if (arr[i].id == node.id) {
???arr.splice(i, 1);
??}
?}
?for (var k in node.childNodes) {
??if (node.childNodes[k].chk.checked) {
???node.childNodes[k].chk.checked = false;
???for (var i in arr) {
????if (arr[i].id == node.childNodes[k].id) {
?????arr.splice(i, 1);
????}
???}
???node.childNodes[k].unchecked();
??}
?}
};
function TableTree() {
?this.root = new Node(0);
?this.nodes = [this.root];
?this.checkednodes = [];
?this.selectedNode = null;
?this.container;
?if (!arguments[0]) {
??alert("\u8bf7\u5728\u521b\u5efa\u6811\u65f6\u6307\u5b9a\u6811\u7684\u5bb9\u5668!");
??return;
?}
?if (typeof (arguments[0]) == "string") {
??this.container = document.getElementById(arguments[0]);
?} else {
??this.container = arguments[0];
?}
?var box = document.createElement("div");
?box.className = "rzytree";
?var header = document.createElement("div");
?header.className = "title";
?var title = document.createElement("span");
?title.innerHTML = "\u6743\u9650";
?this.body = document.createElement("div");
?this.body.style.height = '475px';
?this.body.style.overflowY = 'auto';
?header.appendChild(title);
?box.appendChild(header);
?box.appendChild(this.body);
?this.container.appendChild(box);
}
TableTree.prototype.add = function (id, pid, text, href, icon) {
?var p = this.getNode(pid);
?if (p) {
??var node = new Node(id, pid, text, href, icon);
??node.level = p.level + 1;
??node.parent = p;
??node.tabletree = this;
??p.childNodes.push(node);
??p.leaf = false;
??this.nodes.push(node);
?}
};
TableTree.prototype.getNode = function (id) {
?for (var k in this.nodes) {
??if (this.nodes[k].id == id) {
???return this.nodes[k];
??}
?}
?return null;
};
TableTree.prototype.render = function () {
?var body = this.body;
?function drawNode(node) {
??var child = node.childNodes;
??for (var i in child) {
???var nodeui = child[i].nodeui;
???if (child[i].leaf) {
????nodeui.style.paddingLeft = (child[i].level) * 16 + "px";
???} else {
????nodeui.style.paddingLeft = (child[i].level - 1) * 16 + "px";
????nodeui.appendChild(child[i].sw);
???}
??????????? //nodeui.appendChild(child[i].chk);
???nodeui.appendChild(child[i].txt);
???body.appendChild(nodeui);
???drawNode(node.childNodes[i]);
??}
?}
?drawNode(this.root);
};
var Ajax = function (url, params, callback) {
?var reqError = "\u54cd\u5e94\u5f02\u5e38\uff01\uff01\uff01";
?var sendData = null;
?var createXHR = function () {
??var XHR;
??if (window.XMLHttpRequest) {
???XHR = new XMLHttpRequest();
??} else {
???if (window.ActiveXObject) {
????try {
?????XHR = new ActiveXObject("Msxml2.XMLHTTP");
????}
????catch (e) {
?????try {
??????XHR = new ActiveXObject("Microsoft.XMLHTTP");
?????}
?????catch (e) {
?????}
????}
???}
??}
??return XHR;
?};
?var processParams = function () {
??var ret = "";
??for (var p in params) {
???ret += "&";
???ret += p + "=" + params[p];
??}
??ret = ret.substring(1);
??return ret;
?};
?var method = (url.indexOf("?") == -1) ? "POST" : "GET";
?if (params && typeof (params) == "object") {
??if (typeof (params) == "object") {
???if (method == "GET") {
????url += "&" + processParams();
???} else {
????sendData = processParams();
???}
??}
??if (typeof (params) == "string") {
???if (method == "GET") {
????url += "&" + params;
???} else {
????sendData = params;
???}
??}
?}
?var xhr = createXHR();
?xhr.open(method, url, true);
?if (method == "POST") {
??xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
?}
?xhr.onreadystatechange = function () {
??if (xhr.readyState == 4) {
???if (xhr.status == 200) {
????if (callback) {
?????callback(xhr);
????}
???} else {
????window.alert(reqError);
???}
??}
?};
?xhr.send(sendData);
};
TableTree.prototype.load = function (url) {
?var tree = this;
?this.url = url;
?Ajax(url, null, function (xhr) {
??var items = xhr.responseXML.getElementsByTagName("item");
??for (var i = 0; i < items.length; i++) {
???var code = items[i].getElementsByTagName("code")[0].childNodes[0].nodeValue;
???var name = items[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
???var url = "";
???if (items[i].getElementsByTagName("url")[0].childNodes[0]) {
????url = items[i].getElementsByTagName("url")[0].childNodes[0].nodeValue;
???}
???var icon = items[i].getElementsByTagName("icon")[0].childNodes[0].nodeValue;
???var parent = items[i].getElementsByTagName("parent")[0].childNodes[0].nodeValue;
???var type = items[i].getElementsByTagName("type")[0].childNodes[0].nodeValue;
???var dscn = "";
???if (items[i].getElementsByTagName("desn")[0].childNodes[0]) {
????dscn = items[i].getElementsByTagName("desn")[0].childNodes[0].nodeValue;
???}
???tree.add(code, parent, name, url, icon);
??}
??tree.render();
?});
};
TableTree.prototype.reload = function () {
?this.nodes = [this.root];
?this.checkednodes = [];
?this.selectedNode = null;
?this.body.innerHTML = '';
?//this.load(this.url);
};
TableTree.prototype.remove = function (node) {
?function remove(node){
??node.nodeui.innerHTML = '';
??var child = node.childNodes;
??for(var k in child){
???remove(child[k]);
??}
?}
?remove(node);
?var url = '../../power?operate=delete&node=' + node.id;
?if(url){
??Ajax(url, null, function (xhr) {
???
??});
?}
};

  相关解决方案