Use CButtonColumn to customize the buttons in CGridiew

CGridView is a flexible plug-in Yii. for example, it uses CButtonColumn to generate buttons for each row. here we will introduce how to customize buttons as needed.

CGridView is a flexible plug-in Yii. for example, it uses CButtonColumn to generate buttons for each row. here we will introduce how to customize buttons as needed.

Default button

By default, CButtonColumn contains three buttons: {view}, {update}, and {delete}. their meanings are obvious.

The simplest way to customize their appearance and behavior is to use the attributes of CButtonColumn, such:UpdateButtonImageUrl(UpdateUpdateButton Image path ),UpdateButtonLabel(The tag of the update button is not HTML-encoded ),UpdateButtonOptions(The HTML option of the update button is the same as the htmlOptions attribute of other plug-ins) andUpdateButtonUrl(URL obtained through the PHP expression). you can find the attributes of each button.

In addition:

1. Only the delete button hasDeleteConfirmation(String) attribute, which is used as the custom confirmation information displayed after the delete button is clicked.
2. InXxxButtonUrlIn the PHP expression of the attribute$ RowIndicates the row number (starting from 0 ),$ DataIndicates the data model ),$ ThisColumn object.
3. When you setXxxButtonImageUrlIf the property is null or false, text links will be displayed in place of images.

Info: The deletion confirmation information (or other CButtonColumn and CGridView text) attributes can beProtected/messages/languageID/(Or inYii/messages/de/Copy and customize the zii. php file in the directory as needed. do not forget to modify the components section in the config. php configuration file'Coremessages '=> array ('basepath' => 'protected/messages '), And set the Yii default message directory as our custom directory.

More flexible customization

Using the above attributes to customize multiple buttons is messy in the codeTemplate)AndButton (buttons)Attributes allow you to customize multiple buttons more flexibly.

You can set the template attribute to build or remove the button.

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

In the preceding example, the view button is not displayed in the button column of the CGridView, and the delete and update buttons are set by default (the delete button is placed in the first position ).

You can also use this property to add a new button:

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

You must specify the attributes of the appearance and behavior. CButtonColumn for the new button (the same is true for existing buttons ).ButtonsIs used to do this, it is by the ID of each button (the name must beTemplateReturns an array composed of attributes.

You can use the following code:

'Buttonid' => array ('label' => '... ', // The text tag of the button. 'URL' => '... ', // use the PHP expression to obtain the button URL. 'imageurl' => '... ', // The Image path of the button. 'options' => array (), // HTML options of the button. 'click' => '... ', // The javascript function 'visable' =>' called when the button is clicked '... ', // Determine whether the PHP expression is displayed by the button)

Note: When using text linksLabelThe property is displayed. when the image link is usedLabelAttribute will be rendered as imageAltParameter. if you want to modify the imageTooltipText, you can modifyOptionsAttributeTitleParameters, such:

'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...'), )

In addition:

1. InUrlAndVisibleIn the PHP expression of the attribute$ RowIndicates the row number (starting from 0 ),$ DataIndicates the data model ),$ ThisColumn object.
2. When you setXxxButtonImageUrlIf the property is null or false, text links will be displayed in place of images.

Here is an example of adding a button:

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!");}', ), ), ),

Note: Because jQuery is used here, anyClickAll functions used in are surrounded by jQuery functions, which is why we use'Click' => 'Function () {alert ("Going down! ");}'Instead'Click' => 'alert ("Going down! ");'

In the above example, we can also see how to create a valid URL that contains the controller view and user ID (or other data in the current row). We can also see how to useCHttpRequestClassBaseUrlFunctionProtectedImages outside the folder.

Confirm the deletion button

You may notice that the delete menu item in the standard CRUD operation generated using Gii contains confirmation information. This information can be easily modified or extended to the specified records in the data, such as the record ID.

BecauseDeleteConfirmationThe attribute will not be parsed in the CButtonColumn in the CGridView, so the implementation is not so simple. here is another clever way to implement it using jQuery (thanks)MdombaProvided). The following 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 the ntn-child function of jQuery to retrieve content for other columns.

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

JQuery functions look complicated. if you want to know why you want to use them, please refer to the forum post.

Conclusion

I hope this short usage method will be helpful to you. this is very important because many people in the forum have asked questions about this. if you find any errors or omissions in this article, modify them.