因为布局需求 在网格系统中建立了jqgrid表格,但是发现宽度变换并没有实现自适应,表格聚集在了一起。表格栅格位置:
<div class="form-horizontal" role="form" id="form1">
<div class="main-container" id="main-container">
<div class="page-content">
<div class="form-group">
<div class="col-xs-2 text-right">
<label for="CertCode" class="label-font control-label no-padding-right text-nowrap"><strong>申请领用器材</strong></label>
</div>
</div>
<div class="form-group">
<div class="col-xs-2"></div>
<div class="col-xs-10" id="ss">
<table id="gridTable"></table>
<div id="gridPager"></div>
</div>
</div>
</div>
</div>
由于样式需求,需要表格前面有空两格位置出来。
jqgrid 配置代码:
function GetGrid() {
$("#gridTable").jqGrid({
url: "@Url.Content("~/")",
datatype: "json",
height: "auto",
//autowidth: true,//表格宽度自适应
colNames: ['序号', '器材名称', '器材类别', '申请数量', '已出库数量'],
colModel: [
{
name: 'id',
index: 'id',
align: 'center',
hidden: true
},
{
name: 'equ_name',
index: 'equ_name',
align: 'center',
},
{
name: 'equ_category_name',
index: 'equ_category_name',
align: 'center',
},
{
name: 'apply_count',
index: 'apply_count',
align: 'center',
},
{
name: 'stock_out_count',
index: 'stock_out_count',
align: 'center',
}
],
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
//pager: "#gridPager",//翻页导航栏
sortname: 'SortCode',
sortorder: 'asc',
rownumbers: true, //序号列
rownumWidth: 50,//序号列宽度
//shrinkToFit: false,
gridview: true,
loadComplete: function() {
var t = this;
setTimeout(function() {
updatePagerIcons(t);
}, 0);
}
});
$(window).triggerHandler('resize.jqGrid');//默认执行事件
}
期初设想,把表格嵌套在栅格中,宽度自适应 autowidth: true, 但是发现 表格聚在了一起,此页面位于一个Form 弹窗中 所以自适应宽度并为获取到值.
而autowidth: true,如果为ture时,则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变,为了使表格宽度能够自动调整则需要实现函数:setGridWidth
所以此时设置了setGridWidth 实现了宽度调整 达到自适应
$(document).ready(function () {
$(window).on('resize.jqGrid', function () {
$("#gridTable1").jqGrid('setGridWidth', $("#ss").width() - 20);
});
GetGrid();//初始化表格
});
此时获取到了id为ss的栅格,取得宽度 ,并设置成了表格宽度。
表格宽度的改变在于 ,表格本身存在与弹窗中,初始化时获取到的值并非弹框宽度,栅格系统宽度值 也为得到,所以嵌套表格的宽度也无法确定。
所以调用了事件, $(window).triggerHandler(‘resize.jqGrid’); 刷新表格,当面生产完成后 ,重新获取值 来设置表格宽度。
注意:
页面省去大量布局 框架代码。 只体现了重要部分。 正在学习jqgrid中,有不对的地方 ,希望大神能帮忙指明。谢谢。