Trees and Dojo.Data

To desconstruct the previous example, we need some dojo.data terminology:

• an attribute is a named data set, much like a field or a column of a database,
• A value is the data itself. So in "name: 'Fruit'", name is the attribute, Fruit is the value.
• an item is one set of related attributes, much like a record or row. Unlike pure relational tables, items can have items nested within.
• an identifieris an attribute that uniquely identifies the item, like a primary key

dijit.Tree, conforming to the dojo.data spec, expects the following in its data store:

• The store attribute must be the name of a dojo.data data store.
• Each item in the data store must have a label (as returned by getLabel())
• An identifier attribute must be specified, even though it's not displayed.

So now let's take a step further. There are two methods to nesting a tree, corresponding to the two heirarchical methods in dojo.data.

Heirarchical Data

The easiest method for fixed text is to nest the items in the data store. To add a subtree, you must add a children attribute to the parent item, then add the child items to the children attribute. So for our previous example, we can add nodes under the Cinammon node:

Method 1: Direct Nesting

By downloading this file into poptarts.txt, you can use the same HTML as our previous example. And voila!

Method 2: References

Direct Nesting is a little inconvenient for relational table data. So Tree supports references, where all the data nodes are at the same level, but nesting occurs with psuedo pointers to child nodes. So our example above is written: /* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #000066; font-weight: bold;} .geshifilter .kw2 {color: #003366; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .co1 {color: #009900; font-style: italic;} .geshifilter .coMULTI {color: #009900; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #3366CC;} .geshifilter .nu0 {color: #CC0000;} .geshifilter .me1 {color: #006600;} .geshifilter .re0 {color: #0066FF;}

Like our nested children example, the parent node requires a children attribute. But instead of actual items, you place reference objects linking to the identifier of another object. This requires a small change to the Tree tag:

The query is necessary to choose only the top level items from the store. The menu produced is exactly the same:

Icon Classes