yii2 GridView常見操作

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

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

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

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

• 下拉搜索

• 日期格式化並實現日期可搜索

• 根據參數進行是否顯示

• 鏈接可點擊跳轉

• 顯示圖片

• html渲染

• 自定義按鈕

• 設定寬度等樣式 

• 自定義字段

• 自定義行樣式

• 增加按鈕調用js操作

yii2 GridView 下拉搜索實現案例教程

yii2 GridView 日期格式化並實現日期可搜索 案例

是否顯示某列案例

我們舉一個簡單的案例

條件：有一個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請點擊參考