学步园

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

先上图

HTML结构如下:

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

Firebug 图

JS代码:

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

调用方法

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

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

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

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

点我下载