我有些方案需要用到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, this.panelthis.get(box); this.init(); if (type) this.panel.className'Html2Tree + }};Html2Tree.prototype init:function() var nodesthis.tag('dl',this.panel),this; for (var i var dlthis.tag('dd',this.tag('dt', this.setLast(dl); if (dd.length dt.className'file'; }else if (S.display(dd[0])'none') dt.className'open'; } } this.live(function() var ddthis), if (dd) open'none' dd.style.display'block' :'none'; this.className'open' :''; } },function() return /dt/i.test(this.nodeName); }); }, display:function(el) var ccnull); return el.style['display']'display']; }, live:function(fn, this.panel.onclickfunction(e) e var s while (sthis) if (c.call(s)) fn.call(s, break; } s } }; }, next:function(dt) var next do { next if (next dd break; } } while (next); return dd; }, setLast:function(dl) var last do { next if (next last } }while (next); last.className'last'; }, get:function(el) return typeof el"string" ? }, tag:function(tag, return (el }}; |
调用方法
|
1
2
3
|
new Html2Tree('tree','min');//皮肤:// |
最后就是代码打包下载哈哈,欢迎拍砖,请不要恶语相向,你可以选择用或者不用.!
感谢: 感谢果果提供部分代码!
原创代码,转载请联系 柴哥!!!