@firestitch /网格
一个用于Angular 18的虚拟滚动网格，它可以显示枢轴(行级别、列级别和
值)或源自己的行（详细信息），对每个列标头进行排序和筛选，
可扩展的组，总行和列，以及停靠在它旁边的布局面板。网格从不
保存一个数据集：它请求 GridSource 对于屏幕上的行，作为查看器读取更多
滚动和打开组。
安装
npm install @firestitch/grid
像每个firekit包一样，网格没有声明对等依赖项。应用程序安装 网格本身导入的包：
| 包 | 版本 | 用于 |
|---|---|---|
@angular/core， common， forms， cdk， material | ^18.2.7 | |
rxjs | ^7.5.6 | |
@firestitch/chip | ^18.0.70 | 布局面板的现场芯片 |
@firestitch/menu | ^18.0.5 | 标题和布局面板菜单 |
@firestitch/resize | ^18.0.3 | 布局面板的调整边缘大小 |
@firestitch/style | ^18.0.70 | 这个 --fs-* 网格绘制时使用的颜色符号 |
@firestitch/datepicker | ^18.0.29 | 日期列过滤器 |
@firestitch/form | ^18.0.41 | 过滤面板验证 |
@firestitch/popover | ^18.1.0 | 过滤器面板和截断的单元格（面板模式，在18.1.0中添加） |
一个应用程序必须安装它们中的每一个， @firestitch/datepicker， @firestitch/form 和
@firestitch/popover 包括：应用程序不能建立没有他们，和 @firestitch/popover
必须是18.1.0或更高版本。 @firestitch/datepicker 和 @firestitch/form 进口
@firestitch/clear， common， date， dialog， drawer， message 和 scroll-picker,
@firestitch/drawer 需要 @firestitch/core 和 @firestitch/store。一个已经使用的应用程序
Fs-datepicker有。
使用
fs-grid 是一个独立的组件。
import { HttpClient } from '@angular/common/http';
import { Component, inject, signal } from '@angular/core';
import {
FsGridComponent,
GridAggregation,
GridGranularity,
GridLayout,
GridResult,
GridSource,
} from '@firestitch/grid';
@Component({
selector: 'app-sales-grid',
standalone: true,
imports: [FsGridComponent],
template: '<fs-grid [source]="source" [(layout)]="layout"></fs-grid>',
})
export class SalesGridComponent {
public layout = signal<GridLayout>({
rows: [{ field: 'region' }],
columns: [{ field: 'orderedOn', granularity: GridGranularity.Month }],
values: [{ field: 'revenue', aggregation: GridAggregation.Sum }],
totalRow: true,
});
public source: GridSource = {
read: (request, params) => this._http.post<GridResult>('/sales/grid', { request, params }),
};
private _http = inject(HttpClient);
}
输入
| 输入 | 类型 | |
|---|---|---|
source | GridSource | 必需的。这是网格获取数据的唯一途径。 |
[(layout)] | GridLayout | 必需的。排序，过滤，标题拖拽和布局面板写它回来，规范。 |
controls | GridControls | 观众可能会改变什么(sort， expand， layout， filter): enabled， disabled 或者 hidden。启用了遗漏的控件。 |
params | GridParams | 主机自己的值，每次读取都携带。网格从不向内看。 |
[(expansion)] | GridExpansion | 哪些组是开放的：每个组都是开放的 depth，然后观众自己的打开和关闭。 |
[(panel)] | GridPanel | null | 面板停靠在电网旁边； null 当没有人开门的时候。 |
formatter | GridFormatter | 写入网格显示的每个值，因此屏幕和主机自己的文件读取相同。网格的en-US格式化程序在缺席时使用。 |
clearedFilter | { field, granularity } | null | 当谷物参数驱动发生变化时，主机取出的日期过滤器；状态行将其命名。 |
源
export interface GridSource {
read(request: GridRequest, params: GridParams): Observable<GridResult>;
}
- 每次发射都是答案的一部分，完成意味着完成。
- 阅读是冷的，取消订阅会中止阅读。网格取消不再需要的读取。
request.rows命名所需的行范围，request.columns列范围，和request.fields还请求源的字段和限制。- 错误到达时为
Error带有可读信息；网格显示了重试。
布局助手
canonicalGridLayout(layout)将布局作为主机存储并进行比较：默认值为 left out和key的顺序是一样的，所以两个相同的布局有相同的JSON。normalizeGridLayout(layout)可原谅的未知键和没有字段的条目是什么 每一张单子和每一面旗帜都会回来。
风格
网格根据自己的组件样式进行绘制 --fs-* 令牌的 @firestitch/style 和
Angular Material主题。没有什么要包括的：包裹 styles.scss 是空的
只有这样构建才能像其他Firestitch包一样布局。
开发
npm run serve # the playground, with every example
npm run check # the engine, contract and client checks
npm run package # the checks, then package/ with this README and the LICENSE
许可证
麻省理工学院。看到 许可证.