1

JQGridで jScrollPaneを使用しようとしています。jScrollPane を使用して、グリッド上で水平スクロールと垂直スクロールの両方が必要です。私が達成しようとしている行動は、

  • 垂直スクロール バーは、グリッドの本体のみをスクロールする必要があります
  • 水平スクロール バーは、本文とヘッダーの両方をスクロールする必要があります。

これは、デフォルトのスクロール バーを使用して可能です。しかし、jScrollPane を適用すると、水平スクロール バーはグリッドの本体のみをスクロールし、ヘッダーは固定されたままになります。以下は私のコードのサンプルです。

<body>
<table id="list4"></table>
<script type="text/javascript" language=javascript>
var mydata = [
    { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00",  tax: "10.00", total: "210.00" },
    { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: "10", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "12", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "13", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: "14", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "15", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "16", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: "17", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "18", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "19", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: "11", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "20", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "23", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: "24", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "25", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "26", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: "27", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "28", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "29", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
    ];
    jQuery("#list4").jqGrid({
        datatype: "local",
        data: mydata,
        width: 200,
        height: 250,
        colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
        colModel: [
    { name: 'id', index: 'id', width: 60, sorttype: "int" },
    { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
    { name: 'name', index: 'name', width: 100 },
    { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
    { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
    { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
    { name: 'note', index: 'note', width: 150, sortable: false }
],
        multiselect: true,
        caption: "Manipulating Array Data",
        shrinkToFit: false,
        loadComplete: function () {
            $('#gview_list4>div.ui-jqgrid-bdiv').jScrollPane();
        }
    });

</script>
</body>

bDiv の loadcomplete 中に jSrollPane を設定しています。また、hdiv と bdiv の両方を囲む外側の div 要素にも適用してみました。しかし、それはうまくいきません。誰でもこの問題の解決策を提案できますか? 望ましい動作を得るためにできることはありますか?

前もって感謝します ：） ！！！

4

2 に答える 2

0

これはエラーである可能性があると思います：$('#gview_list4>div.ui-jqgrid-bdiv').jScrollPane();

これに変更してみてください：

$('div.summaries .ui-jqgrid-bdiv').jScrollPane({ 
    scrollbarWidth: 15, scrollbarMargin: 0 
});

HTML では、次のような 1 つの構造を使用します。

 <div id="summaries" style="text-align: center;" class="summaries">
    <div id="summaries_container">
          <table id = "gview_list4"></table>
    </div>
</div>
于 2012-12-05T23:18:03.187 に答える
0

ここに記載されている解決策は 私の問題を解決しました。グリッド ヘッダーをグリッド本体のスクロール イベントにバインドする必要がありました。

于 2012-12-18T18:31:31.550 に答える