摘要:簡(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上顯示一些特殊按鈕:
= GridView::widget([ "dataProvider" => $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)
GirdView的使用
注意
每次修改完首頁(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。
= Html::a("創(chuàng)建布局配置", ["create"], ["class" => "btn btn-success"]) ?> = Html::a("確認(rèn)布局生效", ["build-index"], ["class" => "btn btn-danger", "data-confirm" => "確認(rèn)布局生效?"]) ?>
介紹一些 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)的下拉搜索:
= GridView::widget([ "dataProvider" => $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)看看怎么定義行樣式:
= GridView::widget([ // ...... "dataProvider" => $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
摘要:簡(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...
摘要:簡(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ò)誤處理更...
摘要:簡(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)求的...
摘要:它由一個(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è) ...
摘要:把所有的增量數(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ù)...
閱讀 854·2021-11-15 17:58
閱讀 3658·2021-11-12 10:36
閱讀 3793·2021-09-22 16:06
閱讀 968·2021-09-10 10:50
閱讀 1333·2019-08-30 11:19
閱讀 3317·2019-08-29 16:26
閱讀 942·2019-08-29 10:55
閱讀 3349·2019-08-26 13:48