0

jqgrid 4.4.4 を使用していますが、問題が発生したようです。

問題 1: 修正済み

使用事例

データを2倍にすることなく、「起動」時にjqgridを非表示にしたい。

解決

scroll:true を削除すると、データは以前のように 2 倍になりませんでした。

問題 2: 修正済み

データが jqgrid の高さを超えると、スクロール バーが表示されます。ただし、図に示すように、スクロールバーがデータと重なっています。

Jqgrid垂直スクロールバーのオーバーラップ

autowidth:true、scrollOffset、ピクセル幅 ++ の定義の両方を試しましたが、何も機能していないようです。

私はかなり巨大なプロジェクトに取り組んでおり、jqgrid での作業が大好きです。しかし、これらの問題を時代遅れにする必要があると私は考えています。

コード：

    var grid = $("#table").jqGrid(
                {       
                    datatype: "local",
                    height: "auto",
                    width: 1000,
                    scroll: true,
                    colNames:['','1992','1997','2002','2007',
                              '2012','2017','2022','2027','2032','2037'],
                    colModel: [{name:'Name',index:'Name', align: 'left'},
                               {name:'Col0',index:'Col0'},{name:'Col1',index:'Col1'}
                               {name:'Col2',index:'Col2'},{name:'Col3',index:'Col3'},
                               {name:'Col4',index:'Col4'},{name:'Col5',index:'Col5'},
                               {name:'Col6',index:'Col6'},{name:'Col7',index:'Col7'},
                               {name:'Col8',index:'Col8'},{name:'Col9',index:'Col9'}],
                    multiselect: true,
                    caption: "Table",
                    shrinkToFit: true,
                    data: [{ Name: 'County1', Col0: '11 273', Col1: '11 431', 
                             Col2: '12 515', Col3: '13 414', Col4: '15 143',
                             Col5: '16  852', Col6: '18 362', Col7: '19 698', 
                             Col8: '20 821', Col9: '21 734' },
                           { Name: 'County2', Col0: '22 530', Col1: '24 457', 
                             Col2: '25 763', Col3: '27 247', Col4: '28 970', 
                             Col5: '31 135', Col6: '32 977', Col7: '34 649', 
                             Col8: '36 020', Col9: '37 158' },
                           { Name: 'County3', Col0: '11 909', Col1: '12 734', 
                             Col2: '14 037', Col3: '14 873', Col4: '17 284', 
                             Col5: '20 083', Col6: '22 877', Col7: '25 603', 
                             Col8: '28 064', Col9: '30 210' },
                           { Name: 'County4', Col0: '10 465', Col1: '12 165', 
                             Col2: '12 962', Col3: '13 890', Col4: '15 154', 
                             Col5: '16 293', Col6: '17 284', Col7: '18 174', 
                             Col8: '18 897', Col9: '19 446' },
                           { Name: 'County5', Col0: '13 300', Col1: '14 350', 
                             Col2: '15 777', Col3: '16 791', Col4: '17 809', 
                             Col5: '18 971', Col6: '19 931', Col7: '20 785', 
                             Col8: '21 452', Col9: '21 930' }]
                  //hiddengrid: true
                }
            );
    CSS:
     .ui-jqgrid-bdiv {
       max-height:300px;
    }

私の問題を説明する JSFiddle : http://jsfiddle.net/aalmaas/3z7s7/2/

私が欲しいものを正確に示している JSFiddle : http://jsfiddle.net/aalmaas/LBfCV/。ただし、jqgrid の高さを明確な高さではなく「自動」に設定したいと考えています。

解決：

私を助けてくれたオレグに心から感謝します。

jqgrid の高さを設定した場合と、height:"auto" に定義した場合の垂直スクロールバーの動作は異なります。

これは私がやったことです：

スクロール バーが表示されている場合は、最初に setGridWidth を呼び出して、shrink パラメータを true に設定してグリッドの幅を縮小します。幅は、垂直スクロールバー用のスペースが必要であることを考慮しています。次に、shrink パラメーターを false に設定して setGridWidth をもう一度呼び出し、グリッドの以前の幅を復元します。

4

1 に答える 1

1

あなたが何をしたいのかを正しく理解したら、次のことを行う必要があります

1) HTML コードを次のように変更します。

<div id="foo">A top div</div>
<div class="myGridDiv">
    <table id="grid"></table>
</div>

外側のdivの CSSは次のように定義されposition: absoluteます。

.myGridDiv { position: absolute; bottom: 10px;}

2) JavaScript コードを次のように変更します。

var numberTemplate = {width: 60, formatter: "integer",
        formatoptions: {thousandsSeparator: " "}, sorttype: "integer"};

$("#grid").jqGrid({
    datatype: "local",
    height: "auto",
    hiddengrid: true,
    gridview: true, // to improve performance
    rowNum: 10000,  // to have no local paging
    colNames: ['', '1992', '1997', '2002', '2007', '2012', '2017', '2022', '2027',
        '2032', '2037'],
    colModel: [
        {name:'Name', width: 80, key: true},
        {name:'Col0', template: numberTemplate},
        {name:'Col1', template: numberTemplate},
        {name:'Col2', template: numberTemplate},
        {name:'Col3', template: numberTemplate},
        {name:'Col4', template: numberTemplate},
        {name:'Col5', template: numberTemplate},
        {name:'Col6', template: numberTemplate},
        {name:'Col7', template: numberTemplate},
        {name:'Col8', template: numberTemplate},
        {name:'Col9', template: numberTemplate}
    ],
    caption: "Stack Overflow Example",
    data: [
        { Name: 'County1', Col0: 11273, Col1: 11431, Col2: 12515, Col3: 13414,
            Col4: 15143, Col5: 16852, Col6: 18362, Col7: 19698, Col8: 20821,
            Col9: 21734 },
        { Name: 'County2', Col0: 22530, Col1: 24457, Col2: 25763, Col3: 27247,
            Col4: 28970, Col5: 31135, Col6: 32977, Col7: 34649, Col8: 36020,
            Col9: 37158 },
        { Name: 'County3', Col0: 11909, Col1: 12734, Col2: 14037, Col3: 14873,
            Col4: 17284, Col5: 20083, Col6: 22877, Col7: 25603, Col8: 28064,
            Col9: 30210 },
        { Name: 'County4', Col0: 10465, Col1: 12165, Col2: 12962, Col3: 13890,
            Col4: 15154, Col5: 16293, Col6: 17284, Col7: 18174, Col8: 18897,
            Col9: 19446 },
        { Name: 'County5', Col0: 13300, Col1: 14350, Col2: 15777, Col3: 16791,
            Col4: 17809, Col5: 18971, Col6: 19931, Col7: 20785, Col8: 21452,
            Col9: 21930 }
    ]
});

ここで変更されたフィドラーのデモを参照してください

更新：スクロールの問題を正しく理解しているかどうかわかりません。デモで問題が解決することを願っています。デモでは次の CSS を使用しました。

.ui-jqgrid .ui-jqgrid-bdiv {
    max-height: 100px;
    overflow-x: hidden;
}
于 2013-02-25T11:25:25.410 に答える