Question

是否有可能使jqGrid的宽度设置为100％？我知道列宽必须是绝对像素大小，但我还没有找到任何用于将实际网格的宽度设置为相对大小的内容。例如，我想将宽度设置为100％。它似乎使用450px的奇数尺寸，而不是100％。页面上有更多的水平空间，但是如果列宽等等，它将使容器（仅网格）水平滚动。有什么方法可以解决这个问题吗？

Answer 1

从3.5开始

autowidth: true

Answer 2

它对我有用：

width: null,
shrinkToFit: false,

Answer 3

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

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

Answer 4

我最终使用the jqGrids.fluid extension执行此操作，效果很好。

更新：该链接似乎已失效，但可以查看已存档的文章here。

Answer 5

您可以尝试使用我在此处描述的函数Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog

来修复jqGrid的宽度

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;

Answer 7

尝试将宽度设置为“null”。它对我有用。

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

Answer 8

看起来不支持此功能。根据{{3}}的文档：

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

width选项的文档也没有提及能够将宽度设置为百分比。

话虽这么说，您可以使用autowidth功能或类似技术为网格提供正确的初始宽度。然后按照setGridWidth中讨论的方法确保在调整浏览器窗口大小时正确调整网格大小，这将模拟100％宽度的效果。

Answer 9

loadComplete : function () {
     $("#gridId").jqGrid('setGridWidth', $(window).width(), true); 
},

Answer 10

简单

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

Answer 11

您不能以百分比给出宽度，而如果您想根据屏幕分辨率设置，则设置如下： var w = screen.width 然后在jqgrid的宽度选项中使用此变量。

希望它有用。

Answer 12

我做过这件事并且像魅力一样工作。

UPDATE [dbo].[WORKORDERS] SET ROUTING='L' WHERE ... --Queries that return more than one row 我把偏移量设为50

Answer 13

试试这个，

将width: 1100 替换为 autowidth: true,

Answer 14

我注意到只有所有3个答案的组合，即JohnJohn's answer， Bhargav's answer和 Molson's answer帮助我实现了真正的自动调整大小。

所以我创建了一些利用所有代码的代码，请参阅下面的代码段。我也对它进行了改进，因此您可以传递单个网格对象或要调整大小的网格数组。

如果您尝试一下，请确保

点击运行代码段和
然后点击右上角的＆＃34;完整页面＆＃34; 链接按钮。

调整窗口大小并观察网格如何改变其大小并自动重新对齐：

＆＃13;

// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {

  // pass one single grid, or an array of grids
  function resizeGrid(jqGridObj) {
  
    var $gridArray = Array.isArray(jqGridObj) ? jqGridObj : [jqGridObj];
    for(let i=0; i<$gridArray.length; i++) {
      var $grid=$gridArray[i],
      newWidth = $grid.closest(".ui-jqgrid").parent().width();
      $grid.jqGrid("setGridWidth", newWidth, true);
    }
    
  };
  
  // template for the 2 grids
  function createGrid(gridName, gridData) {
    var gridObj=$("#"+gridName); gridObj.jqGrid({
      autowidth: true, height: 45, 
      colNames: ['First name', 'Last name', 'Updated?'],
      colModel: [{name: "firstName"}, {name: "lastName"}, {name: "updated"}],
      data: gridData,
      loadComplete: function() { 
        // resize on load
        resizeGrid(gridObj);
      }      
    });
    return gridObj;
  }

  // instantiate Grid1
  var  data1 = [
      { id: 10, firstName: "Jane", lastName: "Doe", updated: "no"},
      { id: 20, firstName: "Justin", lastName: "Time", updated: "no" }
    ];    
  var gridObj1=createGrid("grid1", data1);

  // instantiate Grid2
  var  data2 = [
      { id: 10, firstName: "Jane", lastName: "Smith", updated: "no"},
      { id: 20, firstName: "Obi-Wan", lastName: "Kenobi", updated: "no" }
    ];    
  var gridObj2=createGrid("grid2", data2);
  
  function debounce(fn, delay) {
    delay || (delay = 200);
    var timer = null;
    return function () {
      var context = this, args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function () {
        fn.apply(context, args);
      }, delay);
    };
  }
  
 function throttle(fn, threshhold, scope) {
    threshhold || (threshhold = 200);
    var last,
        deferTimer;
    return function () {
      var context = scope || this;

      var now = +new Date,
          args = arguments;
      if (last && now < last + threshhold) {
        // hold on to it
        clearTimeout(deferTimer);
        deferTimer = setTimeout(function () {
          last = now;
          fn.apply(context, args);
        }, threshhold);
      } else {
        last = now;
        fn.apply(context, args);
      }
    };
  }
    
  // change size with window for both grids
  jQuery(window).resize(throttle(function(){
    resizeGrid([gridObj1, gridObj2]);
   }));
  
});

＆＃13;

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Resizing jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>

<table id="grid1"></table>
<br/>
<table id="grid2"></table>

＆＃13;

注意：虽然此示例很简单，但如果您有更复杂的jqGrids，则需要 throttling or debouncing （2个函数throttle和{从那里取出{1}}，否则resize事件可能非常慢。点击链接阅读更多相关信息。在这种情况下，我更喜欢限制因为它看起来更平滑，但我已经包含了这两个函数，因此如果需要在代码中使用它们。

在我的真实代码中，我需要限制，否则调整大小会变得太慢。代码段已包含一个限制处理程序，默认阈值为200毫秒。您可以尝试使用它，例如，如果您在代码段中将debounce替换为throttle，即

debounce

可以使jqGrid拉伸到100％？

14 个答案: