摘要：簡述模塊是中的架構的板塊，主要負責數據的展示，渲染模板文件，展示數據內容。此外在一個視圖中還可以引入多個視圖文件，也是通過方法實現。布局文件的數據默認以顯示，也可以用數據塊的形式渲染到視圖上。必須要確認生成一次，才會正式生成新首頁。

View模塊是Yii中的MVC架構的V板塊，主要負責數據的展示，渲染模板文件，展示數據內容。

MVC在Yii里面有一個Views文件夾，里面存放的是項目的視圖文件，負責展示數據內容。

首先這里是一個簡單的控制器操作方法實現一個視圖的渲染展示，調用renderPartial（）來渲染視圖文件，第一個是視圖文件名，存在在views目錄下的以控制器命名的文件夾下，文件名字與操作方法相對應；第二個則是渲染視圖的數據，必須是一個數組。

這是一個視圖腳本php，里面是展示一些控制器傳來的數據，還可以調用一些插件完成一些功能，比如數據過濾等等。

利用布局文件處理視圖，首先在views目錄下的layout文件夾下創建一個布局文件，名字自擬。

然后可以利用render（）的方法把布局文件渲染顯示出來，而index視圖的內容數據默認以$content的形式嵌入到布局文件，然后顯示出來，當然，在render方法的第二個參數是一個數組，可以利用這個數組把數據渲染到視圖上，然后展示出來。

此外在一個視圖中還可以引入多個視圖文件，也是通過render方法實現。

布局文件的數據默認以$content顯示，也可以用數據塊的形式渲染到視圖上。

在Html上作 if else 的判斷：

status == 1): ?>
    已啟用

    已禁用

在Html上顯示一些特殊按鈕：

     $dataProvider,
        "filterModel" => $searchModel,
        "columns" => [

            [
                "class" => "yiigridActionColumn",
                "buttons" => [
                    "layoutContent" => function ($url, $model){
                        /**
                         * @var $model Service
                         */
                        return Html::a("查看服務單信息", Url::to(["jlerp-service-order/view", "id" => $model->id]), [
                            "class" => "btn btn-success btn-xs", "target" => "__blank"
                        ]);
                    }
                ],
                "template" => "{layoutContent}",
                "options" => [
                    "style" => "width:100px"
                ],
            ]

        ],
    ]); ?>

一些在Html上常用的摁鈕實現

    

        
        預覽首頁效果
    

    

    

        
注意
        
每次修改完首頁配置后，先預覽查看效果，沒問題后才確認生成。
        
可以根據輸入的配置版本號預覽查看相應的布局效果。
        
必須要確認生成一次，才會正式生成新首頁。
    

    

        
預覽方法
        
輸入版本號，點擊預覽首頁效果，進入預覽效果頁，然后：
        
如果是火狐瀏覽器，按Ctrl+Shift+M進入響應式設計圖模式。
        
如果是谷歌瀏覽器，按F12，再按Ctrl+Shift+M。
    
    

    

         "btn btn-success"]) ?>
         "btn btn-danger", "data-confirm" => "確認布局生效？"]) ?>
    

介紹一些 GridView 常見的使用案例：

下拉搜索

日期格式化并實現日期可搜索

根據參數進行是否顯示

鏈接可點擊跳轉

顯示圖片

html渲染

自定義按鈕

設定寬度等樣式

自定義字段

自定義行樣式

增加按鈕調用js操作

利用gridview實現批量刪除

下拉搜索

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

public static function dropDown ($column, $value = null) {
    $dropDownList = [
        "is_delete"=> [
            "0"=>"顯示",
            "1"=>"刪除",
        ],
        "is_hot"=> [
            "0"=>"否",
            "1"=>"是",
        ],
        //有新的字段要實現下拉規則，可像上面這樣進行添加
        // ......
    ];
    //根據具體值顯示對應的值
    if ($value !== null) 
        return array_key_exists($column, $dropDownList) ? $dropDownList[$column][$value] : false;
    //返回關聯數組，用戶下拉的filter實現
    else
        return array_key_exists($column, $dropDownList) ? $dropDownList[$column] : false;
}

然后我們上代碼看看具體怎么實現的下拉搜索：

 $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}");
}

是否顯示某列

舉一個簡單的案例：
條件：有一個 get 型參數type
需求：僅且 type 的值等于1的時候，列 name 才顯示，否則該列不顯示。

代碼實現如下：

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

鏈接可點擊跳轉

這個跟 html 渲染的效果十分類似，這里要說的是列的屬性值 format,具體都有哪些格式可查看文件 yiii18nFormatter.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" => "yiigridActionColumn",
    "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表格呀，行跟行的顏色不明顯，看著難受，我們來看看怎么定義行樣式：

 $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" => "yiigridActionColumn",
    "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。

文本框:textInput();
密碼框:passwordInput();
單選框:radio(),radioList();
復選框:checkbox(),checkboxList();
下拉框:dropDownList();
隱藏域:hiddenInput();
文本域:textarea(["rows"=>3]);
文件上傳:fileInput();
提交按鈕:submitButton();
重置按鈕:resetButtun();

 ["test/post"],"method"=>"post","id"="uploadform", ]); ?>
// 文本輸入框
field($model,"username")->textInput(["maxlength"=>20])?>

// 密碼輸入框
field($model,"password")->passwordInput(["maxlength"=>20])?>

// 單選框
field($model,"sex")->radioList(["1"=>"男","0"=>"女"])?>

// 下拉選擇框
field($model,"edu")->dropDownList(["1"=>"大學","2"=>"高中"], ["prompt"=>"請選擇","style"=>"width:120px"])?>

// 文件上傳框
field($model,"file")->fileInput()?>

// 復選框
field($model,"hobby")->checkboxList(["0"=>"籃球","1"=>"足球","2"=>"羽毛球","3"=>"乒乓球"])?>

// 文本輸入框
field($model,"info")->textarea(["rows"=>3])?>field($model,"userid")->hiddenInput(["value"=>3])?>


"btn btn-primary","name"=>"submit-button"])?>
"btn btn-primary","name"=>"submit-button"])?>