使 jqGrid 在 Web 浏览器上响应的方法 [英] Way to make jqGrid responsive on web browsers

问题描述

我是 jqGrid 的新手，我需要在调整 Web 浏览器窗口大小时调整该网格的大小.我在网格中应用了 autowidth : true; ， shr​​inkToFit: true; 但这不起作用.

I am new in jqGrid and I need that grid will be resized on resizing the window of the web browser. I have applied autowidth : true; , shrinkToFit: true; in grid but that is not working.

CSS width : 100% 的设置是唯一的一种实现，但在 jqGrid 的情况下就不好了
它在 px 的许多内部结构上显式地设置了 width.

Setting of CSS width : 100% is the only one implementation, but it's not good in case of jqGrid
which set width in px explicitly on many its internal structures.

解决它的完美方法是什么?

what would be the perfect way to solve it ??

推荐答案

jqGrid 在许多内部结构(div、表格等)上使用固定的 width 值.所以不能只设置 CSS width : 100%.尽管如此，还有另一种方法可以做到这一点.可以在 window 对象上注册 resize 事件处理程序并显式调用 setGridWidth.该方法将jqGrid的所有内部结构调整为新的宽度.所以这将是一种干净的方法.

jqGrid uses fixed width value on many internal structures (divs, tables and so on). So one can't just set CSS width : 100%. Nevertheless there are another way to do the same. One can register resize event handler on window object and to call setGridWidth explicitly. The method adjust all internals structures of jqGrid to new width. So it would be clean method.

如果你使用 autowidth: true 那么 jqGrid 将 jqGrid 的宽度设置为其父级的宽度只有一次.在 $(window).resize 处理程序中，我们可以获取父级的 new(当前)宽度并重置网格 width 的值.对应的代码如下

If you use autowidth: true then jqGrid set the width of jqGrid to the width of it's parent only once. Inside of $(window).resize handler we can get new (the current) width of the parent and reset the value of grid width. The corresponding code will be the following

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

我使用 $("#list").closest(".ui-jqgrid") 而不是 $("#list") 因为 jqGrid 构建了一些潜水在主 <table> 元素上.$("#list").closest(".ui-jqgrid") 给出了包含网格所有元素的外部 div.

I used $("#list").closest(".ui-jqgrid") instead of $("#list") because jqGrid build some dives over the main <table> element. $("#list").closest(".ui-jqgrid") gives as the outer div which include all the elements of the grid.

修改后的小提琴演示 现场演示代码.

这篇关于使 jqGrid 在 Web 浏览器上响应的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！