bootstrap的栅格中嵌套jqgrid

因为布局需求 在网格系统中建立了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中，有不对的地方 ，希望大神能帮忙指明。谢谢。