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

问题描述

我是新的在jqGrid和我需要的网格将调整大小的Web浏览器的窗口的大小。我已经在网格中应用了 autowidth：true; ， shrinkToFit：true;



设置CSS width：100％是唯一的一个实现，但是在jqGrid的情况下它不好

在许多其内部结构上显式地设置 px 中的 width 。

什么是完美的解决方法？

解决方案

jqGrid在许多内部结构上使用固定的 width 表等）。因此，不能只设置CSS width：100％。然而，还有另一种方法来做同样的事情。可以在窗口对象上注册 resize 事件处理程序并调用 setGridWidth 。该方法将jqGrid的所有内部结构调整为新宽度。

如果使用 autowidth：true ，那么jqGrid将jqGrid的宽度设置为它的父项的宽度只有一次。在 $（window）.resize 处理程序中，我们可以获取父 （当前）宽度并重置grid < $ c> width 。对应的代码如下

  $（window）.on（resize function（）{
 var $ grid = $（＃list），
 newWidth = $ grid.closest（。ui-jqgrid）。parent（）。width（）; 
 $ grid.jqGrid（setGridWidth，newWidth，true）; 
}）; 
  

我使用 $（＃list）。 -jqgrid）而不是 $（＃list），因为jqGrid在 c $ c>< table> 元素。 $（＃list）。closest（。ui-jqgrid）给出为外部 div包括网格的所有元素

修改的小提琴演示演示了代码。 p>

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.

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 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.

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);
});

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.

The modified fiddle demo demonstrates the code live.

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