Yii Framework 开发课程(19) UI 组件 TreeView示例

CTreeView用来显示具有层次结构的数据，使用TreeView 通过设置Data属性。Data为具有下面结构的数组：

• ext: string, 树节点的文本.
• expanded: boolean,可选，表示该节点是否展开.
• id: string, 可选，该节点ID.
• hasChildren: boolean, 可选，缺省为False,当为True表示该节点含有子节点.
• children: array,可选，子节点数组。.
• htmlOptions: array, HTML选项。

到目前为止我们还没有介绍读取数据库，因此本例使用Hard Code的数据如下：

array(  'text' =>  '<a id="27" href="#">World:4</a>' ,  'id' =>  '27' ,  'hasChildren' =>  true,  'children' =>	array	  (		array(		  'text' =>  '<a id="1" href="#">Europa:3</a>' ,		  'id' =>  '1' ,		  'hasChildren' =>  true,		  'children' =>			array		(			array(				'text' =>  '<a id="3" href="#">Germany:3</a>' ,				'id' =>  '3' ,				'hasChildren' =>  true,				'children' =>				array				(					array(						'text' =>  '<a id="15" href="#">Munich:0</a>' ,						'id' =>  '15' ,						'hasChildren' =>  false,						),					array(						'text' =>  '<a id="16" href="#">Stuttgart:0</a>' ,						'id' =>  '16' ,						'hasChildren' =>  false,						),					array(						'text' =>  '<a id="5" href="#">Berlin:0</a>' ,						'id' =>  '5' ,						'hasChildren' =>  false,						)					)),			array(				'text' =>  '<a id="2" href="#">Norway:3</a>' ,				'id' =>  '2' ,				'hasChildren' =>  true,				'children' =>				array				(					array(						'text' =>  '<a id="10" href="#">Stavanger:0</a>' ,						'id' =>  '10' ,						'hasChildren' =>  false,						),					array(						'text' =>  '<a id="12" href="#">Oslo:0</a>' ,						'id' =>  '12' ,						'hasChildren' =>  false,						),					array(						'text' =>  '<a id="11" href="#">Bergen:0</a>' ,						'id' =>  '11' ,						'hasChildren' =>  false,						))),			array(				'text' =>  '<a id="4" href="#">United Kingdom:2</a>' ,				'id' =>  '4' ,				'hasChildren' =>  true,				'children' =>				array(					array(						'text' =>  '<a id="13" href="#">London:0</a>' ,						'id' =>  '13' ,						'hasChildren' =>  false,						),					array(						'text' =>  '<a id="14" href="#">Manchester:0</a>' ,						'id' =>  '14' ,						'hasChildren' =>  false,						))),			array(				'text' =>  '<a id="7" href="#">Asia:3</a>' ,				'id' =>  '7' ,				'hasChildren' =>  true,				'children' =>				array				(					array(						'text' =>  '<a id="18" href="#">Japan:0</a>' ,						'id' =>  '18' ,						'hasChildren' =>  false,						),					array(						'text' =>  '<a id="20" href="#">China:0</a>' ,						'id' =>  '20' ,						'hasChildren' =>  false,						),					array(						'text' =>  '<a id="19" href="#">Indonesia:0</a>' ,						'id' =>  '19' ,						'hasChildren' =>  false,						)					)),			array(				'text' =>  '<a id="9" href="#">America:4</a>' ,				'id' =>  '9' ,				'hasChildren' =>  true,				'children' =>				array				(					array(						'text' =>  '<a id="23" href="#">Canada:0</a>' ,						'id' =>  '23' ,						'hasChildren' =>  false,						),					array(						'text' =>  '<a id="24" href="#">United States:0</a>' ,						'id' =>  '24' ,						'hasChildren' =>  false,						),					array(						'text' =>  '<a id="25" href="#">Mexico:0</a>' ,						'id' =>  '25' ,						'hasChildren' =>  false,						),					array(						'text' =>  '<a id="26" href="#">Argentina:0</a>',						'id' =>  '26' ,						'hasChildren' =>  false,						))),			array(				'text' =>  '<a id="8" href="#">Africa:2</a>' ,				'id' =>  '8' ,				'hasChildren' =>  true,				'children' =>				array(					array(						'text' =>  '<a id="22" href="#">Kenya:0</a>' ,						'id' =>  '22' ,						'hasChildren' =>  false,						),					array(						'text' =>  '<a id="21" href="#">Tanzania:0</a>' ,						'id' =>  '21' ,						'hasChildren' =>  false						)					)				)			)))));

<?php$cs=Yii::app()->clientScript;$cs->registerScript('menuTreeClick', "	jQuery('#menu-treeview a').click(function() {		alert('Node #'+this.id+' was clicked!');		return false;	});");$this->widget('CTreeView',array(	'id'=>'menu-treeview',	'data'=>DataModel::getDummyData(),	'control'=>'#treecontrol',	'animated'=>'fast',	'collapsed'=>true,	'htmlOptions'=>array(				'class'=>'filetree'				)			));?>

clientScript的registerScript用来做客户端定义JavaScripts。
本例下载