[yii] 如何客製或 extend 自己的 CButtonColumn 樣式

[yii] 如何客製自己的 CButtonColumn 樣式

[yii] How to customize CButtonColumn

這個文章的內容主要是要講怎麼換掉用 CGridView 產生的 CbuttonColumn 樣式，下圖就是用 CbuttonColumn 預設產生出來的三個 icon：

在 yii 另外使用 Gii 產生出來的 CRUD 的 view files，基本上會包含 admin.php, index.php, create.php, update.php, view.php 還有一些用下底線開頭的 _form.php, _search.php, _view.php 檔案，簡單瞭解了一下其產生列表的方式，會在需要產生列表的檔案去使用這個 widget：

 $this->widget('zii.widgets.CGridView', array(....) );  

其中，在後面所帶的array裡，會看到 ：

 array(  
       'class'=>'CButtonColumn',  
     ),  

這些預設產生的 Button 就是在這個 Array 產生的，接下來可以看一下官網提供的一些設定api，基本上，這些 Button 的 class, 內容文字, 連結, 底圖都能換。

---

設定很多，我以我會用到的一些需求為例：

template 屬性：
可以定義icon的出現順序，但若比方說你只寫 'template'=>{view} 那麼只會出現檢視的那顆icon。

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

deleteButtonOptions 屬性 : 

設定 delete icon 的基本屬性 ， 以我的例子為例，我想使用 glyphicons 的 icon ， 就必須把 delete button class 改成我要的 glyphicon glyphicon-trash。

 array(  
           'class'=>'CButtonColumn',  
           'deleteButtonOptions'=>array('class'=>'glyphicon glyphicon-trash',
                                        'style'=>'background:red'),  
           'deleteButtonImageUrl'=>'' ,  
           'deleteButtonLabel'=>'', //移除文字  
           ),  

deleteButtonImageUrl : 

如果你有自己準備 deleteButton 的 icon ，可以使用這個設定把原本的圖檔路徑蓋掉，因為我是使用改 class name 去顯示 icon ，因此必須把原本塞在裡面的垃圾桶 icon url 清空，若你有自己準備 icon 就可以使用這個屬性。

deleteButtonLabel : 

如果你把 deleteButtonImageUrl 給清空了，也沒有把這個 deleteButtonLabel 清空，就會出現 Delete 文字 ，會像這樣 :

其他 view button 跟  update button 的設定跟上方式一樣的，只是屬性名字換一下而已：

 'updateButtonOptions'=>array('class'=>'....'),  
 'updateButtonImageUrl'=>'' ,  
 'updateButtonLabel'=>'',   
 'viewButtonOptions'=>array('class'=>'....'),  
 'viewButtonImageUrl'=>'' ,  
 'viewButtonLabel'=>'',   

因為我使用的是 bootstrap 的 css ，icon也是使用 glyphicons ，最後我換完的結果就是：

這些設定真是神奇，不過麻煩的是如果你有很多頁都需要使用自己定義的 CButtonColumn 是有點麻煩，所以只好為自己的 Project 另外寫 CbuttonColumn 的 Extend。

可以參考：How to extend CButtonColumn

---

寫自己的 Extend CButtonColumn ：

我自己試寫了一個 YourCustomCButtonColumn，

這種寫 extend 的做法我還蠻喜歡的，

這樣就不用每次為了換一個 icon 改好幾個 CGridView 的設定，

不寫extend，就是複製貼上一堆 array 設定，

寫extend，只要把原本使用的 CButtonColumn 改成使用自己寫的，

好或不好可行評估。

這是我寫的 extend

路徑可能是 protected/widget/YourCustomCButtonColumn.php 

 <?php  
 Yii::import('zii.widgets.grid.CButtonColumn');  
 class YourCustomCButtonColumn extends CButtonColumn  
 {   
   public $deleteButtonOptions=array('class'=>'你的新class');  
   public $deleteButtonImageUrl = '你的新icon img url';  
   public $deleteButtonLabel = '';   
   //deleteButtonLabel 若不清掉文字則不需要設定成''  
   //以下以此類推  
   public $updateButtonOptions = array('class'=>'...');  
   //...  
   public $viewButtonOptions = array('class'=>'...');  
   //..  
   //public $.....  
 }  

然後別忘了

在始祖的 CGridView.php 是import原本的 CButtonColumn:

Yii::import('zii.widgets.grid.CButtonColumn');

要把它改成 import 你自己寫的那一個：

Yii::import('zii.widgets.grid.CButtonColumn');

Yii::import('path.to.YourCustomCButtonColumn');

再來是 view file 的部分

要將原本使用的 CButtonColumn 改成：

 <?php $this->widget('zii.widgets.grid.CGridView', array(  
      'id'=>'...',  
      'dataProvider'=>$model->search(),  
      'filter'=>$model,  
      'columns'=>array(  
           .....  
           array(  
                //'class'=>'CButtonColumn', 這個不要用了,改用自己寫的（下一行）  
                'class'=>'YourCustomCButtonColumn',  
           ),  
      ),  
 )); ?>  

Hope help you...