前言:由于项目是接手维护,客户需要把弹窗的高度调大一些,当时还不熟悉整个项目的结构,于是找度娘,发现并没有完整的解决方案,自己琢磨了很久才搞明白这个弹窗是怎么一回事。(如果只想知道怎么修改弹窗大小可以直接看第3和第4点内容)
1.根据官方说明,实现弹窗功能的核心代码如下
$.dialog({
content: 'url:'+addurl,
lock : true,
//zIndex:1990,
width:width,
height:height,
title:title,
opacity : 0.3,
cache:false,
ok: function(){
iframe = this.iframe.contentWindow;
saveObj();
return false;
},
cancelVal: '关闭',
cancel: true /*为true等价于function(){}*/
})
2.根据核心代码在curdtools.js中编写一个函数
/**
* 创建添加或编辑窗口
*
* @param title
* @param addurl
* @param saveurl
*/
function createwindow(title, addurl,width,height) {
width = width?width:800;
height = height?height:500;
if(width=="100%" || height=="100%"){
width = document.body.offsetWidth;
height =document.body.offsetHeight-100;
}
if(typeof(windowapi) == 'undefined'){
$.dialog({
content: 'url:'+addurl,
lock : true,
width:width,
height:height,
title:title,
opacity : 0.3,
cache:false,
ok: function(){
iframe = this.iframe.contentWindow;
saveObj();
return false;
},
cancelVal: '关闭',
cancel: true /*为true等价于function(){}*/
});
}else{
W.$.dialog({
content: 'url:'+addurl,
lock : true,
width:width,
height:height,
parent:windowapi,
title:title,
opacity : 0.3,
cache:false,
ok: function(){
iframe = this.iframe.contentWindow;
saveObj();
return false;
},
cancelVal: '关闭',
cancel: true /*为true等价于function(){}*/
});
}
}
3.在curdtools.js中编写一个调用函数createwindow的函数,在该函数中指定弹窗的大小
/*弹窗大小修改 */
function ritualUpdate(title,url,id,width,height) {
/* 此处为业务代码,我这里的代码:选定一条记录,并修改该记录,tip为另一个函数
gridname=id;
var rowsData = $('#'+id).datagrid('getSelections');
if (!rowsData || rowsData.length==0) {
tip('请选择编辑项目');
return;
}
if (rowsData.length>1) {
tip('请选择一条记录再编辑');
return;
}
*/
url += '&id='+rowsData[0].id;
openwindow(title,url,'',1300,640);
}
4.设置一个按钮或链接,点击后可弹出弹窗,在该按钮中调用ritualUpdate函数(不需要填入参数)
<t:dgToolBar title="修改XXX记录" icon="icon-search" url="honoredbirthController.do?myUpdate" funname="ritualUpdate">t:dgToolBar>
请求路径是指该按钮(链接)的请求路径,它一般是向controller请求一些数据,controller响应后返回的页面就会在弹窗中显示,这里的controller的代码与一般的controller一样,区别在于,controller返回的视图将会在弹窗中显示。
5.总结
我个人理解,整个唤起弹窗的过程大概为:
为需要唤起弹窗的按钮(链接)添加标签,在标签体中调用能够唤起弹窗的函数(我这里是通过ritualUpdate间接调用唤起弹窗的函数createwindow,目的是比较灵活,为不同尺寸的弹窗编写不同的函数,然后调用)。