程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> yii2 GridView常見操作，yii2gridview

yii2 GridView常見操作，yii2gridview

編輯：關於PHP編程

yii2 GridView常見操作，yii2gridview

作者：白狼出處：http://www.manks.top/article/yii2_gridview

本文版權歸作者，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

收集了網絡上GridView出現的大部分問題做一個總結，希望有一個能幫助到你。

如果下面有沒說到的GridView常見問題，下方留言，我會進行補充。

下拉搜索
日期格式化並實現日期可搜索
根據參數進行是否顯示
鏈接可點擊跳轉
顯示圖片
html渲染
自定義按鈕
設定寬度等樣式
自定義字段
自定義行樣式
增加按鈕調用js操作

下拉搜索，我們先來看看預期的效果圖

具體怎麼實現喃？考慮到一張數據表要下拉效果的字段可能有很多個，我們先在其model中實現一個方法方便後續操作

 1 /**
 2  *  下拉篩選
 3  *  @column string 字段
 4  *  @value mix 字段對應的值，不指定則返回字段數組
 5  *  @return mix 返回某個值或者數組
 6  */
 7 public static function dropDown ($column, $value = null)
 8 {
 9     $dropDownList = [
10         'is_delete'=> [
11             '0'=>'顯示',
12             '1'=>'刪除',
13         ],
14         'is_hot'=> [
15             '0'=>'否',
16             '1'=>'是',
17         ],
18         //有新的字段要實現下拉規則，可像上面這樣進行添加
19         // ......
20     ];
21     //根據具體值顯示對應的值
22     if ($value !== null) 
23         return array_key_exists($column, $dropDownList) ? $dropDownList[$column][$value] : false;
24     //返回關聯數組，用戶下拉的filter實現
25     else
26         return array_key_exists($column, $dropDownList) ? $dropDownList[$column] : false;
27 }

然後我們上代碼看看具體怎麼實現的下拉搜索

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        // ......
        [
            'attribute' => 'is_hot',
            'value' => function ($model) {
                return Article::dropDown('is_hot', $model->is_hot);
            },
            'filter' => Article::dropDown('is_hot'),
        ],
        [
            'attribute' => 'is_delete',
            'value' => function ($model) {
                return Article::dropDown('is_delete', $model->is_delete);
            },
            'filter' => Article::dropDown('is_delete'),
        ],
        // ......
    ],
]); ?>

像這樣，我們就簡單地實現了兩個下拉效果，要實現篩選功能，在你的dataProvider自定添加該字段的搜索條件即可

日期格式化，我們先來看看效果圖

這個我們分情況討論

1、如果你的數據庫字段created_at存的時間格式是date或者datetime，那很簡單，gridview中直接輸出該字段created_at即可，如上圖中右側所示

2、如果數據庫存入的時間戳類型，如上圖中左側所示，則需要像下面這樣進行輸出

[
    'attribute' => 'created_at',
    'value' => function ($model) {
        return date('Y-m-d H:i:s', $model->created_at);
    },
],
[
    'attribute' => 'created_at',
    'format' => ['date', 'Y-m-d H:i:s'],
],

以上展示了兩種方式進行格式輸出，都可以。但是，如果想要實現搜索的機制，如果你的數據庫存入的是datetime型，很方便，dataProvider不用做修改，

代碼如下

$query->andFilterWhere([
    // ......
    'created_at' => $this->created_at,
    // ......
]);

如果你的數據庫存入的是時間戳，

第一步，修改對應規則如下圖所示

第二步，修改dataProvider可參考如下代碼

//我們搜索輸入框中輸入的格式一般是 2016-01-01 而非時間戳
//輸出2016-01-01無非是想搜索這一天的數據，因此代碼如下
if ($this->created_at) {
    $createdAt = strtotime($this->created_at);
    $createdAtEnd = $createdAt + 24*3600;
    $query->andWhere("created_at >= {$createdAt} AND created_at <= {$createdAtEnd}");
}

這裡做個小總結，建議使用datetime類型，個人覺得存時間戳甚是麻煩，如果你有好的建議，下方留言我們共同交流。

是否顯示某列案例

我們舉一個簡單的案例

條件：有一個get形參數type

