談談yii2-GridView如何?列表頁直接修改資料,談談yii2-gridview_PHP教程

來源:互聯網
上載者:User

談談yii2-GridView如何?列表頁直接修改資料,談談yii2-gridview


作者:白狼 出處:http://www.manks.top/yii2_gridview_advanced.html 本文著作權歸作者,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文串連,否則保留追究法律責任的權利。

什麼意思呢?我來簡單的描述下,小編妹子提的需求是這樣的,你看啊,你這列表頁的資料,能不能我就直接在列表上進行點一下就直接修改啊,我再點進去修改多麻煩,太不方便了。這尼瑪,這需求,是不是真想給她一棒槌。
先聲明哈,本文涉及大概6張圖片效果,原文有圖片可參考。
ok,我們今天就來看看在yii2中如何去利用gridview實現列表上直接修改的功能,很全面哦,我們盡量各種類型的屬性都給出執行個體。

第一步,我們先來部署好yii2-grid
利用composer安裝yii2-grid

composer require kartik-v/yii2-grid "@dev"

如果你在安裝的過程中需要讓你輸出Token,此時也就是需要你登入你的github帳號,通過setting>personal access tokens擷取token值後輸入你的token值,斷行符號就好。
安裝好了之後,我們對module進行如下配置,這個是必須要配置的

'modules' => [   'gridview' =>  [        'class' => '\kartik\grid\Module'    ]];

前面我們說了,要先把yii2-grid部署好,下載配置好之後,我們開啟視圖檔案並參考下面的代碼修改你的檔案

// use yii\grid\GridView;//這裡屏蔽掉yii的gridview,user我們剛剛安裝的gridviewuse kartik\grid\GridView;widget([        //......        'export' => false,        'columns' => [            //......        ],?>

上面代碼中我們只需要添加一項 'export' => false, 即可,你原先的gridview無需改動。

然後我們安裝yii2-editable

composer require kartik-v/yii2-editable "@dev"

安裝好了後,我們在剛才配置好gridview的檔案中引入editable
use kartik\editable\Editable;
首先介紹下textInput類型的修改,圖如下

從中可以很輕鬆的看到編輯的效果,直接貼代碼

[    'attribute' => 'title',    'class'=>'kartik\grid\EditableColumn',],

但是從中我們也看到了,彈窗式修改呢不是很方便,我們接下來看看方便點的操作方式

[    'attribute' => 'title',    'class'=>'kartik\grid\EditableColumn',    'editableOptions'=>[        'asPopover' => false,    ],],

只需要對要修改的屬性值點擊一下可以直接進行修改,我們來看看這樣會有什麼問題

也許你發現了,編輯框的寬度太小了,操作不是很方便,我們把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這種數字類型,看然後我們再貼代碼

繼續閱讀

http://www.bkjia.com/PHPjc/1126522.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1126522.htmlTechArticle談談yii2-GridView如何?列表頁直接修改資料,談談yii2-gridview 作者:白狼 出處:http://www.manks.top/yii2_gridview_advanced.html本文著作權歸作者,歡迎...

  • 聯繫我們

    該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.