JQGrid 调整大小问题答案

【问题标题】：JQGrid Resize issueJQGrid 调整大小问题
【发布时间】：2016-08-22 02:08:40
【问题描述】：

我最近开始在我正在开发的一个应用程序中使用 JQGrid。但是，我在调整窗口大小时遇到了一些问题。

JQGrid 放置在一个表列中，该列设置为其父容器的 25%。当我展开窗口时，JQGrid 会正确展开，但是当我缩小它时，它不会与父容器成比例地缩小，即 JQGrid 超过其父容器的 25%。

如果有人可以就为什么会发生这种情况给我一些意见？

这是我的代码：

    <div id="main_body">
            <div class="row">
                <div id="criteriacolumn" class="column">
                    <table id="list"></table>
                </div>
                <div class="column">
                </div>
            </div>
    </div>

CSS：

     #main_body{
     border: 1px solid black;
     display: table;
     width: 100%;
     }

     .row{
     display: table-row;
     }

    .column{
    display: table-cell;
    }

    #criteriacolumn{
    border:1px solid red;
    width: 50%;
    min-width: 200px;
    }

js:

    $("#list").jqGrid({
    url: "http://localhost:8080/Customer/rest/customers/cust",
    datatype: "json",
    mtype: "GET",
    colNames: ["ID", "CU#","Name"],
    colModel: [
        { name: "custId"},
        { name: "custNbr" },
        { name: "rptName", align: "right" },
    ],
    rowNum:300,
    autowidth:true
    scrollOffset:false
    });

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

使用 setGridWidth 属性重置基于父控件宽度的网格大小。在窗口调整大小事件中执行此操作。

$(window).resize(function () {
    var gridWidth = $('#criteriacolumn').width();
    if (gridWidth > 0) {
        $("#list").setGridWidth(gridWidth);            
    }
});

【讨论】：