首先,在html定义了一个div,用来当做dailog的布局。代码如下:
<div id="myDlg" class="easyui-dialog" title="------" style="width: 550px; height: 750px; padding: 5px">
<form class="form-horizontal">
<fieldset>
<!--
<div id="legend" class="">
<legend class="">修改内容</legend>
</div>
-->
<div class="control-group">
<label class="control-label" for="input01">顺号</label>
<div class="controls">
<input type="text" placeholder="N1" class="input-xlarge"
id="shunhao">
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">设备ID</label>
<div class="controls">
<input type="text" placeholder="1" class="input-xlarge"
id="shebeiid">
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">设备名称</label>
<div class="controls">
<input type="text" placeholder="" class="input-xlarge"
id="shebeimingcheng">
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label">设备所在地</label>
<div class="controls">
<select class="input-xlarge" id="shebeisuozaidi">
<option>肃宁分公司</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">工作内容</label>
<div class="controls">
<textarea type="" class="" id="gongzuoneirong"> </textarea>
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label">单位</label>
<div class="controls">
<select class="input-xlarge" id="danwei">
<option>件</option>
<option>站</option>
<option>台</option>
<option>套</option>
<option>组</option>
<option>次</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">设备数量</label>
<div class="controls">
<input type="text" placeholder="" class="input-xlarge"
id="shebeishuliang">
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">检修次数</label>
<div class="controls">
<input type="text" placeholder="" class="input-xlarge"
id="jianxiucishu">
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">检修时间</label>
<div class="controls">
<input type="text" placeholder="" class="input-xlarge"
id="jianxiushijian">
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">记录表格式</label>
<div class="controls">
<input type="text" placeholder="" class="input-xlarge"
id="jilubiaogeshi">
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label">备注</label>
<div class="controls">
<div class="textarea">
<textarea type="" class="" id="beizhu"> </textarea>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="button" class="" id="modelsave" value="保存">
<input type="button" class="" id="modelconcel" value="取消">
</div>
</div>
</fieldset>
</form>
</div>
在js中添加代码:
$(function() {
//设置一个全局变量来控制弹出框关闭
var closable = false;
//弹出框的属性设置
$("#myDlg").dialog({
modal : true,
closable : true,
closed : true,
buttons : '#myDlg-buttons'
// onBeforeClose : function() { //关闭弹出框之前动作-弹出提示
// if (!closable) {
// $.messager.confirm("提醒", "确定关闭该窗口?", function(r) {
// if (r) {
// closable = true; //标记可以退出
// $("#myDlg").dialog("close");
// }
// });
// }
// return closable; //通过全局变量来控制是否关闭窗口
// }
});
$('#modelconcel').click(function() {
$('#myDlg').dialog("close");
});
})
效果图:
但是当我点击取消或者保存时,父页面就会自动刷新一下,并且在网址上多了一个问号,导致查不出数据来。这两个按钮的点击事件几乎没放什么代码,主要就是$('#myDlg').dialog("close");,所以很奇怪。效果果如下:
解决方法:
将那两个按钮由button换成input,然后修改其type为button。 <div class="control-group">
<div class="controls">
<input type="button" class="" id="modelsave" value="保存">
<input type="button" class="" id="modelconcel" value="取消">
</div>
</div>
然后再测试,发现点击之后就不会再有刷新父页面的操作了。