使用mCustomScrol（v3.1.5）時，jqgrid頂部標頭不隨左滾動移動

Question

我正在嘗試在jqgrid（4.9.2）上使用mCustomScrollbar。 滾動條的設計正在更改，但是在水平滾動時，頂部標題不會像往常一樣移動。 我正在嘗試的示例是可折疊網格。 而對於mCustomScroll

$(".ui-jqgrid-bdiv").mCustomScrollbar({
    axis:"yx",
});

在jqgrid上根本無法使用任何自定義滾動條嗎？

Answer 1

我對jqgr進行了一些自定義更改，因此遷移到另一個版本將是一項艱巨的任務，因此，我在mcustomscrollbar中進行了更改並發布了答案，因此，如果其他任何人遇到相同的問題，將是有益的。 因此有一個_tweetTo方法，通過初始化為，該容器將為其分配滾動條的容器調用

$(".ui-jqgrid-bdiv").mCustomScrollbar({
    axis:"yx",
}); 

現在在方法調用_tweenTo（ V：3.1.5的行號2131）之后插入以下代碼

if ($(".ui-jqgrid-hdiv").length > 0) {

                    $(".ui-jqgrid-view").css("overflow", "hidden");
                    $(".ui-jqgrid-hdiv").css("width", $("#grid1").width() + "px"); // grid1 is the id of your gridcontainer/table
                    _tweenTo($(".ui-jqgrid-hdiv")[0], property, Math.round(scrollTo[0]), dur[0], options.scrollEasing, options.overwrite, {
                        onStart: function () {
                            if (options.callbacks && options.onStart && !d.tweenRunning) {
                                /* callbacks: onScrollStart */
                                if (_cb("onScrollStart")) { _mcs(); o.callbacks.onScrollStart.call(el[0]); }
                                d.tweenRunning = true;
                                _onDragClasses(mCSB_dragger);
                                d.cbOffsets = _cbOffsets();
                            }
                        }, onUpdate: function () {
                            if (options.callbacks && options.onUpdate) {
                                /* callbacks: whileScrolling */
                                if (_cb("whileScrolling")) { _mcs(); o.callbacks.whileScrolling.call(el[0]); }
                            }
                        }, onComplete: function () {
                            if (options.callbacks && options.onComplete) {
                                if (o.axis === "yx") { clearTimeout(mCSB_container[0].onCompleteTimeout); }
                                var t = mCSB_container[0].idleTimer || 0;
                                mCSB_container[0].onCompleteTimeout = setTimeout(function () {
                                    /* callbacks: onScroll, onTotalScroll, onTotalScrollBack */
                                    if (_cb("onScroll")) { _mcs(); o.callbacks.onScroll.call(el[0]); }
                                    if (_cb("onTotalScroll") && scrollTo[1] >= limit[1] - totalScrollOffset && d.cbOffsets[0]) { _mcs(); o.callbacks.onTotalScroll.call(el[0]); }
                                    if (_cb("onTotalScrollBack") && scrollTo[1] <= totalScrollBackOffset && d.cbOffsets[1]) { _mcs(); o.callbacks.onTotalScrollBack.call(el[0]); }
                                    d.tweenRunning = false;
                                    mCSB_container[0].idleTimer = 0;
                                    _onDragClasses(mCSB_dragger, "hide");
                                }, t);
                            }
                        }
                    });
                }

在_tweenTo的方法定義中，還有另一種方法_tween更新該方法為

 function _tween() {
                    // added condition so the top headers remains fixed
                    if (el.classList.contains("ui-jqgrid-hdiv") && prop == "top") {
                        return;
                    }
                    //ends here 
                    if (duration > 0) {
                        tobj.currVal = _ease(tobj.time, from, diff, duration, easing);
                        elStyle[prop] = Math.round(tobj.currVal) + "px";
                    } else {
                        elStyle[prop] = to + "px";
                    }
                    onUpdate.call();
                }

滾動條啟動並運行。