Yii 的修行之路 - View 視圖渲染

Mr_houzi 發(fā)布于2019-06-27 13:47 / 3191人閱讀

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

簡述

View模塊是Yii中的MVC架構(gòu)的V板塊，主要負責(zé)數(shù)據(jù)的展示，渲染模板文件，展示數(shù)據(jù)內(nèi)容。

基本概念

MVC在Yii里面有一個Views文件夾，里面存放的是項目的視圖文件，負責(zé)展示數(shù)據(jù)內(nèi)容。

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

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

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

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

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

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

常見的頁面交互

在Html上作 if else 的判斷：

status == 1): ?>
    已啟用

    已禁用

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

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

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

        ],
    ]); ?>

一些在Html上常用的摁鈕實現(xiàn)

    
        
        
    

    

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

    
        預(yù)覽方法
        輸入版本號，點擊預(yù)覽首頁效果，進入預(yù)覽效果頁，然后：
        如果是火狐瀏覽器，按Ctrl+Shift+M進入響應(yīng)式設(shè)計圖模式。
        如果是谷歌瀏覽器，按F12，再按Ctrl+Shift+M。
    
    
    
         "btn btn-success"]) ?>
         "btn btn-danger", "data-confirm" => "確認布局生效？"]) ?>

GirdView的使用

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

下拉搜索

日期格式化并實現(xiàn)日期可搜索

根據(jù)參數(shù)進行是否顯示

鏈接可點擊跳轉(zhuǎn)

顯示圖片

html渲染

自定義按鈕

設(shè)定寬度等樣式

自定義字段

自定義行樣式

增加按鈕調(diào)用js操作

利用gridview實現(xiàn)批量刪除

下拉搜索

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

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

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

 $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"),
        ],
        // ......
    ],
]); 
?>

像這樣，我們就簡單地實現(xiàn)了兩個下拉效果，要實現(xiàn)篩選功能，在你的dataProvider自定添加該字段的搜索條件即可

日期格式化

這個需要分情況討論：

1、如果你的數(shù)據(jù)庫字段created_at存的時間格式是date或者datetime，那很簡單，gridview中直接輸出該字段created_at即可，如上圖中右側(cè)所示

2、如果數(shù)據(jù)庫存入的時間戳類型，如上圖中左側(cè)所示，則需要像下面這樣進行輸出：

[
    "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"],
],

以上展示了兩種方式進行格式輸出，都可以。

但是，如果想要實現(xiàn)搜索的機制，如果你的數(shù)據(jù)庫存入的是datetime型，很方便，dataProvider不用做修改，代碼如下：

$query->andFilterWhere([
    // ......
    "created_at" => $this->created_at,
    // ......
]);

如果你的數(shù)據(jù)庫存入的是時間戳，
第一步，修改對應(yīng)規(guī)則如下圖所示。
第二步，修改dataProvider可參考如下代碼：

//我們搜索輸入框中輸入的格式一般是 2016-01-01 而非時間戳
//輸出2016-01-01無非是想搜索這一天的數(shù)據(jù)，因此代碼如下
if ($this->created_at) {
    $createdAt = strtotime($this->created_at);
    $createdAtEnd = $createdAt + 24*3600;
    $query->andWhere("created_at >= {$createdAt} AND created_at <= {$createdAtEnd}");
}

是否顯示某列

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

代碼實現(xiàn)如下：

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

鏈接可點擊跳轉(zhuǎn)

這個跟 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第二個參數(shù)可設(shè)定圖片大小，可參考下面的代碼：

[
    "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按鈕，怎么實現(xiàn)？這里需要設(shè)置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"] ); 
        },
    ],
],

設(shè)定寬度

舉個簡單的例子，我們的 title 列，太長了，能不能給我先定下這一列的寬度？
答案：能。
請看示例：

[
    "attribute" => "title",
    "value" => "title",
    "headerOptions" => ["width" => "100"],
],

只需要指定配置項headerOptions即可。

自定義字段

什么是自定義？這里我們是指在表格里增加一列且數(shù)據(jù)庫中不存在對應(yīng)的列。

假如我們新增一列訂單消費金額money且該表不存在該字段：

[
    "attribute" => "消費金額",
    "value" => function ($model) {
        // 這里可以根據(jù)該表的其他字段進行關(guān)聯(lián)獲取
    }
],

