Question

使用JQGrid 4.5.4

我要求在左右两侧的JQGrid上都有垂直滚动条。

示例模型： Sample Dual Vertical Scrollbar

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

Answer 1

我在loadComplete事件上添加了一个小函数来解决它。

此函数为左侧滚动条创建一个新div，然后它同步两个滚动条。

                    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());
                        });
                    }

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

Answer 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出现更好的解决方案之前，这是我能想到的最好的结果。

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

2 个答案: