Kendo ui 设置剑道网格高度可滚动自动最小高度最大高度

我知道这是一个经常讨论的问题。 无论如何，我想试一试： 我正在使用多个剑道格网——因此我正在寻找一种可重复使用且干净的方式来设置格网样式，而不会对彼此产生副作用。 因此，以下是我想要实现的目标： 网格样式1： -最小高度：150px最大高度：600px可滚动 网格样式2： -最小高度：150px最大高度：300px可滚动

看起来并不特别，是吗？ 我尝试设置html.attributes，设置scrollable（）高度并覆盖css。 但最终我会发现自己总是有以下问题：

网格内容div溢出父div

不再有滚动条了

通过覆盖css类“修复”有不希望的副作用的内容 当然

---

有人有解决方案吗？

我有一个可能的解决方案，我用了一些代码修改了它

因此，让我们为您检查一下神奇的一点：

     function resizeGrid(grid, size, fixed, minHeight, minSizeHeight, maxHeight, maxSizHeight) {

   if (size === null || size === undefined) {
     size = 0.6;
   }

   if (minHeight === null || minHeight === undefined) {
     minHeight = 600;
     minSizeHeight = 150;
   }

   if (maxHeight === null || maxHeight === undefined) {
     maxHeight = 800;
     maxSizHeight = 600;
   }

   var windowHeight = $(window).height();
   if (!fixed) {
     windowHeight = windowHeight * size;
   } else {
     windowHeight = size;
   }

   if ($(window).height() < minHeight) {
     windowHeight = minSizeHeight;
   }

   if ($(window).height() > maxHeight) {
     windowHeight = maxSizHeight;
   }


   var gridContent = $("#" + grid + " div.k-grid-content");
   var lockedContent = $("#" + grid + " div.k-grid-content-locked");

   gridContent.height(windowHeight);

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

   }


 }

因此，第一个网格

#grid

最初将自身设置为600px的大小，然后如果窗口小于400px，大于800px，则调整自身大小。在这两种情况下，它将分别调整到150px和600px

然后，当我们开始调整窗口大小时，我添加了以下内容：

  $(window).resize(function () {
          console.log("resizing::" ,$(window).height() );
         resizeGrid("grid",600,true, 400,150, 800,600 );
          resizeGrid("grid2",150,true, 300,300, 600,400 ); 
        });

然后，这将查找要触发的窗口调整大小事件，然后相应地调整网格大小

我添加了console语句，纯粹是为了让您可以看到此事件被触发，以及

窗口的高度是多少，以检查代码是否在正确的位置被激活

您可能会注意到以下几行：

   var gridContent = $("#" + grid + " div.k-grid-content");
   var lockedContent = $("#" + grid + " div.k-grid-content-locked");

由于网格将锁定和未锁定部分“包装”到不同的标记中，我正在检查是否有任何锁定列，否则网格的各个部分将具有不同的滚动/意外样式

如果您需要更多的解释/更改，请告诉我，我将相应地更新我的答案。希望这就是你想要的

编辑：我已经更新了示例，以便您可以并排查看网格
A对于此类问题非常有用，但不幸的是，它仍然是一个实验性功能，只有FireFox完全支持。
   var gridContent = $("#" + grid + " div.k-grid-content");
   var lockedContent = $("#" + grid + " div.k-grid-content-locked");