使用CButtonColumn自定义CGridiew里面的按钮


简介

CGridView是Yii中的一个灵活的插件,例如它使用CButtonColumn来为每行生成按钮.在这里我们会介绍怎么根据需求自定义按钮.
默认按钮

默认情况下 CButtonColumn 包含三个按钮:{查看(view)},{更新(update)}和{删除(delete)},它们的含义是显而易见的.

自定义它们的外观和行为的最简单的方法是使用CButtonColumn的属性,如:updateButtonImageUrl (更新update按钮的图片路径),updateButtonLabel (更新按钮的标签,没有经过HTML编码) , updateButtonOptions (更新按钮的HTML选项,向其他插件的htmlOptions 属性一样)和 updateButtonUrl (通过PHP表达式得出的URL).你可以找到每个按钮各自的属性.

此外:

只有删除(delete)按钮拥有 deleteConfirmation(string) 属性,它用作点击删除按钮后显示的自定义确认信息.
在 xxxButtonUrl 属性的 PHP 表达式中 $row 表示行号(从0开始),$data 表示数据模型(model),$this表示列对象.
当你设置 xxxButtonImageUrl 的属性为空或 false 时,文本形式的链接将会代替图片显示.

info: 删除的确认信息(或其他 CButtonColumn 和 CGridView 的文本)属性可以通过在 protected/messages/languageID/(或在 yii/messages/de/ 复制并根据需求翻译或自定义)目录下创建 zii.php 文件来自定义,不要忘记修改配置文件 config.php 中的 components 部分为 ‘coreMessages’=>array(‘basePath’=>’protected/messages’) ,把 Yii默认的消息目录噶为我们自定义的目录。

更灵活的定制

通过上面的属性自定义多个按钮在代码中时很混乱的,通过 模板(template) 和 按钮(buttons) 属性可以更灵活的自定义多个按钮。

你可以通过一下设置模板(template)属性的方式来构建或移除按钮.

array
(
    'class'=>'CButtonColumn',
    'template'=>'{delete}{update}',
)

在上例 CGridView 的按钮列中没有查看(view)按钮,而删除(delete)和更新(update)按钮为默认设置(删除按钮放到第一个位置).

同样你可以通过此属性添加新按钮:

array
(
    'class'=>'CButtonColumn',
    'template'=>'{up}{down}{delete}',
)

对于新的按钮(当然已有的也一样)你必须指定外观和行为.CButtonColumn 的属性 buttons 就是用来做这的,它是由每个按钮的ID(名称必须和template提供的相同)对应其属性组成的数组.

你可以使用一下代码:

'buttons'=>array(
    'buttonID' => array(
        'label'=>'...',     //按钮的文本标签.
        'url'=>'...',       //使用 PHP 表达式得出按钮的 URL.
        'imageUrl'=>'...',  //按钮的图片路径.
        'options'=>array(), //按钮的 HTML 选项.
        'click'=>'...',     //当点击按钮时调用的 javascript 函数
        'visible'=>'...',   //确定按钮是否显示的 PHP 表达式
    ),
)

请注意: 当使用文字链接时 label 属性就会显示,当使用图片链接时 label 属性会被渲染为图片的 alt 参数.如果你想修改图片的 tooltip 文字,你可以修改 options 属性中的 title 参数,如:

'buttonID' => array
(
    'label'=>'Text shown as alt text to image or as label to text link...',
    'options'=>array('title'=>'Text shown as tooltip when user hovers image...'),
)

此外:

在 url 和 visible 属性的 PHP 表达式中 $row 表示行号(从0开始),$data 表示数据模型(model),$this表示列对象.
当你设置 xxxButtonImageUrl 的属性为空或 false 时,文本形式的链接将会代替图片显示.

最后这里有一个添加新按钮的例子:

array
(
    'class'=>'CButtonColumn',
    'template'=>'{email}{down}{delete}',
    'buttons'=>array
    (
        'email' => array
        (
            'label'=>'Send an e-mail to this user',
            'imageUrl'=>Yii::app()->request->baseUrl.'/images/email.png',
            'url'=>'Yii::app()->createUrl("users/email", array("id"=>$data->id))',
        ),
        'down' => array
        (
            'label'=>'[-]',
            'url'=>'"#"',
            'visible'=>'$data->score > 0',
            'click'=>'function(){alert("Going down!");}',
        ),
    ),
),

请注意: 因为 jQuery 用在这里,任何在 click 中使用的函数都将被 jQuery 函数包围,这就是为什么我们使用 ‘click’=>’function(){alert(“Going down!”);}’ 而不是 ‘click’=>’alert(“Going down!”);’

在上面的例子中同样可以看出怎么创建一个包含控制器视图和用户ID(或当前行的其他数据)的有效URL,同样也可以看出怎么使用 CHttpRequest 类中的 baseUrl 函数来设置存放在 protected 文件夹外的图片.
指定删除按钮的确认信息

你可能会注意到使用 Gii 生成的标准 CRUD 操作中的删除菜单项包含确认信息.这个信息可以很容易地 修改或扩展到数据中的指定记录,如记录ID.

因为 deleteConfirmation 属性不会在 CGridView 中的 CButtonColumn 中解析,所以实现不是这么简单,这里又一个巧妙的方式使用 jQuery 来实现它(感谢 mdomba 提供),下面是例子:

array
(
        'class'=>'CButtonColumn',
        'deleteConfirmation'=>"js:'Record with ID '+$(this).parent().parent().children(':first-child').text()+' will be deleted! Continue?'",
),

我们同样可以使用 jQuery 的 ntn-child函数为其他列检索内容.

array
(
‘class’=>’CButtonColumn’,
‘deleteConfirmation’=>”js:’Do you really want to delete record with ID ‘+$(this).parent().parent().children(‘:nth-child(2)’).text()+’?'”,
),

jQuery 函数看上去很复杂,如果你想知道为什么要这么用请查看论坛帖子
结束语

我希望这个简短的使用方法额可以对你有所帮助,这很重要因为论坛中有很多人问关于这的问题.如果你发现该文的错误或有遗漏的地方欢迎修改.

普人特福的博客cnzz&51la for wordpress,cnzz for wordpress,51la for wordpress