包 | system.web.widgets |
---|---|
继承 | class CTreeView » CWidget » CBaseController » CComponent |
源自 | 1.0 |
版本 | $Id: CTreeView.php 3144 2011-03-30 07:03:48Z mdomba $ |
源码 |
这个类封装了jQuery的一个优秀的树形图插件 (http://bassistance.de/jquery-plugins/jquery-plugin-treeview/).
要使用CTreeView,只需要简单地将data设置为你所需要 表现的数据即可。
CTreeView也支持通过AJAX动态地加载数据。要完成此目的,设置 url为可以根据请求提供树形图所需数据的URL。
公共属性
属性 | 类型 | 描述 | 定义在 |
---|---|---|---|
actionPrefix | string | actions的ID的前缀。 当微件在CController::actions中声明了 动作提供者,可以为其动作的ID指定前缀以区别 于别的微件或控制器。当微件用于控制器 的视图中时,必须配置同样的前缀。 | CWidget |
animated | string|integer | 动画速度。这个值可以是三个预定义的速度之一 ("slow", "normal", or "fast")或以毫秒为单位的数值(例如 1000)。 如果没有设置,将不会使用动画效果。 | CTreeView |
collapsed | boolean | 树形图是否随着所有分支收起而开始。默认值是false。 | CTreeView |
control | string | 一个树形控件的容器,允许用户通过一次点击完成展开、收起和开关所有分支。 在此容器中,点击第一个超链接将收起树形图;第二个超链接展开树形图;第三个超链接用于 开关树形图。 这个属性是一个有效的jQuery选择器(例如,“#treecontrol”。这儿“treecontrol”是包 含有这些超链接的“DIV”元素的ID)。 | CTreeView |
controller | CController | 返回此微件所属的控制器。 | CWidget |
cookieId | string | 通过"cookie"进行持久化时使用的cookie的名字。默认值为“treeview”。 | CTreeView |
cssFile | mixed | 此微件使用的CSS文件。默认为null,表示 使用此微件包含的默认CSS文件。 如果设置为false,则不使用CSS文件。其他情况下,指定 的CSS文件将被包含在此微件中。 | CTreeView |
data | array | 用于生成树形图内容的数据。
每个数据元素按以下格式对应于一个树形图节点:
|
CTreeView |
htmlOptions | array | 需要在UL标签中进行渲染的附加HTML属性。
树形图预定义了下列CSS类,
可以直接使用它们:
|
CTreeView |
id | string | 返回此微件的ID。如果需要的话,将生产一个新的ID并将其返回。 | CWidget |
options | array | 传递给树形图的JavaScript对象的构造器的附加选项。 | CTreeView |
owner | CBaseController | 返回此微件的所有者或创建者。 | CWidget |
persist | string | 将树的状态持久化到cookies中或页面位置中。如果设置为“location”,寻找 匹配“location. | CTreeView |
prerendered | boolean | 此属性设置为真时将不对点击区DIV标签和CSS类渲染,假设服务器端已完成此工作。默认值是false。 | CTreeView |
skin | mixed | 微件使用的皮肤的名称。默认为“default”。 如果此属性设置为false,微件将不会有皮肤被使用。 | CWidget |
toggle | string | 开关一个分支时调用的回调函数。参数:“this”指向UL表明是显示或隐藏 | CTreeView |
unique | boolean | 设置此属性可以实现在同一层次仅可展开一个分支(在展开时将关闭兄弟分支)。 默认值是false。 | CTreeView |
url | string|array | 用于树形图动态加载的URL(使用AJAX)。 参见CHtml::normalizeUrl以了解可用的URL格式。 设置此属性将使树形图的动态加载可用。 当页面显示后,浏览器将使用一个名为“root”,值为“source”的 GET参数请求这个URL。服务器脚本将根据树形图的根生成所需的树形 图数据(参见saveDataAsJson)。 如果一个节点有CSS类“hasChildren”,那么展开这个节点将导致对 它的子节点的动态加载。在这种情况下,GET参数“root”的值是此节 点的ID属性值。 | CTreeView |
viewPath | string | 返回包含此微件所需的视图文件的路径。 | CWidget |
受保护属性
属性 | 类型 | 描述 | 定义在 |
---|---|---|---|
clientOptions | array | 返回JavaScript选项。 | CTreeView |
公共方法
受保护方法
方法 | 描述 | 定义在 |
---|---|---|
getClientOptions() | 返回返回JavaScript选项。 | CTreeView |
属性详细
动画速度。这个值可以是三个预定义的速度之一 ("slow", "normal", or "fast")或以毫秒为单位的数值(例如 1000)。 如果没有设置,将不会使用动画效果。
返回JavaScript选项。
树形图是否随着所有分支收起而开始。默认值是false。
一个树形控件的容器,允许用户通过一次点击完成展开、收起和开关所有分支。 在此容器中,点击第一个超链接将收起树形图;第二个超链接展开树形图;第三个超链接用于 开关树形图。 这个属性是一个有效的jQuery选择器(例如,“#treecontrol”。这儿“treecontrol”是包 含有这些超链接的“DIV”元素的ID)。
通过"cookie"进行持久化时使用的cookie的名字。默认值为“treeview”。
此微件使用的CSS文件。默认为null,表示 使用此微件包含的默认CSS文件。 如果设置为false,则不使用CSS文件。其他情况下,指定 的CSS文件将被包含在此微件中。
用于生成树形图内容的数据。 每个数据元素按以下格式对应于一个树形图节点:
- 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版开始可用。
需要在UL标签中进行渲染的附加HTML属性。 树形图预定义了下列CSS类, 可以直接使用它们:
- treeview-black
- treeview-gray
- treeview-red
- treeview-famfamfam
- filetree
传递给树形图的JavaScript对象的构造器的附加选项。
将树的状态持久化到cookies中或页面位置中。如果设置为“location”,寻找 匹配“location.href”的锚并激活它在树形图中的部分。 常用于基于超链接的状态保存。如果设置为“cookie”,在每次点击后 会将树的状态保存到一个cookie中,然后在页面加载时恢复它。
此属性设置为真时将不对点击区DIV标签和CSS类渲染,假设服务器端已完成此工作。默认值是false。
开关一个分支时调用的回调函数。参数:“this”指向UL表明是显示或隐藏
设置此属性可以实现在同一层次仅可展开一个分支(在展开时将关闭兄弟分支)。 默认值是false。
用于树形图动态加载的URL(使用AJAX)。 参见CHtml::normalizeUrl以了解可用的URL格式。 设置此属性将使树形图的动态加载可用。 当页面显示后,浏览器将使用一个名为“root”,值为“source”的 GET参数请求这个URL。服务器脚本将根据树形图的根生成所需的树形 图数据(参见saveDataAsJson)。 如果一个节点有CSS类“hasChildren”,那么展开这个节点将导致对 它的子节点的动态加载。在这种情况下,GET参数“root”的值是此节 点的ID属性值。
方法详细
protected array getClientOptions()
| ||
{return} | array | 返回JavaScript选项。 |
protected function getClientOptions()
{
$options=$this->options;
foreach(array('url','animated','collapsed','control','unique','toggle','persist','cookieId','prerendered') as $name)
{
if($this->$name!==null)
$options[$name]=$this->$name;
}
return $options;
}
public void init()
|
public function init()
{
if(isset($this->htmlOptions['id']))
$id=$this->htmlOptions['id'];
else
$id=$this->htmlOptions['id']=$this->getId();
if($this->url!==null)
$this->url=CHtml::normalizeUrl($this->url);
$cs=Yii::app()->getClientScript();
$cs->registerCoreScript('treeview');
$options=$this->getClientOptions();
$options=$options===array()?'{}' : CJavaScript::encode($options);
$cs->registerScript('Yii.CTreeView#'.$id,"jQuery(\"#{$id}\").treeview($options);");
if($this->cssFile===null)
$cs->registerCssFile($cs->getCoreScriptUrl().'/treeview/jquery.treeview.css');
else if($this->cssFile!==false)
$cs->registerCssFile($this->cssFile);
echo CHtml::tag('ul',$this->htmlOptions,false,false)."\n";
echo self::saveDataAsHtml($this->data);
}
初始化此微件。 此方法注册所有必须的客户端脚本然后渲染 树形图的内容。
public void run()
|
public function run()
{
echo "</ul>";
}
结束此微件的运行。
public static string saveDataAsHtml(array $data)
| ||
$data | array | 树形图所用的数据(参见data了解可用的数据结构)。 |
{return} | string | 生成的树形图的HTML代码。 |
public static function saveDataAsHtml($data)
{
$html='';
if(is_array($data))
{
foreach($data as $node)
{
if(!isset($node['text']))
continue;
if(isset($node['expanded']))
$css=$node['expanded'] ? 'open' : 'closed';
else
$css='';
if(isset($node['hasChildren']) && $node['hasChildren'])
{
if($css!=='')
$css.=' ';
$css.='hasChildren';
}
$options=isset($node['htmlOptions']) ? $node['htmlOptions'] : array();
if($css!=='')
{
if(isset($options['class']))
$options['class'].=' '.$css;
else
$options['class']=$css;
}
if(isset($node['id']))
$options['id']=$node['id'];
$html.=CHtml::tag('li',$options,$node['text'],false);
if(!empty($node['children']))
{
$html.="\n<ul>\n";
$html.=self::saveDataAsHtml($node['children']);
$html.="</ul>\n";
}
$html.=CHtml::closeTag('li')."\n";
}
}
return $html;
}
根据数组中的数据,在HTML页面生成树形图的节点。
public static string saveDataAsJson(array $data)
| ||
$data | array | 树形图所用的数据(参见data了解可用的数据结构)。 |
{return} | string | 以JSON格式表示的数据 |
public static function saveDataAsJson($data)
{
if(empty($data))
return '[]';
else
return CJavaScript::jsonEncode($data);
}
将树形图数据保存为JSON格式。 通常在当服务器端代码需要将 树形图数据发送到客户端时使 用此方法。