什么意思呢？我來簡單的描述下，小編妹子提的需求是這樣的，你看啊，你這列表頁的數據，能不能我就直接在列表上進行點一下就直接修改啊，我再點進去修改多麻煩，太不方便了。這尼瑪，這需求，是不是真想給她一棒槌。
ok,我們今天就來看看在yii2中如何去利用gridview實現列表上直接修改的功能，很全面哦，我們盡量各種類型的屬性都給出實例。
第一步，我們先來部署好yii2-grid
利用composer安裝yii2-grid
|
1
|
composer require kartik-v/yii2-grid "@dev" |
如果你在安裝的過程中需要讓你輸出token，此時也就是需要你登錄你的github帳號,通過setting>personal access tokens獲取token值后輸入你的token值，回車就好。
安裝好了之后，我們對module進行如下配置，這個是必須要配置的
|
1
2
3
4
5
|
'modules' => ['gridview' => ['class' => '\kartik\grid\module']]; |
前面我們說了，要先把yii2-grid部署好，下載配置好之后，我們打開視圖文件并參考下面的代碼修改你的文件
|
1
2
3
4
5
6
7
8
9
10
|
// use yii\grid\gridview;//這里屏蔽掉yii的gridview，user我們剛剛安裝的gridviewuse kartik\grid\gridview;<?= gridview::widget([//......'export' => false,'columns' => [//......],?> |
上面代碼中我們只需要添加一項 'export' => false, 即可，你原先的gridview無需改動。
然后我們安裝yii2-editable
|
1
|
composer require kartik-v/yii2-editable "@dev" |
安裝好了后，我們在剛才配置好gridview的文件中引入editable
|
1
|
use kartik\editable\editable; |
首先介紹下textinput類型的修改，圖如下
從上圖中可以很輕松的看到編輯的效果，直接貼代碼
|
1
2
3
4
|
['attribute' => 'title','class'=>'kartik\grid\editablecolumn',], |
但是從上圖中我們也看到了，彈窗式修改呢不是很方便，我們接下來看看方便點的操作方式
|
1
2
3
4
5
6
7
|
['attribute' => 'title','class'=>'kartik\grid\editablecolumn','editableoptions'=>['aspopover' => false,],], |
只需要對要修改的屬性值點擊一下可以直接進行修改，我們來看看這樣會有什么問題
也許你發現了，編輯框的寬度太小了，操作不是很方便，我們把input改為textarea會不會好點？試試看，當然你也可以給當前單元格指定headeroptions設定寬度，關于
看圖片上果然效果好很多，直接貼代碼
|
1
2
3
4
5
6
7
8
9
10
11
|
['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
|
1
|
require kartik-v/yii2-widget-touchspin "@dev" |
安裝完畢后，我們看看數字類型的屬性的修改方式
第三種，關于下拉框式的修改，我們假定字段is_delete值1顯示 2刪除且數據庫存的值是1 2這種數字類型，看效果圖然后我們再貼代碼
左右兩邊是兩個屬性，為了做對比說明，左側是不可修改的屬性展示，代碼如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
['attribute' => 'is_delete','class'=>'kartik\grid\editablecolumn','editableoptions'=>['inputtype'=>\kartik\editable\editable::input_dropdown_list,'aspopover' => false,'data' => article::itemalias('is_delete'),],'value' => function ($model) {return article::itemalias('is_delete', $model->is_delete);},'filter' => article::itemalias('is_delete'),], |
第四個，我們講解下日期組件和時間組件，先截圖看效果，然后在安裝
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
//日期組件composer require kartik-v/yii2-widget-datepicker "@dev"//時間組件composer require kartik-v/yii2-widget-datetimepicker "*"//日期組件['attribute' => 'created_at',//這個設定表格的寬度// 'headeroptions' => ['width' => '150px'],'class'=>'kartik\grid\editablecolumn','editableoptions'=>['inputtype'=>\kartik\editable\editable::input_date,'aspopover' => false,//這個設定我們組件的寬度'contentoptions' => ['style'=>'width:180px'],'options' => ['pluginoptions' => [//設定我們日期組件的格式'format' => 'yyyy-mm-dd',]],],'format' => ['date', 'y-m-d'],],//時間組件['attribute' => 'updated_at',// 'headeroptions' => ['width' => '150px'],'class'=>'kartik\grid\editablecolumn','editableoptions'=>['inputtype'=>\kartik\editable\editable::input_datetime,'aspopover' => false,'contentoptions' => ['style'=>'width:250px'],],], |
基本上就這4中類型吧，view配置好了，我們就需要配置controller層進行異步操作了，我們來看看是怎么操作的。
聲明：如果你的gridview是在視圖article/index內，那么接下來的操作你需要在article控制器的index內操作。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
use yii\helpers\json;public function actionindex(){$searchmodel = new articlesearch();$dataprovider = $searchmodel->search(yii::$app->request->queryparams);if (yii::$app->request->post('haseditable')) {$id = yii::$app->request->post('editablekey');$model = article::findone(['id' => $id]);$out = json::encode(['output'=>'', 'message'=>'']);$posted = current($_post['article']);$post = ['article' => $posted];if ($model->load($post)) {$model->save();$output = '';isset($posted['title']) && $output = $model->title;// 其他的這里就忽略了，大致可參考這個title}$out = json::encode(['output'=>$output, 'message'=>'']);echo $out;return;}return $this->render('index', ['searchmodel' => $searchmodel,'dataprovider' => $dataprovider,]);} |
關于小編給大家介紹的yii2 gridview實現列表頁直接修改數據的方法就給大家介紹到這里，希望對大家有所幫助，如果大家想了解更多內容敬請關注服務器之家網站。
