因为页面上既要计算表格的高度，又要自适应浏览器大小，之前都都采用固定表格高度，这样就会导致不同的分辨率电脑上看起来表格高矮不一，
所以采用了计算网页高度和其他div 的高度之差作为表格的初始高度；
HTML部分：
<body class="gray-bg">
<div class="wrapper wrapper-content white-bg"> <div class="search-head">
<ul>
<li class="w20" id="li_dateTime">
<div class="input-group" id="date">
<span class="input-group-btn">日 期：</span> <input id="dateTime" type="text" class="easyui-datebox" th:value="${time}"/>
</div>
</li>
<li>
<a href="javascript:Search();" id="selectAll" class="btn btn-outline btn-success"
style="float: left;">查询</a> </li>
</ul>
</div>
<div class="ibox-content">
<table id="List" class="easyui-datagrid">
</table>
</div>
</div>
</body>
JS 部分：
$(function () {
computeWidthAndHeight();
initList();
})
// 计算高度、宽度
function computeWidthAndHeight() {
var width=Number($(".gray-bg").width())*0.96;// 获取网页的宽度
var height=(Number($(".gray-bg").height())-Number($(".search-head").height()))*0.9; // 计算高度
$("#List").datagrid({
width : width,
height : height
});
}
function initList() {
var _options = {
method: "POST",
url: Url + "/test/test",
idField: 'xh',
fit: true, //自动大小 ,开启这个控制，就可自适应浏览器大小
fitColumns: true,
remoteSort: false,
pageSize: 15,
pageList: [15, 30, 50, 100, 200],
pagination: true,//分页控件
rownumbers: true, //行号
columns: [[
{
field: 'xh', print: false, toExcel: false, width: 70, align: 'Center',
halign: 'center',
title: '学号'
},
{
field: 'id', print: false, toExcel: false, width: 75, align: 'center',
halign: 'center',
title: '操作',
formatter: function (value, row, index) {
button += '<a style="margin-left: 10px" name="opera1" onclick="Change(\'' + row.xh + '\')" class="btn btn-outline btn-success" >编辑</a>';
return button;
},
}
]]
};
$('#List').datagrid(_options);
}日常记录，留待查阅~