candy-data-matrix v0.1.0

CandyDataMatrix

适用于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 对应左上角第一格的位置，可用于显示设置按钮之类的内容。

配置项

注意事项

1. 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代表元数据。

2. 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用于表示两者相关的时候所需要的元数据

3. 数据返回的格式为

   {
     row: rowData.metaData,
     column: columnData.metaData,
     mapData: matrixMapData.metaData : null
   }