在 Angular 4 中为 ngx-datatable 设置固定高度

Question

我在 angular 4 应用程序中使用 swimlane/ngx-datatable 设置了 table。 table 使用属性 scrollbarV 因为它是必需的。我想完全按照他们提供的 example 做，并为带有滚动条的 table 设置一个 固定高度 。在附加的源代码中，（对我而言）不清楚他们是如何设置 table 高度的。所以我的问题是，整个table set/defined的高度到底是多少？

示例来源：

import { Component } from '@angular/core';
import {MockServerResultsService} from "./mock-server-results-service";
import {PagedData} from "./model/paged-data";
import {CorporateEmployee} from "./model/corporate-employee";
import {Page} from "./model/page";

@Component({
  selector: 'virtual-paging-demo',
  providers: [
      MockServerResultsService
  ],
  template: `
<div>
  <h3>
    Virtual Server-side Paging
    <small>
      <a href="https://github.com/swimlane/ngx-datatable/blob/master/demo/paging/paging-virtual.component.ts" target="_blank">
        Source
      </a>
    </small>
  </h3>
  <ngx-datatable
    class="material"
    [rows]="rows"
    [columns]="[{name:'Name'},{name:'Gender'},{name:'Company'}]"
    [columnMode]="'force'"
    [headerHeight]="50"
    [scrollbarV]="true"
    [footerHeight]="50"
    [rowHeight]="50"
    [externalPaging]="true"
    [count]="page.totalElements"
    [offset]="page.pageNumber"
    (page)='setPage($event)'>
  </ngx-datatable>
</div>
  `
})
export class VirtualPagingComponent {

  page = new Page();
  rows = new Array<CorporateEmployee>();
  cache: any = {};

  constructor(private serverResultsService: MockServerResultsService) {
    this.page.pageNumber = 0;
  }

  /**
   * Populate the table with new data based on the page number
   * @param page The page to select
   */
  setPage(pageInfo) {
    this.page.pageNumber = pageInfo.offset;
    this.page.size = pageInfo.pageSize;

    // cache results
    // if(this.cache[this.page.pageNumber]) return;
    this.serverResultsService.getResults(this.page).subscribe(pagedData => {
      this.page = pagedData.page;

  // calc start
  const start = this.page.pageNumber * this.page.size;

  // copy rows
  const rows = [...this.rows];

  // insert rows into new position
  rows.splice(start, 0, ...pagedData.data);

  // set rows to our new rows
  this.rows = rows;

  // add flag for results
  this.cache[this.page.pageNumber] = true;
});
  }

}

Answer 1

与您的 link (http://swimlane.github.io/ngx-datatable/#virtual-paging) 中示例相关的来源具有误导性。

在该示例中有一些东西掩盖了高度的计算方式：

样式实际上是在演示应用程序的 CSS 中设置的。
演示应用程序中的高度使用 vh 单位，与视口成比例。垂直调整示例的大小 window 会自动导致示例的高度发生相应的变化。
尽管可以设置列宽和行高等其他参数，但文档中没有 public 设置整个高度的方法 table。

设置固定高度的最常见方法是使用 style 属性或样式表规则。使用 style 属性，您可以将 style="height: 300px;" 之类的内容添加到 ngx-datatable 定义中。或者，您可以设置针对 .ngx-datatable 的规则，或者做一些更精细的事情，例如添加 id 属性并改为针对该属性，然后添加样式来设置高度。

样式属性应用于您的代码段时可能如下所示。

<ngx-datatable
    class="material"
    style="height: 300px;"
    [rows]="rows"
    [columns]="[{name:'Name'},{name:'Gender'},{name:'Company'}]"
    [columnMode]="'force'"
    [headerHeight]="50"
    [scrollbarV]="true"
    [footerHeight]="50"
    [rowHeight]="50"
    [externalPaging]="true"
    [count]="page.totalElements"
    [offset]="page.pageNumber"
    (page)='setPage($event)'>
</ngx-datatable>

Answer 2

这对我有用

<ngx-datatable
        #table
        class="material common-m-tbl"
        [columns]="columnList"
        [columnMode]="ColumnMode.force"
        [virtualization]="false"
        [headerHeight]="50"
        [footerHeight]="footerHeight"
        rowHeight="36"
        [scrollbarV]="true"
        [rows]="rows"
        [messages]="messages"
        [externalPaging]="true"
        [count]="page.totalElements"
        [offset]="page.pageNumber"
        [limit]="page.size"
        (page)="setPage($event)"
        [selectionType]="SelectionType.single"
        (sort)="onSort($event)"
        (activate)="onActivate($event)"
        [messages]="messages"
        style="height: 530px;"
      >

Answer 3

我知道有点晚了，但如果有人感兴趣，请指向您的 ngx-datatable 组件并从数据表中减去顶部组件的高度

calc(100vh - 160px)

在 Angular 4 中为 ngx-datatable 设置固定高度

Set fixed height for ngx-datatable in Angular 4

ngx-datatable

angular