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樣本的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

