2. 程式人生 > >關於Yii2中GridView的用法總結

關於Yii2中GridView的用法總結

阿新 • • 發佈：2019-08-19

預設enableSorting為true，可以通過設定為false來取消此列排序功能，如下圖。

1817550607-5b220de457a4c_articlex[1].jpg

A6.列的樣式如何控制？

到現在你已經知道了5個使用GridView的技巧，我們繼續，在A6中我們嘗試改變表格某一列的樣式。針對於列樣式，GridView提供了3個屬性，分別為headerOptions、contentOptions和footerOptions。

現在我們來做一個需求，將省市這一列個性化，列的頭部程式設計紅色，列的內容程式設計藍色，如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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即可

3581100424-5b220df2a6267_articlex[1].jpg

有個要注意的地方，我們使用瀏覽器的f12看看標註顏色的列。

1743074111-5b220e0014fb3_articlex[1].jpg

你看到了，headerOptions和contentOptions直接作用到了th和td標籤，為其增加類似於style等屬性，因此如果你的th或td標籤中還有其他的html標籤，直接定義style就無法生效了，此時可以通過css類解決這個問題。

A7.關於GridView中footerOptions的使用。

在A6中我們說GridView的列有一個footerOptions屬性，那麼這個屬性是幹嘛用的那？從單詞上分析是控制列footer的屬性（比如樣式等等），但是footer在哪裡？？？在哪裡在哪裡？

需要先設定GridView的showFooter等於true才可以。才可以才可以。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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才能自由飛翔。

4137986696-5b220e0c2bd7a_articlex[1].jpg

從原理上說，'showFooter'=>true的結果是讓table出現了下面程式碼

1

2

3

4

5

6

7

<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

1

'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號管理員登入的時候可以看到省市一列。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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的佈局如下圖

782334426-5b220e1ca96f6_articlex[1].jpg

這個佈局來自於GridView的layout屬性，我們可以改變這個模板，比如要去掉summary。

1

2

3

4

5

6

7

8

9

10

11

12

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。

1

2

3

4

5

6

7

8

9

10

11

12

try {

    echo GridView::widget([

        'dataProvider' => $dataProvider,

         

        'columns'=>[

             

        ],

        'dataColumnClass'=>"yii\grid\DataColumn"

    ]);

}catch(\Exception $e){

    // todo

}

B3.caption屬性

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

1

2

3

4

5

6

7

8

9

10

11

try {

    echo GridView::widget([

        'dataProvider' => $dataProvider,

        'columns'=>[

             

        ],

        'caption'=>"會員列表"

    ]);

}catch(\Exception $e){

    // todo

}

效果圖如下

4006144808-5b220e3e9da7c_articlex[1].jpg

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

B4.tableOptions和options屬性

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

2438330366-5b220e5e9d146_articlex[1].jpg

就是說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實現隔行換色的功能，來吧。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

try {

    echo GridView::widget([

        'dataProvider' => $dataProvider,

        'columns'=>[

             

        ],

        'rowOptions'=>function($model,$key, $index){

            if($index%2 === 0){

                return ['style'=>'background:red'];

            }

        }

    ]);

}catch(\Exception $e){

    // todo

}

目的達到，看效果

3365928132-5b220e52b6eb3_articlex[1].jpg

對於rowOptions接收的匿名行數的4個形參，這裡說明一下

  • $model: 當前被渲染的物件

  • $key: 當前物件的逐漸

  • $index: 針對於當前頁面，從0開始，逐行加1

  • $grid: GridView物件

B7. beforeRow和afterRow

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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

}

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

2924391307-5b220e6c003f3_articlex[1].jpg

B8. 兩個小盆友placeFooterAfterBody & emptyCell

很細節的兩個小屬性

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

  • emptyCell 又是一個小細節，如果一個單元格為空，用什麼字元填充那？預設是 &nbsp，你可以重新指定。

小結

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

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

相關推薦

關於Yii2中GridView的用法總結

預設enableSorting為true，可以通過設定為false來取消此列排序功能，如下圖。 A6.列的樣式如何控制？

c/c++中const用法總結

沒有 pan 分配 值類型 變量初始化 _id 多少 部分 參數 1、修飾常量時： 　　const int temp1; //temp1為常量，不可變 　　int const temp2; //temp2為常量，不可變 2、修飾指針時： 　　主要看const在*的前後，

C++中STL用法總結【轉】

（轉自：https://blog.csdn.net/piaoxuezhong/article/details/54348787?utm_source=blogxgwz8） 1.1 什麼是STL？ STL（Standard Template Library），即標準模板庫，是一個具有工業強度的

Pandas中Series用法總結

Series：帶標籤的陣列 本文對Pandas包中的一維資料型別Series特點及用法進行了總結歸納。 2.1 如何建立Sereis #匯入Pandas包 import pandas as pd #建立Series #1.1.1 通過列表List listSer=pd.Se

Numpy中Array用法總結

