淺析Yii2中GridView常見操作_php執行個體

本文是小編給大家收集整理些有關網路上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標籤，我們不想在頁面上展示

title123

這種形式，我們想要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請點擊參考

補充：GridView 小組件在開發中常用的功能及技巧。

資料格或者說 GridView 小組件是Yii中最強大的組件之一。

它有一個屬性名稱叫 dataProvider ，這個屬效能夠提供一個資料提供者的樣本並且可以顯示所提供的資料，即使用 yii\grid\GridView::columns 屬性的一組列配置，在一個表格中渲染每一行資料。

例如，

use yii\grid\GridView;echo yii\grid\GridView::widget(['dataProvider' => $dataProvider,]);

一、表格列

表格的列是通過 GridView 配置項中的 yii\grid\GridView::columns 屬性配置的.

<?phpuse yii\grid\GridView;echo GridView::widget(['dataProvider' => $dataProvider,//表格列值搜尋功能，注意一定要配合attribute才會顯示//$searchModel = new ArticleSearch();'filterModel' => $searchModel,//重新定義分頁樣式'layout'=> '{items}{pager}','pager'=>[//'options'=>['class'=>'hidden']//關閉分頁'firstPageLabel'=>"First",'prevPageLabel'=>'Prev','nextPageLabel'=>'Next','lastPageLabel'=>'Last',]'columns' => [['class' => 'yii\grid\SerialColumn'],//序號從1自增長// 資料提供者中所含資料所定義的簡單的列// 使用的是模型的列的資料'id','username',// 更複雜的列資料['class' => 'yii\grid\DataColumn', //由於是預設類型，可以省略 'value' => function ($data) {return $data->name; // 如果是數組資料則為 $data['name'] ，例如，使用 SqlDataProvider 的情形。},],['label'=>'標題','value' => 'title'],['label'=>'文章內容','format' => 'html','value' => 'content'],['label'=>'文章類別', /*'attribute' => 'cid',產生一個a標籤,點擊可排序*/ 'value' => 'cate.cname' //關聯表],[//動作列yii\grid\ActionColumn //用於顯示一些動作按鈕，如每一行的更新、刪除操作。'class' => 'yii\grid\ActionColumn','header' => '操作', 'template' => '{delete} {update}',//只需要展示刪除和更新'headerOptions' => ['width' => '240'],'buttons' => ['delete' => function($url, $model, $key){return Html::a(' 刪除',['del', 'id' => $key], ['class' => 'btn btn-default btn-xs','data' => ['confirm' => '你確定要刪除文章嗎？',]]);}, ],],],]);?>

1. 處理時間

資料列的主要配置項是 yii\grid\DataColumn::format 屬性。
它的值預設是使用 \yii\i18n\Formatter 應用組件。

['label'=>'更新日期','format' => ['date', 'php:Y-m-d'],'value' => 'updated_at'],//or[//'attribute' => 'created_at','label'=>'更新時間','value'=>function($model){return date('Y-m-d H:i:s',$model->created_at); },'headerOptions' => ['width' => '170'],],

2. 處理圖片

['label'=>'封面圖','format'=>'raw','value'=>function($m){return Html::img($m->cover,['class' => 'img-circle','width' => 30]);}],

3. 資料列有連結

['attribute' => 'title','value' => function ($model, $key, $index, $column) {return Html::a($model->title, ['article/view', 'id' => $key]);},'format' => 'raw',],

4. 資料列顯示枚舉值(男/女）

['attribute' => 'sex', 'value'=>function ($model,$key,$index,$column){return $model->sex==1?'男':'女'; }，//在搜尋條件（過濾條件）中使用下拉框來搜尋'filter' => ['1'=>'男','0'=>'女'],//or'filter' => Html::activeDropDownList($searchModel,'sex',['1'=>'男','0'=>'女'],['prompt'=>'全部'])],['label'=>'產品狀態', 'attribute' => 'pro_name', 'value' => function ($model) {$state = ['0' => '未發貨','1' => '已發貨','9' => '退貨，已處理',];return $state[$model->pro_name];},'headerOptions' => ['width' => '120'] ]

指令碼之家推薦閱讀：

淺析Yii2中GridView常見操作

yii2 頁面底部載入css和js的技巧

淺析Yii2 GridView 日期格式化並實現日期可搜尋教程

淺析Yii2 GridView實現下拉搜尋教程

以上內容是針對Yii2中GridView常見操作的全部介紹，希望對大家有所協助！

