歡迎光臨郝學(xué)武的blog。

          一個不錯的節(jié)點樹Dtree

          Posted on 2008-06-06 17:30 陜西BOY 閱讀(1476) 評論(1)  編輯  收藏

                  以前做系統(tǒng)一般都用腳本拼寫文件夾或者使用alai_tree,感覺用起來不是那么方便,前幾天在網(wǎng)上看了看Dtree,個人感覺很好,他有成型的api(很簡單)的api,css,img圖片庫,有了這幾個東西,我們可以很方便的組織一個tree,相信大家在項目中經(jīng)常會有這樣的需求。它還有很多配置型的參數(shù):
          Variable Type Default Description
          target String true Target for all the nodes.
          folderLinks Boolean true Should folders be links.
          useSelection Boolean true Nodes can be selected(highlighted).
          useCookies Boolean true The tree uses cookies to rember it's state.
          useLines Boolean true Tree is drawn with lines.
          useIcons Boolean true Tree is drawn with icons.
          useStatusText Boolean false Displays node names in the statusbar instead of the url.
          closeSameLevel Boolean false Only one node within a parent can be expanded at the same time. openAll() and closeAll() functions do not work when this is enabled.
          inOrder Boolean false If parent nodes are always added before children, setting this to true speeds up the tree.
          可以風(fēng)格化的配置,滿足個性化需求。
          這里有我的一個練習(xí):
          要顯示效果需要簡歷一個test.htm,引入dtree.css,引入dtree.js,還有需要的圖片,這里好像不能上傳附件,我就貼出代碼吧。如下:
          ////////////////////////////test.htm

          <html>

          <head>
           <title>Haoxuewu's Dtree Test</title>

           <link rel="StyleSheet" href="dtree.css" type="text/css" />
           <script type="text/javascript" src="dtree.js"></script>

          </head>
          <body>

          <h1>Haoxuewu's Dtree Test</h1>

          <h2>Example</h2>

          <div class="dtree">

           <p><a href="javascript: d.openAll();">打開所有節(jié)點</a> | <a href="javascript: d.closeAll();">關(guān)閉所有節(jié)點</a></p>

           <script type="text/javascript">
            <!--

            d = new dTree('d');

            d.add(0,-1,'根節(jié)點');
             d.add(1,0,'一級節(jié)點文件夾1','http://www.baidu.com/');
              d.add(3,1,'Node 1.1','http://www.baidu.com/');
              d.add(8,1,'Node 1.2','http://www.baidu.com/');
               d.add(5,3,'Node 1.1.1','http://www.baidu.com/');
                d.add(6,5,'Node 1.1.1.1','http://www.baidu.com/');
            
             d.add(2,0,'一級節(jié)點文件夾2','http://www.baidu.com/');
             d.add(4,0,'一級節(jié)點文件夾3','http://www.baidu.com/');
             d.add(7,0,'一級節(jié)點文件夾4','http://www.baidu.com/');
             d.add(9,0,'一級節(jié)點圖片','test.htm','我的圖片收藏','','','img/imgfolder.gif');
              d.add(10,9,'文件夾描述1','test.htm','節(jié)點標(biāo)題1');
              d.add(11,9,'文件夾描述2','test.htm','節(jié)點標(biāo)題2');
             d.add(12,0,'回收站','test.htm','','','img/trash.gif');

            document.write(d);

            //-->
           </script>

          </div>

          <p><a href="mailto:haoxuewu@163.com">給我郵件</a></p>

          </body>

          </html>

          ///////////////////////////////////////////////dtree.js

          // Node object

          function Node(id, pid, name, url, title, target, icon, iconOpen, open) {

           this.id = id;

           this.pid = pid;

           this.name = name;

           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   : true,

            useSelection  : true,

            useCookies   : true,

            useLines    : true,

            useIcons    : true,

            useStatusText  : false,

            closeSameLevel : false,

            inOrder     : false

           }

           this.icon = {

            root    : 'img/base.gif',

            folder   : 'img/folder.gif',

            folderOpen : 'img/folderopen.gif',

            node    : 'img/page.gif',

            empty    : 'img/empty.gif',

            line    : 'img/line.gif',

            join    : 'img/join.gif',

            joinBottom : 'img/joinbottom.gif',

            plus    : 'img/plus.gif',

            plusBottom : 'img/plusbottom.gif',

            minus    : 'img/minus.gif',

            minusBottom : 'img/minusbottom.gif',

            nlPlus   : 'img/nolines_plus.gif',

            nlMinus   : '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, name, url, title, target, icon, iconOpen, open) {

           this.aNodes[this.aNodes.length] = new Node(id, pid, name, 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;

             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 (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.name + '\';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">';

           str += node.name;

           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) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus;

             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 ) );

             str += '" alt="" /></a>';

            } else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />';

           }

           return str;

          };

           

          // Checks if a node has any children and if it is the last sibling

          dTree.prototype.setCS = function(node) {

           var lastId;

           for (var n=0; n<this.aNodes.length; n++) {

            if (this.aNodes[n].pid == node.id) node._hc = true;

            if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id;

           }

           if (lastId==node.id) node._ls = true;

          };

           

          // Returns the selected node

          dTree.prototype.getSelected = function() {

           var sn = this.getCookie('cs' + this.obj);

           return (sn) ? sn : null;

          };

           

          // Highlights the selected node

          dTree.prototype.s = function(id) {

           if (!this.config.useSelection) return;

           var cn = this.aNodes[id];

           if (cn._hc && !this.config.folderLinks) return;

           if (this.selectedNode != id) {

            if (this.selectedNode || this.selectedNode==0) {

             eOld = document.getElementById("s" + this.obj + this.selectedNode);

             eOld.className = "node";

            }

            eNew = document.getElementById("s" + this.obj + id);

            eNew.className = "nodeSel";

            this.selectedNode = id;

            if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id);

           }

          };

           

          // Toggle Open or close

          dTree.prototype.o = function(id) {

           var cn = this.aNodes[id];

           this.nodeStatus(!cn._io, id, cn._ls);

           cn._io = !cn._io;

           if (this.config.closeSameLevel) this.closeLevel(cn);

           if (this.config.useCookies) this.updateCookie();

          };

           

          // Open or close all nodes

          dTree.prototype.oAll = function(status) {

           for (var n=0; n<this.aNodes.length; n++) {

            if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) {

             this.nodeStatus(status, n, this.aNodes[n]._ls)

             this.aNodes[n]._io = status;

            }

           }

           if (this.config.useCookies) this.updateCookie();

          };

           

          // Opens the tree to a specific node

          dTree.prototype.openTo = function(nId, bSelect, bFirst) {

           if (!bFirst) {

            for (var n=0; n<this.aNodes.length; n++) {

             if (this.aNodes[n].id == nId) {

              nId=n;

              break;

             }

            }

           }

           var cn=this.aNodes[nId];

           if (cn.pid==this.root.id || !cn._p) return;

           cn._io = true;

           cn._is = bSelect;

           if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls);

           if (this.completed && bSelect) this.s(cn._ai);

           else if (bSelect) this._sn=cn._ai;

           this.openTo(cn._p._ai, false, true);

          };

           

          // Closes all nodes on the same level as certain node

          dTree.prototype.closeLevel = function(node) {

           for (var n=0; n<this.aNodes.length; n++) {

            if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc) {

             this.nodeStatus(false, n, this.aNodes[n]._ls);

             this.aNodes[n]._io = false;

             this.closeAllChildren(this.aNodes[n]);

            }

           }

          }

           

          // Closes all children of a node

          dTree.prototype.closeAllChildren = function(node) {

           for (var n=0; n<this.aNodes.length; n++) {

            if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) {

             if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls);

             this.aNodes[n]._io = false;

             this.closeAllChildren(this.aNodes[n]);  

            }

           }

          }

           

          // Change the status of a node(open or closed)

          dTree.prototype.nodeStatus = function(status, id, bottom) {

           eDiv = document.getElementById('d' + this.obj + id);

           eJoin = document.getElementById('j' + this.obj + id);

           if (this.config.useIcons) {

            eIcon = document.getElementById('i' + this.obj + id);

            eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon;

           }

           eJoin.src = (this.config.useLines)?

           ((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)):

           ((status)?this.icon.nlMinus:this.icon.nlPlus);

           eDiv.style.display = (status) ? 'block': 'none';

          };

           

           

          // [Cookie] Clears a cookie

          dTree.prototype.clearCookie = function() {

           var now = new Date();

           var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);

           this.setCookie('co'+this.obj, 'cookieValue', yesterday);

           this.setCookie('cs'+this.obj, 'cookieValue', yesterday);

          };

           

          // [Cookie] Sets value in a cookie

          dTree.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) {

           document.cookie =

            escape(cookieName) + '=' + escape(cookieValue)

            + (expires ? '; expires=' + expires.toGMTString() : '')

            + (path ? '; path=' + path : '')

            + (domain ? '; domain=' + domain : '')

            + (secure ? '; secure' : '');

          };

           

          // [Cookie] Gets a value from a cookie

          dTree.prototype.getCookie = function(cookieName) {

           var cookieValue = '';

           var posName = document.cookie.indexOf(escape(cookieName) + '=');

           if (posName != -1) {

            var posValue = posName + (escape(cookieName) + '=').length;

            var endPos = document.cookie.indexOf(';', posValue);

            if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos));

            else cookieValue = unescape(document.cookie.substring(posValue));

           }

           return (cookieValue);

          };

           

          // [Cookie] Returns ids of open nodes as a string

          dTree.prototype.updateCookie = function() {

           var str = '';

           for (var n=0; n<this.aNodes.length; n++) {

            if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) {

             if (str) str += '.';

             str += this.aNodes[n].id;

            }

           }

           this.setCookie('co' + this.obj, str);

          };

           

          // [Cookie] Checks if a node id is in a cookie

          dTree.prototype.isOpen = function(id) {

           var aOpen = this.getCookie('co' + this.obj).split('.');

           for (var n=0; n<aOpen.length; n++)

            if (aOpen[n] == id) return true;

           return false;

          };

           

          // If Push and pop is not implemented by the browser

          if (!Array.prototype.push) {

           Array.prototype.push = function array_push() {

            for(var i=0;i<arguments.length;i++)

             this[this.length]=arguments[i];

            return this.length;

           }

          };

          if (!Array.prototype.pop) {

           Array.prototype.pop = function array_pop() {

            lastElement = this[this.length-1];

            this.length = Math.max(this.length-1,0);

            return lastElement;

           }

          };


          ////////////////////////////////////dtree.csss

          .dtree {
           font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
           font-size: 11px;
           color: #666;
           white-space: nowrap;
          }
          .dtree img {
           border: 0px;
           vertical-align: middle;
          }
          .dtree a {
           color: #333;
           text-decoration: none;
          }
          .dtree a.node, .dtree a.nodeSel {
           white-space: nowrap;
           padding: 1px 2px 1px 2px;
          }
          .dtree a.node:hover, .dtree a.nodeSel:hover {
           color: #333;
           text-decoration: underline;
          }
          .dtree a.nodeSel {
           background-color: #c0d2ec;
          }
          .dtree .clip {
           overflow: hidden;
          }

          圖片大家可以按照dtree.js里面的文件名,找一些圖片放上就可以了
          下班了,哈哈

          Feedback

          # re: 一個不錯的節(jié)點樹Dtree  回復(fù)  更多評論   

          2008-07-15 13:45 by dtree
          隱藏掉根節(jié)點``或者根節(jié)點不要圖片``子節(jié)點要圖片`怎么處理?

          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導(dǎo)航:
           

          posts - 17, comments - 65, trackbacks - 0, articles - 28

          Copyright © 陜西BOY

          主站蜘蛛池模板: 安福县| 平阴县| 怀仁县| 保定市| 吉林省| 确山县| 吉木萨尔县| 宁安市| 肇庆市| 揭东县| 神木县| 麻阳| 汾西县| 藁城市| 衡南县| 灌阳县| 惠东县| 北流市| 临沂市| 正阳县| 唐海县| 山阴县| 宜宾县| 永修县| 白银市| 吴忠市| 昂仁县| 老河口市| 河曲县| 洪湖市| 长武县| 芜湖市| 云浮市| 喀什市| 滦南县| 余姚市| 郯城县| 宁津县| 清新县| 长垣县| 温泉县|