dialog在关闭的时候会刷新页面，并且地址后面多加了一个问号，导致数据查询不出来的解决方法

最新推荐文章于 2024-04-09 14:29:09 发布

原创最新推荐文章于 2024-04-09 14:29:09 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#dailog #easyui #js #javaweb

java 同时被 2 个专栏收录

8 篇文章

订阅专栏

web

7 篇文章

订阅专栏

在使用easyui的dialog时遇到一个问题，点击dialog的取消或保存按钮，父页面会自动刷新并附加问号，引起数据查询失败。解决方法是检查dialog关闭事件，确保没有触发不必要的页面重载操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，在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>

然后再测试，发现点击之后就不会再有刷新父页面的操作了。