在撰寫程式時,對於刪除資料前應該是先詢問使用者,以往都是跳出一個詢問視窗,但現在的流覽器大都會阻隔,在導入 Bootstrap 的 framework 後,可以加入 bootstrap-dialog.js 的 plug-in 來強化程式的友善化。效果如下:

 

  • 查詢後的畫面

beforeDel

  • 按下刪除時的詢問視窗

askDel 

 

作法如下:

Step 01:客制一個 java script

// 詢問Y/N 視窗
function dialogYN(formId,dialogType,title,message){
    
    BootstrapDialog.show({
        type: dialogType,
        title: title,
        message: message,            
        closable: false,
        buttons: [{
                label: 'No',
                action: function(dialog) {                        
                    dialog.close();
                }
            }, {
                label: 'Yes',
                cssClass: 'btn-primary',
                action: function(dialog) {
                    dialog.close();
                    $(formId).submit();
                }
            }]
    });    

}

參數:

formId: 回覆為 Yes 後要執行的 form id

dialogType: 詢問視窗的型態有 'type-default' , 'type-info' , 'type-primary' , 'type-success' , 'type-warning' , 'type-danger'

title: dialog 視窗的 title

message: 要顯示的內容

 

Step 02:在 Struts 2 的 Tag 中的用法

<s:submit name="usersSubmit" value="delDataForm" key="display.delete" onclick="$('#reqCode').val('delDataForm');return dialogYN('#UsersTagAction','type-danger','%{getText('display.windowTitle.delConfirm')}','%{getText('msg.common.confirm')}')"/>

為了多國語言的顯示,需要用 getText 配合 EL 的方法來作,如:'%{getText('display.windowTitle.delConfirm')}'

文章標籤
創作者介紹
MIS

MISTECH 技術手抄本

MIS 發表在 痞客邦 PIXNET 留言(0) 人氣()