javascript - 带有 100% 和导航标题的 Kendo 网格

Question

我有一个剑道网格，想要显示带有导航元素的标题。

请参阅我在 Teleriks Dojo 中的示例:http://dojo.telerik.com/iWIXa

当我添加 < header> 元素时，全高度功能被破坏(底部的寻呼机将滑落)。

如何解决这个问题？

谢谢 斯文

Answer 1

所以我稍微调整了你的代码dojo

使用我在网格中实际使用的一些代码。

与@Sandman 类似，我正在调整网格，但我没有在网格上设置外部样式，而是使用 window作为确定调整大小的东西。

所以代码:

function initializeGrid(options)
{

    if(options === null || options === undefined)
    {
        options = {
            size: 0.55,
            gridContentCss: ".k-grid-content",
            gridLockedContentCss: ".k-grid-content-locked",
            gridsToResize:[]
        };
    }


    var windowHeight = $(window).height() * options.size;

    if(options.gridsToResize !== null && options.gridsToResize.length > 0 )
    {
        options.gridsToResize.forEach(function (item) {
            var gridContent = $('#' + item + ' > ' + options.gridContentCss);


            var lockedContent = $('#' + item + ' > ' + options.gridLockedContentCss);




            gridContent.height(windowHeight);

            if (lockedContent !== null && lockedContent !== undefined) {
                lockedContent.height(windowHeight);

            }
        }); 
    }
    else 
    {
        var gridContent = $(options.gridContentCss);
        var lockedContent = $(options.gridLockedContentCss);

        gridContent.height(windowHeight);

        if (lockedContent !== null && lockedContent !== undefined) {
            lockedContent.height(windowHeight);

        }
    }


}

所以这是一个更扩展的解决方案，这个函数需要一个 options对象(如果未提供，则会创建一个默认对象，该对象会自动将一个或多个网格调整为窗口高度的 55%。

在我的示例中，我在这里创建了一个对象

 var gridOptions = {
            size: 0.70,
            gridContentCss: ".k-grid-content",
            gridLockedContentCss: ".k-grid-content-locked",
            gridsToResize:[]
        }; 

所以我告诉网格使用当前窗口高度的 70% 来调整大小。

我还告诉它调整锁定和非锁定内容的大小，因为调整大小会使锁定的内容脱离 sync与解锁的内容。

我还可以告诉代码只调整某些网格的大小，这样如果屏幕上有多个网格，您可以调整它们全部或部分。如果未提供任何内容，则该函数假定所有网格都将在屏幕上进行调整。

然后最重要的是，我只是将此函数绑定(bind)到窗口调整大小函数，该函数将工作到默认 css 接管时的某个点，如果您缩小到小于 420 像素的屏幕高度，则将发生滚动在窗口和网格上。

我在代码中留下了一个控制台语句，因此您可以看到它正在调整大小。

正如我所说，这是一个比 Sandman 的解决方案更扩展的解决方案