需求：僅且type的值等於1的時候，列name才顯示，否則該列不顯示

代碼實現如下：

[
    'attribute' => 'name',
    'value' => $model->name,
    'visible' => intval(Yii::$app->request->get('type')) == 1,
],

實現方式也是很簡單滴。

鏈接可點擊跳轉案例

這個跟接下來我們要說的html渲染的效果十分類似，這裡要說的是列的屬性值 format,具體都有哪些格式可查看文件 yii\i18n\Formatter.php，各種format都可以解決

[
    'attribute' => 'order_id',
    'value' => function ($model) {
        return Html::a($model->order_id, "/order?id={$model->order_id}", ['target' => '_blank']);
    },
    'format' => 'raw',
],

顯示圖片案例

同上，這裡只需要指定format格式為image即可，format第二個參數可設定圖片大小，可參考下面的代碼

[
    'label' => '頭像',
    'format' => [
    'image', 
    [
    'width'=>'84',
    'height'=>'84'
    ]
    ],
    'value' => function ($model) { 
    return $model->image; 
    }
],

html渲染案例

什麼意思喃，舉個例子，我們有一個字段，標記為title，但是這個title不一樣，ta含有html標簽，我們不想在頁面上展示<p>title123<p>這種形式，我們想要title123以p標簽的形式展示，代碼可參考如下，只需要指定format為raw形式即可

[
    'attribute' => 'title',
    'value' => function ($model) { 
    return Html::encode($model->title); 
    },
    'format' => 'raw',
],

自定義按鈕案例

往往列表頁我們不想要刪除按鈕，想在增加一個比如獲取xxx按鈕，怎麼搞呢？這裡需要設置ActionColumn類，修改配置項template並在buttons項增加template裡增加的get-xxx即可

[
    'class' => 'yii\grid\ActionColumn',
    'template' => '{get-xxx} {view} {update}',
    'header' => '操作',
    'buttons' => [
        'get-xxx' => function ($url, $model, $key) { 
        return Html::a('獲取xxx', $url, ['title' => '獲取xxx'] ); 
        },
    ],
],

設定寬度案例

舉個簡單的例子，我們的title列，太長了，能不能給我先定下這一列的寬度？

答案：能。

請看示例：

[
    'attribute' => 'title',
    'value' => 'title',
    'headerOptions' => ['width' => '100'],
],

只需要指定配置項headerOptions即可。

自定義字段案例

啥時自定義？這裡我們是指在表格裡增加一列且數據庫中不存在對應的列。假如我們新增一列訂單消費金額money且該表不存在該字段

[
    'attribute' => '消費金額',
    'value' => function ($model) {
        // 這裡可以根據該表的其他字段進行關聯獲取
    }
],

自定義行樣式

有小伙伴說了，gii生成的這個gridview表格呀，行跟行的顏色不明顯，看著難受，我滴乖乖，具體怎麼難受咱們就不追究了。我們來看看怎麼定義行樣式

<?= GridView::widget([
// ......
    'dataProvider' => $dataProvider,
    'rowOptions' => function($model, $key, $index, $grid) {
        return ['class' => $index % 2 ==0 ? 'label-red' : 'label-green'];
    },
    // ......
]); ?>

前面的操作我們都是依據列column的，這裡因為是對行的控制，所以我們配置rowOptions要稍微注意一下。此外，自定義的label-red和label-green需要有對應的樣式實現，這裡我們看一下頁面的實際效果

增加按鈕調用js操作案例

那邊產品經理走過來了，小王呀，你這個修改狀態的功能很頻繁，每次都要先點進詳情頁才能修改，能不能我在列表頁面上鼠標那麼一點就成功修改了呢？

其實就是一個異步請求操作了當前行的狀態嘛，我們來看看gridview裡面是怎麼實現的。

[
    'class' => 'yii\grid\ActionColumn',
    'header' => '操作',
    'template' => '{view} {update} {update-status}',
    'buttons' => [
        'update-status' => function ($url, $model, $key) {
            return Html::a('更新狀態', 'javascript:;', ['onclick'=>'update_status(this, '.$model->id.');']); },
    ],
],

還沒完，我們還需要在頁面寫js實現方法 update_status, 關於如何在頁面底部加載js請點擊參考