dynatree的用法总结

参考文章：http://www.cnblogs.com/eczhou/archive/2012/12/18/2823515.html

Demo：http://wwwendt.de/tech/dynatree/doc/samples.html

下载地址：http://code.google.com/p/dynatree/

文档：http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html

项目里面用到树形结构，用的是dynatree

1：需要引入的js包：   

<scriptsrc='jquery/jquery.js'type="text/javascript"></script>
<scriptsrc='jquery/jquery-ui.custom.js'type="text/javascript"></script>
<scriptsrc='jquery/jquery.cookie.js'type="text/javascript"></script>

dynatree用的css和js导入

<link rel='stylesheet' type='text/css' href='skin/ui.dynatree.css'>
<script src='jquery.dynatree.js' type="text/javascript"></script>

2：定义一个div作用dynatree的容器

<div id="tree"></div>

3：在$(function() {   });里面加载tree。

  <scripttype="text/javascript">
    $(function(){
        // Attach the dynatree widget to an existing <div id="tree"> element
        // and pass the tree options as an argument to the dynatree() function:
        $("#tree").dynatree({
            onActivate:function(node){
                // A DynaTreeNode object is passed to the activation handler
                // Note: we also get this event, if persistence is on, and the page is reloaded.
                alert("You activated "+ node.data.title);
            },
            persist:true,
            children:[// Pass an array of nodes.
                {title:"Item 1"},
                {title:"Folder 2", isFolder:true,
                    children:[
                        {title:"Sub-item 2.1"},
                        {title:"Sub-item 2.2"}
                    ]
                },
                {title:"Item 3"}
            ]
        });
    });
</script>
通过children属性给dynatree绑定数据元。数据的形式是json形式的。

下面给了children的一些属性

children: [ { … }, { … }, … ].

children:[
    {
    title:null,// (required) Displayed name of the node (html is allowed here)
    key:null,// May be used with activate(), select(), find(), ...
    isFolder:false,// Use a folder icon. Also the node is expandable but not selectable.
    isLazy:false,// Call onLazyRead(), when the node is expanded for the first time to allow for delayed creation of children.
    tooltip:null,// Show this popup text.
    href:null,// Added to the generated <a> tag.
    icon:null,// Use a custom image (filename relative to tree.options.imagePath). 'null' for default icon, 'false' for no icon.
    addClass:null,// Class name added to the node's span tag.
    noLink:false,// Use <span> instead of <a> tag for this node
    activate:false,// Initial active status.
    focus:false,// Initial focused status.
    expand:false,// Initial expanded status.
    select:false,// Initial selected status.
    hideCheckbox:false,// Suppress checkbox display for this node.
    unselectable:false,// Prevent selection.
    // The following attributes are only valid if passed to some functions:
    children:null// Array of child nodes.
    // NOTE: we can also add custom attributes here.
    // This may then also be used in the onActivate(), onSelect() or onLazyTree() callbacks.
    },
    […]
]

可以定义一个dynatree类 dynatree类的字段对应children的各个属性。

public  class Dynatree {

    private String title = null;

    private String key = null;

    private String isFolder = false;

    private boolean isLazy = false;

    ......

    private List<DynaTree> children = null;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    ...............

    public List<DynaTree> getChildren() {
        return children;
    }

    public void setChildren(List<DynaTree> children) {

        this.children = children;
        if (this.children != null && this.children.size() > 0) {
            this.setIsFolder(true);
        } else {
            this.setIsFolder(false);
        }
    }

}

在逻辑层，对数据进行包装成json类型的，返回到画面。

json类型转换使用的第三方jar，jabsorb.jar；portal-impl.jar；portal-kernel.jar

下面是dynatree的作成的代码，假定tree分为三层。

 List<DynaTree> treeList1 = new ArrayList<DynaTree>(); // 第一层
 List<DynaTree> treeList2 = new ArrayList<DynaTree>(); // 第二层
 List<DynaTree> treeList3 = new ArrayList<DynaTree>(); // 第三层

 DynaTree tree1 = new DynaTree();

 DynaTree tree2 = new DynaTree();

 DynaTree tree3 = new DynaTree();

 for ( int i=0; i++; i<3) {

   tree2 = new DynaTree();

   tree2.setTitle("tree2" + String.valueOf(i));

   tree2.setKey(String.valueOf(i)); 

   for ( int j=0; j++; j<2) {

      tree3 = new DynaTree();

      tree2.setTitle("tree3" + String.valueOf(j));

      tree2.setKey(String.valueOf(j));

      treeList3.add(tree3 );

   }

   tree2.setChildren(treeList3 );

   treeList2.add(tree2);

 }

 tree1.setTitle("DynaTree ");

 tree1.setKey("tree1");

 tree1.setChildren(treeList2);

 treeList1.add(tree1);

// 一个dynatree的数据做好了

//  将List<dynatree> 类型转换为jsonArray

  JSONArray treeJson = JSONUtils.toJSONArray(treeList1);

// 将treeJson存放到session里，返回给画面