做者:白狼 出處:http://www.manks.top/yii2_gridview_advanced.html 本文版權歸做者,歡迎轉載,但未經做者贊成必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接,不然保留追究法律責任的權利。
什麼意思呢?我來簡單的描述下,小編妹子提的需求是這樣的,你看啊,你這列表頁的數據,能不能我就直接在列表上進行點一下就直接修改啊,我再點進去修改多麻煩,太不方便了。這尼瑪,這需求,是否是真想給她一棒槌。
先聲明哈,本文涉及大概6張圖片效果,原文有圖片可參考。
ok,咱們今天就來看看在yii2中如何去利用gridview實現列表上直接修改的功能,很全面哦,咱們儘可能各類類型的屬性都給出實例。html
第一步,咱們先來部署好yii2-grid
利用composer安裝yii2-gridgit
composer require kartik-v/yii2-grid "@dev"
若是你在安裝的過程當中須要讓你輸出Token,此時也就是須要你登陸你的github賬號,經過setting>personal access tokens獲取token值後輸入你的token值,回車就好。
安裝好了以後,咱們對module進行以下配置,這個是必需要配置的github
'modules' => [ 'gridview' => [ 'class' => '\kartik\grid\Module' ] ];
前面咱們說了,要先把yii2-grid部署好,下載配置好以後,咱們打開視圖文件並參考下面的代碼修改你的文件數據庫
// use yii\grid\GridView; //這裏屏蔽掉yii的gridview,user咱們剛剛安裝的gridview use kartik\grid\GridView; <?= GridView::widget([ //...... 'export' => false, 'columns' => [ //...... ], ?>
上面代碼中咱們只須要添加一項 'export' => false, 便可,你原先的gridview無需改動。後端
而後咱們安裝yii2-editableyii2
composer require kartik-v/yii2-editable "@dev"
安裝好了後,咱們在剛纔配置好gridview的文件中引入editable
use kartik\editable\Editable;
首先介紹下textInput類型的修改,圖以下composer
從上圖中能夠很輕鬆的看到編輯的效果,直接貼代碼yii
[ 'attribute' => 'title', 'class'=>'kartik\grid\EditableColumn', ],
可是從上圖中咱們也看到了,彈窗式修改呢不是很方便,咱們接下來看看方便點的操做方式異步
[ 'attribute' => 'title', 'class'=>'kartik\grid\EditableColumn', 'editableOptions'=>[ 'asPopover' => false, ], ],
只須要對要修改的屬性值點擊一下能夠直接進行修改,咱們來看看這樣會有什麼問題ui
也許你發現了,編輯框的寬度過小了,操做不是很方便,咱們把input改成textarea會不會好點?試試看,固然你也能夠給當前單元格指定headerOptions設定寬度,關於gridview常見操做可點擊參考
看圖片上果真效果好不少,直接貼代碼
[ 'attribute' => 'title', 'class'=>'kartik\grid\EditableColumn', 'editableOptions'=>[ 'asPopover' => false, 'inputType'=>\kartik\editable\Editable::INPUT_TEXTAREA, 'options' => [ 'rows' => 4, ], ], ],
有同窗很好奇的點了圖中的兩個按鈕,一個是重置按鈕,另外一個是應用按鈕,重置還好,很容易理解,可是嘛,爲啥點了應用按鈕就貌似一直在處理中的意思呢?別急別急,從一開始到如今乃至接下來,咱們都將先講解view中的配置,其實這裏你點擊應用按鈕後也就異步請求了後端,咱們後面詳細的說道。
若是你的column是數字類型的呢?簡單嘛,input內直接修改就行了,可若是你想要下面截圖中的效果,須要你繼續繼續利用composer安裝touch spin widget
require kartik-v/yii2-widget-touchspin "@dev"
安裝完畢後,咱們看看數字類型的屬性的修改方式
第三種,關於下拉框式的修改,咱們假定字段is_delete值1顯示 2刪除且數據庫存的值是1 2這種數字類型,看效果圖而後咱們再貼代碼