Question

我只是想知道如何将jqGrid列宽设置为auto？

...
colModel: [
{ name: 'MyDescription', index: 'description', align: 'left', width: 150, sortable: false },
...

对于上述语句，如何为列指定自动宽度，使其适合其中最大内容的大小。

Answer 1

无法在jqGrid中指定autowidth列。但是您可以使用网格的shrinkToFit选项设置为true并设置一些近似宽度值（例如20,20,20,80），列的宽度将缩放为网格的宽度。

shrinkToFit：

此选项描述每列的初始宽度与网格宽度的计算类型。如果值为true且设置了width in width选项，则：根据定义的选项宽度缩放每个列宽。示例：如果我们定义两个宽度为80和120像素的列，但希望网格具有300像素 - 则会按以下方式重新计算列：1-列= 300（新宽度）/ 200（所有宽度的总和））* 80（列宽）= 120和2列= 300/200 * 120 = 180.网格宽度为300px。如果值为false并且设置了width in width选项，则：网格的宽度是选项中设置的宽度。列宽不会重新计算，并且具有在colModel中定义的值。

Answer 2

您可以使用方法setGridWidth。

示例：

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

DEMO

Answer 3

这主要适用于我。

<div id="myjqgridwrapper" style="width:100%;">
    <table id="myjqgrid"></table>
    <div id="myjqgridfooter"></div>
</div>

<script type="text/javascript">
    //script to autosize grid
    //don't forget autowidth:true for initial size
    $(window).bind('resize', function(){
        //set to 0 so grid does not continually grow
        $('#myjqgrid').setGridWidth(0);
        //resize to our container's width
        $('#myjqgrid').setGridWidth($('#myjqgridwrapper').width());
    }).trigger('resize');
</script>

Answer 4

Try this. Worked For Me

.ui-common-table{
  width: 100% !important;
}

.ui-jqgrid .ui-jqgrid-hbox{
  padding-right: 0px !important;
}

Answer 5

您可以尝试使用tableToGrid，据我记得它确实保留了宽度。如果是这样，如果其行为不能完全满足您的需求，您还可以查看其源代码。

JQGrid列自动宽度

5 个答案: