The Dojo Tree component is a powerful tool for visual presentation of hierarchical data. In this tutorial we will look at how to connect the tree to a store for quick and efficient data drill-down into nested data.
Introduction
The Dojo Tree component providesa comprehensive, familiar, intuitive drill-down presentation of hierarchical data.It also separates the data model concerns from the presentation.This tutorial will examine various ways to provide the data to drive a tree.
The first example uses a static tree with the data sourced from a single JSON file.This can be used to provide navigation through data.The second example expands on this design to add powerful features like drag and drop, and dynamic tree manipulation.The final example shows how data can be lazy-loaded.
Tree with a Static Store
A static store is well-suited for a tree with limited size.In this example, clicking on the tree nodes displays a related image.
The first step is to create the data. We will use the Memory store, which means thatthe store data is JSON-encoded, and can contain supporting information.In this case, the name is used to label each node of the tree.This tree has four items, and each has a name and an id.
{
"name": "US Government",
"id": "root",
"children": [
{
"name": "Congress",
"id": "congress"
},
{
"name": "Executive",
"id": "exec"
},
{
"name": "Judicial",
"id": "judicial"
}
]
}A tree is served data from an object implementing the dijit/tree/model interface.Usually, that object is an instance ofdijit/tree/ObjectStoreModel,and it is fed by a dojo/store.That's how this example will work.
require([
"dojo/dom", "dojo/json", "dojo/store/Memory",
"dijit/tree/ObjectStoreModel", "dijit/Tree", "dojo/text!./data/static", "dojo/domReady!"
], function(dom, json, Memory, ObjectStoreModel, Tree, data){
// set up the store to get the tree data
var governmentStore = new Memory({
data: [ json.parse(data) ],
getChildren: function(object){
return object.children || [];
}
});
// set up the model, assigning governmentStore, and assigning method to identify leaf nodes of tree
var governmentModel = new ObjectStoreModel({
store: governmentStore,
query: {id: 'root'},
mayHaveChildren: function(item){
return "children" in item;
}
});
// set up the tree, assigning governmentModel;
var governmentTree = new Tree({
model: governmentModel,
onOpenClick: true,
onLoad: function(){
dom.byId('image').src = '../resources/images/root.jpg';
},
onClick: function(item){
dom.byId('image').src = '../resources/images/'+item.id+'.jpg';
}
}, "divTree");
governmentTree.startup();
});<!doctype html>
<html lang="en" dir="ltr">
<head>
<title>Demo: Dijit Tree</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css" />
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="dojo/dojo.js" ></script>
</head>
<body class="claro">
<h1>Demo: Dijit Tree</h1>
<div class="column" id="tree">
<h1>Tree</h1>
<div id="divTree"></div>
</div>
<div class="column">
<h1>Image</h1>
<img id="image" />
</div>
<script>
require([
"dojo/dom",
"dojo/json",
"dojo/store/Memory",
"dijit/tree/ObjectStoreModel",
"dijit/Tree",
"dojo/text!./data/small.json",
"dojo/domReady!"
], function(dom, json, Memory, ObjectStoreModel, Tree, data){
// set up the store to get the tree data
var governmentStore = new Memory({
data: [ json.parse(data) ],
getChildren: function(object){
return object.children || [];
}
});
// set up the model, assigning governmentStore, and assigning method to identify leaf nodes of tree
var governmentModel = new ObjectStoreModel({
store: governmentStore,
query: {id: 'root'},
mayHaveChildren: function(item){
return "children" in item;
}
});
// set up the tree, assigning governmentModel;
var governmentTree = new Tree({
model: governmentModel,
onOpenClick: true,
onLoad: function(){
dom.byId('image').src = '../resources/images/root.jpg';
},
onClick: function(item){
dom.byId('image').src = '../resources/images/'+item.id+'.jpg';
},
persist: false
}, "divTree");
governmentTree.startup();
});
</script>
</body>
</html>The code below creates a Memory store, feeding into an ObjectStoreModel, which then feeds a tree.Finally, the onLoad and onClick events are used to display the associated image.
Note how we had to implemented two methods ourselves:
- getChildren() - to return a list of children for a given item
- mayHaveChildren() - in its simplest form this always returns true, but itcan return false if you can tell just by looking at an item that it couldn't possibly have any children,currently or in the future (due to drag and drop or other data store updates).
Dynamic Updates and Drag & Drop
Here we will learn how to use the Tree with drag-n-drop, and real-time response to data changes.
For a Tree to work with dynamic data updates, including DnD,the store needs to be able to understand and track parent-child relationships,and to notify the tree when items change, especially when an item's list of children changes.With that in mind, we will create our data in a relational format where each object points to its parent:
[
{
"name": "US Government",
"id": "root"
},
{
"name": "Congress",
"id": "congress",
"parent": "root"
},
{
"name": "House of Representatives",
"id": "house",
"parent": "congress"
},
{
"name": "Senate",
"id": "senate",
"parent": "congress"
},
{
"name": "Executive",
"id": "exec",
"parent": "root"
},
{
"name": "President",
"id": "pres",
"parent": "exec"
},
{
"name": "Vice President",
"id": "vice-pres",
"parent": "exec"
},
{
"name": "Secretary of State",
"id": "state",
"parent": "exec"
},
{
"name": "Cabinet",
"id": "cabinet",
"parent": "exec"
},
{
"name": "National Security Council",
"id": "security",
"parent": "cabinet"
},
{
"name": "Council of Economic Advisers",
"id": "economic",
"parent": "cabinet"
},
{
"name": "Office of Management and Budget",
"id": "budget",
"parent": "cabinet"
},
{
"name": "Judicial",
"id": "judicial",
"parent": "root"
}
]Despite the indenting, this is actually a flat list of objects where each object (except the root object)points to its parent.
Next, we make the store.The store needs to have the following capabilities to be used with ObjectStoreModel and the Tree,and to reflect dynamic data updates:
- Support to get the tree root node via a query (store.query()), rather than a store.get() call,and return a list with one item and an observe() method. ObjectStoreModel will use the observe() methodto detect changes to the root node such as modifications to the label.
- A getChildren() method that returns a list of children with an observe() method.The observe() method is used to detect when any of the children change (such as modification of their label),and also when new children are added or old children are removed.
- A put() method than can attach an item as a child of another item.
Capabilities #1 and #2 are simplified by wrapping the store in anObservable.After that, getRoot() and getChildren() can be implemented as simple queries against the store.
For #3, since dojo/store/Memory doesn't support this option, we will add it ourselves.The code becomes:
require([
"dojo/aspect", "dojo/json", "dojo/query", "dojo/store/Memory", "dojo/store/Observable",
"dijit/Tree", "dijit/tree/ObjectStoreModel", "dijit/tree/dndSource", "dojo/text!./data/all.json", "dojo/domReady!"
], function(aspect, json, query, Memory, Observable,
Tree, ObjectStoreModel, dndSource, data){
// set up the store to get the tree data, plus define the method
// to query the children of a node
var governmentStore = new Memory({
data: json.parse(data),
getChildren: function(object){
return this.query({parent: object.id});
}
});
// To support dynamic data changes, including DnD,
// the store must support put(child, {parent: parent}).
// But dojo/store/Memory doesn't, so we have to implement it.
// Since our store is relational, that just amounts to setting child.parent
// to the parent's id.
aspect.around(governmentStore, "put", function(originalPut){
return function(obj, options){
if(options && options.parent){
obj.parent = options.parent.id;
}
return originalPut.call(governmentStore, obj, options);
}
});
// give store Observable interface so Tree can track updates
governmentStore = new Observable(governmentStore);
};dijit/tree/dndSource as the controller:
require(["dijit/Tree", "dijit/tree/dndSource", "dojo/domReady!"], function(Tree, dndSource){
tree = new Tree({
model: usGov,
// define the drag-n-drop controller
dndController: dndSource
}, "tree");
tree.startup();
});model.pasteItem() which will update the data storevia
put().
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
