web-dev-qa-db-ja.com

jqGridを100％まで伸ばすことは可能ですか？

JqGridの幅を100％に設定することは可能ですか？列幅は絶対ピクセルサイズでなければならないことを理解していますが、実際のグリッドの幅を相対的なサイズに設定するための何かをまだ見つけていません。たとえば、幅を100％に設定します。 100％の代わりに、450pxの奇数サイズを使用するようです。ページにはより水平なスペースがありますが、列の幅などにより、コンテナ（グリッドのみの）が水平にスクロールします。これを回避する方法はありますか？

javascriptjquerycssjqgrid
39
Earlz

最終的に jqGrids.fluid拡張 を使用してこれを行い、うまく機能しました。

[〜＃〜] update [〜＃〜]：そのリンクは死んでいるようですが、アーカイブされた記事は見ることができます ここ 。

4
Earlz

autowidth: true 3.5以降

79
johnjohn

わたしにはできる：

width: null,
shrinkToFit: false,
33
user1697051

これを使用して、グリッドの幅を親コンテナーの幅に設定します。

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

ここで説明した関数に関してjqGridの幅を修正しようとすることができます jQueryUIダイアログ内のjqGridでsetGridWidthを正しく呼び出す

2
Oleg

幅を「null」に設定してみてください。わたしにはできる。

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

ここで見つけたこのための素晴らしい機能（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;
2
molson

これはサポートされていないようです。 setGridWidth のドキュメントによると：

グリッドに新しい幅を動的に設定します。パラメーターは次のとおりです。new_widthは新しい ピクセル単位の幅...

widthオプションのドキュメントでは、幅をパーセンテージで設定できることについても言及していません。

そうは言っても、autowidth機能または同様の手法を使用して、グリッドに正しい初期幅を与えることができます。次に、 resize-jqgrid-when-browser-is-resized で説明されているメソッドに従って、ブラウザウィンドウのサイズが変更されたときにグリッドが適切にサイズ変更されていることを確認します。

1
Justin Ethier

よりシンプル

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

幅をパーセントで指定することはできませんが、画面の解像度に応じて必要な場合は、次のように設定します：var w = screen.widthそして、jqgridの幅オプションでこの変数を使用します。

役に立てば幸いです。

0
M Hussain

私はこれを行い、魅力のように働いています。

$(document).ready(function () { $("#jQGridDemo").setGridWidth(window.innerWidth - offset); }); 50のオフセットを入れました

0
Savan S

JohnJohnの答え 、 Bhargavの答え 、および Molsonの答え の3つすべての答えの組み合わせのみが、本物の達成に役立つことに気づきました自動サイズ変更。

そのため、すべてを活用するコードを作成しました。以下のスニペットを参照してください。また、単一のグリッドオブジェクトまたはサイズ変更するグリッドの配列を渡すことができるように改善しました。

試してみる場合は

  1. クリック Run code snippet、そして
  2. 次に、右上隅の「フルページ」リンクボタンをクリックします。

ウィンドウのサイズを変更し、グリッドのサイズがどのように変化し、自動的に再配置されるかを確認します。

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

注：この例は単純ですが、より複雑なjqGridがある場合は、スロットルまたはデバウンス（2つの関数throttleおよびdebounceはそこから取得されます）、そうでない場合、サイズ変更イベントは本当に遅くなる可能性があります。リンクをクリックして詳細をご覧ください。この場合は、より滑らかに見えるので調整することを好みますが、コードで必要に応じて使用できるように両方の関数を含めました。

実際のコードでは、調整が必要でした。そうしないと、サイズ変更が非常に遅くなりました。コードスニペットには、デフォルトのしきい値が200ミリ秒のスロットルハンドラーが既に含まれています。たとえば、コードスニペットでthrottleをdebounceに置き換えた場合、それを試すことができます。

jQuery(window).resize(debounce(function(){
    resizeGrid([gridObj1, gridObj2]);
 }));
0
Matt

これを試して、

置換width: 1100toautowidth: true,

0
Sreenath S