自定義行

有小伙伴說了，gii生成的這個gridview表格呀，行跟行的顏色不明顯，看著難受，我們來看看怎么定義行樣式：

 $dataProvider,
    "rowOptions" => function($model, $key, $index, $grid) {
        return ["class" => $index % 2 ==0 ? "label-red" : "label-green"];
    },
    // ......
]); ?>

前面的操作我們都是依據(jù)列column的，這里因為是對行的控制，所以我們配置rowOptions要稍微注意一下。此外，自定義的label-red和label-green需要有對應(yīng)的樣式實現(xiàn)，這里我們看一下頁面的實際效果

增加按鈕調(diào)用js操作

那邊產(chǎn)品經(jīng)理走過來了，小王呀，你這個修改狀態(tài)的功能很頻繁，每次都要先點進詳情頁才能修改，能不能我在列表頁面上鼠標那么一點就成功修改了呢？

其實就是一個異步請求操作了當(dāng)前行的狀態(tài)嘛，我們來看看gridview里面是怎么實現(xiàn)的。

[
    "class" => "yiigridActionColumn",
    "header" => "操作",
    "template" => "{view} {update} {update-status}",
    "buttons" => [
        "update-status" => function ($url, $model, $key) {
            return Html::a("更新狀態(tài)", "javascript:;",["onclick"=>"update_status(this, ".$model->id.");"]);
            },
    ],
],

還沒完，我們還需要在頁面寫js實現(xiàn)方法 update_status。

常見的 Form 表單視圖元素

文本框:textInput();
密碼框:passwordInput();
單選框:radio(),radioList();
復(fù)選框: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"=>"大學(xué)","2"=>"高中"], ["prompt"=>"請選擇","style"=>"width:120px"])?>

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

// 復(fù)選框
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"])?>

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/21609.html

發(fā)表評論

登陸后可評論

0條評論

Mr_houzi

男|高級講師

我要關(guān)注我要私信

TA的文章

sparkedhost：11月促銷，首月6.5折，AMD Ryzen高性能VPS首月$4起，英特爾c

閱讀 916·2021-11-15 17:58
【普通人VS程序員】電腦還可以這樣關(guān)機，神操作，學(xué)到了學(xué)到了~（收藏起來慢慢學(xué)）

閱讀 3757·2021-11-12 10:36
虛擬云主機如何設(shè)置方法-虛擬主機和云主機改如何選擇？

閱讀 3874·2021-09-22 16:06
科技不總是冷冰冰，智能便攜打印機讓文字更有溫度!——嵌入式功能實現(xiàn)篇

閱讀 1038·2021-09-10 10:50
基于 vw 單位的移動端適配方案學(xué)習(xí)筆記

閱讀 1378·2019-08-30 11:19
畫三角形

閱讀 3357·2019-08-29 16:26
webstorm和node配合使用的一些小技巧之External tools

閱讀 1008·2019-08-29 10:55
【從零入門系列-5】Spring Boot 之前端展示

閱讀 3396·2019-08-26 13:48

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Yii 的修行之路 - View 視圖渲染

相關(guān)文章

Yii 的修行之路 - Gii 代碼生成器

Yii 的修行之路 - Errors（錯誤處理） & Logging（日志記錄）

Yii 的修行之路 - HTTP的請求與響應(yīng)

Yii 的修行之路 - Console 控制臺命令

Yii 的修行之路 - Migration 數(shù)據(jù)遷移

發(fā)表評論

0條評論

Mr_houzi

男|高級講師

TA的文章

sparkedhost：11月促銷，首月6.5折，AMD Ryzen高性能VPS首月$4起，英特爾c

【普通人VS程序員】電腦還可以這樣關(guān)機，神操作，學(xué)到了學(xué)到了~（收藏起來慢慢學(xué)）

虛擬云主機如何設(shè)置方法-虛擬主機和云主機改如何選擇？

科技不總是冷冰冰，智能便攜打印機讓文字更有溫度!——嵌入式功能實現(xiàn)篇

基于 vw 單位的移動端適配方案學(xué)習(xí)筆記

畫三角形

webstorm和node配合使用的一些小技巧之External tools

【從零入門系列-5】Spring Boot 之前端展示

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Yii 的修行之路 - View 視圖渲染

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！