Html 设置jqgrid的宽度

我使用SmartAdmin jqgrid显示表格格式的数据。每次datatable的列数动态更改时。我正在将DataTable转换为json对象，并将其分配给jqgrid。jqgrid似乎在内部为每列设置了相等的宽度。当我从jqgrid中隐藏列时，它将隐藏该列，但会在页面中显示该空间。我希望jqgrid将宽度划分为所有可见列

以下是我的代码片段：

<table id="jqgrid" style="width:100%"></table>
<div id="pjqgrid"></div>

jqgrid初始化：

            jQuery("#jqgrid").jqGrid({
            data: <% = GetJasonData %>,
            datatype: "local",
            height: 'auto',    
            colNames: jsonColname,
            colModel: <% = GetJsonColModel %>,
            rowNum: 2,
            rowList: [10, 20, 30],
            pager: '#pjqgrid',
            sortname: 'Name',
            toolbarfilter: true,
            viewrecords: true,
            sortorder: "asc",
            caption: "All Entries ",
            multiselect: true,
            shrinkToFit: true,
            autowidth: true
        });
        jQuery("#jqgrid").jqGrid('navGrid', "#pjqgrid", {
            edit: false,
            add: false,
            del: true
        });
        jQuery("#jqgrid").jqGrid('inlineNav', "#pjqgrid");
        /* Add tooltips */
        $('.navtable .ui-pg-button').tooltip({
            container: 'body'
        });

        jQuery("#m1").click(function () {
            var s;
            s = jQuery("#jqgrid").jqGrid('getGridParam', 'selarrrow');
            alert(s);
        });
        jQuery("#m1s").click(function () {
            jQuery("#jqgrid").jqGrid('setSelection', "13");
        });

        $('#jqgrid').hideCol('EFORMINSTANCEID');
        //// remove classes
        //$(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
        $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
        $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
        //$(".ui-jqgrid-pager").removeClass("ui-state-default");
        //$(".ui-jqgrid").removeClass("ui-widget-content");

        // add classes
        $(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
        $(".ui-jqgrid-btable").addClass("table table-bordered table-striped");
    })

    $(window).on('resize.jqGrid', function () {
        $("#jqgrid").jqGrid('setGridWidth', $("#content").width());
    })

jQuery（“#jqgrid”）.jqgrid({
数据：，
数据类型：“本地”，
高度：“自动”，
colNames:jsonColname，
colModel:，
rowNum:2，
行列表：[10,20,30]，
寻呼机：“#pjqgrid”，
sortname:'名称'，
工具栏过滤器：对，
viewrecords：是的，
分拣员：“asc”，
标题：“所有参赛作品”，
多选：对，
shrinkToFit：是的，
自动宽度：真
});
jQuery（“#jqgrid”）.jqgrid（'navGrid'，“#pjqgrid”{
编辑：false，
加:错,，
德尔：是的
});
jQuery（“#jqgrid”）.jqgrid（'inlineNav'，“#pjqgrid”）；
/*添加工具提示*/
$（'.navtable.ui pg按钮'）。工具提示({
容器：“主体”
});
jQuery（“#m1”）。单击（函数（）{
var s；
s=jQuery（“#jqgrid”）.jqgrid（'getGridParam'，'selarrrow'）；
警报；
});
jQuery（“#m1s”）。单击（函数（）{
jQuery（“#jqgrid”）.jqgrid（'setSelection'，“13”）；
});
$（'jqgrid'）.hideCol（'EFORMINSTANCEID'）；
////删除类
//$（.ui jqgrid”）.removeClass（“ui小部件ui小部件内容”）；
$（.ui jqgrid view”）.children（）.removeClass（“ui小部件头ui状态默认值”）；
$（“.ui jqgrid labels，.ui搜索工具栏”）.children（）.removeClass（“ui状态默认ui th列ui th ltr”）；
//$（.ui jqgrid pager”）.removeClass（“ui状态默认值”）；
//$（.ui jqgrid”）.removeClass（“ui小部件内容”）；
//添加类
$（.ui jqgrid htable”）.addClass（“表格边框表格悬停”）；
$（“.ui jqgrid btable”）.addClass（“带边框的表条带化”）；
})
$（window）.on（'resize.jqGrid'，函数（）{
$（“#jqgrid”）.jqgrid（'setGridWidth'，$（“#content”）.width（））；
})

其中GetJasonData和GetJsonColModel包含json对象

提前谢谢。快速响应是非常值得注意的。

试试这个

<table id="jqgrid" style="width:1250px;"></table>

您可以发布一些代码以了解更多信息吗clarity@SaurabhM这是最新的问题。是的。效果很好。另外，不要忘记将“autowidth”属性设置为“true”