成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Mr_houzi / 3138人閱讀

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

簡(jiǎn)述

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

基本概念

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

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

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

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

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

此外在一個(gè)視圖中還可以引入多個(gè)視圖文件,也是通過(guò)render方法實(shí)現(xiàn)。

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

常見(jiàn)的頁(yè)面交互

在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上常用的摁鈕實(shí)現(xiàn)

    

注意

每次修改完首頁(yè)配置后,先預(yù)覽查看效果,沒(méi)問(wèn)題后才確認(rèn)生成。

可以根據(jù)輸入的配置版本號(hào)預(yù)覽查看相應(yīng)的布局效果。

必須要確認(rèn)生成一次,才會(huì)正式生成新首頁(yè)。

預(yù)覽方法

輸入版本號(hào),點(diǎn)擊預(yù)覽首頁(yè)效果,進(jìn)入預(yù)覽效果頁(yè),然后:

如果是火狐瀏覽器,按Ctrl+Shift+M進(jìn)入響應(yīng)式設(shè)計(jì)圖模式。

如果是谷歌瀏覽器,按F12,再按Ctrl+Shift+M。


"btn btn-success"]) ?> "btn btn-danger", "data-confirm" => "確認(rèn)布局生效?"]) ?>

GirdView的使用

介紹一些 GridView 常見(jiàn)的使用案例:

下拉搜索

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

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

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

顯示圖片

html渲染

自定義按鈕

設(shè)定寬度等樣式

自定義字段

自定義行樣式

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

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

下拉搜索

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

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

然后我們上代碼看看具體怎么實(shí)現(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"),
        ],
        // ......
    ],
]); 
?>

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

日期格式化

這個(gè)需要分情況討論:

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

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

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

以上展示了兩種方式進(jìn)行格式輸出,都可以。

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

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

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

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

是否顯示某列

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

代碼實(shí)現(xiàn)如下:

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

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

這個(gè)跟 html 渲染的效果十分類似,這里要說(shuō)的是列的屬性值 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第二個(gè)參數(shù)可設(shè)定圖片大小,可參考下面的代碼:

[
    "label" => "頭像",
    "format" => [
    "image", 
    [
    "width"=>"84",
    "height"=>"84"
    ]
    ],
    "value" => function ($model) { 
    return $model->image; 
    }
],

html渲染

舉個(gè)例子,我們有一個(gè)字段,標(biāo)記為title,但是這個(gè)title不一樣,ta含有html標(biāo)簽,我們不想在頁(yè)面上展示:
title123
這種形式,我們想要title123以p標(biāo)簽的形式展示,代碼可參考如下,只需要指定format為raw形式即可

[
    "attribute" => "title",
    "value" => function ($model) { 
    return Html::encode($model->title); 
    },
    "format" => "raw",
],

自定義按鈕
往往列表頁(yè)我們不想要?jiǎng)h除按鈕,想在增加一個(gè)比如獲取xxx按鈕,怎么實(shí)現(xiàn)?這里需要設(shè)置ActionColumn類,修改配置項(xiàng)template并在buttons項(xiàng)增加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è)定寬度

舉個(gè)簡(jiǎn)單的例子,我們的 title 列,太長(zhǎng)了,能不能給我先定下這一列的寬度?
答案:能。
請(qǐng)看示例:

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

只需要指定配置項(xiàng)headerOptions即可。

自定義字段

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

假如我們新增一列 訂單消費(fèi)金額money且該表不存在該字段:

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

自定義行

有小伙伴說(shuō)了,gii生成的這個(gè)gridview表格呀,行跟行的顏色不明顯,看著難受,我們來(lái)看看怎么定義行樣式:

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

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

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

那邊產(chǎn)品經(jīng)理走過(guò)來(lái)了,小王呀,你這個(gè)修改狀態(tài)的功能很頻繁,每次都要先點(diǎn)進(jìn)詳情頁(yè)才能修改,能不能我在列表頁(yè)面上鼠標(biāo)那么一點(diǎn)就成功修改了呢?

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

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

還沒(méi)完,我們還需要在頁(yè)面寫(xiě)js實(shí)現(xiàn)方法 update_status。

常見(jiàn)的 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"=>"請(qǐng)選擇","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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/21609.html

