单选多选简单树形框架dtree

/*--------------------------------------------------| | dTree 2.05 | www.destroydrop.com/javascript/tree/ | |---------------------------------------------------| | Copyright (c) 2002-2003 Geir Landr? | | | | This script can be used freely as long as all | | copyright messages are intact. | | | | Updated: 17.04.2003 | |--------------------------------------------------*/ //================================================== //================================================== //修改历史： //1、2009-08-27 将dtree修改成可控制是否允许用户选择的权限树， // 即type参数为checkbox时:<input type='checkbox'>,可复选,没有文件夹图标 // type参数为radio时:<input type='radio'>可单选,没有文件夹图标 // type参数为空字符串时: 只有文件夹图标,不能选择. //================================================== // Node object function Node(id, pid, cname, type, cvalue, cshow, cchecked, cdisabled, url, title, target, icon, iconOpen, open) { this.type = type; this.id = id; this.pid = pid; //chechbox的名称 this.cname = cname; //chechbox的值 this.cvalue = cvalue; //chechbox的显示 this.cshow = cshow; //chechbox是否被选中，默认是不选 this.cchecked = cchecked||false; //chechbox是否可用，默认是可用 this.cdisabled = cdisabled||false; //节点链接，默认是虚链接 this.url = url||''; this.title = title; this.target = target; this.icon = icon; this.iconOpen = iconOpen; this._io = open || false; this._is = false; this._ls = false; this._hc = false; this._ai = 0; this._p; }; // Tree object function dTree(objName) { this.config = { target : null, folderLinks : false, useSelection : false, useCookies : false, useLines : true, useIcons : false, //初始化为false,当Node函数的type参数为空时,将其改为true,即使用图标 useStatusText : true, closeSameLevel : false, inOrder : false } this.icon = { root : 'prefectTree/img/base.gif', folder : 'prefectTree/img/folder.gif', folderOpen : 'prefectTree/img/folderopen.gif', node : 'prefectTree/img/page.gif', empty : 'prefectTree/img/empty.gif', line : 'prefectTree/img/line.gif', join : 'prefectTree/img/join.gif', joinBottom : 'prefectTree/img/joinbottom.gif', plus : 'prefectTree/img/plus.gif', plusBottom : 'prefectTree/img/plusbottom.gif', minus : 'prefectTree/img/minus.gif', minusBottom : 'prefectTree/img/minusbottom.gif', nlPlus : 'prefectTree/img/nolines_plus.gif', nlMinus : 'prefectTree/img/nolines_minus.gif' }; this.obj = objName; this.aNodes = []; this.aIndent = []; this.root = new Node(-1); this.selectedNode = null; this.selectedFound = false; this.completed = false; }; // Adds a new node to the node array dTree.prototype.add = function(id, pid, cname, type, cvalue, cshow, cchecked, cdisabled, url, title, target, icon, iconOpen, open) { this.aNodes[this.aNodes.length] = new Node(id, pid, cname, type, cvalue, cshow, cchecked, cdisabled, url, title, target, icon, iconOpen, open); }; // Open/close all nodes dTree.prototype.openAll = function() { this.oAll(true); }; dTree.prototype.closeAll = function() { this.oAll(false); }; // Outputs the tree to the page dTree.prototype.toString = function() { var str = '<div class="dtree">\n'; if (document.getElementById) { if (this.config.useCookies) this.selectedNode = this.getSelected(); str += this.addNode(this.root); } else str += 'Browser not supported.'; str += '</div>'; if (!this.selectedFound) this.selectedNode = null; this.completed = true; return str; }; // Creates the tree structure dTree.prototype.addNode = function(pNode) { var str = ''; var n=0; if (this.config.inOrder) n = pNode._ai; for (n; n<this.aNodes.length; n++) { if (this.aNodes[n].pid == pNode.id) { var cn = this.aNodes[n]; cn._p = pNode; cn._ai = n; this.setCS(cn); if (!cn.target && this.config.target) cn.target = this.config.target; if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id); //if (!this.config.folderLinks && cn._hc) cn.url = null; //alert(cn.url); if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) { cn._is = true; this.selectedNode = n; this.selectedFound = true; } str += this.node(cn, n); if (cn._ls) break; } } return str; }; // Creates the node icon, url and text dTree.prototype.node = function(node, nodeId) { var str = '<div class="dTreeNode">' + this.indent(node, nodeId); if(node.type == ""){ this.config.useIcons = true; } if (this.config.useIcons) { if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node); if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node; if (this.root.id == node.pid) { node.icon = this.icon.root; node.iconOpen = this.icon.root; } str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />'; } if (node.url) { str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"'; if (node.title) str += ' title="' + node.title + '"'; if (node.target) str += ' target="' + node.target + '"'; if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.cname + '\';return true;" onmouseout="window.status=\'\';return true;" '; if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc)) str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"'; str += '>'; } else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id) str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">'; //=============================================== //2006-05-11 将原链接的节点修改为 checkbox. //=============================================== //2009-08-27 将上述版本改为可传参数类型的 : 如传checkbox,radio,或者''. //=============================================== //str += node.name; if(node.pid == this.root.id){ str += node.cname; }else{ if(node.type != ""){ /**组装checkbox开始*/ checkboxSyntax = "<input type='"+node.type+"' desc='" + node.cshow + "' name='" + node.cname + "' id='" + node.cname + "_" + node.id + "' value='" + node.cvalue + "' onClick='javascript: " + this.obj + ".checkNode(" + node.id+","+node.pid+","+node._hc + ",this.checked,this.type);' "; //是否被选中 if(node.cchecked) checkboxSyntax += " checked "; //是否可用 if(node.cdisabled) checkboxSyntax += " disabled "; checkboxSyntax += ">" + node.cshow; /**组装checkbox结束*/ str += checkboxSyntax; }else{ str += node.cshow; } } if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>'; str += '</div>'; if (node._hc) { str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">'; str += this.addNode(node); str += '</div>'; } this.aIndent.pop(); return str; }; // Adds the empty and line icons dTree.prototype.indent = function(node, nodeId) { var str = ''; if (this.root.id != node.pid) { for (var n=0; n<this.aIndent.length; n++) str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />'; (node._ls) ? this.aIndent.push(0) : this.aIndent.push(1); if (node._hc) { str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="'; if (!this.config.useLines)