包 | 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 |
公共方法
方法 | 描述 | 定义在 |
---|---|---|
__call() | 如果类中没有调的方法名,则调用这个方法。 | CComponent |
__construct() | 构造器。 | CWidget |
__get() | 返回一个属性值、一个事件处理程序列表或一个行为名称。 | CComponent |
__isset() | 检查一个属性是否为null。 | CComponent |
__set() | 设置一个组件的属性值。 | CComponent |
__unset() | 设置一个组件的属性为null。 | CComponent |
actions() | 返回此widget使用的动作的列表。 | CWidget |
asa() | 返回这个名字的行为对象。 | CComponent |
attachBehavior() | 附加一个行为到组件。 | CComponent |
attachBehaviors() | 附加一个行为列表到组件。 | CComponent |
attachEventHandler() | 为事件附加一个事件处理程序。 | CComponent |
beginCache() | Begins fragment caching. | CBaseController |
beginClip() | Begins recording a clip. | CBaseController |
beginContent() | Begins the rendering of content that is to be decorated by the specified view. | CBaseController |
beginWidget() | Creates a widget and executes it. | CBaseController |
canGetProperty() | 确定属性是否可读。 | CComponent |
canSetProperty() | 确定属性是否可写。 | CComponent |
createWidget() | Creates a widget and initializes it. | CBaseController |
detachBehavior() | 从组件中分离一个行为。 | CComponent |
detachBehaviors() | 从组件中分离所有行为。 | CComponent |
detachEventHandler() | 分离一个存在的事件处理程序。 | CComponent |
disableBehavior() | 禁用一个附加行为。 | CComponent |
disableBehaviors() | 禁用组件附加的所有行为。 | CComponent |
enableBehavior() | 启用一个附加行为。 | CComponent |
enableBehaviors() | 启用组件附加的所有行为。 | CComponent |
endCache() | Ends fragment caching. | CBaseController |
endClip() | Ends recording a clip. | CBaseController |
endContent() | Ends the rendering of content. | CBaseController |
endWidget() | Ends the execution of the named widget. | CBaseController |
evaLuateExpression() | 计算一个PHP表达式,或根据组件上下文执行回调。 | CComponent |
getController() | 返回此微件所属的控制器。 | CWidget |
getEventHandlers() | 返回一个事件的附加处理程序列表。 | CComponent |
getId() | 返回此微件的ID。如果需要的话,将生产一个新的ID并将其返回。 | CWidget |
getOwner() | 返回此微件的所有者或创建者。 | CWidget |
getViewFile() | 根据视图名查找视图文件。 | CWidget |
getViewPath() | 返回包含此微件所需的视图文件的路径。 | CWidget |
hasEvent() | 确定一个事件是否定义。 | CComponent |
hasEventHandler() | 检查事件是否有附加的处理程序。 | CComponent |
hasProperty() | 确定属性是否被定义。 | CComponent |
init() | 初始化此微件。 | CTreeView |
raiseEvent() | 发起一个事件。 | CComponent |
render() | 渲染一个视图。 | CWidget |
renderFile() | Renders a view file. | CBaseController |
renderInternal() | Renders a view file. | CBaseController |
run() | 结束此微件的运行。 | CTreeView |
saveDataAsHtml() | 根据数组中的数据,在HTML页面生成树形图的节点。 | CTreeView |
saveDataAsJson() | 将树形图数据保存为JSON格式。 | CTreeView |
setId() | 设置此微件的ID。 | CWidget |
widget() | Creates a widget and executes it. | CBaseController |
受保护方法
方法 | 描述 | 定义在 |
---|---|---|
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格式。 通常在当服务器端代码需要将 树形图数据发送到客户端时使 用此方法。