Question

在我的项目中，我使用easyUI对话框。

在frist，我直接在oa.php页面中定义了对话框，就像：

<div id="assDlg" class="easyui-dialog" title="associateDlg" closed="true" modal="true" style="width:1000px;height:600px;top:130px;left:400px">
<div class="easyui-layout" style="position:static;height:15%;width:100%" data-options="region:'north',title:'',split:true"> 
</div>
<div class="easyui-layout" id="assSDiv" style="position:static;height:85%" data-options="region:'south',title:'',split:true">
    <table id="assTB"  title="" class="easyui-datagrid" ></table>
</div>
</div>

但当使用以下命令关闭assDlg对话框时

 $('#assDlg').dialog('destroy');

然后我想打开这个对话框：

 $('#assDlg').dialog('open');

失败了。它没有显示任何内容。

所以我用google搜索这个问题的答案，我发现easyui对话框不能直接在页面中定义。

可以再次打开关闭的对话框，但是破坏的对话框不能。在销毁对话框后，此对话框不再存在，用户无法再对其执行任何操作。

我尝试用另一种方式关闭它：

$('#assDlg').dialog.('close');

但是当它打开两次以上时会感到困惑。

谷歌中有人建议使用以下方式临时定义对话框：

$('<div></div>').dialog({  
id:"assDlg",    
title:"associateDlg",  
top:130,
left:400,
width: 1000,      
height: 600,      
closed: false,      
cache: false,      
href:'assDocDlg.php',   
modal: true,  
onClose:function(){  
    $(this).dialog('destroy');  
    }  
});

assDocDlg.php的内容是：

<!DOCTYPE html>
<html style="height:100%">
<head>
</head>
<body>
 <div class="easyui-layout" style="position:static;height:15%;width:100%" data-options="region:'north',title:'',split:true">    
</div>
<div class="easyui-layout" id="assSDiv" style="position:static;height:85%" data-options="region:'south',title:'',split:true">
    <table id="assTB"  title="" class="easyui-datagrid" ></table>
</div>
</body>
</html>

但是当它打开时：

$('#assDlg').dialog('open');

再次失败。临时定义对话框似乎没有错。

谁能帮助我？

Answer 1

我找到了避免这个问题的方法：

var tbStr='<table id="assTB"  title="" class="easyui-datagrid" ></table>';
$("#assSDiv").html(tbStr);

Answer 2

如果要重新打开对话框，请关闭对话框（不要销毁）。

我尝试了你的代码并关闭并重新打开工作正常。

<div style="margin:20px 0;">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#assDlg').dialog('open')">Open</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#assDlg').dialog('close')">Close</a>
</div>

<div id="assDlg" class="easyui-dialog" title="associateDlg" closed="true" modal="false" style="width:1000px;height:600px;top:130px;left:400px">
    <div class="easyui-layout" style="position:static;height:15%;width:100%" data-options="region:'north',title:'',split:true"> 
    </div>
    <div class="easyui-layout" id="assSDiv" style="position:static;height:85%" data-options="region:'south',title:'',split:true">
        <table id="assTB"  title="" class="easyui-datagrid" ></table>
    </div>
</div>

如何在easyui中打开临时定义对话框

2 个答案: