Skip to content

Instantly share code, notes, and snippets.

@henryyan
Last active July 3, 2016 15:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save henryyan/5c3aa37f5e9d4fa217ca to your computer and use it in GitHub Desktop.
Save henryyan/5c3aa37f5e9d4fa217ca to your computer and use it in GitHub Desktop.
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
};
}
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment