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的数据如下：

[php] view plain copy print ?

1. array(  
2.   'text' =>  '<a id="27" href="#">World:4</a>' ,  
3.   'id' =>  '27' ,  
4.   'hasChildren' =>  true,  
5.   'children' =>  
6.     array  
7.       (  
8.         array(  
9.           'text' =>  '<a id="1" href="#">Europa:3</a>' ,  
10.           'id' =>  '1' ,  
11.           'hasChildren' =>  true,  
12.           'children' =>  
13.             array  
14.         (  
15.             array(  
16.                 'text' =>  '<a id="3" href="#">Germany:3</a>' ,  
17.                 'id' =>  '3' ,  
18.                 'hasChildren' =>  true,  
19.                 'children' =>  
20.                 array  
21.                 (  
22.                     array(  
23.                         'text' =>  '<a id="15" href="#">Munich:0</a>' ,  
24.                         'id' =>  '15' ,  
25.                         'hasChildren' =>  false,  
26.                         ),  
27.                     array(  
28.                         'text' =>  '<a id="16" href="#">Stuttgart:0</a>' ,  
29.                         'id' =>  '16' ,  
30.                         'hasChildren' =>  false,  
31.                         ),  
32.                     array(  
33.                         'text' =>  '<a id="5" href="#">Berlin:0</a>' ,  
34.                         'id' =>  '5' ,  
35.                         'hasChildren' =>  false,  
36.                         )  
37.                     )),  
38.             array(  
39.                 'text' =>  '<a id="2" href="#">Norway:3</a>' ,  
40.                 'id' =>  '2' ,  
41.                 'hasChildren' =>  true,  
42.                 'children' =>  
43.                 array  
44.                 (  
45.                     array(  
46.                         'text' =>  '<a id="10" href="#">Stavanger:0</a>' ,  
47.                         'id' =>  '10' ,  
48.                         'hasChildren' =>  false,  
49.                         ),  
50.                     array(  
51.                         'text' =>  '<a id="12" href="#">Oslo:0</a>' ,  
52.                         'id' =>  '12' ,  
53.                         'hasChildren' =>  false,  
54.                         ),  
55.                     array(  
56.                         'text' =>  '<a id="11" href="#">Bergen:0</a>' ,  
57.                         'id' =>  '11' ,  
58.                         'hasChildren' =>  false,  
59.                         ))),  
60.             array(  
61.                 'text' =>  '<a id="4" href="#">United Kingdom:2</a>' ,  
62.                 'id' =>  '4' ,  
63.                 'hasChildren' =>  true,  
64.                 'children' =>  
65.                 array(  
66.   
67.                     array(  
68.                         'text' =>  '<a id="13" href="#">London:0</a>' ,  
69.                         'id' =>  '13' ,  
70.                         'hasChildren' =>  false,  
71.                         ),  
72.                     array(  
73.                         'text' =>  '<a id="14" href="#">Manchester:0</a>' ,  
74.                         'id' =>  '14' ,  
75.                         'hasChildren' =>  false,  
76.                         ))),  
77.             array(  
78.                 'text' =>  '<a id="7" href="#">Asia:3</a>' ,  
79.                 'id' =>  '7' ,  
80.                 'hasChildren' =>  true,  
81.                 'children' =>  
82.                 array  
83.                 (  
84.                     array(  
85.                         'text' =>  '<a id="18" href="#">Japan:0</a>' ,  
86.                         'id' =>  '18' ,  
87.                         'hasChildren' =>  false,  
88.                         ),  
89.                     array(  
90.                         'text' =>  '<a id="20" href="#">China:0</a>' ,  
91.                         'id' =>  '20' ,  
92.                         'hasChildren' =>  false,  
93.                         ),  
94.                     array(  
95.                         'text' =>  '<a id="19" href="#">Indonesia:0</a>' ,  
96.                         'id' =>  '19' ,  
97.                         'hasChildren' =>  false,  
98.                         )  
99.                     )),  
100.             array(  
101.                 'text' =>  '<a id="9" href="#">America:4</a>' ,  
102.                 'id' =>  '9' ,  
103.                 'hasChildren' =>  true,  
104.                 'children' =>  
105.                 array  
106.                 (  
107.                     array(  
108.                         'text' =>  '<a id="23" href="#">Canada:0</a>' ,  
109.                         'id' =>  '23' ,  
110.                         'hasChildren' =>  false,  
111.                         ),  
112.                     array(  
113.                         'text' =>  '<a id="24" href="#">United States:0</a>' ,  
114.                         'id' =>  '24' ,  
115.                         'hasChildren' =>  false,  
116.                         ),  
117.                     array(  
118.                         'text' =>  '<a id="25" href="#">Mexico:0</a>' ,  
119.                         'id' =>  '25' ,  
120.                         'hasChildren' =>  false,  
121.                         ),  
122.                     array(  
123.                         'text' =>  '<a id="26" href="#">Argentina:0</a>',  
124.                         'id' =>  '26' ,  
125.                         'hasChildren' =>  false,  
126.                         ))),  
127.             array(  
128.                 'text' =>  '<a id="8" href="#">Africa:2</a>' ,  
129.                 'id' =>  '8' ,  
130.                 'hasChildren' =>  true,  
131.                 'children' =>  
132.                 array(  
133.   
134.                     array(  
135.                         'text' =>  '<a id="22" href="#">Kenya:0</a>' ,  
136.                         'id' =>  '22' ,  
137.                         'hasChildren' =>  false,  
138.                         ),  
139.                     array(  
140.                         'text' =>  '<a id="21" href="#">Tanzania:0</a>' ,  
141.                         'id' =>  '21' ,  
142.                         'hasChildren' =>  false  
143.                         )  
144.                     )  
145.                 )  
146.             )))));  

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
						)
					)
				)
			)))));

这里为每个节点的文本都添加了一个链接，同时也演示了使用JQuery响应节点的点击事件，这是通过客户端JavaScripts来实现的。
修改View定义

[php] view plain copy print ?

1. <?php  
2. $cs=Yii::app()->clientScript;  
3. $cs->registerScript('menuTreeClick', "  
4.     jQuery('#menu-treeview a').click(function() {  
5.         alert('Node #'+this.id+' was clicked!');  
6.         return false;  
7.     });  
8. ");  
9.   
10. $this->widget('CTreeView',array(  
11.     'id'=>'menu-treeview',  
12.     'data'=>DataModel::getDummyData(),  
13.   
14.     'control'=>'#treecontrol',  
15.     'animated'=>'fast',  
16.     'collapsed'=>true,  
17.     'htmlOptions'=>array(  
18.                 'class'=>'filetree'  
19.                 )  
20.             ));  
21. ?>  

<?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。

本例下载