需求:
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 }
代码比原来少很多了。