Yii CGridView CButtonColumn, ajax 自定义按钮之三

谁践踏了优雅 2022-07-16 08:10 161阅读 0赞

Create custom button button with AJAX function in CGridView

http://www.yiiframework.com/wiki/410/create-custom-button-button-with-ajax-function-in-cgridview/

### Introduction ###

CButtonColumn in CGridView can be customised to include user built buttons. To learn a great deal about including custom buttons, [ read this excellent wiki][read this excellent wiki]. This tutorial will show how to call an action from one custom button using **AJAX** instead of regular GET calls.

### How to ###

1.  Create a custom button in your grid. You can follow [ this tutorial][read this excellent wiki] for that.
2.  In the ‘url’ parameter of your button, you call your controller action:

'url'=>'Yii::app()->controller->createUrl("myAction",array("id"=>$data->primaryKey))'

*  In the ‘click’ function of your button you add the following code:

'click'=>"function(){
        $.fn.yiiGridView.update('my-grid', {  //change my-grid to your grid's name
            type:'POST',
            url:$(this).attr('href'),
            success:function(data) {
                  $.fn.yiiGridView.update('my-grid'); //change my-grid to your grid's name
            }
        })
        return false;
      }
    ",

This will call the controller function using AJAX instead of redirecting the user to the url using GET parameters.

### Example ###

We will create a button that sends email to the user and then prints a success flash screen.

In your controller:

public function actionEmail($id)
    {
      $model = $this->loadModel($id);
      $email = $model->email; //this is the user email
      if (mail($email, 'My Subject', 'my message'))
        echo 'email sent to '.$email;
      // if AJAX request, we should not redirect the browser
      if(!isset($_GET['ajax']))
         $this->redirect(Yii::app()->request->urlReferrer);
    }

In your view file, in a CButtonColumn of the grid:

array
    (
        'class'=>'CButtonColumn',
        'template'=>'{email}{view}{update}{delete}',
        'buttons'=>array
        (
            'email' => array
            (
                'label'=>'Send an e-mail to this user',
                'imageUrl'=>Yii::app()->request->baseUrl.'/images/email.png',
                'click'=>"function(){
                                        $.fn.yiiGridView.update('user-grid', {
                                            type:'POST',
                                            url:$(this).attr('href'),
                                            success:function(data) {
                                                  $('#AjFlash').html(data).fadeIn().animate({opacity: 1.0}, 3000).fadeOut('slow');
    
                                                  $.fn.yiiGridView.update('user-grid');
                                            }
                                        })
                                        return false;
                                  }
                         ",
                'url'=>'Yii::app()->controller->createUrl("email",array("id"=>$data->primaryKey))',
            ),
        )

In your view file you also need to include the div for the flash message:

[read this excellent wiki]: http://www.yiiframework.com/wiki/106/using-cbuttoncolumn-to-customize-buttons-in-cgridview/