JQuery 生成树

最新推荐文章于 2021-03-09 22:38:13 发布

lianliange85

最新推荐文章于 2021-03-09 22:38:13 发布

阅读量770

点赞数

分类专栏： Jquery 文章标签： jquery tree

Jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Dynatree documentation:

http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html

1.Initializing the tree

Dynatree is based on and made for jQuery. If you are not familiar with this, you might also want to check the jQuery documentation.

The tree is initialized in the onload event of the html document. In jQuery this is usually done by passing a function to $(..) :

<head>
    <script type="text/javascript">
        $(function(){
            […]
        });
    </script>
</head>

The dynatree widget is then attached to an empty <div > element with a given ID of 'tree'. This id can have any value, it only has to match the jQuery selector, in our case '#tree'.
Options are passed to the dynatree() function as a dictionary in curly braces:

            $("#tree").dynatree({
                […]
            });

2.Tree options

Tree options are passed as plain JavaScript objects in curly braces, e.g.
{ … }.

The following script shows the available options.
All options have a reasonable default, so we may only have to pass the onActivate handler.

3. Initializing the tree structure

A tree structure is made of nodes. Every node may in turn contain a list child nodes.
A dynatree always has exactly one root node, and all top level nodes of our tree are created as direct descendants.
The root node is usually hidden, so we only see the nodes that we have added.

Dynatree can read it's structure from different sources:

If the children option is passed, it will be used.
Otherwise, if the initAjax option is passed, it will be used.
Otherwise, if the initId option is passed, it will be used.
Otherwise, if the the container <div> element contains a <ul> element, it will be used.
Otherwise, the tree is left empty.
But we may choose to do so, if we want to modify the tree programmatically.

Methods 1-3 expect a list of node options, as described in the following sections.

4.Node options

Node options are defined as plain JavaScript objects in curly braces, e.g.
{ … }.
Most of the time we pass a list of node options like this
children: [ { … }, { … }, … ].

The follwing snippet shows the attributes that can be used to define a tree node.
There are reasonable default values for all options, so we may only have to pass a title.

The node options are also passed to the event handlers and can be accessed like this:

onActivate: function(node) {
    alert("You activated " + node.data.title);
},

5.Initializing the tree structure from an Ajax response

Instead of passing an array of data objects, we can pass a url in the initAjax option that will be used to contact an Ajax web service.

$("#tree").dynatree({
    initAjax: {url: "/ajaxTree",
               data: {key: "root", // Optional arguments to append to the url
                      mode: "all"
                      }
               },
    […]
});

The web service is expected to return a valid JSON node list, formatted like this:
[ { ... }, { ... }, ... ].

Because the data request is performed asynchronously, the document will load faster. Dynatree will display a spinning wheel, while waiting for the request to complete.

See Loading child nodes on demand for details.
See Persistence for lazy trees for a sample on how to combine this with persistence.

6.Handling events

When a user clicks a node, we want to react in some way. So at least we want to implement an onActivate handler.

All event handlers are passed an instance of DynaTreeNode as argument.
this refers to the Dynatree object.
The node options can be accessed like this:

onActivate: function(node) {
    alert("You activated " + node.data.title);
},

`7.DynaTree` callbacks

The this context is set to the tree object.
Use tree.isUserEvent() , tree.isInitializing() , and tree.isReloading() to determine who generated this event.

opts.onActivate(node)

Called when a node was activated.

onActivate: function(node) {
    if(node.tree.isUserEvent()){
        [...] // Do something after user activated the node (using mouse or keyboard)
    }
}

opts.onBlur(node)

Called when a node lost the focus.

opts.onSelect(flag, node)

Called when a node was (de)selected.

8.Handling selection events

The following example writes the title of the currently focused node to the <span id='echoFocused'> element:

Try this example...

    $("#tree").dynatree({
        […]
        onSelect: function(flag, node) {
            if( ! flag )
                alert("You deselected node with title " + node.data.title);
            var selectedNodes = node.tree.getSelectedNodes();
            var selectedKeys = $.map(selectedNodes, function(node){
                return node.data.key;
            });
            alert("Selected keys: " + selectedKeys.join(", "));
        },
        […]
    });