Question

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

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

网格内容div溢出父div
不再有滚动条
通过覆盖css类来“修复”具有不良副作用的东西当然

有人有解决方案吗？

Answer 1

我有一个可能的解决方案，我从我使用的一些代码中修改过。

independent grid height resizing

所以让我们为你检查神奇的一点：

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

   }


 }

因此，根据您的要求和我的理解，您希望能够动态地彼此独立地更改scrollable区域。

在此示例中，我们提供以下签名：

resizeGrid（grid，size，fixed，minHeight，minSizeHeight，maxHeight，maxSizeHeight）

网格==＆gt;我们正在使用的网格的ID 尺寸==＆gt;这个大小表示为像素值或百分比（例如150或0.4（40％））固定==＆gt;这告诉函数传递的值是固定高度还是初始高度要求的百分比高度了minHeight ==＆GT;这应该是网格应自行调整大小的最小屏幕尺寸 minSizeHeight ==＆gt;如果满足minHeight条件，这是网格应调整大小的大小。 maxHeight ==＆gt;这应该是网格应自行调整大小的最大屏幕尺寸。 maxSizeHeight ==＆gt;这应该是网格的最大大小应该高于窗口的maxHeight。

注意：最后4个设置将使用像素定义的值，但代码也可以适应百分比

所以在我提供的例子中我声明了：

 resizeGrid("grid",600,true, 400,150, 800,600 );
 resizeGrid("grid2",150,true, 300,300, 600,400 );

因此，第一个网格#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 ); 
        });

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

我完全添加了控制台语句，因此您可以看到此事件被触发，window高度是在正确的位置检查代码是activated的内容。

您可能会注意到的一件事是：

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

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

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

编辑：我更新了示例，以便您可以并排查看网格

设置kendo网格高度可滚动自动最小高度max-height

1 个答案: