Yii2的相關學習記錄，alert等美化、confirm非同步、session中的flash及小組件的使用（六），yii2confirm_PHP教程

Yii2的相關學習記錄，alert等美化、confirm非同步、session中的flash及小組件的使用（六），yii2confirm

呃，系統內建的alert、confirm等彈出框實在是難看，作為一個顏控，這能忍？

這裡我用的是kartik-v/yii2-dialog，這個是基於bootstrap3-dialog這個來做了一些常用alert、confirm和dialog的小組件封裝，當然了，本質上還是bootstrap3-dialog,可以用原生的方法，原生方法的用法點這裡，而bootstrap3-dialog又是基於bootstrap3的modals做的封裝。嗯，基本關係就是這樣。在搜尋這個相關知識時，經常會看到有人提到bootbox，這個同樣是流行的一個美化外掛程式，基本原理類似，用法稍微不同，在packagist搜尋yii2 bootbox會發現也有人為Yii2做了整合（或者自己整合也行，後面會講到），同樣值得推薦。

按照說明安裝，最好是按照github的說明，因為最新的一般都會在這裡先更新。composer中要用@dev。可以看這裡的說明，如果不成功，先composer self-update，再試下，當初安裝時也是各種報錯不行，後來突然就好了。稍微注意的是confirm，dialog調用時要求必須寫回調，否則就報錯。

還是蠻漂亮的。但是像是Yii架構Gridview內建的confirm（像是刪除按鈕），點擊時還是原生的，因為它的源碼就是用的confirm命令，好在Yii架構提供了方法，可以讓我們覆蓋confirm方法。具體可如下操作：

1、我們可以先看下在vendor/yiisoft/yii2/assets/yii.js檔案中的confirm方法：注釋中就可以看到，可以用yii.confirm來重寫此設定。

 /**    * Displays a confirmation dialog.    * The default implementation simply displays a js confirmation dialog.    * You may override this by setting `yii.confirm`.    * @param message the confirmation message.    * @param ok a callback to be called when the user confirms the message    * @param cancel a callback to be called when the user cancels the confirmation    */    confirm: function (message, ok, cancel) {        if (confirm(message)) {            !ok || ok();        } else {            !cancel || cancel();        }    },

2、那我們就重寫，可以在backend/web/js中建立confirm.js檔案，然後重新，可參照此文章，這是設定bootbox的，而且版本有點過時，不過下方的評論有最新方法。而我們的設定與此原理是一致的，只不過是改成kartik-v/yii2-dialog所需求的參數樣式：

