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

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。

為了問答進行的順利，我們模擬了一個數據表作為結果集的提供源。

在A系列中我們先說說GridView中column的使用方法。

當我們只需要$dataProvider每個對象的某些屬性的時，則必須要指定columns屬性，代碼如下

try { echo GridView::widget([ dataProvider = $dataProvider, columns = [ id , username , province , city , created_at }catch(/Exception $e){ // todo}

結果如下

在A1中我們發現每一列的頭部是英文，現在想改成中文，有三個方法

方法1 更改對應模型中的attributeLabels方法

// app/models/Userhtml' target='_blank'>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種最靈活。

在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}

通過對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}

從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來取消此列排序功能，如下圖。

到現在你已經知道了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類解決這個問題。

在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  td /td  td /td  td /td  /tfoot 

因此每列的footerOptions就控制著在tfoot中這一列對應的td。

在我們大搖大擺的用著A8中的showFooter的時候，突然PhpStorm自動關聯出一個footerRowOptions，這是個什么東西那？

footerRowOptions是GridView的屬性，它控制著tfoot的tr標簽屬性，簡單點說，你最后在tfoot上每個單元格看到的效果是footerRowOptions + footerOptions 的結合體（就style而言）。

比如針對上面的例子我們在配置下footerRowOptions

 footerRowOptions = [ style = font-size:20px; ]

則你會發現黃色字體變成了20px。

從A7中我們知道了GridView的showFooter，它決定這table是否顯示tfoot信息，除此之外show家族還有一些其他成員。

showHeader 可以控制table的頭部是否顯示，默認顯示。

showOnEmpty 當數據為空的時候，table框架是否存在，默認不存在。

這個片段我們說下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}

接下來我們進入B系列，B系列的重點在講解GridView。

默認情況下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}。

在一個表格中每列都有不同的作用，有的是數據類型的、有的是復選框類型，具體有5種

ActionColumn

CheckboxColumn

DataColumn

RadioButtonColumn

SerialColumn

通過GridView可以設置一列的默認類型，當然你可以針對特殊的類單獨指定其class。

try { echo GridView::widget([ dataProvider = $dataProvider, columns = [ dataColumnClass = yii/grid/DataColumn }catch(/Exception $e){ // todo}

我們可以通過設置GridView的caption屬性來實現table的caption功能，作為table用途非常有用。

try { echo GridView::widget([ dataProvider = $dataProvider, columns = [ caption = 會員列表 }catch(/Exception $e){ // todo}

效果圖如下

當然不用多說，GridView也提供了captionOptions屬性來讓你控制caption的屬性。

這兩個屬性有的開發者可能會混淆，接下來我用一張圖讓你瞬間明白。

就是說GridView渲染的時候首先弄出來一個p容器，這是這個GridView的代表，接下來在此容器內放各種元素，比如{summary}、{items}等等。

options 控制著p容器的屬性，默認添加一個 >

tableOptions 控制著{items}表格的屬性，默認為其添加一個 >

現在你會改table的樣式類了么？

我們在A8中講了footerRowOptions的用法，headerRowOptions的用法和它一樣，只不過它管理的是thead下tr的屬性。

學會了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對象

這是一對非常靈活的屬性，它們接收一個匿名函數。分別表示在渲染了一行之前和之后發生點什么？當然具體發生什么由你來決定。

要記住的是，匿名函數返回的結果也會作為一行納入到渲染過程，比如當我們遇到奇數的時候就在此行下面添加一行，可以如下代碼

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}

非常好，得到了我們想要的結果

很細節的兩個小屬性

placeFooterAfterBody 當我們要顯示footer的時候，placeFooterAfterBody屬性決定將此html放到table的什么位置，默認放到header后面，你可以選擇placeFooterAfterBody=true來讓footer放到body后面。此功能是在yii2.0.14才支持的。

emptyCell 又是一個小細節，如果一個單元格為空，用什么字符填充那？默認是 nbsp，你可以重新指定。

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

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

相關推薦：

關于PHP管道插件 League/Pipeline的解析

Laravel用戶認證系統(基礎介紹)

以上就是關于Yii2中GridView的用法總結的詳細內容，PHP教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。