Numpy中array（陣列） Numpy主要物件是齊次多維陣列，由正整數元組索引，Numpy中維度稱為軸（axis），陣列的維數稱為秩（rank）。 可以參考：Numpy快速入門 1.1 建立陣列 常規方法建立陣列 import numpy as np #一維陣列

Pandas中DataFrame用法總結

DataFrame：類似於表的資料結構 本文對Pandas包中二維（多維）資料結構DataFrame的特點和用法進行了總結歸納。 可以參考：pandas用法速覽 3.1 增加資料 3.1.1 建立資料框Object Creation import pandas as pd

轉：ORACLE 中ROWNUM用法總結!

oracle 分頁查詢語句：select * from (select u.*,rownum r from (select * from userifno) u where rownum<大值) where r>小值 問題： ①為什麼一定要用  u.*?  　　原因：Or

oracle資料庫總結(七)--ORACLE 中ROWNUM用法總結! (轉)

來自：http://www.cnblogs.com/chinhr/archive/2007/09/30/911685.html   ORACLE 中ROWNUM用法總結!  對於 Oracle 的 rownum 問題，很多資料都說不支援>,>=,=,betwe

C++中CONST用法總結

1、修飾常量時： ? 1 2 const int temp1; //temp1為常量，不可變 int const temp2; //temp2為常量，不可變 2、修飾指標時： 　　主要看const在*的前後，

git在工作中的用法總結-環境安裝篇

使用git有很長一段時間了 ，平時用到的時候都是直接google，經常用到的一些也記錄在筆記中，但有時候筆記太多，實在是太亂了（其實是我太懶~ 哈？），找都要半天的時候還不如直接google，今天有空索性將以前的筆記整理一下發在部落格中，便於今後檢視，關於git的使用，這裡我打算分開寫，分為環境安裝篇和

git在工作中的用法總結-使用篇

上一篇介紹了git的環境安裝配置，本篇對git在工作中常用的用法進行總結，已滿足大部分的日常工作需求，對於其他的一些git命令用法在今後使用到時我也會更新上來，文中如有錯誤，歡迎大家指出來，謝謝~ 一、git本地基礎用法 1、建立程式碼倉庫 git init 2、加入所有目錄到倉庫 git a

ORACLE 中ROWNUM用法總結!

對於 Oracle 的 rownum 問題，很多資料都說不支援>,>=,=,between...and，只能用以上符號(<、<=、!=)，並非說用>,& gt;=,=,between..and 時會提示SQL語法錯誤，而是經常是查不出一條

java中this用法總結

1，當局部變數和成員變數重名的時候，在方法中使用this表示成員變數以示區分。 class Demo{ String str = "這是成員變數"; void fun(String str){ System.out.println(str);

checkbox在vue中的用法總結

前言 關於checkbox多選框是再常見不過的了，幾乎很多地方都會用到，這兩天在使用vue框架時需要用到checkbox多選功能，實在著實讓我頭疼，vue和原生checkbox用法不太一樣， 之前對於vue中用到過的checkbox也只是別人寫好的元件，這次在自己實現時走了很多坑，特意寫這篇文章記錄下來，給後

Spring中@Async用法總結

引言： 在Java應用中，絕大多數情況下都是通過同步的方式來實現互動處理的；但是在處理與第三方系統互動的時候，容易造成響應遲緩的情況，之前大部分都是使用多執行緒來完成此類任務，其實，在Spring 3.x之後，就已經內建了@Async來完美解決這個問題，本文將完成介紹@As

C++中STL用法總結

函式庫對資料型別的選擇對其可重用性起著至關重要的作用。舉例來說，一個求方根的函式，在使用浮點數作為其引數型別的情況下的可重用性肯定比使用整型作為它的引數類性要高。而C++通過模板的機制允許推遲對某些型別的選擇，直到真正想使用模板或者說對模板進行特化的時候，STL就利用了這一點提供了相當多的有用演算法。它是在一

【轉】C++中static用法總結

地址：https://www.cnblogs.com/qiaoconglovelife/p/5323086.html 1.用於區域性變數 C++中區域性變數有三種： （1）auto：此關鍵詞常常省略。auto type a 常常簡寫為type a。 如：int a=auto int

c/c++中static用法總結

static的作用主要有兩種: 第一個作用是限定作用域；第二個作用是保持變數內容持久化； c語言中static的用法： 1、全域性靜態變數： 　　用法：在全域性變數前加上關鍵字static，全域性變數就定義成一個全域性靜態變數。 static int temp； 　　記憶體中的位置：靜態儲存區，在整個程式執行

Java中Scanner用法總結

最近在做OJ類問題的時候，經常由於Scanner的使用造成一些細節問題導致程式不通過（最慘的就是網易筆試，由於sc死迴圈了也沒發現，導致AC程式碼也不能通過。。。），因此對Scanner進行了一些總結整理。（我的github：https://github.com

Android中Adapter用法總結

Adapter是Android中一個十分常見的類，在學習中經常見到，特地把網上一些相關的好資料收集了下，以便後期學習之用。 ---------------------------------------------------------------------------