Yii Framework 開(kāi)發(fā)教程(19) UI 組件 TreeView 示例

CTreeView 用來(lái)顯示具有層次結(jié)構(gòu)的數(shù)據(jù)，使用 TreeView 通過(guò)設(shè)置 Data 屬性。Data 為具有下面結(jié)構(gòu)的數(shù)組：

• ext: string, 樹(shù)節(jié)點(diǎn)的文本.
• expanded: boolean,可選，表示該節(jié)點(diǎn)是否展開(kāi).
• id: string, 可選，該節(jié)點(diǎn)ID.
• hasChildren: boolean, 可選，缺省為 False,當(dāng)為 True 表示該節(jié)點(diǎn)含有子節(jié)點(diǎn).
• children: array,可選，子節(jié)點(diǎn)數(shù)組。.
• htmlOptions: array, HTML 選項(xiàng)。

到目前為止我們還沒(méi)有介紹讀取數(shù)據(jù)庫(kù)，因此本例使用 Hard Code 的數(shù)據(jù)如下：

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

這里為每個(gè)節(jié)點(diǎn)的文本都添加了一個(gè)鏈接 同時(shí)也演示了使用 JQuery 響應(yīng)節(jié)點(diǎn)的點(diǎn)擊事件，這是通過(guò)客戶端 JavaScripts 來(lái)實(shí)現(xiàn)的。

修改 View 定義

    <?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 用來(lái)做客戶端定義 JavaScripts。

http://wiki.jikexueyuan.com/project/yii-development-tutorial/images/19.1.jpg" alt="picture19.1" />

本例下載