带有两个垂直滚动条（左和右）的 JQGrid答案

【问题标题】：JQGrid with two vertical scrollbars (left and right)带有两个垂直滚动条（左和右）的 JQGrid
【发布时间】：2014-12-18 03:38:22
【问题描述】：

使用 JQGrid 4.5.4

我需要在我的 JQGrid 的左侧和右侧都有垂直滚动条。

样机样机：

这可能吗？我已经广泛搜索并找到了两个水平滚动条的示例，但我无法在 JQGrid 的左侧和右侧找到两个垂直滚动条的示例。

【问题讨论】：

标签： javascript jquery jqgrid

【解决方案1】：

我在 loadComplete 事件中添加了一个小函数解决了这个问题。

此函数为左侧滚动条创建一个新 div，然后对两个滚动条进行 sycronices。

                    loadComplete: function(){
                        var jqgridHeader = $(".ui-state-default.ui-jqgrid-hdiv");
                        // Add a new div with another div inside for the left scrollbar
                        jqgridHeader.after(
                            '<div id="leftScroll" style="z-index:1000; position:absolute; height:150px; overflow:scroll; width:17px;">'+
                                '<div id="leftScrollContent" style=" width:17px;"></div>' +
                            '</div>'
                        );
                        // Set to the new new div the sice of the jqgrid body
                        $("#leftScrollContent").css("height",($("#sortrows").height()));

                        var jqgridBody = $(".ui-jqgrid-bdiv");
                        // Syncronice both scrollbars
                        jqgridBody.scroll(function () { 
                            $("#leftScroll").scrollTop(jqgridBody.scrollTop());
                        });
                        $("#leftScroll").scroll(function () { 
                            jqgridBody.scrollTop($("#leftScroll").scrollTop());
                        });
                    }

*左侧滚动条与第一个网格列重叠

【讨论】：

这对我不起作用，滚动条不跨越网格的高度。我认为有两个问题：首先是“leftScroll” div 的高度应该设置为网格的高度（我已经在您的示例中解决了这个问题）。其次是“leftScrollContent”设置不正确。我不确定“sortrows” div 来自哪里，但我似乎没有。

【解决方案2】：

我根据 hect0r90 的回答做了一些修改。每当初始化网格时都会调用此函数，以防内容发生变化。如果存在水平滚动条，此解决方案将会出现问题。我没有修复它，因为这对我来说不是问题。

function FormatLeftVerticalScrollbar() {
    var leftScrollID = 'leftScroll';
    var leftScrollContainerID = 'leftScrollContainer';

    //Get the body and header
    var jqgridBody = $(".ui-jqgrid-bdiv");
    var jqgridHeader = $(".ui-state-default.ui-jqgrid-hdiv");

    //See if the scrollbar and container already exist
    var leftScroll = $("#" + leftScrollID);
    var leftScrollContainer = $("#" + leftScrollContainerID);

    //Add a new div with another div inside for the left scrollbar
    if(leftScroll == null ||
        leftScroll.length == 0)
    {
        jqgridHeader.after(
        '<div id="' + leftScrollID + '" style="z-index:1000; position:absolute; height:' + jqgridBody.height() + 'px; overflow:scroll; width:17px;">' +
            '<div id="' + leftScrollContainerID + '" style=" width:30px;"></div>' +
        '</div>');
        leftScroll = $("#" + leftScrollID);
        leftScrollContainer = $("#" + leftScrollContainerID);
    }

    //Set scroll content height to the height of the content
    var contentHeight = jqgridBody[0].scrollHeight;
    $("#" + leftScrollContainerID).height(contentHeight);

    //Syncronize both scrollbars
    jqgridBody.scroll(function () {
        $("#" + leftScrollID).scrollTop(jqgridBody.scrollTop());
    });
    $("#" + leftScrollID).scroll(function () {
        jqgridBody.scrollTop($("#" + leftScrollID).scrollTop());
    });
}

在 Oleg 提出更好的解决方案之前，这是我能想到的最好办法。

【讨论】：