HTML树结构,XML TO TREE 树

来源：互联网发布：中国地图标记软件编辑：程序博客网时间：2024/05/11 19:46

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

先上图

HTML结构如下:

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 种皮肤

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

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

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

点我下载