Unfortunately I was unable to find a ‘simple’ method of doing this already documented, so I experimented a little, and threw away some very in-elegant ideas, and finally came up with the following technique, after discovering the Zend_Dojo_Data.

Firstly, I added a method to my tree model to walk the tree, and build an array suitable for turning into the required structure for the json.

<?php
 
class SiteTree extends Zend_Db_Table_Abstract
{
 
//....
 
private function _walkTree(Array $root = null, $path = null)
{
    if ($root === null) {
       $root = $this->getBranchChildren(0);
    }
    $arrNodes = array();
    $i = 0;
    foreach($root as $branch) {
        $thisPath = ($path === null) ? '/'.$branch['branch_name'] . '/' : $path . $branch['branch_name'] . '/';
        $key = ($branch['parent'] == '0') ? $branch['id'] : $i;
        $arrNodes[$key]['id']       = $branch['id'];
        $arrNodes[$key]['label']    = $branch['branch_name'];
        $arrNodes[$key]['path']     = $thisPath;
        $arrNodes[$key]['iconClass']     = 'folder';
        $arrNodes[$key]['children'] = array();
        if ($branches = $this->getBranchChildren($branch['id'])) {
            $arrNodes[$key]['children'] = $this->_walkTree($branches, $thisPath);
        }
    $i++;
    }
    return $arrNodes;
}
 
//....
 
}

This function recursively maps the database into a nested array. Please note, this function will cause many database queries on deep tree structures, so I really would advise you cache the return of this function, so to keep queries to a minimum.

The line “$key = ($branch['parent'] == ’0′) ? $branch['id'] : $i;” is important. For Zend_Dojo_Data to output the correctly formatted json, you need to have an associative array for the top level (root) nodes, and indexed arrays for all of their children.

Next, this data needs to be turned into json for the tree. To do this, I simply created a new action to use as the source for the json, and inserted the following:

public function jsonNewpageAction()
{
    Zend_Dojo::enableView($this->view);
    Zend_Layout::getMvcInstance()->disableLayout();
    $tree = new SiteTree();
    $treeObj = new Zend_Dojo_Data('id', $tree->getTree());
    $treeObj->setLabel('label');
    $treeObj->setMetadata(array('path' => '/'));
    $this->view->tree = $treeObj->toJson();
}

Setting the Label is important here, it is used to determine which attribute of each node is its label, next the Metadata attribute “path” I used for my customisation of the tree for my own needs, which you will see later. The view script for this action simply echo’s the tree value.

The next step is to create the view to output your tree. this part is where the real fun begins, as you can get carried away with tweaking the dojo widget if your not careful.

The following lines were added to the action with my form on it. (The tree is not part of the form, I simple made mine interact with a read only element inside it)

Zend_Dojo::enableView($this->view);
 
$this->view->dojo()->requireModule('dojo.data.ItemFileReadStore');
$this->view->dojo()->requireModule('dijit.Tree');
$this->view->dojo()->requireModule('dojo.parser');

This will add the require statements to the view, so that the required dojo parts are available.

And in the view itself, you need at least the following:

<div dojoType="dojo.data.ItemFileReadStore"  url="/admin/pages/json-newpage" jsid="jsonData"></div>
<div dojoType="dijit.tree.ForestStoreModel" jsId="treeModel" store="jsonData" rootId="treeRoot" rootLabel="Home" childrenAttrs="children" ></div>
 
<div dojoType="dijit.Tree" model="treeModel" labelAttrs="label" ></div>

The first div, is the part which will read your json from the first action I listed. If you have only a single root node, you may get away without the second div, which is the ForestStoreModel. The ForestStoreModel had me scratching my head for a while, as I had no idea I needed it, and I kept finding errors in my FireBug console. Eventually I found this page on the dojo site.

If you were to put all this together now, you would probably end up with a working tree. BUT, it can be improved. In my tree, all the leaves would actually represent folders, but as default they look like little documents, not good at all. So I asked around in IRC, and was told I needed to google getIconClass, which put me on to writing this,

<div dojoType="dijit.Tree" model="treeModel" labelAttrs="label" iconClass="dijitFolderOpened">
 
<script type="dojo/method" event="getIconClass">
    return  'dijitFolderClosed';
</script>
 
</div>

As you can see, a script is inserted INSIDE the container of the tree, and the event attribute tells the script which even it is responsible for overriding.

If you run this now, you will find that all of the folders in the tree are now closed. Not good, as the nice opening and closing folders as you expand/contract elements are lost. This can be changed by adding another attribute to the script:

<script type="dojo/method" event="getIconClass" args="item, opened">
    return (opened ? 'dijitFolderOpened' : 'dijitFolderClosed');
</script>

The args attribute allows arguments from the item firing the event to be passed to the script. so a simple ternary, and you can switch between opened and closed folders.

Update

You may also find this post at codeutopia.net useful if you are working with tree’s in Dojo / Zend Framework