Last active
July 3, 2016 15:28
-
-
Save henryyan/5c3aa37f5e9d4fa217ca to your computer and use it in GitHub Desktop.
auto resize jqgrid width and height
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 改变窗口大小的时候自动根据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 | |
}; | |
} | |
}, |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment