Question

我在可滚动div中有一个网格，在页面的栅格下方有4个按钮（剃刀视图）。我写了一些媒体查询来设置不同分辨率的div的高度。基于此，页面上显示的行数也会发生变化。现在，当用户滚动网格时，需要冻结标题。我没有设置网格的高度基本上我不想设置，因为css媒体查询会处理它因为我现在在div中有一个网格。

要冻结行，需要设置AllowScrolling（true），网格高度＆amp; FrozenColumns（2）.FrozenRows（0）但是由于网格的响应性，冻结的行/列不能正常工作。我们有替代方案吗？我希望，因为我在div中有一个网格（高度在css中为任何分辨率设置）我们可以根据屏幕分辨率设置网格的高度吗？

<div class="row scrollDiv" style="overflow-y: auto;"> 
@(Html.EJ().Grid<DatabaseColumnInfo>("TableColumnGrid")
          .Datasource(Model)
          .AllowSorting()
          .IsResponsive(true)
          .AllowResizing(true)
          //.AllowScrolling(true)            
          //.ScrollSettings(col =>
          //{
          //    col.Height(300);
          //    col.FrozenColumns(2).FrozenRows(0);
          //})
          .ClientSideEvents(evt => evt.RowSelected("onRowSelected"))
          .Columns(col =>
          {
              col.Field("Name").HeaderText("Column name").Width(300).Add();
              col.Field("DataType").HeaderText("Type").Add();
          }))
</div>

CSS：

@media (min-width: 1024px) and (max-width: 1366px) { .scrollDiv { height: 368px; } }
@media (min-width: 1367px) and (max-width: 1920px) { .scrollDiv { height: 720px; } }

Answer 1

要使网格高度适应所需的分辨率，请将网格的scrollSettings属性中的宽度和高度设置为100％。有关详细信息，请参阅以下示例和代码示例。

示例：http://www.syncfusion.com/downloads/support/directtrac/202776/ze/Grid-1825010219.zip

'use strict';

(function() {
    let originalIterator = Array.prototype[Symbol.iterator];

    Object.defineProperty(
        Array.prototype, 
        Symbol.iterator, 
        {
            value: function* () {
                for (let x of originalIterator.call(this)) {
                    yield 2 * x;                
                }
            }
        }   
    )

})();

console.log([...[1, 3]]);

请参阅以下文档。

https://help.syncfusion.com/api/js/ejgrid#members:scrollsettings

可滚动div内的网格对syncfusion

1 个答案: