设置jqgrid的宽度

Question

我正在使用 SmartAdmin jqgrid 来显示表格格式的数据。每次数据表的列数动态变化。我正在将 DataTable 转换为 json 对象并将其分配给 jqgrid。似乎 jqgrid 在内部为每一列设置了相等的宽度。当我从 jqgrid 隐藏列时，它会隐藏该列，但它会在我的页面中显示 space 。我希望 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 个对象。

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

Answer 1

试试这个

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

设置jqgrid的宽度

Set width of jqgrid

html

css

json

jqgrid

smartadmin