Yii2的相關學習記錄，Gridview小組件使用及kartik-v/yii2-grid擴充（五）

標籤：

現在記錄下Gridview的相關內容，也是強迫症犯了，Yii2內建的Gridview雖然不錯，但是過濾欄如果一些欄位用不著，不會自動合并成一行，當然也可以過濾欄不用，而是在最上方自己寫一些需要檢索的資料，但是這樣很麻煩，還要自己去規劃樣式，寫檢索什麼的。正好在搜尋將檢索欄和標題合并時，看到了kartik-v/yii2-grid可以實現這些功能，而且還內建匯出excel、csv等資料，所以也順便試了下它的功能，調出了自己喜歡的樣式。在用kartik-v的Gridview之前我們還是要瞭解Yii2內建的Gridview的功能的，大體常用的一些方法如下：

1、Yii預設有四種樣式的列，分別為Data column（預設）、Action column（操作）、Checkbox column（可選中）、Serial column（帶序號）

2、標題名字會根據Model中的attributeLabels()方法,來自動替換成對應的中文。當然也可以通過‘label’來自己定義，而‘attribute’則是指定根據哪個欄位排序。其它的像是‘visible‘來隱藏顯示，‘header‘顯示頭部內容，‘headerOptions‘來定義css或style樣式等等。

