时间戳

首页 > 解决方案 > 带有行分组的ngx数据表垂直滚动

angular - 带有行分组的ngx数据表垂直滚动

问题描述

我正在使用 Angular 2 ngx-datatable。当我将垂直滚动设置为true并初始化groupRowsBy参数时，页面折叠。我有很多数据，所以我需要这个虚拟卷轴。

这是我的代码：

   <ngx-datatable
    class='material'
    [rows]='rows'
    [columnMode]="'force'"
    [groupRowsBy]="'name'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="50"
    [scrollbarV]="true">
    <ngx-datatable-group-header [rowHeight]="50" #myGroupHeader 
    (toggle)="onDetailToggle($event)">
      <ng-template let-group="group" let-expanded="expanded"
       ngx-datatable-group-header-template>
        <div style="padding-left:5px;">
          <a
            href="#"
            [class.datatable-icon-right]="!expanded"
            [class.datatable-icon-down]="expanded"
            title="Expand/Collapse Group"
            (click)="toggleExpandGroup(group)">
          </a>                          
        </div>
      </ng-template>
    </ngx-datatable-group-header>
    <ngx-datatable-column name="Name">
    </ngx-datatable-column>
    <ngx-datatable-column name="Gender">
    </ngx-datatable-column>
  </ngx-datatable>
</div>

标签： angularngx-datatable

解决方案

是的，这是一个已知的错误。所以今天我发现让它工作的唯一方法是将其设置scrollbarV为false，然后自己在css中实现一个：

:host {
    --datatable-body-height: 100%;

    ::ng-deep {

        .datatable-body {                      
          height: var(--datatable-body-height) !important;
          overflow-y: auto;
        }
     }
}

请注意，角度组件具有封装性，因此要么在父组件元数据中将其设置为 none，要么使用:host并::ng-deep访问 ngx-datatable 的类。

我还为身体高度使用了一个变量，因为将[scrollbarV]属性设置为 false 时身体高度自动设置为自动（在我的情况下，我希望表格填充整个外部 div 并做出响应，并且使用高度自动将其调整为表的内容。）该计算部分是在父组件 .ts 文件中完成的。

推荐阅读