相關(guān)文章

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

    摘要:簡(jiǎn)述是一個(gè)強(qiáng)大的代碼生成器,主要用于后臺(tái)代碼生成。下面列出由生成的文件,以便你研習(xí)功能和實(shí)現(xiàn),或修改它們控制器模型和視圖補(bǔ)充被設(shè)計(jì)成高度可定制和可擴(kuò)展的代碼生成工具。使用生成代碼是一個(gè)基于界面的代碼生成工具。 簡(jiǎn)述 Gii 是一個(gè)強(qiáng)大的代碼生成器,主要用于后臺(tái)代碼生成。 開(kāi)始 Gii Gii 是 Yii 中的一個(gè)模塊??梢酝ㄟ^(guò)配置應(yīng)用的 yiibaseApplication::modu...

    fuchenxuan 評(píng)論0 收藏0
  • Yii 修行之路 - Errors(錯(cuò)誤處理) & Logging(日志記錄)

    摘要:簡(jiǎn)述這里簡(jiǎn)單歸納總結(jié)關(guān)于的錯(cuò)誤處理和日志記錄的操作。錯(cuò)誤處理器會(huì)正確地設(shè)置響應(yīng)的狀態(tài)碼并使用合適的錯(cuò)誤視圖頁(yè)面來(lái)顯示錯(cuò)誤信息。記錄一個(gè)警告消息用來(lái)指示一些已經(jīng)發(fā)生的意外。的義務(wù)是正確處理日志消息。相應(yīng)的消息通過(guò)被記錄。 簡(jiǎn)述 這里簡(jiǎn)單歸納總結(jié)關(guān)于Yii的錯(cuò)誤處理和日志記錄的操作。 錯(cuò)誤處理(Errors) Yii 內(nèi)置了一個(gè)yiiwebErrorHandler錯(cuò)誤處理器,它使錯(cuò)誤處理更...

    _ang 評(píng)論0 收藏0
  • Yii 修行之路 - HTTP請(qǐng)求與響應(yīng)

    摘要:簡(jiǎn)述交互主要分為請(qǐng)求和響應(yīng)兩種方式。狀態(tài)碼構(gòu)建響應(yīng)時(shí),最先應(yīng)做的是標(biāo)識(shí)請(qǐng)求是否成功處理的狀態(tài),可通過(guò)設(shè)置屬性,該屬性使用一個(gè)有效的狀態(tài)碼。 簡(jiǎn)述 HTTP交互主要分為 request(請(qǐng)求) 和 response(響應(yīng)) 兩種方式。 對(duì)于Yii2來(lái)說(shuō),HTTP的request請(qǐng)求是用 YII::$app->request 來(lái)表示的對(duì)象,這是Yii提供的處理HTTP的request請(qǐng)求的...

    import. 評(píng)論0 收藏0
  • Yii 修行之路 - Console 控制臺(tái)命令

    摘要:它由一個(gè)或多個(gè)類組成,它們?cè)诳刂婆_(tái)環(huán)境下通常被稱為命令??刂婆_(tái)入口腳本通常被稱為,位于應(yīng)用程序的根目錄。選項(xiàng)通過(guò)覆蓋在中的方法,你可以指定可用于控制臺(tái)命令選項(xiàng)。參數(shù)將傳遞給請(qǐng)求的子命令對(duì)應(yīng)的操作方法。通常,執(zhí)行成功的命令會(huì)返回。 簡(jiǎn)述 控制臺(tái)應(yīng)用程序的結(jié)構(gòu)非常類似于 Yii 的一個(gè) Web 應(yīng)用程序,主要用于終端服務(wù)器執(zhí)行。 控制臺(tái)命令 控制臺(tái)應(yīng)用程序的結(jié)構(gòu)非常類似于 Yii 的一個(gè) ...

    everfly 評(píng)論0 收藏0
  • Yii 修行之路 - Migration 數(shù)據(jù)遷移

    摘要:把所有的增量數(shù)據(jù)庫(kù)遷移提交到生產(chǎn)環(huán)境數(shù)據(jù)庫(kù)當(dāng)中。如果其中任意一個(gè)遷移提交失敗了,那么這條命令將會(huì)退出并停止剩下的那些還未執(zhí)行的遷移。執(zhí)行這條命令期間不會(huì)有任何的遷移會(huì)被提交或還原。 簡(jiǎn)述 數(shù)據(jù)遷移就是數(shù)據(jù)庫(kù)表在團(tuán)隊(duì)建的遷移操作,達(dá)到團(tuán)隊(duì)相互間的信息同步,數(shù)據(jù)統(tǒng)一。 數(shù)據(jù)庫(kù)遷移 一般步驟: 1、在 yii2 的 migrate 中,通常用來(lái)對(duì)數(shù)據(jù)庫(kù)數(shù)據(jù)表進(jìn)行修改操作,主要對(duì)結(jié)構(gòu)和小部分?jǐn)?shù)...

    noONE 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<