關於Yii2中GridView的用法總結

這篇文章主要介紹了關於關於Yii2中GridView的用法總結，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

我們採用的是yii2.0.14版本，為了學習方便，以問答式書寫。

開始GridView

GridView主要是為了實現表格複用，尤其我們做背景時候，你發現表單和表格佔據了大部分頁面，而表格的樣式又是高度的統一，那麼如果有這樣一個掛件，傳入資料集自動渲染表格該多好。

於是GridView出現了，一個有細節、夠穩定的表格渲染掛件。

通常情況下GridView是和各種dataProvider配合使用，針對於yii2架構中的dataProvider我之前寫過一篇文章，你可以看下，這將有助於你對GridView的學習。小談yii2中3個資料提供者及與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\Userclass 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種

1. ActionColumn

2. CheckboxColumn

3. DataColumn

4. RadioButtonColumn

5. 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渲染的時候首先弄出來一個p容器，這是這個GridView的代表，接下來在此容器內放各種元素，比如{summary}、{items}等等。

• options 控制著p容器的屬性，預設添加一個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 又是一個小細節，如果一個儲存格為空白，用什麼輸入鍵台那？預設是 &nbsp，你可以重新指定。

小結

不知不覺寫了3000多字，本想一篇完成GridView的講解，現在看來比較困難，畢竟還有很多類型的列要去研究分享，還是變成專題吧，接下來我會對每個列做單獨的分析，希望對你有用。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！