JQGrid调整大小问题

时间:2016-08-22 02:08:41

标签: jquery jqgrid

我最近开始在我正在开发的应用程序中使用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
    }); 

1 个答案:

答案 0 :(得分:0)

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

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