首先创建JS
JS内容如下
$.fn.extend({
resizeDataGrid: function (heightMargin, widthMargin, minHeight, minWidth) {
var height = $(document.body).height() - heightMargin;
var width = $(document.body).width() - widthMargin;
height = height < minHeight ? minHeight : height;
width = width < minWidth ? minWidth : width;
$(this).datagrid(‘resize’, {
height: height,
// width: width
});
}
});
$(document).ready(function(){
//这里写的边界高度可以把头部和底部的高度加上
var heightMargin = 0;
//如果有左侧导航也可以添加宽度边界
var widthMargin = 0;
// id1 为所展示table的id
var elmnt =$("#"+id1).offset();
// console.log(elmnt['top']);
heightMargin= elmnt['top'];
// id2 为所展示table 所在div 的id
// 第一次加载时和当窗口大小发生变化时,自动变化大小
$('#'+id2).resizeDataGrid(heightMargin, widthMargin, 200, 200);
//窗口大小改变时,调用
$(window).resize(function () {
$('#'+id2).resizeDataGrid(heightMargin, widthMargin, 200, 200);
});
//这里的200是设置的最小宽度和高度
});
然后将所需要的页面引入刚刚创建的JS
举例:
dataDiv 为id2
dg 为 id1
然后引用如下:
在此处将id赋值即可。
如果只是单个页面引用,直接将js的内容放入引入的页面进行对应的id调整即可。
使用此方法有一个弊端就是页面高度会出现滚动条(当使用谷歌浏览器的时候,页面点击下载会导致页面高度增加一个下载文件的高度)。