easyui 动态创建模式对话框

需求:

1.第一次页面加载时,不显示。

2.点击按钮式传入href和title属性,打开窗体;关闭后第二次打开不能缓存上次内容

3.在按钮栏,左侧显示一个消息提示,右侧是按钮

实现方式:

1.动态创建模式对话框

 1 function EditFun(url, title, row, rowIndex) {
 2     $('<div/>').dialog({
 3         href: url,
 4          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=" 100%">
 4                 <tr>
 5                     <td style="text-align: left;">
 6                         <span id="tagDlgInfo">提示信息</span>
 7                     </td>
 8                     <td style="text-align: right;  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=" 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 }

代码比原来少很多了。

原文地址:https://www.cnblogs.com/zhaobl/p/2865982.html