需求:
1.第一次頁面載入時,不顯示。
2.點擊按鈕式傳入href和title屬性,開啟表單;關閉後第二次開啟不能緩衝上次內容
3.在按鈕欄,左側顯示一個訊息提示,右側是按鈕
實現方式:
1.動態建立模式對話方塊
1 function EditFun(url, title, row, rowIndex) { 2 $('<div/>').dialog({ 3 href: url, 4 width: 500, 5 height: 400, 6 modal: true, 7 title: title, 8 buttons: [{ 9 text: '確定',10 iconCls: 'icon-add',11 handler: function () {12 var d = $(this).closest('.window-body');13 // 執行操作後關閉。。。。。。14 d.dialog('destroy');15 }16 }],17 onClose: function () {18 $(this).dialog('destroy');19 }20 21 });22 }
缺點:使用buttons數組方式,不會建立左側的“訊息提示”,曾想建立一個動態div做訊息提示,控制它的顯示位置。但buttons支援直接指向一個現有的div作為,所以用table做了一個按鈕欄。
1 <%-- 測點彈出框的按鈕欄--%> 2 <div id="tagDlg-buttons"> 3 <table cellpadding="0" cellspacing="0" style="width: 100%"> 4 <tr> 5 <td style="text-align: left;"> 6 <span id="tagDlgInfo">提示資訊</span> 7 </td> 8 <td style="text-align: right; width: 180px;"> 9 <a href="#" class="easyui-linkbutton" iconcls="icon-add" onclick="javascript:onTagDlgAddClick();">10 添加</a> <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:onTagDlgCloseClick();">11 關閉</a>12 </td>13 </tr>14 </table>15 </div>
問題又出來了,頁面第一次載入時 這個按鈕欄就在頁面上顯示出來了;對話方塊第一彈出關閉後,再次彈出頁沒有這個工具列了(被銷毀了)。
2.使用靜態強制回應對話方塊
1 <%-- 測點彈出框--%>2 <div id="tagDlg" class="easyui-dialog" style="width: 700px; height: 480px;" data-options="closed:true,modal:true,cache:false"3 buttons="#tagDlg-buttons">4 </div>
closed:true 頁面載入時不顯示,按鈕欄也不顯示了
cache:false 頁面不緩衝,第一次彈出後錄入的內容,在第二次彈出時沒有了。
buttons:可以任意定義按鈕欄樣式
1 //添加2 function AddFun(url, title) {3 $('#tagDlg').dialog({href: url,title: title});4 $('#tagDlg').dialog('open');5 }
代碼比原來少很多了。