Yii框架中CTreeView的用法实例与解说

Yii框架中CTreeView的用法实例与解说

相信大家对下面这种效果的功能不陌生吧，如果想通过Yii实现以下的效果其实很简单。只需要使用yii框架中的CTreeView就可以了。

点击查看原图

CTreeView 显示分层数据的树形图。

这个类封装了jQuery的一个优秀的树形图插件 (http://bassistance.de/jquery-plugins/jquery-plugin-treeview/).

要使用CTreeView，只需要简单地将data设置为你所需要表现的数据即可。

CTreeView也支持通过AJAX动态地加载数据。要完成此目的，设置 url为可以根据请求提供树形图所需数据的URL。

在view中添加如下代码，然后访问就可以得到想要的效果。

<?php $this->widget('system.web.widgets.CTreeView',array(
            'data'=>array(
               array(
                   'text'=>'<span>系统设置</span>',
                   'children'=>array(
                       array('text'=>'首页',),
                   ),
               ),
                array(
                    'text'=>'<span>分类管理</span>',
                    'expanded'=>false,
                    'children'=>array(
                        array('text'=>'<a href="'.$this->createUrl('/admin/postCategory').'">所有分类</a>',),
                        array('text'=>'<a href="'.$this->createUrl('/admin/postCategory/add').'">增加新分类</a>',),
                        ),
               ),
                array(
                    'text'=>'<span>文章管理</span>',
                    'expanded'=>false,
                    'children'=>array(
                        array('text'=>'所有分类',),
                        array('text'=>'发表新文章',),
                        array('text'=>'审核文章',),
                    ),
               ),
            ),
            ));

?>

相关解说和手册说明：


属性详细
animated 属性
public string|integer $animated;
动画速度。这个值可以是三个预定义的速度之一 ("slow", "normal", or "fast")或以毫秒为单位的数值（例如 1000）。如果没有设置，将不会使用动画效果。

clientOptions 属性 只读
protected array getClientOptions()
返回JavaScript选项。

collapsed 属性
public boolean $collapsed;
树形图是否随着所有分支收起而开始。默认值是false。

control 属性
public string $control;
一个树形控件的容器，允许用户通过一次点击完成展开、收起和开关所有分支。在此容器中，点击第一个超链接将收起树形图；第二个超链接展开树形图；第三个超链接用于开关树形图。这个属性是一个有效的jQuery选择器（例如，“#treecontrol”。这儿“treecontrol”是包含有这些超链接的“DIV”元素的ID）。

cookieId 属性
public string $cookieId;
通过"cookie"进行持久化时使用的cookie的名字。默认值为“treeview”。

cssFile 属性
public mixed $cssFile;
此微件使用的CSS文件。默认为null，表示使用此微件包含的默认CSS文件。如果设置为false，则不使用CSS文件。其他情况下，指定的CSS文件将被包含在此微件中。

data 属性
public array $data;
用于生成树形图内容的数据。每个数据元素按以下格式对应于一个树形图节点：

text: string, required, 与此节点关联的HTML文本。
expanded: boolean, optional, 此节点是否为已展开状态。
id: string, optional, 识别此节点的ID。用于动态加载树形 图（参见url）。
hasChildren: boolean, optional, 默认值为false，点击此 节点是否触发从服务器动态加态更多树形图节点。 必须设置url属性以使此选项生效。
children: array, optional, 此节点的子节点。
htmlOptions: array, 附加的HTML属性（参见CHtml::tag）。 此选项从1.1.7版开始可用。
注意：包含在“beginWidget”和“endWidget”这两个调用之间的任何内容也将作为树形图的内容看待，被添加到这个属性生成的内容之后。

htmlOptions 属性
public array $htmlOptions;
需要在UL标签中进行渲染的附加HTML属性。树形图预定义了下列CSS类，可以直接使用它们：

treeview-black
treeview-gray
treeview-red
treeview-famfamfam
filetree

options 属性
public array $options;
传递给树形图的JavaScript对象的构造器的附加选项。

persist 属性
public string $persist;
将树的状态持久化到cookies中或页面位置中。如果设置为“location”，寻找匹配“location.href”的锚并激活它在树形图中的部分。常用于基于超链接的状态保存。如果设置为“cookie”，在每次点击后会将树的状态保存到一个cookie中，然后在页面加载时恢复它。

prerendered 属性
public boolean $prerendered;
此属性设置为真时将不对点击区DIV标签和CSS类渲染，假设服务器端已完成此工作。默认值是false。

toggle 属性
public string $toggle;
开关一个分支时调用的回调函数。参数：“this”指向UL表明是显示或隐藏

unique 属性
public boolean $unique;
设置此属性可以实现在同一层次仅可展开一个分支（在展开时将关闭兄弟分支）。默认值是false。

url 属性
public string|array $url;
用于树形图动态加载的URL（使用AJAX）。参见CHtml::normalizeUrl以了解可用的URL格式。设置此属性将使树形图的动态加载可用。当页面显示后，浏览器将使用一个名为“root”，值为“source”的 GET参数请求这个URL。服务器脚本将根据树形图的根生成所需的树形图数据（参见saveDataAsJson）。如果一个节点有CSS类“hasChildren”，那么展开这个节点将导致对它的子节点的动态加载。在这种情况下，GET参数“root”的值是此节点的ID属性值。

方法详细
getClientOptions() 方法
protected array getClientOptions()
{return} array 返回JavaScript选项。


init() 方法
public void init()
初始化此微件。此方法注册所有必须的客户端脚本然后渲染树形图的内容。

run() 方法
public void run()

结束此微件的运行。

saveDataAsHtml() 方法
public static string saveDataAsHtml(array $data)
$data array 树形图所用的数据。
{return} string 生成的树形图的HTML代码。
根据数组中的数据，在HTML页面生成树形图的节点。

saveDataAsJson() 方法
public static string saveDataAsJson(array $data)
$data array 树形图所用的数据。
{return} string 以JSON格式表示的数据

将树形图数据保存为JSON格式。通常在当服务器端代码需要将树形图数据发送到客户端时使用此方法。