javascript - 剑道卡住(锁定)网格高度

Question

我们正在使用一个锁定了几个元素的网格。我们已经使用 css 设置了网格的最小和最大高度。

.k-grid-content {
    max-height: 400px;
    min-height: 0px;
  }

我们在设置锁定网格的高度时遇到问题。如果我们不设置网格高度，锁定侧的许多行在底部变白。那么如何动态设置grid的高度呢？

这是我们在 Onbound 事件上的内容

var grid = e.sender;
var lockedContent = grid.wrapper.children(".k-grid-content-locked")
var content = grid.wrapper.children(".k-grid-content");

if (content[0] && (content[0].scrollWidth == content[0].clientWidth))
    lockedContent.height(content.height());
else
    lockedContent.height(content.height()-16);
//16 is near to horizontal scroll height
grid.resize();

这是一个 hack，它不像在分组中那样完美地工作。我们已经通过这个链接 http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/change-grid-height-when-using-frozen-columns但它不起作用，因为它假定在网格上根本没有设置高度。

有人可以提供正确的解决方案吗？

Answer 1

我已经为你准备了一个 dojo 来试试看它是否适合你的场景

http://dojo.telerik.com/eSava/2

我所做的只是创建了一个函数来为您完成所有繁重的工作。

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


          //  console.log(gridContent, lockedContent);

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

        }
    }

    $(window).resize(function () {
        ResizeGrid(options);
    });

}

在它的默认状态下，当它被调用时，它会将所有网格的大小调整为窗口高度的 55%。

但是如果你想应用不同的大小规则，你可以通过提供一个简单的变量，如下所示:

 var gridResize = {
            size: 0.4, 
             gridContentCss: ".k-grid-content",
            gridLockedContentCss: ".k-grid-content-locked",
            gridsToResize:['grid']
          }


initializeGrid(gridResize); 

因此在上面的示例中，它将覆盖默认值并将网格大小调整为可用屏幕大小的 40%。此外，它只会调整 id 为 grid 的控件的大小。因此，如果您同时在屏幕上有多个网格，那么该函数将单独处理它们并保留那里的高度。

有任何问题请告诉我。