JQuery 生成树
Dynatree documentation:
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
childrenoption is passed, it will be used. - Otherwise, if the
initAjaxoption is passed, it will be used. - Otherwise, if the
initIdoption 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);
},
See also Programming dynatree.
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.
8.Handling selection events
The following example writes the title of the currently focused node to the <span id='echoFocused'> element:
$("#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(", "));
},
[…]
});