采用的是yii2.0.14版本，為了學習方便，以問答式書寫。
開始GridView
GridView主要是為了實現表格復用，尤其我們做后台的時候，你發現表單和表格占據了大部分頁面，而表格的樣式又是高度的統一，那么如果有這樣一個掛件，傳入數據集自動渲染表格該多好。
於是GridView出現了，一個有細節、夠穩定的表格渲染掛件。
通常情況下GridView是和各種dataProvider配合使用，針對於yii2框架中的dataProvider我之前寫過一篇文章，你可以看下，這將有助於你對GridView的學習。
在學習GridView掛件之前，我們需要先了解GridView的結構，看下圖。
簡單的說，一個GridView由N個column（列）組成，而每個列里有自己的header、content和footer操作，這在GridView的代碼中有所體現
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ 'id', 'created_at:datetime:生成時間', [ 'label'=>'會員名', 'attribute'=>'username', 'format'=>'text' ], ] ]); }catch(\Exception $e){ // todo }
當然yii2已經做的相當細節，你可以不寫columns，GridView會根據dataProvider自動渲染出每一列，接下來我們開始問答區域，通過一問一答來深度了解GridView。
准備階段
為了問答進行的順利，我們模擬了一個數據表作為結果集的提供源。
| id | username | province | city | created_at | updated_at | Sex |
|---|---|---|---|---|---|---|
| 1 | abei | 黑龍江 | 黑河 | 1514201852 | 1528707743 | 1 |
| 2 | 周全 | 吉林 | 長春 | 1528115243 | 1528115243 | 1 |
| 3 | 柏鑫 | 吉林 | 松原 | 1528180018 | 1528255890 | 1 |
| 4 | 張楠 | 遼寧 | 沈陽 | 1528265883 | 1528265883 | 0 |
Column
在A系列中我們先說說GridView中column的使用方法。
A1. 請渲染出id、username、province、city和sex。
當我們只需要$dataProvider每個對象的某些屬性的時，則必須要指定columns屬性，代碼如下
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ 'id', 'username', 'province', 'city', 'created_at' ] ]); }catch(\Exception $e){ // todo }
結果如下
A2.我想更改列的頭部內容
在A1中我們發現每一列的頭部是英文，現在想改成中文，有三個方法
方法1 更改對應模型中的attributeLabels方法
// app\models\User class User extends \yii\db\ActiveRecord { public function attributeLabels(){ return [ 'id' => 'ID', 'username' => '用戶名', 'province' => '省', 'city' => '城市', 'created_at' => '新建時間', 'updated_at' => '最近更新', 'sex' => '性別', ]; } }
當我們重新設置了attributeLabels方法后，對應的GridView會自動去拿取。
方法2 設置一個column的label屬性，如下代碼
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ 'username:text:用戶名' ] ]); }catch(\Exception $e){ // todo }
可以通過設置列的label屬性實現，就像 username:text:用戶名，用英文冒號:分隔，分別是屬性名、格式以及label。
方法3 使用GridView的自定義屬性,如下代碼
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ [ 'label'=>'用戶名', 'attribute'=>'username' ] ] ]); }catch(\Exception $e){ // todo }
上面3種方法都可以，從1-3越來越靈活，當然代碼量也越來越大，第1種最簡單，第3種最靈活。 
A3.我不要時間戳
在A2中，我們看到新建時間這一列的內容竟然直接出現了時間戳，怎么變成對應的時間那？關於這個問題其實也有兩種方法。
方法1 設置column的format屬性
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ 'created_at:datetime' ] ]); }catch(\Exception $e){ // todo }
方法2 通過傳遞一個數組類型的column並設置其value來實現，如下代碼
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ [ 'attribute'=>'created_at', 'value'=>function($model){// 形參為此行記錄對象 return date("Y-m-d H:i:s",$model->created_at); } ] ] ]); }catch(\Exception $e){ // todo }
從A3的方法1和方法2來看，其實方法1更多是方法2的快捷方式，因此我們通過設置數組類型column的format屬性等於datetime也能實現此題的需求。
A4.我想定義一個屬性叫省市，將省和市字段內容合並
通過對A2和A3的學習，我想你已經知道可以通過數組類型的column來解決這個，沒錯，如下代碼
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ [ 'label'=>'省市', 'value'=>function($model){ return "{$model->province}-{$model->city}"; } ] ] ]); }catch(\Exception $e){ // todo }
value 屬性代表此單元格的數據內容，將結果返回即可，就像結果圖一樣。
但是問題出現了，我希望省市一列按照省屬性來排序，怎么辦？只需要指定attribute即可,這也是我們控制列排序的一種方法。
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ [ 'label'=>'省市', 'attribute'=>'province', 'value'=>function($model){ return "{$model->province}-{$model->city}"; } ] ] ]); }catch(\Exception $e){ // todo } 復制代碼A5.如何控制列排序？
從A4我們知道通過設置column的attribute屬性控制是否排序，但是attribute的本意並不在此，因此我們標准的去掉排序或設置排序的方法是通過其enableSorting屬性實現的。
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ [ 'label'=>'省市', 'attribute'=>'province', 'enableSorting'=>false, 'value'=>function($model){ return "{$model->province}-{$model->city}"; } ] ] ]); }catch(\Exception $e){ // todo }
默認enableSorting為true，可以通過設置為false來取消此列排序功能，如下圖。
A6.列的樣式如何控制？
到現在你已經知道了5個使用GridView的技巧，我們繼續，在A6中我們嘗試改變表格某一列的樣式。針對於列樣式，GridView提供了3個屬性，分別為headerOptions、contentOptions和footerOptions。
現在我們來做一個需求，將省市這一列個性化，列的頭部編程紅色，列的內容編程藍色，如下
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ [ 'label'=>'省市', 'attribute'=>'province', 'enableSorting' => false, 'value'=>function($model){ return "{$model->province}-{$model->city}"; }, 'headerOptions' => ['style'=>'color:red'], 'contentOptions' => ['style'=>'color:blue'], ] ] ]); }catch(\Exception $e){ // todo }
是的，使用這一列的headerOptions和contentOptions即可
有個要注意的地方，我們使用瀏覽器的f12看看標注顏色的列。
你看到了，headerOptions和contentOptions直接作用到了th和td標簽，為其增加類似於style等屬性，因此如果你的th或td標簽中還有其他的html標簽，直接定義style就無法生效了，此時可以通過css類解決這個問題。
A7.關於GridView中footerOptions的使用。
在A6中我們說GridView的列有一個footerOptions屬性，那么這個屬性是干嘛用的那？從單詞上分析是控制列footer的屬性（比如樣式等等），但是footer在哪里？？？在哪里在哪里？
需要先設置GridView的showFooter等於true才可以。才可以才可以。
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ [ 'label'=>'省市', 'attribute'=>'province', 'enableSorting' => false, 'value'=>function($model){ return "{$model->province}-{$model->city}"; }, 'headerOptions' => ['style'=>'color:red'], 'contentOptions' => ['style'=>'color:blue'], 'footerOptions'=>['style'=>'color:yellow'] ] ], 'showFooter'=>true ]); }catch(\Exception $e){ // todo }
在showFooter=true的天空下，列的footerOptions才能自由飛翔。
從原理上說，'showFooter'=>true的結果是讓table出現了下面代碼
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<tr>
</tfoot>
因此每列的footerOptions就控制着在tfoot中這一列對應的td。
A8.footerRowOptions你是干毛用的？
在我們大搖大擺的用着A8中的showFooter的時候，突然PhpStorm自動關聯出一個footerRowOptions，這是個什么東西那？
footerRowOptions是GridView的屬性，它控制着tfoot的tr標簽屬性，簡單點說，你最后在tfoot上每個單元格看到的效果是footerRowOptions + footerOptions 的結合體（就style而言）。
比如針對上面的例子我們在配置下footerRowOptions
'footerRowOptions'=>['style'=>'font-size:20px;']
則你會發現黃色字體變成了20px。
要注意：A6、A7和A8中的這些xxxOptions所能控制的是標簽的屬性，不單單是style。
A9.showFooter的大家族
從A7中我們知道了GridView的showFooter，它決定這table是否顯示tfoot信息，除此之外show家族還有一些其他成員。
- showHeader 可以控制table的頭部是否顯示，默認顯示。
- showOnEmpty 當數據為空的時候，table框架是否存在，默認不存在。
A10.魔術師visible的戲法
這個片段我們說下GridView列的visible屬性，此屬性默認為true代表此列顯示，通過設置visible屬性可以隱藏一列，這種隱藏非css的display:none，而是在渲染表格的時候就去掉了此列。
你可能會問，如果我要使用visible來隱藏一列，我不寫這一列不就好了么？
是的，你的思路沒錯，但是visible是可以傳遞一個表達式，實現邏輯判斷，比如下面的需求當1號管理員登錄的時候可以看到省市一列。
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ [ 'label'=>'省市', 'attribute'=>'province', 'enableSorting' => false, 'value'=>function($model){ return "{$model->province}-{$model->city}"; }, 'visible'=>(Yii::$app->admin->id === 1) ] ], 'showFooter'=>true ]); }catch(\Exception $e){ // todo }
A1-A10 我們重點說的是GridView每列的公共屬性，這並不是全部，針對於不同類型的列還有會其他的屬性，比如DataColumn、ActionColumn、CheckboxColumn等等，針對於不同類型列的講解，要后續放出。
GridView
接下來我們進入B系列，B系列的重點在講解GridView。
B1 關於布局layout
默認情況下GridView的布局如下圖 
這個布局來自於GridView的layout屬性，我們可以改變這個模板，比如要去掉summary。
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ ], 'layout'=>"{items}\n{pager}" ]); }catch(\Exception $e){ // todo }
layout內有5個可以使用的值，分別為{summary}、{errors}、{items}、{sorter}和{pager}。
B2.指定列默認的類型 dataColumnClass
在一個表格中每列都有不同的作用，有的是數據類型的、有的是復選框類型，具體有5種
- ActionColumn
- CheckboxColumn
- DataColumn
- RadioButtonColumn
- SerialColumn
通過GridView可以設置一列的默認類型，當然你可以針對特殊的類單獨指定其class。
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ ], 'dataColumnClass'=>"yii\grid\DataColumn" ]); }catch(\Exception $e){ // todo }
B3.caption屬性
我們可以通過設置GridView的caption屬性來實現table的caption功能，作為table用途非常有用。
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ ], 'caption'=>"會員列表" ]); }catch(\Exception $e){ // todo }
效果圖如下
當然不用多說，GridView也提供了captionOptions屬性來讓你控制caption的屬性。
B4.tableOptions和options屬性
這兩個屬性有的開發者可能會混淆，接下來我用一張圖讓你瞬間明白。 
就是說GridView渲染的時候首先弄出來一個div容器，這是這個GridView的代表，接下來在此容器內放各種元素，比如{summary}、{items}等等。
- options 控制着div容器的屬性，默認添加一個class="grid-view"
- tableOptions 控制着{items}表格的屬性，默認為其添加一個 class="table table-striped table-bordered"
現在你會改table的樣式類了么？
B5.一堆好基友 headerRowOptions 和 footerRowOptions
我們在A8中講了footerRowOptions的用法，headerRowOptions的用法和它一樣，只不過它管理的是thead下tr的屬性。
B6.rowOptions
學會了B5，你可能看着rowOptions一眼識破，沒錯它的目的就是管理tbody下的每個tr，但是它更強大，除了直接接收一個數組外還能傳入匿名函數。
你可以融入你的邏輯，比如現在我們要用rowOptions實現隔行換色的功能，來吧。
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ ], 'rowOptions'=>function($model,$key, $index){ if($index%2 === 0){ return ['style'=>'background:red']; } } ]); }catch(\Exception $e){ // todo }
目的達到，看效果
對於rowOptions接收的匿名行數的4個形參，這里說明一下
$model: 當前被渲染的對象$key: 當前對象的逐漸$index: 針對於當前頁面，從0開始，逐行加1$grid: GridView對象
B7. beforeRow和afterRow
這是一對非常靈活的屬性，它們接收一個匿名函數。分別表示在渲染了一行之前和之后發生點什么？當然具體發生什么由你來決定。
要記住的是，匿名函數返回的結果也會作為一行納入到渲染過程，比如當我們遇到奇數的時候就在此行下面添加一行，可以如下代碼
try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'tableOptions' => ['class'=>'table table-bordered'], 'columns'=>[ 'id', 'username:text:用戶名', ..... ], 'afterRow'=>function($model,$key, $index,$grid){ if(($index+1)%2 != 0){ return "<tr><td colspan='4'>我是基數</td></tr>"; } } ]); }catch(\Exception $e){ // todo }
非常好，得到了我們想要的結果
B8. 兩個小盆友placeFooterAfterBody & emptyCell
很細節的兩個小屬性
- placeFooterAfterBody 當我們要顯示footer的時候，placeFooterAfterBody屬性決定將此html放到table的什么位置，默認放到header后面，你可以選擇placeFooterAfterBody=true來讓footer放到body后面。此功能是在yii2.0.14才支持的。
- emptyCell 又是一個小細節，如果一個單元格為空，用什么字符填充那？默認是  ，你可以重新指定。
小結
1`作為一個組件，GridView能夠幫助我們快速完成顯示頁面的開發就足夠了
2`學習參考鏈接：https://www.yiiframework.com/doc/api/2.0/yii-grid-gridview；
作者：阿北哥ya
鏈接：https://juejin.im/post/5b220fbde51d4558b64f00ff
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。