第十章 RWD進階設計第十章 RWD進階設計\10-12 提示輸入窗口PromptDialog

10-12 提示輸入窗口PromptDialog

 

用來打開一個輸入窗口,窗口內可以自由設定變數讓用戶使用所有的查詢元件輸入,通常用在調用前端或後端的JS方法所要輸入的變數窗口

下面以rwdSingle1為例。

 

Step7>   貼入一個PromptDialog組件

 

Step8>   Title屬性輸入為測試輸入窗口。表示提示輸入窗口的Title為測試輸入窗口。

 

Columns設定一個虛擬欄位如下:

Title輸入為姓名。

Field輸入text1

NewRow設定為false

Span設定為1

Editor屬性選擇textbox

 

說明如下圖

 

Step9>   然後利用DataGridToolitems,執行一個JS來觸發這個PromptDialog,如下:

 

首先我們找到dgMaster這個DataGrid元件,ToolItems屬性編輯器進入,我們添加一個按鈕,用來呼叫開啟PromptDialog程式。

 

Text屬性設定為OpenPromptDialogonClick輸入OpenPromptDialog。表示呼叫js的方法OpenPromptDialog

 

我們切換到原始碼頁,將下面這段代碼貼入:

 

function OpenPromptDialog()

{

    $('#PromptDialog1').promptdialog('show', function(row){  // 開啟輸入窗口

        //點擊確定後執行的js

        var name = $('#PromptDialog1_text1').val();//取得text1的欄位值 $('#PromptDialogID_虛擬欄位名稱')

        alert(name);

    });

}

 

Step10>          保存後執行結果:按下OpenPromptDialog按鈕,此時會開啟一個提示輸入窗口,輸入好姓名後,按下確定會alert姓名。如下:

 


 

Top of Page