适用于Angular项目,构建矩阵显示。
安装方式
npm i candy-data-matrix
在对应module.ts中:
import {CandyDataMatrixModule} from "candy-data-matrix";
@NgModule({
imports: [
...
CandyDataMatrixModule
]
})
在html中:
<candy-data-matrix #dataMatrix
[rowData]="rowDataList" [columnData]="columnDataList"
[matrixMapData]="matrixMappingData"
[buttonContentTemplate]="btnContent" [settingsContentTemplate]="dataSelectorBtn"
(onMatrixDataSelected)="showRuleDetailModal($event)"
></candy-data-matrix>
用户需要传入 rowData
和 columnData
对应的数据来定义第一类和第一行对应的数据,同时设定 matrixMapData
来定义行列两两相交时候的关系数据
buttonContentTemplate
对应每组数据相交的时候按钮显示的内容
settingsContentTemplate
对应左上角第一格的位置,可用于显示设置按钮之类的内容。
参数 | 说明 | 类型 | 默认值 | 例子 |
---|---|---|---|---|
[rowData] | 行对应的数据 | MatrixData[] | [] | 详情请见注意项1 |
[columnData] | 列对应的数据 | MatrixData[] | [] | 详情请见注意项1 |
[matrixMapData] | 行列相交的对象对应的数据 | MatrixMapData[] | [] | 详情请见注意项2 |
[buttonContentTemplate] | 行列相交的对象按钮显示的内容 | TemplateRef<{ $implicit: data }> |
null | |
[settingsContentTemplate] | 行列相交的对象按钮显示的内容 | TemplateRef<void> |
null | |
(onMatrixDataSelected) | 行列相交的对象按钮点击的时候返回的数据 | EventEmitter<any> |
null | 详情请见注意项3 |
-
MatrixData
类型:export class MatrixData { id: number; name: string; metaData: any; constructor(data: any, id: any, name: string) { this.id = id; this.name = name; this.metaData = data; } }
其中id用于限定数据唯一性,name用于矩阵中的显示内容,metaData代表元数据。
-
MatrixMapData
类型:export class MatrixMapData { rowId: number; columnId: number; metaData: any; constructor(data: any, rowId: any, columnId: number) { this.rowId = rowId; this.columnId = columnId; this.metaData = data; } }
MatrixMapData
数据用于将行列数据关联起来,rowId
对应行数据中的id,columnId
对应列数据中的id;metaData
用于表示两者相关的时候所需要的元数据 -
数据返回的格式为
{ row: rowData.metaData, column: columnData.metaData, mapData: matrixMapData.metaData : null }