Nimble Polyglot Microcosm

    candy-data-matrix
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    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>

    example1

    用户需要传入 rowDatacolumnData 对应的数据来定义第一类和第一行对应的数据,同时设定 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

    注意事项

    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
      }

    Keywords

    none

    Install

    npm i candy-data-matrix

    DownloadsWeekly Downloads

    3

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    64.3 kB

    Total Files

    17

    Last publish

    Collaborators

    • ji.chen