jquery - 異なる画面幅に jqgrid 固定列を使用する方法は?

Question

多くの列を持つ JQgrid グリッドがあります。非常に広いモニターを持っている人もいれば、小さなラップトップを持っている人もいます。

ワイド モニターを使用しているユーザーが、ウィンドウのサイズに合わせてグリッドを拡大できるソリューションが必要です。

ラップトップを使用している場合は、列を固定して、スクロールしてもグリッドの最初の列が失われないようにしたいと思います。

このレイアウトをサポートする最善の方法は何ですか?

Answer 1

このスレッドでは、ブラウザ ウィンドウのサイズに基づいてグリッド幅を設定する方法について説明します。

javascript - ブラウザのサイズが変更されたときにjqGridのサイズを変更しますか? - スタックオーバーフロー

これは、「固定」colModel オプションを使用して、特定の列を一定のサイズに設定することを提案しています。

jQGridが列幅を設定

最後に、このサイトでは、JQGrid を使用するためのサンプル コードと追加のヒントを紹介しています。

私の経験から学んだ JQGrid の 10 のヒント << SANDBOX …….

Answer 2

流動的なレイアウトと固定された列の両方をモニターのサイズに応じて表示するには、流動的なテーブルと固定された最初の列を持つこの例を参照してください。

Step1 - メイン サイトから jquery.jqGrid.min.js スクリプトを追加します。

ステップ 2 - サイトhttp://code.google.com/p/codeincubator/source/browse/Samples/steveharman/jQuery/jquery.jqgrid.fluid/jquery.jqGrid.fluidから jquery.jqGrid.fluid.js スクリプトを追加します。 js?r=170

Step3 - html

<div id="grid_wrapper" class="ui-corner-all floatLeft">
<table id="theGrid" class="scroll">
</table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</div>

ステップ 4 - スクリプトを有効にする

function resize_the_grid()

      {
        $('#theGrid').fluidGrid({base:'#grid_wrapper', offset:-20});
      }

$(document).ready(function(){

        var myGrid = $('#theGrid');        

        myGrid.jqGrid({

          datatype:'clientSide',

          altRows:true,

          colNames:['Name', 'Side', 'Power'],

          colModel:[

            { name:'name', index: 'name', frozen : true },

            { name:'side', index: 'side' },

            { name:'power', index: 'power' } ],

          pager: jQuery('#pager'),

          viewrecords: true,

          imgpath: 'css/start/images',

                caption: 'The Force: Who\'s Who?',

                height: "100%"

        });

        myGrid.addRowData("1", {name:"Luke", side:"Good", power:"6"});

        myGrid.addRowData("2", {name:"Vader", side:"Dark", power:"9"});

        myGrid.addRowData("3", {name:"Han", side:"meh?", power:"0"});        

        resize_the_grid();
});

$(window).resize(resize_the_grid);

これが役に立ったことを願っています。