小编kra*_*uzi的帖子

一些介绍:

我们目前正在开发一个基于Angular2的应用程序,它非常重要.为了显示这些数据,我们决定尝试使用ngx-datatables.需要大量组件来显示网格中的数据.我们添加了一个自定义页脚模板以及一种显示使用<select>元素的页面大小选择器的自定义标题.

标记行的数量增长了很多,因此我们希望将<ngx-datatable>带有页眉和页脚的定义移动到单独的网格组件中.现在,我们希望通过允许使用网格的开发人员简单地定义标记中的列来重用该组件,以便在列内容方面具有完全的灵活性.

我们的想法是拥有一个常用的网格组件,它只要求数据作为输入并呈现它.网格中的典型功能(服务器端排序和分页)应仅在网格组件中存在一次.使用网格组件的组件应该只提供网格组件所订阅的数据,就是这样.

我们现在所拥有的:

在.ts文件中定义的带有选择器'grid'的公共网格组件

<div class="gridheader">
    ... page size selector and other elements ...
</div>
<ngx-datatable
  class="material"
  [columnMode]="'force'"
  [rows]="data"
  [headerHeight]="'auto'"
  [footerHeight]="'auto'"
  [rowHeight]="'auto'"
  [externalPaging]="true"
  [externalSorting]="true"
  [count]="totalElements"
  [offset]="currentPageNumber"
  [limit]="pageSize"
  [loadingIndicator]="isLoading"
  (page)='loadPage($event)'
  (sort)="onSort($event)">

  <ng-content>
  </ng-content>

  <ngx-datatable-footer>
    <ng-template 
      ngx-datatable-footer-template 
      let-rowCount="rowCount"
      let-pageSize="pageSize"
      let-selectedCount="selectedCount"
      let-curPage="curPage"
      let-offset="offset">
      <div style="padding: 5px 10px">
        <div>
          <strong>Summary</strong>: Gender: Female
        </div>
        <hr style="width:100%" />
        <div>
          Rows: {{rowCount}} |
          Size: {{pageSize}} |
          Current: {{curPage}} |
          Offset: {{offset}}
        </div>
      </div>
    </ng-template>
  </ngx-datatable-footer>

</ngx-datatable>

具体网格

<grid (onFetchDataRequired)="fetchDataRequired($event)"> …