js tree Dtree and Xtree

樹型菜單是我們在開發中經常用到的數據組合和顯示方式,
dTree(http://www.destroydrop.com/javascripts/tree/)
dTree是一種免費的javascript樹型菜單, 它支持ie5+, ns 6+, Opera 7+以及Mozilla瀏覽器
使用簡單:
引入樹, 在head中加入dtree.js和dtree.css(注意要把js,css和img放到相應目錄), 如下所示:
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
實例化樹並顯示
<div class="dtree">

    <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

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

        d = new dTree('d');

        d.add(0,-1,'My example tree');
        d.add(1,0,'Node 1','example01.html');
        d.add(2,0,'Node 2','example01.html');
        d.add(3,1,'Node 1.1','example01.html');
        d.add(4,0,'Node 3','example01.html');
        d.add(5,3,'Node 1.1.1','example01.html');
        d.add(6,5,'Node 1.1.1.1','example01.html');
        d.add(7,0,'Node 4','example01.html');
        d.add(8,1,'Node 1.2','example01.html');
        d.add(9,0,'My Pictures','example01.html','Pictures I/'ve taken over the years','','','img/imgfolder.gif');
        d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
        d.add(11,9,'Mom/'s birthday','example01.html');
        d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
        d.add(13,12,'sub Recycle Bin','','','','img/trash.gif');

        document.write(d);

        //-->
    </script>

</div>
add方法的參數說明 id:當前節點標識, pid:父節點標識, name:當前節點名字, url:當菜單被點擊時響應的超鏈接, title:提示語,
target:在目標窗口打開鏈接, icon:關閉時的顯示圖標, iconOpen:打開時的顯示圖標, open:默認的打開狀態, true打開, false關閉(不過它會讀cookie, 所以有時看不出效果)
dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open)

Xtree(http://webfx.eae.net/dhtml/xtree/implementation.html)
相對dTree來說, xTree功能要多一些, 能動態增減樹的節點
引入樹:
<!-- The xtree script file -->
<script src="xtree.js"></script>
<link type="text/css" rel="stylesheet" href="xtree.css">
實例化樹, 並顯示
<div style="position: absolute; width: 200px; top: 0px; left: 0px; height: 100%; padding: 5px; overflow: auto;">

<!-- js file containing the tree content, edit this file to alter the menu,
     the menu will be inserted where this tag is located in the document -->
<script>
if (document.getElementById) {
    var tree = new WebFXTree('Root');
    tree.setBehavior('classic');
    var a = new WebFXTreeItem('1');
    tree.add(a);
    var b = new WebFXTreeItem('1.1');
    a.add(b);
    b.add(new WebFXTreeItem('1.1.1'));
    b.add(new WebFXTreeItem('1.1.2'));
    b.add(new WebFXTreeItem('1.1.3'));
    var f = new WebFXTreeItem('1.1.4');
    b.add(f);
    f.add(new WebFXTreeItem('1.1.4.1'));
    f.add(new WebFXTreeItem('1.1.4.2'));
    f.add(new WebFXTreeItem('1.1.4.3'));
    var c = new WebFXTreeItem('1.2');
    a.add(c);
    c.add(new WebFXTreeItem('1.5.1'));
    c.add(new WebFXTreeItem('1.5.2'));
    c.add(new WebFXTreeItem('1.5.3'));
    a.add(new WebFXTreeItem('1.3'));
    a.add(new WebFXTreeItem('1.4'));
    a.add(new WebFXTreeItem('1.5'));
    var d = new WebFXTreeItem('2');
    tree.add(d);
    var e = new WebFXTreeItem('2.1');
    d.add(e);
    e.add(new WebFXTreeItem('2.1.1'));
    e.add(new WebFXTreeItem('2.1.2'));
    e.add(new WebFXTreeItem('2.1.3'));
    d.add(new WebFXTreeItem('2.2'));
    d.add(new WebFXTreeItem('2.3'));
    d.add(new WebFXTreeItem('2.4'));
    document.write(tree);
}

function addNode() {
    if (tree.getSelected()) {
        tree.getSelected().add(new WebFXTreeItem('New'));
    }
}

function addNodes() {
    if (tree.getSelected()) {
        var foo = tree.getSelected().add(new WebFXTreeItem('New'));
        var bar = foo.add(new WebFXTreeItem('Sub 1'));
        var fbr = foo.add(new WebFXTreeItem('Sub 2'));
    }
}

function delNode() {
    if (tree.getSelected()) {
        tree.getSelected().remove();
    }
}
</script>

</div>

打開關閉節點:tree.toggle()
打開節點:tree.expand();
關閉節點:tree.collapse();
打開所有節點:tree.expandAll();
關閉所有節點:tree.collapseAll();
打開子節點:tree.expandChildren();
關閉子節點:tree.collapseChildren();
顯示當前節點的id:if (tree.getSelected()) { alert(tree.getSelected().id); }
增加節點:addNode()
增加多個節點:addNodes()
刪除節點:delNode()