Display an AJAX tree from your DB using CTreeView

You are viewing revision #4 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#3)next (#5) »

This example uses a MySQL DB with a table named tree with the fields id, name, and parent_id.

[sql]
CREATE TABLE tree (
  id INTEGER UNSIGNED,
  name VARCHAR(50) NOT NULL,
  parent_id INTEGER UNSIGNED,
  PRIMARY(id)
)

In your view, add:

~ `php <?php $this->widget(

'CTreeView',
array('url' => array('ajaxFillTree'))

); ?> `~

This will create a tree widget on your page, and its data will be fetch using the ajaxFillTree of the current controller.

So we have to add this action to the controller:

~ `php /**

 * Fills the JS tree on an AJAX request.
 * Should receive parent node ID in $_GET['root'],
 *  with 'source' when there is no parent.
 */
public function actionAjaxFillTree()
{
	if (!Yii::app()->request->isAjaxRequest) {
		exit();
	}
	$parentId = 0;
	if (isset($_GET['root'])) {
		$parentId = (int) $_GET['root'];
	}
	$req = Yii::app()->db->createCommand(
		"SELECT m1.id, m1.name AS text, m2.id IS NOT NULL AS hasChildren "
		. "FROM tree AS m1 LEFT JOIN tree AS m2 ON m1.id=m2.parent_id "
		. "WHERE m1.parent_id <=> $parentId "
		. "GROUP BY m1.id ORDER BY m1.name ASC"
	);
	$children = $req->queryAll();
	echo str_replace(
		'"hasChildren":"0"',
		'"hasChildren":false',
		CTreeView::saveDataAsJson($children)
	);
	exit();
}

When the page loads, an AJAX request will be sent to fill the first level of the tree. It'll have the GET parameter `root` to `source`. We suppose here that the corresponding nodes have a `parent_id` of 0. You can replace this by `NULL` if necessary, and the SQL request will still work because it uses `<=>` instead of `=`).

Then we read the data in the database. We need a LEFT JOIN to find if a node has children. If each row already has a `hasChildren` field, you can remove this join and your SQL will be faster.

When sending the JSON-encoded result, there's a little trick: the javascript wants the `hasChildren` attribute to be a boolean. But the SQL result just contains 0 or 1, so we have to convert it, at least for the "false" case. Instead of operating on the string result, one could modify the PHP array with a `foreach`.

The `exit()` might not be necessary, but if you enabled the logs to Firebug, then Yii will write some JS at the end of your response, and it will break your AJAX.

### Links
[Chinese version](http://projects.ourplanet.tk/node/100)
19 0
21 followers
Viewed: 72 019 times
Version: Unknown (update)
Category: Tutorials
Written by: François Gannaz
Last updated by: François Gannaz
Created on: Apr 7, 2010
Last updated: 11 years ago
Update Article

Revisions

View all history

Related Articles