Question

我想设置一个固定的kendo网格标题。经过大量的互联网搜索，我无法找到我想要做的事情。

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

但它并不完全是我想要做的。我希望在页面加载页面上滚动页面时修复页眉。

我该怎么做？

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

修复kendo网格标题

1 个答案: