JEECG--设置弹窗(对话框)大小

前言:由于项目是接手维护,客户需要把弹窗的高度调大一些,当时还不熟悉整个项目的结构,于是找度娘,发现并没有完整的解决方案,自己琢磨了很久才搞明白这个弹窗是怎么一回事。(如果只想知道怎么修改弹窗大小可以直接看第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(){}*/
                    })

官方说明如图所示
JEECG--设置弹窗(对话框)大小_第1张图片
链接:官方说明

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,目的是比较灵活,为不同尺寸的弹窗编写不同的函数,然后调用)。

你可能感兴趣的:(JEECG)