修复剑道网格标题答案

【问题标题】：Fix kendo grid header修复剑道网格标题
【发布时间】：2018-04-25 10:03:43
【问题描述】：

我想设置一个固定的剑道网格标题。经过大量的互联网搜索，我找不到我真正想做的事情。

telerik doc 上的这篇文章展示了如何修复窗口顶部的标题：https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/fixed-headers-grid

但这并不是我想要做的。我希望在页面加载的位置滚动页面时修复标题。

我该怎么做？

【问题讨论】：

很高兴你想分享一个问题和一个解决方案，但你需要在原始帖子中设置解释的问题和解决方案的接受答案。
@DontVoteMeDown : 完成 ;)

标签： kendo-ui kendo-grid

【解决方案1】：

经过艰苦的工作和疯狂的测试，我终于找到了修复这个网格标题的方法。所以我在这里分享它，因为我认为很多人都想这样做......

我对 Telerik 教程进行了一些修改，以便在您想要的位置修复标题，请考虑网格是否有工具栏并且可重用:)

CSS：

.fixed-header {
    position: fixed;
    width: auto;
    z-index: 10000;
}

Javascript（'#main-header'是我网站主菜单的选择器）：

/**
* Fix grid header
* @param {kendo.ui.Grid} grid - The grid
* @param {string} [selector] - The selector of the element which the header must be "stuck" on scrolling, by default the main menu
*/
function fixGridHeader(grid, selector) {
    var wrapper = grid.wrapper,
        toolbar = wrapper.find(".k-grid-toolbar"),
        header = wrapper.find(".k-grid-header");

    function resizeFixed() {
        var paddingRight = parseInt(header.css("padding-right"));
        header.css("width", wrapper.width() - paddingRight);
    }

    function scrollFixed(selector) {

        var offset = $(selector ? selector : '#main-header').offset().top + $(selector ? selector : '#main-header').outerHeight(),
            tableOffsetTop = wrapper.offset().top,
            top = $('#main-header').height() + (selector ? $(selector).height() : 0);

        if (offset >= tableOffsetTop) {
            header.addClass("fixed-header");
            if (toolbar.length > 0) {
                toolbar.addClass("fixed-header");
                toolbar.css({ 'top': top, width: "100%" });
                header.css({ 'top': top + toolbar.innerHeight() });
            }
            else {
                header.css({ 'top': top });
            }
        }
        else {
            header.removeClass("fixed-header");
            if (toolbar.length > 0)
                toolbar.removeClass("fixed-header");
        }

    }
    resizeFixed();
    $(window).resize(resizeFixed);
    $(window).scroll(function () { scrollFixed(selector); });
}

【讨论】：