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列，太長了，能不能給我先定下這一列的寬度？

da：能。

請看示例：

[
    '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請點擊參考