设置jqgrid的宽度答案

【问题标题】：Set width of jqgrid设置jqgrid的宽度
【发布时间】：2016-02-10 16:23:51
【问题描述】：

我正在使用 SmartAdmin jqgrid 来显示表格格式的数据。每次数据表的列数都会动态变化。我正在将 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());
    })

GetJasonData 和 GetJsonColModel 存放 json 对象的位置。

提前致谢。快速响应是非常值得赞赏的。

【问题讨论】：

你能贴一些代码更清楚吗
@SaurabhM 这里是更新的问题。

标签： html css json jqgrid smartadmin

【解决方案1】：

试试这个

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

【讨论】：

是的。工作正常。另外不要忘记将“autowidth”属性设置为“true”