- The Book of Dojo
- Quick Installation
- Hello World
- Debugging Tutorial
- Introduction
- Part 1: Life With Dojo
- Part 2: Dijit
- Part 3: JavaScript With Dojo and Dijit
- Part 4: Testing, Tuning and Debugging
- Part 5: DojoX
- The Dojo Book, 0.4
A Simple Tree
Submitted by criecke on Sat, 11/17/2007 - 14:59.
To start, here's a one level tree. We split the tree data off into a separate file, poptarts.txt, in JSON format. You will need to download this and save it in the same directory as the example HTML below:
{ label: 'name', identifier: 'name', items: [ { name:'Fruit', type:'category'}, { name:'Cinammon', type: 'category'}, { name:'Chocolate', type: 'category'} ] }
Then here's the HTML that draws the actual tree:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script>
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.require("dojo.parser");
</script>
</head>
<body class="tundra">
<div dojoType="dojo.data.ItemFileReadStore"
url="poptarts.txt" jsid="popStore" />
<div dojoType="dijit.Tree" store="popStore" labelAttr="name" label="Pop Tarts"></div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script>
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.require("dojo.parser");
</script>
</head>
<body class="tundra">
<div dojoType="dojo.data.ItemFileReadStore"
url="poptarts.txt" jsid="popStore" />
<div dojoType="dijit.Tree" store="popStore" labelAttr="name" label="Pop Tarts"></div>
</body>
</html>
This is a good start, but there's a lot more you can do with Tree. Read on!
Attachment | Size |
---|---|
poptarts.txt | 180 bytes |
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post
Uniqueness of data
It should be noted that tree data elements from an ItemFileReadStore need to be unique, or the tree will not render.
I think the Tree should
I think the Tree should rather depend on the uniqueness of the identifier attribute rather than the value to be displayed in the tree. Is this a bug or feature?
I think it does what you are inquiring...
I think the following is what you are looking for; this works...
identifier: 'id',
items: [
{ id:'1', name:'Fruit', type:'category'},
{ id:'2', name:'Cinammon', type: 'category'},
{ id:'3', name:'Chocolate', type: 'category'},
{ id:'4', name:'Fruit', type:'category'}
]
}
The 'label' denotes the display field, which is NOT required to be unique (see 'Fruit' doubled-up?), and the 'identifier' denotes the field that should be the unique key...
Is that what you were looking for?