henryyan
8/6/2014 - 12:40 PM

auto resize jqgrid width and height

auto resize jqgrid width and height

/**
 * 改变窗口大小的时候自动根据iframe大小设置jqGrid列表宽度和高度
 * 参数说明:{
 *      enableAutoResize : 是否开启自动高度和宽度调整开关
 *      dataGrid : jqGrid数据列表的ID
 *      callback : 计算完dataGrid需要的高度和宽度后的回调函数
 *      width : 默认为iframe的宽度,如果指定则设置为指定的宽度
 *      height : 默认为iframe的高度,如果指定则设置为指定的高度
 *      beforeAutoResize : 窗口大小调整时自动设置之前
 *      afterAutoResize : 窗口大小调整时自动设置之后
 * }
 */
autoResize: function(options) {
    var defaults = {
        gridContainer: 'body',
        filterToolbar: false,
        footerrow: false,
        groupHeaders: false,
        enableAutoResize: true,
        beforeAutoResize: null,
        afterAutoResize: null
    };
    options = $.extend({}, defaults, options);

    // 第一次调用
    var size = getWidthAndHeigh();
    if($.isFunction(options.callback)) {
        options.callback(size);
        setToolbarHeight();
    }

    // 窗口大小改变的时候
    if(options.enableAutoResize === true) {
        if($.isFunction(options.beforeAutoResize)) {
            options.beforeAutoResize();
        }
        window.onresize = function() {
            var size = getWidthAndHeigh(true);
            $(options.dataGrid).jqGrid('setGridHeight', size.height).jqGrid('setGridWidth', size.width);
            setToolbarHeight();
            if($.isFunction(options.afterAutoResize)) {
                options.afterAutoResize(size);
            }
        };
    }

    // 根据浏览器不同设置工具栏的高度

    function setToolbarHeight() {
        // 根据浏览器不同设置工具栏的高度
        if($.common.browser.isIE() && options.toolbarHeight) {
            if(options.toolbarHeight.top && options.toolbarHeight.top.ie) {
                $('#t_' + options.dataGrid.substr(1)).height(options.toolbarHeight.top.ie);
            }
            if(options.toolbarHeight.bottom && options.toolbarHeight.bottom.ie) {
                $('#tb_' + options.dataGrid.substr(1)).height(options.toolbarHeight.bottom.ie);
            }
        }
    }

    // 获取iframe大小

    function getWidthAndHeigh(resize) {
        var hasToolbar = !options.toolbar ? false : options.toolbar[0];
        if(hasToolbar) {
            var toolbarType = options.toolbar[1];
            if(!toolbarType) {
                alert('请设置工具栏的属性,toolbar : [true, [top, both, bottom]]');
            }
        }

        // 根据列表的容器设置宽度和高度
        var clientHeight = options.gridContainer == 'body' ? document.documentElement.clientHeight : $(options.gridContainer).get(0).clientHeight;
        var clientWidth = options.gridContainer == 'body' ? document.documentElement.clientWidth : $(options.gridContainer).get(0).clientWidth;

        var iframeHeight = !options.height ? clientHeight : options.height;
        var iframeWidth = !options.width ? clientWidth : options.width;

        // chrome
        if($.common.browser.isChrome()) {
            if(hasToolbar) {
                if(toolbarType == 'top' || toolbarType == 'bottom') {
                    iframeWidth -= 4;
                    iframeHeight -= 117;
                    if(detectOS() == 'Mac') {
                        iframeHeight += 1;
                    }
                } else if(toolbarType == 'both') {
                    iframeWidth -= 14;
                    iframeHeight -= 140;
                }
            } else {
                iframeWidth -= 4;
                iframeHeight -= 85;
                if(detectOS() == 'Mac') {
                    iframeHeight += 2;
                }
            }

            // 是否开启标头分组
            if(options.groupHeaders) {
                if(detectOS() == 'Mac') {
                    iframeHeight -= 1;
                }
            }
        } else if($.common.browser.isMozila() || $.common.browser.isOpera()) {
            if(hasToolbar) {
                if(toolbarType == 'top' || toolbarType == 'bottom') {
                    iframeWidth -= 3;
                    iframeHeight -= 116;
                } else if(toolbarType == 'both') {
                    iframeWidth -= 12;
                    iframeHeight -= 145;
                }
            } else {
                iframeWidth -= 4;
                iframeHeight -= 83;
            }
        } else {
            if(hasToolbar) {
                if(toolbarType == 'top' || toolbarType == 'bottom') {
                    if($.common.browser.isIE() && options.toolbarHeight) {
                        if(options.toolbarHeight.top && options.toolbarHeight.top.ie) {
                            // 减去jqGrid的t_list默认高度和IE的兼容高度
                            iframeHeight -= (options.toolbarHeight.top.ie - 21) - 15;
                        }
                    }
                    iframeHeight -= 122;
                    iframeWidth -= 5;
                    setTimeout(function() {
                        // 设置上方的toolbar
                        $('#t_' + options.dataGrid.substr(1)).width(iframeWidth - 11);
                    });
                } else if(toolbarType == 'both') {
                    iframeWidth -= 6;
                    iframeHeight -= 156;
                    setTimeout(function() {
                        // 设置上方的toolbar
                        $('#t_' + options.dataGrid.substr(1)).width(iframeWidth - 11);
                    });
                }
            } else {
                iframeWidth -= 5;
                iframeHeight -= 83;
            }
        }

        // 是否有搜索工具条
        if(options.filterToolbar) {
            iframeHeight -= 23;
        }

        // 是否开启标头分组
        if(options.groupHeaders) {
            iframeHeight -= 22;
        }

        if (options.footerrow) {
            iframeHeight -= 23;
        }

        return {
            width: iframeWidth,
            height: iframeHeight
        };
    }

},