[图]关于YII中部件的使用详解

对于每一个初学者来说，学习YII框架都会觉得很多迷茫和无从下手的时候，我也是从初学者过来的，在YII框架中，用的最多的莫过于部件的应用了，部件让让更多的代码可重复，在页面的任意位置都可以进行调用，非常的方便，我们接下来就来完成一个小型的部件功能开发吧。

首先我们来看下部件的效果图吧：

本部件是基于YII自带Demo的blog系统进行展示的，首先我们来看下文件结构：

上图中红线框中的就是部件的存放位置，extensions文件夹下一般都是以文件夹的形式来区分不同的部件命名空间，比如我这里写了个列表的部件，如果需要有view的话，也在部件的文件夹下新建views文件夹，在views下新建相应的php文件即可。

首先我们来看listExt/listwidet.php文件的代码结构：

Yii::import ( 'zii.widgets.CPortlet' );
class Listwidet extends CPortlet {
<span style="white-space:pre"></span><span style="white-space:pre">	</span>public $pagesize = 10;
<span style="white-space:pre">	</span>public function init() {
<span style="white-space:pre">		</span>$this->id = 'menuList';
<span style="white-space:pre">		</span>$this->title = '已存在的用户列表';
<span style="white-space:pre">		</span>parent::init ();
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>public function renderContent() {
<span style="white-space:pre">		</span>$result = new CActiveDataProvider('User',array(
<span style="white-space:pre">				</span>'pagination'=> array(
<span style="white-space:pre">						</span>'pagesize'=>$this->pagesize,//这里要传参的，下面会讲到
<span style="white-space:pre">						</span>),
<span style="white-space:pre">				</span>'sort'=>array('defaultOrder'=>'id asc')
<span style="white-space:pre">				</span>));
<span style="white-space:pre">		</span>$this->render ( 'listwidet', array (
<span style="white-space:pre">				</span>'userdata' => $result
<span style="white-space:pre">		</span>) );
<span style="white-space:pre">	</span>}
}

上面的代码主要使用了CActiveDataProvider  详细可以查看这里的链接： http://www.yiichina.com/api/CActiveDataProvider

接着我们来看下listExt/views/listwidet.php 的代码结构：

<ul>
<?php
$this->widget ( 'zii.widgets.grid.CGridView', array (
		'dataProvider' => $userdata,
		'columns' => array (
				'id',
				'username',
				array (
						'name' => 'email', 
						<span style="color:#ff0000; "><strong>'type' => 'html', </strong></span>//默认为text
						'value' => 'CHtml::mailto($data->email)',
						'htmlOptions' => array (
								'width' => 120,
								'style' => 'text-align:center;'//这里的其实可以写在css里的
						)
				),
				array (
						'header' => '操作',
						'htmlOptions' => array (
								'width' => 150,
								'style' => 'text-align:center;'
						),
						'class' => 'CButtonColumn',
						'buttons' => array (
								'btnView' => array (
										'label' => '查看',
										'url' => 'array("/user/view/","id"=>$data->id)',
										'imageUrl' => false
								),
								'btnUpdate' => array (
										'label' => '修改',
										'url' => 'array("/user/update/","id"=>$data->id)',
										'imageUrl' => false
								),
								'btnDelete' => array (
										'label' => '删除',
										'url' => 'array("/user/delete/","id"=>$data->id)',
										'imageUrl' => false
								)
						),
						'template' => '{btnView},{btnUpdate},{btnDelete}'
				)
		)
) );
?>
</ul>

上面的配置可能看起来有点复杂，不过我们来分解下：

首先email的列是比较特殊的，我们要配置此列显示为html的格式

接着我们最后自定义了一列，为了显示为按钮类，我们使用了class 为 CButtonColumn 的列类型

现在部件的内部工作代码都写好了，那我们应该怎么调用呢，其实很简单的一句话就可以搞定。

在需要调用的页面的任意位置写上下面的代码：

<?php $this->widget('ext.listExt.listwidet',array('pagesize' => 5));?>

上面的代码意思是调用此部件，同时传入分页的参数每页显示5条数据，下面的效果就出来了。

其实很简单的。

当然如果更高级的部件开发就下次分享吧，部件中我们可以加入我们需要的资源，比如css、js、images等，还有如果有布局的话，还可以加入layouts等等。