Browsed by
分类:数据表

Sort header

Sort header

[toc] 概述 OVERVIEW matSort和mat-sort-header分别用于添加排序状态和展示表格数据 The matSort and mat-sort-header are used, respectively, to add sorting state and display to tabular data. 在表头中添加排序 Adding sort to table headers 在每个表头中增加<mat-sort-header>组件并提供一个定义的id,可以为一组表头增加排序行为与样式。这些表头必须包含在有matSort指令的父元素中,当用户在表头中触发排序时,将产生一个matSortChange事件。 To add sorting behavior and styling to a set of table headers, add the <mat-sort-header> component to each header and provide an id that will identify it. These headers should be contained within a parent element with the matSort directive, which will emit an matSortChange event when the user triggers sorting on the header. 用户可以…

阅读全文 Read More

Paginator

Paginator

[toc] 概述 OVERVIEW <mat-paginator>提供了分页信息的导航,通常与表格一同使用。 <mat-paginator> provides navigation for paged information, typically used with a table. 基本用法 Basic use 每个分页器实例都需要如下内容: 每页的数据数量(默认为50) 需要的分页的总数据量 Each paginator instance requires: The number of items per page (default set to 50) The total number of items being paged 当前页数的索引默认为0,但可以通过设置pageIndex来指定。 The current page index defaults to 0, but can be explicitly set via pageIndex. 当用户与分页器交互时,会触发PageEvent事件,可以用来更新任何关联的数据视图。 When the user interacts with the paginator, a PageEvent will be fired that can be used to update any associated data view. 页数选项 Page size options 分页器展示了一个单页数量的下拉框,供用户选择。下拉框…

阅读全文 Read More

Table

Table

[toc] 概述 OVERVIEW mat-table提供了一个用于展示数据行信息的Material Design样式的数据表格。 The mat-table provides a Material Design styled data-table that can be used to display rows of data. 表格模板由两部分组成:列定义和行定义。每个列定义包含列头与单元格的模板。每个行定义包含用于此行并绑定到行元素的各个列。 The table’s template consists of two parts: column definitions and row definitions. Each column definition contains templates for that column’s header and content cells. Each row definition captures the columns used for that row and any bindings applied to the row element. DataSource属性通过传递Observable流,提供了表格需要渲染的数据。每次传递都包含所有需要展示的数据。监听此流的表格会渲染每一行。对于展示数据的任何操作(例如排序、分页、过滤)都需要包含在DataSource中,最后传递表示任何变更的新的数据集合。 A DataSource pr…

阅读全文 Read More