Yii 1.1: Using CButtonColumn to customize buttons in CGridView Follow @yiiframework
来源:互联网 发布:新版淘宝联盟自己买 编辑:程序博客网 时间:2024/06/06 10:41
http://www.yiiframework.com/wiki/106/using-cbuttoncolumn-to-customize-buttons-in-cgridview/
Introduction
CGridView is a one of most flexible widgets in Yii and example its flexibility is CButtonColumn used to build buttons for steering model in each grid row. Here in this how-to we will explain ways user can customize CButtonColumn to flexibly fit it to its needs.
Basic customization
In default look CButtonColumn contains three buttons in this order: {view}, {update} and {delete}. Their meaning and behaviour should be obvious.
The easiest way to customize look and behaviour of them is to use series of CButtonColumn properties, like:updateButtonImageUrl (path to image for update button), updateButtonLabel (label for the update button; not HTML-encoded), updateButtonOptions (HTML options for this button, used in the way as many htmlOptions property for many widgets) andupdateButtonUrl (a PHP expresion that is evaluated for button and whose result is used as the URL). Respective properties you'll find for other default buttons.
A few remarks:
- For delete button only, there is deleteConfirmation property (string), which can be used for customizing message being displayed as confirmation of delete operation.
- In PHP expression used for xxxButtonUrl property, you can use variable$row for the row number (zero-based); $data for the data model for the row and$this for the column object.
- If you provide an empty string for xxxButtonImageUrl or set it to false, a textual link will be used instead.
Info: Delete confirmation message (and other textual elements of CButtonColumn or CGridView) can be also customized by creating zii.php file inprotected/messages/languageID/ (or even better - copying one from for exampleyii/messages/de/ and translating or customizing it to own needs). Don't forget to set'coreMessages'=>array('basePath'=>'protected/messages') in components part of your config.php file for the application to force Yii to look in your own messages folder instead of build-in one inside framework directory.
More flexible customizing
If using above properties for customizing many aspects of many buttons is a bit messy in code or if there is need for more complex customization or introduction of new buttons there is a better, more flexible way - by usingtemplate and buttons properties.
You can use template property to change order of build-in buttons or remove some of them like this:
array( 'class'=>'CButtonColumn', 'template'=>'{delete}{update}',)
In CGridView's buttons column build upon above example there will be no view button and delete and update buttons will be in other than default order (delete first).
You can use the same property to introduce new buttons:
array( 'class'=>'CButtonColumn', 'template'=>'{up}{down}{delete}',)
For new buttons (and of course - for existing, build-in ones too!) you have to specify look and behaviour.buttons property of CButtonColumn is used for it. This property is an array of buttons id (which names must correspond to the one provided intemplate property) and each button is another array holding its specific properties.
Here you can use:
'buttonID' => array( 'label'=>'...', //Text label of the button. 'url'=>'...', //A PHP expression for generating the URL of the button. 'imageUrl'=>'...', //Image URL of the button. 'options'=>array(), //HTML options for the button tag. 'click'=>'...', //A JS function to be invoked when the button is clicked. 'visible'=>'...', //A PHP expression for determining whether the button is visible.)
Please, note: Text in label property is displayed only, if you have atextual link! If you are using images (build-in or own) instead of text links, text hold in this property will be rendered as image'salt parameter. If you want to change text of tooltip, which is displayed when user hovers your image button, you have to editoptions property instead and give the text to its title parameter, like this:
'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...'),)
There are similar remarks for above mentioned properties like the one described in first part of this text:
- In PHP expression used for url or visible properties, you can use variable$row for the row number (zero-based) and $data for the data model for the row.
- If you provide an empty string for imageUrl or set it to false, a textual link will be used instead.
Finally here is an example of introducing new buttons to CButtonColumn:
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!");}', ), ),),
Please note, that since jQuery is used here, any function passed to click should be surrounded by proper jQuery function call. That is why, we are using'click'=>'function(){alert("Going down!");}' instead of simple 'click'=>'alert("Going down!");'.
Above example also shows (email button) how to create a valid URL containing controller and view plus current user ID (or any other data from model for current row). It also explains how to usebaseUrl function from CHttpRequest class to set an image for button to be a file stored outsideprotected folder.
Specific delete confirmation
You may notice that a standard set of views generated for CRUD operations by Gii includes (in view and update views) delete menu item with confirmation. This confirmation text can be easily changed/extended to include some record (model) specific data, like record ID.
This is not so simple in CGridView (CButtonColumn), as deleteConfirmation property is not parsed. However, there is a tricky way to achieve this (thanks tomdomba for providing it!) using jQuery. Here is an example:
array( 'class'=>'CButtonColumn', 'deleteConfirmation'=>"js:'Record with ID '+$(this).parent().parent().children(':first-child').text()+' will be deleted! Continue?'",),
We can also use jQuery's ntn-child function for retrieve contents of other column:
array( 'class'=>'CButtonColumn', 'deleteConfirmation'=>"js:'Do you really want to delete record with ID '+$(this).parent().parent().children(':nth-child(2)').text()+'?'",),
The jQuery function looks really tricky freeky at first sight. If you wish to know, why it has to be in that form, please readthis forum post.
Final words
I hope this short how-to will help in better understanding of how flexible buttons in CGridView can be customized. This is especially important as there are many forum posts asking questions about this. Please, feel free to make any updates or corrections to this article, if you find something is missing or that there are mistakes in it.
Have a nice day and happy Yii-ing! :)
- Yii 1.1: Using CButtonColumn to customize buttons in CGridView Follow @yiiframework
- Yii CGridView CButtonColumn, 自定义按钮之二
- Yii CGridView CButtonColumn, 自定义按钮之一
- Yii CGridView CButtonColumn, ajax 自定义按钮之三
- Yii CGridView CButtonColumn, ajax 自定义按钮之三
- yii DropDown for pageSize in CGridView
- yii CButtonColumn 按钮
- Using GoldenGate EVENTACTIONS to customize processing
- Yii Framework CGridView详解
- Yii Framework CGridView详解
- Yii CGridView使用
- yii cgridview 自选按钮
- Yii CGridView详解
- 2.15 Adding Buttons to Navigation Bars Using UIBarButtonItem
- using strace to follow the startup of zygote
- YII(yiiframework)自定义公共类及属性
- Yii向CListView/CGridView中传值
- Yii向CListView/CGridView中传值
- iOS巅峰之开发过程中的小知识点大全
- DialogFragment
- 反向传播算法
- 笔记
- Dynamics CRM Ribbon WorkBench 当ValueRule的值为空时的设置
- Yii 1.1: Using CButtonColumn to customize buttons in CGridView Follow @yiiframework
- 【数论】Send a Table, UVa10820 【线性筛法】【欧拉函数】
- 【大规模图像检索的利器】Deep哈希算法介绍
- openstack安装部署5——计算服务(控制节点&计算节点)
- 两个activity之间发送本地广播
- 手把手教你如何搭建iOS项目基本框架
- JavaScript模板替换html内容
- SpringMVC中使用@RequestBody,@ResponseBody注解实现Java对象和XML/JSON数据自动转换(上)
- MFC中功能键键值(转)