HTML树结构,XML TO TREE 树

我有些方案需要用到XML结构,比如说将无级分类生成XML,以便前台操作,不需要时时读取数据库. 以前写过 XML TO TREE,这种不利于搜索引擎优化,所以选了一方案,将XML转成HTML,再将HTML做成树.

先上图

HTML结构如下:

<dl>
　　<dt>内容</dt>
　　<dd>
　　　　子类,如此重复
　　</dd>
</dl>

Firebug 图

JS代码:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

function   Html2Tree(box, type) {      this .panel = this .get(box);      this .init();      if   (type) {          this .panel.className = 'Html2Tree Html2Tree_'   + type;      } }; Html2Tree.prototype = {      init: function () {          var   nodes = this .tag( 'dl' , this .panel), S = this ;          for   ( var   i = nodes.length; i--; ) {              var   dl = nodes[i], dd = this .tag( 'dd' , dl), dt = this .tag( 'dt' , dl)[0];              this .setLast(dl);              if   (dd.length == 0) {                  dt.className = 'file' ;              } else   if   (S.display(dd[0]) != 'none' ) {                  dt.className = 'open' ;              }          }          this .live( function () {              var   dd = S.next( this ), open;              if   (dd) {                  open = S.display(dd) == 'none'                  dd.style.display = open ? 'block'   : 'none' ;                  this .className = open ? 'open'   : '' ;              }          }, function () {              return   /dt/i.test( this .nodeName);          });      },      display: function (el) {          var   cc = el.currentStyle || document.defaultView.getComputedStyle(el, null );          return   el.style[ 'display' ] || cc[ 'display' ];      },      live: function (fn, c) {          this .panel.onclick = function (e) {              e = e || window.event;              var   s = e.srcElement || e.target;              while   (s && s !== this ) {                  if   (c.call(s)) {                      fn.call(s, e);                      break ;                  }                  s = s.parentNode;              }          };      },      next: function (dt) {          var   next = dt, dd;          do   {              next = next.nextSibling;              if   (next && /dd/i.test(next.nodeName)) {                  dd = next;                  break ;              }          }          while   (next);          return   dd;      },      setLast: function (dl) {          var   last = dl, next = dl;          do   {              next = next.nextSibling;              if   (next && /dl/i.test(next.nodeName)) {                  last = next;              }          } while   (next);          last.className = 'last' ;      },      get: function (el) {          return   typeof   el == "string"   ? document.getElementById(el) : el;      },      tag: function (tag, el) {          return   (el || document.body).getElementsByTagName(tag);      } };

调用方法

?

1 2 3

new   Html2Tree( 'tree' , 'min' ); //皮肤: red, xp, min, circle, a3, black, chm // 第二个参数为皮肤,共支持 7 种皮肤

最后就是代码打包下载哈哈,欢迎拍砖,请不要恶语相向,你可以选择用或者不用.!

感谢: 感谢果果提供部分代码!

原创代码,转载请联系 柴哥!!!

点我下载