PROSAGA码农传奇-雾计算/网格计算-如果内容溢出，则k-grid-content不会垂直滚动

如果内容溢出，则k-grid-content不会垂直滚动

作者: 日耀九洲
发布时间: 2024-08-18 08:42:24 (7天前)
转自：

<div class =“post-text”itemprop =“text”>
  
    虽然您已经为自己的问题提供了答案，但我认为我会提供一个我想出的解决方案
    的
      调整
    </强>
     网格在飞行中。
  
  
    这是我创建的一个功能，用于调整网格大小，这可以一次性应用于多个不同的网格，并解决网格中的锁定和解锁列
  
   <pre>
 <code>
 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);

}
    }

}

</code>
 </pre>
  
    所以这是在初始时调用的
     <code>
 document
 </code>
     准备好的事件如下：
  
   <pre>
 <code>
 $(document).ready(function () {
 initializeGrid(null); 
});

</code>
 </pre>
  
    这是它的实际演示：
    <a href="http://dojo.telerik.com/ALAnu" rel="nofollow noreferrer">
      http://dojo.telerik.com/ALAnu
    </A>
  
  
    这只是使用一个名为的函数
     <code>
 initializeGrid
 </code>
     它接受定义的选项对象
    的
      尺寸
    </强>
    ，
    的
      网格内容css
    </强>
     网格的锁定和解锁部分的指标然后是
    的
      网格ID数组
    </强>
     没有要调整大小的哈希值。如果没有对象存在，那么该函数初始化它自己的这个对象的版本，并假设在那个时刻屏幕上只有一个网格来调整大小。
  
  
    这将根据整个窗口大小的百分比计算出高度，然后根据该高度调整网格高度，因此默认情况下网格将占据可用屏幕高度的55％。重要的是不提供初始
     <code>
 height
 </code>
     因为这将覆盖上面概述的高度调整机制。
  
  
    如果您需要考虑其他问题，这显然可以根据您的需要进行修改
     <code>
 elements
 </code>
     在屏幕内。
  
</DIV>