jqGrid 如何实现高度自适应 跟随窗口尺寸变动自动调整高度
jqGrid可以在构建的时候通过height参数来设置表格初始高度，也可以在后续通过调用setGridHeight函数来动态设置表格高度。本文利用jqGrid的setGridHeight函数和window的resize事件实现jqGrid高度自适应，随窗口尺寸变动自动调整表格高度，DEMO如下。
<html>
<head>
<meta charset="UTF-8" />
<title>jggrid 高度自适应title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">script>
<script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js">script>
<style>
tr.ui-state-highlight td, tr.selected-row td{background: #dff0d8;}
style>
head>
<body>
<div class="page-content container">
<div class="page-body">
<div class="panel panel-default" id="panel-orders">
<div class="panel-heading">
<h3 class="panel-title">jqGrid高度自适应，随窗口尺寸变动自动调整高度h3>
div>
<table id="orders" class="table-bordered ly-jqgrid">table>
div>
div>
div>
<script type="text/javascript">
var data = [], rowIds = [];
function getBills() {
var rowCount = 50;
for (var i = 0; i < rowCount; i ++) {
data.push({
sid: i,
bill_id: i,
bill_detail: i,
goods_id: i,
unit_id: i,
package_id: i,
ref_detail: i,
goods_no: i + 1,
goods_name: '零件名称' + rowCount + i,
car_type_name: '车型' + rowCount + i,
package_name: '包装器具' + rowCount + i,
unit: i%2==0 ? '件' : '箱',
snp: 0.89,
box_count: rowCount + i,
total_count: rowCount + i,
goods_count: rowCount + i,
out_count: rowCount + i,
bill_no: 'BN0000000' + i,
})
}
$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
}
function page_resize() {
var _height = $(window).height();
$(".page-feature .page-content").outerHeight(_height);
$(".ly-jqgrid").each(function(i, e){
var $this = $(e), jobj = $this, jobj_parents = jobj.parents(".ui-jqgrid"), _h = 0;
_h = _height - jobj.offset().top - 10; // grid有效高度 = 总高度 - 表格高度起始位置 - 底部边距10
_h = _h - (jobj_parents.find(".ui-jqgrid-pager").outerHeight() || 0) - (jobj_parents.find(".ui-jqgrid-ftable").outerHeight() || 0);
if(_h > 0) {
$this.jqGrid('setGridHeight', _h);
}
});
}
$(function() {
$("#orders").jqGrid({
colModel: [
{label: "零件号", name: "goods_no", width: 60},
{label: "零件名称", name: "goods_name", width: 180},
{label: "车型", name: "car_type_name", width: 70},
{label: "包装器具", name: "package_name", width: 70},
{label: "单位", name: "unit", width: 60 },
{label: "装箱率", name: "snp", width: 50, sorttype: "number"},
{label: "箱数", name: "box_count", width: 40, sorttype: "number"},
{label: "需求总数", name: "total_count", width: 70, sorttype: "number"},
{label: "需求数量", name: "goods_count", width: 70,},
{label: "出库数量", name: "out_count", width: 70, sorttype: "number"},
{label: "订单号", name: "bill_no", width: 120},
],
datatype: 'local',
rownumbers: true,
height: 300,
multiselect: true,
});
getBills();
$(window).on("load",function(){
page_resize();
$(window).resize(function(){
setTimeout("page_resize()", 10);
});
});
});
script>
body>
html>
DEMO说明：
1）表格构建时指定了初始高度300；
2）响应window resize事件，利用jqGrid自带setGridHeight函数重置表格高度；
3）关于高度计算，DEMO所示只是其中一种case，仅供参考。