PHP开发框架YiiFramework教程(19)UI组件TreeView示例

PHP开发框架YiiFramework教程(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' =>  'World:4' ,    
  'id' =>  '27' ,    
  'hasChildren' =>  true,    
  'children' =>    
    array
      (    
        array(    
          'text' =>  'Europa:3' ,    
          'id' =>  '1' ,    
          'hasChildren' =>  true,    
          'children' =>    
            array
        (    
            array(    
                'text' =>  'Germany:3' ,    
                'id' =>  '3' ,    
                'hasChildren' =>  true,    
                'children' =>    
                array
                (    
                    array(    
                        'text' =>  'Munich:0' ,    
                        'id' =>  '15' ,    
                        'hasChildren' =>  false,    
                        ),    
                    array(    
                        'text' =>  'Stuttgart:0' ,    
                        'id' =>  '16' ,    
                        'hasChildren' =>  false,    
                        ),    
                    array(    
                        'text' =>  'Berlin:0' ,    
                        'id' =>  '5' ,    
                        'hasChildren' =>  false,    
                        )    
                    )),    
            array(    
                'text' =>  'Norway:3' ,    
                'id' =>  '2' ,    
                'hasChildren' =>  true,    
                'children' =>    
                array
                (    
                    array(    
                        'text' =>  'Stavanger:0' ,    
                        'id' =>  '10' ,    
                        'hasChildren' =>  false,    
                        ),    
                    array(    
                        'text' =>  'Oslo:0' ,    
                        'id' =>  '12' ,    
                        'hasChildren' =>  false,    
                        ),    
                    array(    
                        'text' =>  'Bergen:0' ,    
                        'id' =>  '11' ,    
                        'hasChildren' =>  false,    
                        ))),    
            array(    
                'text' =>  'United Kingdom:2' ,    
                'id' =>  '4' ,    
                'hasChildren' =>  true,    
                'children' =>    
                array(    
        
                    array(    
                        'text' =>  'London:0' ,    
                        'id' =>  '13' ,    
                        'hasChildren' =>  false,    
                        ),    
                    array(    
                        'text' =>  'Manchester:0' ,    
                        'id' =>  '14' ,    
                        'hasChildren' =>  false,    
                        ))),    
            array(    
                'text' =>  'Asia:3' ,    
                'id' =>  '7' ,    
                'hasChildren' =>  true,    
                'children' =>    
                array
                (    
                    array(    
                        'text' =>  'Japan:0' ,    
                        'id' =>  '18' ,    
                        'hasChildren' =>  false,    
                        ),    
                    array(    
                        'text' =>  'China:0' ,    
                        'id' =>  '20' ,    
                        'hasChildren' =>  false,    
                        ),    
                    array(    
                        'text' =>  'Indonesia:0' ,    
                        'id' =>  '19' ,    
                        'hasChildren' =>  false,    
                        )    
                    )),    
            array(    
                'text' =>  'America:4' ,    
                'id' =>  '9' ,    
                'hasChildren' =>  true,    
                'children' =>    
                array
                (    
                    array(    
                        'text' =>  'Canada:0' ,    
                        'id' =>  '23' ,    
                        'hasChildren' =>  false,    
                        ),    
                    array(    
                        'text' =>  'United States:0' ,    
                        'id' =>  '24' ,    
                        'hasChildren' =>  false,    
                        ),    
                    array(    
                        'text' =>  'Mexico:0' ,    
                        'id' =>  '25' ,    
                        'hasChildren' =>  false,    
                        ),    
                    array(    
                        'text' =>  'Argentina:0',    
                        'id' =>  '26' ,    
                        'hasChildren' =>  false,    
                        ))),    
            array(    
                'text' =>  'Africa:2' ,    
                'id' =>  '8' ,    
                'hasChildren' =>  true,    
                'children' =>    
                array(    
        
                    array(    
                        'text' =>  'Kenya:0' ,    
                        'id' =>  '22' ,    
                        'hasChildren' =>  false,    
                        ),    
                    array(    
                        'text' =>  'Tanzania:0' ,    
                        '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。