PHP開發框架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' => ' 'id' => '27' ,
'hasChildren' => true,
'children' =>
array
(
array(
'text' => ' 'id' => '1' ,
'hasChildren' => true,
'children' =>
array
(
array(
'text' => ' 'id' => '3' ,
'hasChildren' => true,
'children' =>
array
(
array(
'text' => ' 'id' => '15' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '16' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '5' ,
'hasChildren' => false,
)
)),
array(
'text' => ' 'id' => '2' ,
'hasChildren' => true,
'children' =>
array
(
array(
'text' => ' 'id' => '10' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '12' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '11' ,
'hasChildren' => false,
))),
array(
'text' => ' 'id' => '4' ,
'hasChildren' => true,
'children' =>
array(
array(
'text' => ' 'id' => '13' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '14' ,
'hasChildren' => false,
))),
array(
'text' => ' 'id' => '7' ,
'hasChildren' => true,
'children' =>
array
(
array(
'text' => ' 'id' => '18' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '20' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '19' ,
'hasChildren' => false,
)
)),
array(
'text' => ' 'id' => '9' ,
'hasChildren' => true,
'children' =>
array
(
array(
'text' => ' 'id' => '23' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '24' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '25' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '26' ,
'hasChildren' => false,
))),
array(
'text' => ' 'id' => '8' ,
'hasChildren' => true,
'children' =>
array(
array(
'text' => ' 'id' => '22' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '21' ,
'hasChildren' => false
)
)
)
)))));

這裡為每個節點的文本都添加了一個鏈接，同時也演示了使用JQuery響應節點的點擊事件，這是透過客戶端JavaScripts來實現的。

修改View定義

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

以上就是PHP開發框架Yii Framework教程(19) UI 元件 TreeView範例的內容，更多相關內容請關注PHP中文網（www.php.cn）！