使用easyui dialog 弹出框的一些注意事项

使用easy ui 的dialog弹出框制作后台管理系统时需要点击按钮弹出个新的弹出框,为了保持每次点击显示出来的数据都是重新渲染,从后台获取的,可以这样来写:
function piliangchuli(){
		$("<div/>").dialog({
			 title: '批量处理', 
			 id:'batchProcessing',
			 width: 920,    
			 height: 'auto',    
			 top:300,
			 closed: false, 
			 inline:false,
			 loadingMessage: '正在加载...',
			 cache: false,    
			 href :'../business/customermanagement/customerRelations/BatchProcessing.jsp',
			 modal: true,
			 onClose : function() {
		            $(this).dialog('destroy');
		            mmg.load();
		        },
		});		
	}

可以使用onclick触发,然后$选择器里可以写成<div/>,这样操作过后关闭弹出框后,再弹出来时就不会保留上次弹出时留下来的操作痕迹,会重新渲染出来。

因为用的是easyui框架,所以就导致点击左边菜单栏弹出右边的tab是用iframe标签写的,这样就导致了一个问题,那就是那些在dialog里的弹出框会只在当前父级的iframe页面里显示,超出tab页范围时会被iframe标签外的别的东西挡住,显示不出来,说的简单点就是dialog弹出框不在最上层显示。在网上找原因是因为iframe与外面的div不是一个层级的,属于跨域的问题了,所以可以用如下方法,使dialog在主页调用就可以了:

function batchProcessing(){
	parent.piliangchuli();
}

这是在子页面写的(即iframe框架里的页面里)。上面第一个写的调用dialog时是在主页面写的,这样就可以通过parent.function来沟通iframe和父页面的沟通,不会存在跨越问题了。

这样以后,本来以为问题都解决了,谁知道又出现问题了,因为虽然弹出框顺利的在主页面弹出来了(即最上层页面),但是那个dialog页面的js和css样式都失效了,又上度娘查了一圈才发现调出dialog框时只会弹出body标签里面的内容,head标签里的样式和js文件都不会被引入,所以只能把这些引入文件写入body标签里才管用。。。

这样折腾完后,终于发现js和css样式出来了,但是不亏是网一青铜段位的撸手,这手速,又发现了一个BUG,那就是第一次点击时,dialog弹出来了,数据什么的都很正常,但是当第二次点击时,就会报错$().dialog() is not a function,dialog也不会弹出来~~无奈只能再次求助度娘,果然度娘没叫我失望,说是由于主页已经引入了jauery文件,然后在dialog弹出框的body标签里又引入了jquery文件,把它删除了以后就好了~~

好了,目前使用easyui的dialog问题只有这么多,说不定会不定期更新~~

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
使用EasyUI弹出非常简单,你可以像下面这样使用: 1. 引入EasyUI的JS和CSS文件 ```html <!-- 引入EasyUI的CSS文件 --> <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.19/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.19/themes/icon.css"> <!-- 引入jQuery和EasyUI的JS文件 --> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.19/jquery.easyui.min.js"></script> ``` 2. 创建弹出的HTML代码 ```html <div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px;" closed="true" buttons="#dlg-buttons"> <form id="fm" method="post" novalidate> <div class="fitem"> <label for="name">Name:</label> <input type="text" id="name" name="name" class="easyui-validatebox" required="true"> </div> <div class="fitem"> <label for="email">Email:</label> <input type="email" id="email" name="email" class="easyui-validatebox" required="true" validType="email"> </div> </form> </div> <div id="dlg-buttons"> <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close')">Cancel</a> </div> ``` 3. 初始化弹出 ```javascript function openDialog() { $('#dlg').dialog('open').dialog('center').dialog('setTitle', 'Add User'); } function saveUser() { $('#fm').form('submit', { url: 'save_user.php', onSubmit: function () { return $(this).form('validate'); }, success: function (result) { var result = eval('(' + result + ')'); if (result.success) { $('#dlg').dialog('close'); $('#dg').datagrid('reload'); } else { $.messager.show({ title: 'Error', msg: result.msg }); } } }); } ``` 4. 触发弹出 ```html <a href="#" class="easyui-linkbutton" onclick="openDialog()">Add User</a> ``` 这样,一个简单的EasyUI弹出就完成了,你可以根据自己的需求进行相应的修改。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值