在 JQGrid 上应用 jScrollPane - 水平滚动问题答案

【问题标题】：Apply jScrollPane on JQGrid - issue with horizontal scrolling在 JQGrid 上应用 jScrollPane - 水平滚动问题
【发布时间】：2012-08-01 14:35:04
【问题描述】：

我正在尝试将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 上的加载完成期间设置 jSrollPane。我还尝试将它应用于包含 hdiv 和 bdiv 的外部 div 元素。但这不起作用。任何人都可以提出解决这个问题的方法吗？我可以做些什么来获得所需的行为吗？

在此先感谢 :) !!!

【问题讨论】：

标签： jquery jqgrid jquery-jscrollpane

【解决方案1】：

我认为这可能是错误：$('#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>

【讨论】：

感谢您的回答。但这并没有解决我的问题。 stackoverflow.com/questions/13505536/… 中提到的解决方案解决了我的问题。我必须将网格标题绑定到网格体的滚动事件。

【解决方案2】：

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

【讨论】：