[    ‘label‘=>‘你想要的名稱‘,    ‘attribute‘=>‘id‘,//可以排序的欄位]

3、自訂顯示頁數和排序欄位，如果用到了searchModel，則需要在searchModel的search方法中定義，否則，需要在Controller中定義：

$dataProvider = new ActiveDataProvider([    ‘query‘ => $query,    ‘pagination‘ => [        ‘pageSize‘ => 15,//如果不定義，預設為20    ],    ‘sort‘ => [‘attributes‘ => [‘id‘]],//如果定義，則只能按照id來排序，否則所有欄位都可以]);

4、下拉式功能表檢索，好比根據下拉式功能表檢索使用者狀態，則需要先在model中定義相關的方法，然後在Gridview中再做處理：

//Model中，定義一個靜態方法const STATUS_DELETED = 0;const STATUS_ACTIVE = 10;public static function getZhStatus($status=false){    $status_array= [        ‘‘=>‘請選擇‘,        self::STATUS_DELETED=>‘禁止‘,        self::STATUS_ACTIVE=>‘正常‘    ];    return $status==false?$status_array:ArrayHelper::getValue($status_array,$status,‘未知‘);} //Gridview中[     ‘attribute‘ => ‘status‘,    ‘filter‘=>Html::activeDropDownList($searchModel,‘status‘,User::getZhStatus(),[‘class‘ => ‘form-control ‘]),    ‘value‘=>function($data){        return User::getZhStatus($data->status);    },],   

5、格式化時間，有好幾種方法：

方法一：類似上面的定義回呼函數

[    ‘attribute‘=>‘created_at‘,    ‘value‘=>function($data){        return date(‘Y-m-d‘,$data->created_at);      },]

方法二：用Gridview內建的format配置

[    ‘attribute‘=>‘created_at‘,    ‘format‘=>[‘date‘,‘php:Y-m-d‘],    ‘value‘=>‘created_at‘,],

方法三：首先在config中配置好你的時間格式，否則會是英文格式的，然後再在Gridview中處理。

//在common/config/main.php中定義自己的時間、金錢等的格式‘components‘ => [    ‘formatter‘ => [        ‘dateFormat‘ => ‘yyyy-MM-dd‘,        ‘datetimeFormat‘ => ‘yyyy-MM-dd HH:mm:ss‘,        ‘decimalSeparator‘ => ‘,‘,        ‘thousandSeparator‘ => ‘ ‘,        ‘currencyCode‘ => ‘CNY‘,    ],],

這裡用到了快速寫的一種方式：“attribute:format:label”（屬性：格式：標籤）這種格式，詳情點擊這裡的api文檔。所以我們這樣就可以了：(如果定義了上方，則方法二可以直接‘format‘=>‘date‘即可以正確顯示)

‘created_at:date‘,

6、顯示超連結或圖片，都是用的回呼函數的方法，這裡以超連結為例，注意format需要為‘raw’，不對結果做任何格式化處理，具體的格式化方面可以點這裡看看。

[     ‘attribute‘=>‘id‘,    ‘value‘=>function($model, $key, $index, $column){        return Html::a($model->id,[‘user/view‘,‘id‘=>$model->id],[‘class‘ => ‘profile-link‘,‘target‘=>‘_blank‘]);    },    ‘format‘ => ‘raw‘,],

7、關聯表單顯示，這個地方直接看指南吧，點這裡看，總之就是如果管理表單設定好後，直接用類似order.name這種就可以直接顯示使用，如果想要檢索排序，則需要在searchModel的rulers規則方法和attributes屬性方法中將此欄位寫入，在search方法中添加andFilterWhere的檢索，以及用$query->joinWith關聯欄位，$dataProvider->sort->attributes[]添加排序等。

8、自訂Action Column按鈕，

[    ‘class‘ => ‘yii\grid\ActionColumn‘,    ‘header‘=>‘操作‘,    ‘headerOptions‘=>[‘width‘=>‘120‘],    ‘template‘ => ‘{view} {update} {delete} {forbid} ‘,    ‘buttons‘=>[        ‘forbid‘=>function($url,$model){            return Html::a(‘<i class="glyphicon glyphicon-remove-circle"></i>‘,[‘user/forbid‘,‘id‘=>$model->id]);             }    ],]

 以上是Yii2內建的Gridview的用法。再說下kartik-v/yii2-grid，官方文檔及demo講的比較全了，它比原生的多了幾個列的形式，例如Editable Column(可編輯)、Radio Column(單選框)等，還多了一些其它功能，例如滾動時可以固定標題列方便查看、可以總計、匯出svn，excel等格式。這裡稍微說下：

一開始安裝完成後可能會報錯pdf錯誤，因為這些關聯的還沒有安裝，可以按照提示安裝也可以先配置‘export‘=>false來取消匯出功能，下面匯出時會詳細配置。

1、整體結構如：

2、中各個部分非常靈活的顯示或隱藏，例如我不想要header，但是還想顯示共多少頁這個summary，可以將其放在before中，可以如下設定：

‘panel‘ => [    ‘heading‘=>false,//不要了    ‘before‘=>‘<div style="margin-top:8px">{summary}</div>‘,//放在before中，前面的div主要是想讓它好看],

當然上面的需求我們也可以直接用panelHeadingTemplate和panelBeforeTemplate來重新組裝，具體可以查看Layout Templates小章節。

3、一些有用的小設定

‘responsive‘=>true,//自適應，預設為true‘hover‘=>true,//滑鼠移動上去時，顏色變色，預設為false‘floatHeader‘=>true,//向下滾動時，標題列可以fixed，預設為false‘showPageSummary‘=>true,//顯示統計欄，預設為false//column中的一些設定‘columns‘ => [    [        ‘class‘ => ‘\kartik\grid\CheckboxColumn‘,        ‘rowSelectedClass‘ => GridView::TYPE_INFO,        ‘visible‘=>true,//不顯示，代碼也沒有        ‘hidden‘=>true,//隱藏，代碼還有，匯出csv等時還存在        ‘hiddenFromExport‘=>true,//雖然顯示，但匯出csv時忽略掉        ‘pageSummary‘=>‘總計‘,//可以是字串，當為true時，自動合計        ‘mergeHeader‘=>true,//合并標題和檢索欄    ],]

 4、{toggleData}設定，主要是用來顯示分頁還是全部資料顯示

‘toggleDataOptions‘=>[    ‘maxCount‘ => 200,//當超過200條時，此按鈕隱藏，以免資料太多造成載入問題    // ‘minCount‘ => 10,//當超過10條,點擊時才會下面的提示    ‘confirmMsg‘ => ‘總共‘. number_format($dataProvider->getTotalCount()).‘條資料，確定要顯示全部？‘,//點擊時的確認],

 5、{export}設定，可匯出excel，csv，pdf等各種類型的檔案，下面為匯出csv的格式，如果在exportConfig只配置了csv，則只顯示匯出csv，如果還想匯出excel等格式，需要在exportConfig中添加。我在這裡匯出csv時，不管設定編碼是gbk還是utf，用excel2013開啟時都是中文亂碼，而用sublime等編輯器開啟則正常，（匯出excel格式則正常），有知道此問題的朋友，麻煩留言指教。

‘export‘=>[    ‘fontAwesome‘=>‘fa fa-share-square-o‘,//表徵圖    ‘target‘=>‘_blank‘,//在新標籤開啟    ‘encoding‘=>‘gbk‘,//編碼],‘exportConfig‘ => [    GridView::CSV => [        ‘label‘ => ‘匯出CSV‘,        ‘iconOptions‘ => [‘class‘ => ‘text-primary‘],        ‘showHeader‘ => true,        ‘showPageSummary‘ => true,        ‘showFooter‘ => true,        ‘showCaption‘ => true,        ‘filename‘ => ‘使用者表‘.date("Y-m-d"),        ‘alertMsg‘ => ‘確定要匯出CSV格式檔案？‘,        ‘options‘ => [            ‘title‘=>‘‘,        ],        ‘mime‘ => ‘application/csv‘,        ‘config‘ => [            ‘colDelimiter‘ => ",",            ‘rowDelimiter‘ => "\r\n",        ],    ],       ],       

 基本也就這麼多，附上我自己還比較滿意設定的樣式：（kartik-v/yii2-grid的樣式依賴於bootstrap，與adminlte的表格樣式相衝突，尤其是在合并標題列和檢索欄時，合并的下方邊框會變粗，試了好多設定讓其全部都加粗都不行，最後只能妥協，修改kartik-v/yii2-grid的kv-merged-header的預設樣式，加了這一段：$this->registerCss(".kv-merged-header{border-bottom:1px solid #eee !important}");，勉強看得過去。）

 本來還想繼續寫下美化alert，confirm等彈出框及自動關閉什麼的擴充以及大量刪除等的代碼來著，但是kartik-v/yii2-dialog這個就是安裝時不停出錯。再找找有什麼替代的到時候再補充吧。寫這個途中Firefox崩潰兩次，重寫了好大段內容，哭死！

Yii2的相關學習記錄，Gridview小組件使用及kartik-v/yii2-grid擴充（五）