@agility-workbench/angular-grid (中文(简体) )
角绑定 @agility-workbench/grid —— 说
高性能数据网。 提供独立的 <awb-grid> 组件和再出口
完整核心 API,这样您就可以从一个地方导入所有您需要的东西 。 支持角20.3
在20.19+节点上通过22个(基于区和无区应用).
每次发布都在文件网站上 更改日志。 。 。 .
安装
npm install @agility-workbench/angular-grid
@agility-workbench/grid 以依赖方式自动安装; @angular/core (20.3 -- 22个,
每个主机与包装的文物核对) 是一个同行依赖 您的应用程序提供的.
快开始
import { Component } from "@angular/core";
import {
AwbGrid,
ColumnType,
type IGridAPI,
type NgColDef,
} from "@agility-workbench/angular-grid";
@Component({
selector: "app-example",
standalone: true,
imports: [AwbGrid],
template: `
<div style="height: 400px">
<awb-grid
[rowData]="rowData"
[columnDefs]="columnDefs"
rowIdKey="id"
[rowNumbers]="true"
(gridReady)="onGridReady($event)"
/>
</div>
`,
})
export class ExampleComponent {
columnDefs: NgColDef[] = [
{ key: "name", label: "Name", type: ColumnType.STRING },
{ key: "price", label: "Price", type: ColumnType.NUMBER },
];
rowData = [
{ id: "1", name: "Widget", price: 9.99 },
{ id: "2", name: "Gadget", price: 14.5 },
];
onGridReady(api: IGridAPI): void {
// Imperative API: sorting, selection, editing, exports, view state, …
}
}
网格填充主机元素——给 <awb-grid> (或作一卷)一高. 构成部分是:
也可通过模板参考: <awb-grid #grid="awbGrid" /> → grid.api。 。 。 .
[quickFilter] 是一个实时输入——在每个可见的栏目进行全球搜索。 它过滤行由
默认,或 behavior: "find" 将每行放在原位上,突出显示匹配单元格
一个匹配计数器, Enter 编号 : Shift+Enter 脚步,和 showBehaviorToggle 以允许最终用户
切换 (quickFilterFindChanged) 输出报告匹配数和活动匹配数。 见
用于匹配模式和找到的可搜索内容的核心 README.
网格选项是信号输入,包括枢轴模式和工作表: [pivotMode] 编号 :
[pivotColumns] 被活化(通过必需的 API 连接,所以指定的值在 gridReady
而不为覆写, [pivotColumnMoveMode] 是现场直播, [pivotResultColumnDef] 编号 :
[maxPivotColumns] 编号 : [pivotNoValuesMessage] 编号 : [pivotEmptyMessage] 是创建时间,以及
[sheets] 使页脚标签条具有与应用程序自有的持久性合同相同的
[savedViews]中,请查看核心 README 中枢模式和工作表.
大多数投入是现场的。 网格只在创建时读取的rowHeight, (中文(简体) ), getRowId, (中文(简体) ),
rowIdKey, (中文(简体) ), rowModelType, (中文(简体) ), defaultColDef, (中文(简体) ), groupColumnDef, (中文(简体) ), pivotResultColumnDef, (中文(简体) ),
initialSort- 核心的 - 核心的 - 核心的 CREATION_ONLY_OPTION_KEYS,减去桥接输入)
变化; 开发模式isDevMode()网格记录一个 console.warn 命名输入时
发生。 重新创建 <awb-grid> (例如,在 @if键 @for适用
这样的变化。 文献站点的Angular页有完整的活Vs-创建表.
产出: (gridReady), (中文(简体) ), (cellClicked), (中文(简体) ), (rowClicked), (中文(简体) ), (cellDoubleClicked), (中文(简体) ),
(rowDoubleClicked), (中文(简体) ), (cellValueChanged), (中文(简体) ), (selectionChanged), (中文(简体) ), (sortChanged), (中文(简体) ),
(filterChanged), (中文(简体) ), (quickFilterFindChanged), (中文(简体) ), (historyChanged), (中文(简体) ), (columnsChanged), (中文(简体) ),
(paginationChanged) 财务报告和审定财务报表 (gridError) (核心内容) error 事件——没有 (error),哪个角
还将作为原住DOM的听众在主机上捆绑起来. (columnsChanged) 财务报告和审定财务报表 (sortChanged)
携带 source: "user" | "api"; 持续列状态 "user" 因此,恢复它 从来没有回声
回来 还有什么: api.on(eventName, handler)。 。 。 .
样式
无所事事——网格在附着时会发出自己的样式表,每文档一次,以及 一次每个阴影根 对于一个内部的网格.
严格的内容安全政策 style-src 'unsafe-inline',通过
styleNonce 输入(page-global,因此每个网格使用相同的值). 装入样式表
相反,通过 angular.json 样式或全局导入
@agility-workbench/grid/styles.css 设置 suppressStyleInjection 每个网格,所以两个
副本不会在级联中战斗.
网格中的角构件
列定义接受角构件类别,只要核心接受类构件
cellRenderer, (中文(简体) ), cellEditor, (中文(简体) ), tooltipComponent, (中文(简体) ), headerTooltip, (中文(简体) ), actionFrameComponent,则
设置过滤器组件 filterParams和页眉组件 headerComponent (标题)
内容)和 headerCellComponent (整个信头单元格;合同 IHeaderNgComp) (中文(简体) ). 相同档次
已调整为 [defaultColDef], (中文(简体) ), [groupColumnDef],以及 [pivotResultColumnDef]A. 构成部分
通过命名的输入接收其参数 params 或通过执行
awbInit(params) (加上可选) awbRefresh(params):
import { Component, input } from "@angular/core";
import type { CellRendererParams } from "@agility-workbench/angular-grid";
@Component({
standalone: true,
template: `<strong>{{ params()?.value }}</strong>`,
})
export class BoldCell {
readonly params = input<CellRendererParams>();
}
const columnDefs: NgColDef[] = [{ key: "name", label: "Name", cellRenderer: BoldCell }];
执行单元格编辑器 ICellEditorNgComp (单位:千美元)getValue() 加可选 focus, (中文(简体) ), isParsed, (中文(简体) ),
isCancelBeforeStart) (中文(简体) ). 菜单项从 getColumnMenuItems 编号 : bodyContextMenu 编号 :
multiColumnMenu 可使用 TemplateRef他们的 left编号 :right 槽数(NgMenuItem) (中文(简体) ).