收集了網絡上GridView出現的大部分問題做一個總結，希望有一個能幫助到你。
- 下拉搜索
- 日期格式化並實現日期可搜索
- 根據參數進行是否顯示
- 鏈接可點擊跳轉
- 顯示圖片
- html渲染
- 自定義按鈕
- 設定寬度等樣式
- 自定義字段
- 自定義行樣式
- 增加按鈕調用js操作
- 實現批量刪除案例
- 批量刪除
- 禁止排序
- table加表頭
- 字段內容換行
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請點擊參考
如何利用yii2 gridview實現批量刪除案例
關於禁止表頭的排序，這個需要ActiveDataProvider的設置
$dataProvider = new ActiveDataProvider([ "query" => $query, ]);
$dataProvider->setSort(false);表格加表頭
我們先看看圖，什麼是加表頭
下面貼出代碼，也是很簡單的設置即可，關於樣式可自定義
echo GridView::widget([
//......
'caption' => '內容管理',
'captionOptions' => ['style' => 'font-size: 16px; font-weight: bold; color: #000; text-align: center;'],
'columns' => [
//......
],
]);字段內容換行
有時候gridview中的某個地段是url或者簡介之類的信息，但是全部顯示爲一行了，這就看着很不舒服，只需要向下面這樣簡單設置下內容的樣式即可
[
'attribute' => 'api_url',
'contentOptions' => ['style' => 'white-space: normal;', 'width' => '20%'],
],