1

我正在尝试将jScrollPane与我的 JQGrid 一起使用。我需要使用 jScrollPane 在网格上进行水平和垂直滚动。我想要实现的行为是，

  • 垂直滚动条必须只滚动 Grid 的主体
  • 水平滚动条应该滚动正文和标题。

这可以使用默认滚动条来实现。但是当我应用 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

这里提到的解决方案解决了 我的问题。我必须将网格标题绑定到网格体的滚动事件。

于 2012-12-18T18:31:31.550 回答
0

我认为这可能是错误：$('#gview_list4>div.ui-jqgrid-bdiv').jScrollPane();

尝试更改为：

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

在 HTML 上，一个这样的结构：

 <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 回答