yii.confirm = function (message, ok, cancel) {    krajeeDialog.confirm(message,function(data){        if (data) {            !ok || ok();        } else {            !cancel || cancel();        }    });    // confirm will always return false on the first call    // to cancel click handler    return false;}

3、我們需要註冊此js，可以在backend/assets/Appasset.php中添加上方的js檔案：

class AppAsset extends AssetBundle{    public $basePath = '@webroot';    public $baseUrl = '@web';    public $css = [        'css/site.css',    ];    public $js = [        'js/confirm.js',//就是這裡了    ];    public $depends = [        'yii\web\YiiAsset',        'yii\bootstrap\BootstrapAsset',    ];}

這樣一來，在點擊刪除按鈕便會發現可以調用了：

由於我們用的是kartik-GridView，它的兩個功能展示全部記錄和匯出csv等的提示，都是用的原生的confirm，強迫症的我們能忍嗎？好吧，我忍了，這裡只給出改的思路，尤其是只懂基礎js的我來說，先把時間放在其它地方吧。

在改之前，首先我們需要明確kartik-v/yii2-dialog的confirm（bootbox同樣）和原生confirm的不同。原生confirm是同步的，而kartik-v/yii2-dialog的confirm方法是非同步回調的。這導致原生的confirm可以直接這樣寫：

function abc(){    return window.confirm('123')；//confirm點擊確認返回true，取消返回false，不點擊就等著使用者點擊    }if(abc()){    alert('456');//點擊是，會彈出alert彈窗}

而如果你用kartik-v/yii2-dialog的confirm也這樣寫，則永遠不會彈窗，因為是非同步回調的，不會去等你點擊。

function abc(){    krajeeDialog.confirm('123',function(result){        if(result){            return true;        }else{            return false;        }    });}if(abc()){    alert('456');//由於是非同步回調，所以不管點不點都不會彈窗}

可能有人會想（比如我）這樣寫行不行？不行，不支援這樣的寫法，bootstrap3-dialog中這樣寫返回的是視窗有沒有open。

if(krajeeDialog.confirm('123',function(result){}){    return true;}else{    return false;      }

所以要想在kartik-v/yii2-dialog的confirm中執行alert，只能將alert放在回呼函數中：

function abc(){    krajeeDialog.confirm('123',function(result){        if(result){            alert('456');        }else{           //do something        }    });}

以上的不同，再加上是在vendor中修改有違原則啊（拿出來很費勁，又是繼承什麼的，而匯出csv的js沒找到類似yii.js那樣覆蓋的方法，只能重新寫引入什麼的），也是我不想改源碼的原因。坑爹。好吧，下面繼續說怎麼改：

1、{toggleData}顯示全部記錄，它的調用confirm是在vendor/kartik-v/yii2-grid/GridView.php中的getToggleDataScript方法，我們修改return就可以：

$url=Url::current([$this->_toggleDataKey => $tag]);//先定義需要跳轉的urlreturn "\$('#{$this->_toggleButtonId}').on('{$event}',function(e){    e.preventDefault();//先阻止點擊事件    krajeeDialog.confirm('{$msg}',function(data){        if (data) {            window.location.href='{$url}';//點擊是則跳轉        }    });    //下面這條是原來的方法    // if(!window.confirm('{$msg}')){e.preventDefault();}});";

2、{export}中的匯出提示，是在vendor/kartik-v/yii2-grid/assets/js/kv-grid-export.js中：這個就麻煩了，感覺需要重寫關聯的notify方法和listenClick方法。誰寫完了，麻煩告訴一聲吧。

kvConfirm: function (msg) {                 try {        return window.confirm(msg);//調的這個    }    catch (err) {        return true;    }}

上面就這樣吧，下面說下session中的flash，我們一般建立完成等操作時，需要給點提示是完成了還是怎麼著。在Yii中有內建flash方法來實現，可點擊這裡查看，其實在adminLTE這個後台架構中已整合了Alert小組件，我們可以在backend/views/layout/content.php中發現此小組件的調用，這是我們只需要在controller中添加setFlash方法，那麼就能在view中接受到：

  public function actionCreate()    {        $model = new User();        if ($model->load(Yii::$app->request->post()) && $model->save()) {            $session = Yii::$app->session;//session            $session->setFlash('success', '建立成功');//添加flash            return $this->redirect(['index']);        } else {            return $this->render('create', [                'model' => $model,            ]);        }    }

捕捉到的：（adminLTE的alert樣式顏色就是這麼深，而Yii架構內建的顏色雖然淺，但是與此後台架構的顏色也不搭配）

進一步擴充就是，如果是成功的提示，那我5s後可以隱藏，那可以這樣設定，在backend/views/layout/content.php中添加下面漸隱的js代碼

//這是一段,在顯示後定裡消失的JQ代碼    $this->registerJs("        $('.alert-success').animate({opacity: 1.0}, 5000).fadeOut('slow');    ");  ?> 

唉？為什麼突然說到flash，明顯前後文不統一嗎，差評！主要是，既然有alert形式的flash，那當然也可以用彈窗的方式來展示啊。kartik-v/yii2-dialog雖然有alert、dialog功能，但是在這裡都和我想要的不太一樣，所以我們直接調用原生的方法來寫，主要的方法是這樣：（下面有詳細封裝）

var dialogShow=BootstrapDialog.show({    type:BootstrapDialog.TYPE_SUCCESS,     title:'提示訊息',    message:'建立成功，3s後自動關閉',    size:BootstrapDialog.SIZE_SMALL,    buttons:[        {            label: '關閉',            action: function(dialogItself){                dialogItself.close();            }        }    ]});

我們當然可以直接在index.php中寫，但是東西有點多，最好封裝一下，好吧，那就參照Alert來寫一個Popup的widget來用吧：(一些介紹點這裡)，在common/widgets中建立Popup.php，直接貼代碼吧。由於只是註冊js，沒有傳回值什麼的，所以沒有用到run()方法。

1 php 2 3 namespace common\widgets; 4 5 class Popup extends \yii\bootstrap\Widget 6 { 7 /** 8 * 樣式數組 9 * @var [type]10 */11 public $popupTypes = [12 'default' => 'BootstrapDialog.TYPE_DEFAULT',13 'info' => 'BootstrapDialog.TYPE_INFO',14 'primary' => 'BootstrapDialog.TYPE_PRIMARY',15 'success' => 'BootstrapDialog.TYPE_SUCCESS',16 'warning' => 'BootstrapDialog.TYPE_WARNING',17 'danger' => 'BootstrapDialog.TYPE_WARNING'18 ];19 /**20 * 尺寸數組21 * @var [type]22 */23 public $sizeTypes=[24 'nomal'=>'BootstrapDialog.SIZE_NORMAL',25 'small'=>'BootstrapDialog.SIZE_SMALL',26 'wide'=>'BootstrapDialog.SIZE_WIDE',27 'large'=>'BootstrapDialog.SIZE_LARGE'28 29 ];30 /**31 * 標題32 * @var [type]33 */34 public $title;35 /**36 * 尺寸37 * @var [type]38 */39 public $size;40 41 public function init()42 {43 parent::init();44 //預設標題45 if ($this->title === null) {46 $this->title = '訊息提示';47 }48 //預設樣式49 if ($this->size===null || !isset($this->sizeTypes[$this->size])){50 