现在的位置: 首页 > 综合 > 正文

js – Tree of Document

2013年09月07日 ⁄ 综合 ⁄ 共 14319字 ⁄ 字号 小 中 大 ⁄ 评论关闭
 

  1. <!-- dTree.css -->
  3. .dtree {
  4.     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  5.     font-size: 11px;
  6.     color: #666;
  7.     white-space: nowrap;
  8. }
  9. .dtree img {
  10.     border: 0px;
  11.     vertical-align: middle;
  12. }
  13. .dtree a {
  14.     color: #333;
  15.     text-decoration: none;
  16. }
  17. .dtree a.node, .dtree a.nodeSel {
  18.     white-space: nowrap;
  19.     padding: 1px 2px 1px 2px;
  20. }
  21. .dtree a.node:hover, .dtree a.nodeSel:hover {
  22.     color: #333;
  23.     text-decoration: underline;
  24. }
  25. .dtree a.nodeSel {
  26.     background-color: #c0d2ec;
  27. }
  28. .dtree .clip {
  29.     overflow: hidden;
  30. }

 

  1. <!-- dTree.js -->
  3. function Node(id, pid, name, url, title, target, icon, iconOpen, open) {
  4.     this.id = id;
  5.     this.pid = pid;
  6.     this.name = name;
  7.     this.url = url;
  8.     this.title = title;
  9.     this.target = target;
  10.     this.icon = icon;
  11.     this.iconOpen = iconOpen;
  12.     this._io = open || false;
  13.     this._is = false;
  14.     this._ls = false;
  15.     this._hc = false;
  16.     this._ai = 0;
  17.     this._p;
  18. }
  20. // Tree object
  21. function dTree(objName) {
  22.     this.config = {
  23.         target              : null,
  24.         folderLinks         : true,
  25.         useSelection        : true,
  26.         useCookies          : true,
  27.         useLines            : true,
  28.         useIcons            : true,
  29.         useStatusText       : false,
  30.         closeSameLevel      : false,
  31.         inOrder             : false
  32.     }
  33.     this.icon = {
  34.         root            : 'img/base.gif',
  35.         folder          : 'img/folder.gif',
  36.         folderOpen      : 'img/folderopen.gif',
  37.         node            : 'img/page.gif',
  38.         empty           : 'img/empty.gif',
  39.         line            : 'img/line.gif',
  40.         join            : 'img/join.gif',
  41.         joinBottom      : 'img/joinbottom.gif',
  42.         plus            : 'img/plus.gif',
  43.         plusBottom      : 'img/plusbottom.gif',
  44.         minus           : 'img/minus.gif',
  45.         minusBottom     : 'img/minusbottom.gif',
  46.         nlPlus          : 'img/nolines_plus.gif',
  47.         nlMinus         : 'img/nolines_minus.gif'
  48.     };
  50.     this.obj = objName;
  51.     this.aNodes = [];
  52.     this.aIndent = [];
  53.     this.root = new Node(-1);
  54.     this.selectedNode = null;
  55.     this.selectedFound = false;
  56.     this.completed = false;
  57. };
  59. // Adds a new node to the node array
  60. dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {
  61.     this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);
  62. };
  64. // Open/close all nodes
  65. dTree.prototype.openAll = function() {
  66.     this.oAll(true);
  67. };
  69. dTree.prototype.closeAll = function() {
  70.     this.oAll(false);
  71. };
  73. // Outputs the tree to the page
  74. dTree.prototype.toString = function() {
  75.     var str = '<div class="dtree">/n';
  76.     if (document.getElementById) {
  77.         if (this.config.useCookies) this.selectedNode = this.getSelected();
  78.         str += this.addNode(this.root);
  79.     } else str += 'Browser not supported.';
  80.     str += '</div>';
  81.     if (!this.selectedFound) this.selectedNode = null;
  82.     this.completed = true;
  83.     return str;
  84. };
  86. // Creates the tree structure
  87. dTree.prototype.addNode = function(pNode) {
  88.     var str = '';
  89.     var n=0;
  90.     if (this.config.inOrder) n = pNode._ai;
  91.     for (n; n<this.aNodes.length; n++) {
  92.         if (this.aNodes[n].pid == pNode.id) {
  93.             var cn = this.aNodes[n];
  94.             cn._p = pNode;
  95.             cn._ai = n;
  96.             this.setCS(cn);
  97.             if (!cn.target && this.config.target) cn.target = this.config.target;
  98.             if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id);
  99.             if (!this.config.folderLinks && cn._hc) cn.url = null;
  100.             if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) {
  101.                     cn._is = true;
  102.                     this.selectedNode = n;
  103.                     this.selectedFound = true;
  104.             }
  105.             str += this.node(cn, n);
  106.             if (cn._ls) break;
  107.         }
  108.     }
  109.     return str;
  110. };
  112. // Creates the node icon, url and text
  113. dTree.prototype.node = function(node, nodeId) {
  114.     var str = '<div class="dTreeNode">' + this.indent(node, nodeId);
  115.     if (this.config.useIcons) {
  116.         if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node);
  117.         if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;
  118.         if (this.root.id == node.pid) {
  119.             node.icon = this.icon.root;
  120.             node.iconOpen = this.icon.root;
  121.         }
  122.         str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';
  123.     }
  125.     if (node.url) {
  126.         str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';
  127.         if (node.title) str += ' title="' + node.title + '"';
  128.         if (node.target) str += ' target="' + node.target + '"';
  129.         if (this.config.useStatusText) str += ' onmouseover="window.status=/'' + node.name + '/';return true;" onmouseout="window.status=/'/';return true;" ';
  130.         if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))
  131.             str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"';
  132.         str += '>';
  133.     }else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)
  134.         str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">';
  135.     str += node.name;
  136.     if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';
  137.     str += '</div>';
  138.     if (node._hc) {
  139.         str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">';
  140.         str += this.addNode(node);
  141.         str += '</div>';
  142.     }
  143.     this.aIndent.pop();
  144.     return str;
  145. };
  147. // Adds the empty and line icons
  148. dTree.prototype.indent = function(node, nodeId) {
  149.     var str = '';
  150.     if (this.root.id != node.pid) {
  151.         for (var n=0; n<this.aIndent.length; n++)
  152.             str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />';
  153.         (node._ls) ? this.aIndent.push(0) : this.aIndent.push(1);
  154.         if (node._hc) {
  155.             str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="';
  156.             if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus;
  157.             else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? this.icon.plusBottom : this.icon.plus ) );
  158.             str += '" alt="" /></a>';
  159.         } else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />';
  160.     }
  161.     return str;
  162. };
  164. // Checks if a node has any children and if it is the last sibling
  165. dTree.prototype.setCS = function(node) {
  166.     var lastId;
  167.     for (var n=0; n<this.aNodes.length; n++) {
  168.         if (this.aNodes[n].pid == node.id) node._hc = true;
  169.         if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id;
  170.     }
  171.     if (lastId==node.id) node._ls = true;
  172. };
  174. // Returns the selected node
  175. dTree.prototype.getSelected = function() {
  176.     var sn = this.getCookie('cs' + this.obj);
  177.     return (sn) ? sn : null;
  178. };
  180. // Highlights the selected node
  181. dTree.prototype.s = function(id) {
  182.     if (!this.config.useSelection) return;
  183.     var cn = this.aNodes[id];
  184.     if (cn._hc && !this.config.folderLinks) return;
  185.     if (this.selectedNode != id) {
  186.         if (this.selectedNode || this.selectedNode==0) {
  187.             eOld = document.getElementById("s" + this.obj + this.selectedNode);
  188.             eOld.className = "node";
  189.         }
  190.         eNew = document.getElementById("s" + this.obj + id);
  191.         eNew.className = "nodeSel";
  192.         this.selectedNode = id;
  193.         if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id);
  194.     }
  195. };
  197. // Toggle Open or close
  198. dTree.prototype.o = function(id) {
  199.     var cn = this.aNodes[id];
  200.     this.nodeStatus(!cn._io, id, cn._ls);
  201.     cn._io = !cn._io;
  202.     if (this.config.closeSameLevel) this.closeLevel(cn);
  203.     if (this.config.useCookies) this.updateCookie();
  204. };
  206. // Open or close all nodes
  207. dTree.prototype.oAll = function(status) {
  208.     for (var n=0; n<this.aNodes.length; n++) {
  209.         if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) {
  210.             this.nodeStatus(status, n, this.aNodes[n]._ls)
  211.             this.aNodes[n]._io = status;
  212.         }
  213.     }
  214.     if (this.config.useCookies) this.updateCookie();
  215. };
  217. // Opens the tree to a specific node
  218. dTree.prototype.openTo = function(nId, bSelect, bFirst) {
  219.     if (!bFirst) {
  220.         for (var n=0; n<this.aNodes.length; n++) {
  221.             if (this.aNodes[n].id == nId) {
  222.                 nId=n;
  223.                 break;
  224.             }
  225.         }
  226.     }
  227.     var cn=this.aNodes[nId];
  228.     if (cn.pid==this.root.id || !cn._p) return;
  229.     cn._io = true;
  230.     cn._is = bSelect;
  231.     if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls);
  232.     if (this.completed && bSelect) this.s(cn._ai);
  233.     else if (bSelect) this._sn=cn._ai;
  234.     this.openTo(cn._p._ai, false, true);
  235. };
  237. // Closes all nodes on the same level as certain node
  238. dTree.prototype.closeLevel = function(node) {
  239.     for (var n=0; n<this.aNodes.length; n++) {
  240.         if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc) {
  241.             this.nodeStatus(false, n, this.aNodes[n]._ls);
  242.             this.aNodes[n]._io = false;
  243.             this.closeAllChildren(this.aNodes[n]);
  244.         }
  245.     }
  246. }
  248. // Closes all children of a node
  249. dTree.prototype.closeAllChildren = function(node) {
  250.     for (var n=0; n<this.aNodes.length; n++) {
  251.         if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) {
  252.             if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls);
  253.             this.aNodes[n]._io = false;
  254.             this.closeAllChildren(this.aNodes[n]);      
  255.         }
  256.     }
  257. }
  259. // Change the status of a node(open or closed)
  260. dTree.prototype.nodeStatus = function(status, id, bottom) {
  261.     eDiv    = document.getElementById('d' + this.obj + id);
  262.     eJoin   = document.getElementById('j' + this.obj + id);
  263.     if (this.config.useIcons) {
  264.         eIcon   = document.getElementById('i' + this.obj + id);
  265.         eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon;
  266.     }
  267.     eJoin.src = (this.config.useLines)?
  268.     ((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)):
  269.     ((status)?this.icon.nlMinus:this.icon.nlPlus);
  270.     eDiv.style.display = (status) ? 'block': 'none';
  271. };
  273. // [Cookie] Clears a cookie
  274. dTree.prototype.clearCookie = function() {
  275.     var now = new Date();
  276.     var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);
  277.     this.setCookie('co'+this.obj, 'cookieValue', yesterday);
  278.     this.setCookie('cs'+this.obj, 'cookieValue', yesterday);
  279. };
  281. // [Cookie] Sets value in a cookie
  282. dTree.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) {
  283.     document.cookie =
  284.         escape(cookieName) + '=' + escape(cookieValue)
  285.         + (expires ? '; expires=' + expires.toGMTString() : '')
  286.         + (path ? '; path=' + path : '')
  287.         + (domain ? '; domain=' + domain : '')
  288.         + (secure ? '; secure' : '');
  289. };
  291. // [Cookie] Gets a value from a cookie
  292. dTree.prototype.getCookie = function(cookieName) {
  293.     var cookieValue = '';
  294.     var posName = document.cookie.indexOf(escape(cookieName) + '=');
  295.     if (posName != -1) {
  296.         var posValue = posName + (escape(cookieName) + '=').length;
  297.         var endPos = document.cookie.indexOf(';', posValue);
  298.         if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos));
  299.         else cookieValue = unescape(document.cookie.substring(posValue));
  300.     }
  301.     return (cookieValue);
  302. };
  304. // [Cookie] Returns ids of open nodes as a string
  305. dTree.prototype.updateCookie = function() {
  306.     var str = '';
  307.     for (var n=0; n<this.aNodes.length; n++) {
  308.         if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) {
  309.             if (str) str += '.';
  310.             str += this.aNodes[n].id;
  311.         }
  312.     }
  313.     this.setCookie('co' + this.obj, str);
  314. };
  316. // [Cookie] Checks if a node id is in a cookie
  317. dTree.prototype.isOpen = function(id) {
  318.     var aOpen = this.getCookie('co' + this.obj).split('.');
  319.     for (var n=0; n<aOpen.length; n++)
  320.         if (aOpen[n] == id) return true;
  321.     return false;
  322. };
  324. // If Push and pop is not implemented by the browser
  325. if (!Array.prototype.push) {
  326.     Array.prototype.push = function array_push() {
  327.         for(var i=0;i<arguments.length;i++)
  328.             this[this.length]=arguments[i];
  329.         return this.length;
  330.     }
  331. };
  332. if (!Array.prototype.pop) {
  333.     Array.prototype.pop = function array_pop() {
  334.         lastElement = this[this.length-1];
  335.         this.length = Math.max(this.length-1,0);
  336.         return lastElement;
  337.     }
  338. };

 

  1. <!-- dTree.htm -->
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html>
  5. <head>
  6.     <title>dTree</title>
  7.     <link rel="StyleSheet" href="dtree.css" type="text/css" />
  8.     <script type="text/javascript" src="dtree.js"></script>
  9. </head>
  10. <body>
  11. <div class="dtree">
  12.     <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
  13.     <script type="text/javascript">
  14.         <!--
  15.         d = new dTree('d');
  16.         dsf = "asdfasdf"
  18.         d.add(0,-1,'My example tree');
  19.         d.add(1,0,'Node 1','javascript:alert(dsf)');
  20.         d.add(2,0,'Node 2');
  21.         d.add(3,1,'Node 1.1');
  22.         d.add(3,1,'new 1')
  23.         
  24.         d.add(4,0,'Node 3','example01.html');
  25.         d.add(5,3,'Node 1.1.1','example01.html');
  26.         d.add(6,5,'Node 1.1.1.1','example01.html');
  27.         d.add(7,0,'Node 4','example01.html');
  28.         d.add(8,1,'Node 1.2','example01.html');
  29.         d.add(9,0,'My Pictures','example01.html','Pictures I/'ve taken over the years','','','img/imgfolder.gif');
  30.         d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
  31.         d.add(11,9,'Mom/'s birthday','example01.html');
  33.         d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
  35.         d.add(13,0,'new 2','javascript:alert(dsf)')
  36.         d.add(14,13,'new 3')
  37.         d.add(15,14,'new 3')
  38.         d.add(16,15,'new 3')
  39.         d.add(17,16,'new 3')
  40.         d.add(18,17,'new 3','javascript:alert(dsf)')
  42.         document.write(d);
  43.         //-->
  44.     </script>
  45. </div>
  46. </body>
  47. </html>
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