这个问题困扰我很久了,我试过好多方法,例如设置datagrid的width为auto,还有设置datagrid的fit为true,但是这种方法不行,然后我在网上发现有人写了一个扩展方法,链接为。
按照这个链接提供的方法不能使高度按照内容来设置,因此我进行了修改,修改的代码如下:
/**
* JQuery扩展方法,用户对JQuery EasyUI的DataGrid控件进行操作。
*/
$.fn.extend({
/**
* 修改DataGrid对象的默认大小,以适应页面宽度。
*
* @param heightMargin
* 高度对页内边距的距离。
* @param widthMargin
* 宽度对页内边距的距离。
* @param minHeight
* 最小高度。
* @param minWidth
* 最小宽度。
*
*/
resizeDataGrid : function( widthMargin, 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', {
width : width
});
}
});
$(function() {
//datagrid数据表格ID
var datagridId = 'test';
var datagridId2='spdata';
// 第一次加载时自动变化大小
$('#' + datagridId).resizeDataGrid(20, 800);
$('#' + datagridId2).resizeDataGrid(20,800);
// 当窗口大小发生变化时,调整DataGrid的大小
$(window).resize(function() {
$('#' + datagridId).resizeDataGrid(20, 800);
$('#' + datagridId2).resizeDataGrid(20,800);
});
});