能否将jqGrid拉伸至100%？

Question

能否将jqGrid的宽度设置为100%？我知道列宽必须是绝对像素大小，但我还没有找到可以设置实际网格宽度的相对大小的方法。例如，我想将宽度设置为100％。但似乎使用奇怪的450像素大小代替100％。页面上有更多水平空间，但由于列宽等原因，这将使容器（仅包含网格）水平滚动。有什么解决办法吗？

- Earlz

---

http://stackoverflow.com/questions/17934104/how-to-dynamically-resize-jqgrid-to-current-window-size - Sergey Strashko

http://stackoverflow.com/questions/17934104/how-to-dynamically-resize-jqgrid-to-current-window-size - Sergey Strashko

Answer 1

从3.5版本开始，autowidth: true可用。

- johnjohn

---

"autowidth: true" 仅会将网格初始化为与父元素当前相同的大小。如果调整页面大小，则会使所有内容混乱不堪。 - Valdemar

我用这个。但是当我在另一页使用表格时，它不起作用 :( 我该怎么办？ - happy Sun

@Valdemar - 我现在有一个解决方案，请看下面。 - Matt

Answer 2

对我来说它起作用：

width: null,
shrinkToFit: false,

- user1697051

---

这对我有用，而autowidth则没有。我在手风琴中有一个网格，在页面加载时不处于活动状态。谢谢。 - pfeds

这应该是正确的答案，网格随父级调整大小并占据100％的宽度。 - Mindless

是的，这个答案更好。即使调整父元素的大小，网格仍保持父元素的100％。这比“autowidth：true”更好。谢谢。 - Yevgeniy Afanasyev

但是，如果您正在应用此功能，则必须手动设置网格的每个列的大小。此外，当屏幕大小发生更改时，列不会随着网格而缩小，而网格会变成水平可滚动的。 - sohaiby

这对我非常有效。网格会随着浏览器窗口大小的调整而跟随父元素的大小。 - Bayu

Answer 3

我正在使用这个来将网格的宽度设置为父容器的宽度。

function resizeGrid() {
        var $grid = $("#list"),
        newWidth = $grid.closest(".ui-jqgrid").parent().width();
        $grid.jqGrid("setGridWidth", newWidth, true);
}

- Bhargav

Answer 4

我最终使用 jqGrids.fluid扩展来完成这个任务，效果非常好。 更新：那个链接似乎已经失效了，但是可以在这里查看存档文章。

- Earlz

---

我仍然发现这个扩展程序给出的结果与新的本地“autowidth：true”设置相同。也就是说，它仅在页面首次呈现时影响网格。但是，如果您调整页面大小，则不会更新jqGrid以匹配新的宽度。 - MattSlay

@Bhargav 确实是这样。不过可以查看 archive.org：https://web.archive.org/web/20140223090705/http://old.stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx - Earlz

Answer 5

尝试将宽度设置为“null”。这对我有效。

$(grid).jqGrid({
   width: null,
});

- Yuriy

Answer 6

我在这里找到了一个非常棒的功能（stackoverflow），但我忘记了这篇帖子的链接。我已经注释掉了高度部分，记住这一点（对我来说不起作用），但宽度很完美。将此代码放在您的PHP文件中的任何位置即可。

$resize = <<<RESIZE
jQuery(window).resize(function(){
    gridId = "grid";

    gridParentWidth = $('#gbox_' + gridId).parent().width();
    $('#' + gridId).jqGrid('setGridWidth',gridParentWidth);

   // $('#' + gridId).jqGrid('setGridHeight', //Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
})
RESIZE;

- molson

---

但是请考虑为您的事件处理程序添加节流。 - Matt

Answer 7

您可以尝试使用我在这里描述的函数来修复jqGrid的宽度。

- Oleg

Answer 8

更简单

  $("#gridId").setGridWidth($(window).width() );

- Richard

Answer 9

看起来这个不被支持。根据setGridWidth的文档：

动态设置网格的新宽度。参数是： new_width 是像素为单位的新宽度...

width选项的文档也没有提到可以将宽度设置为百分比。

话虽如此，您可以使用autowidth功能或类似的技术来给网格正确的初始宽度。然后按照resize-jqgrid-when-browser-is-resized中讨论的方法，在浏览器窗口大小调整时确保网格被正确地调整大小，这将模拟具有100％宽度的效果。

- Justin Ethier

Answer 10

尝试这个：

将 width: 1100 替换为 autowidth: true,

- Sreenath S