ng-calendar-matrix

CalendarMatrix

适用于Angular项目的日历矩阵，支持复合列表和自定义表格内容。

使用样例

安装方式

npm i --save ng-calendar-matrix

在对应module.ts中：

import {CalendarMatrixModule} from "ng-calendar-matrix";

@NgModule({
  imports: [
    ...
    CalendarMatrixModule
  ]
})

在html中：

<lib-calendar-matrix [headerData]="headerData" [cotentData]="cotentData"></lib-calendar-matrix>

注意事项

1. [headerData] 类型为headerItem[]：

   export class headerItem {
     label: string; // 所在列的表头默认显示内容，必填
     metadata?: any; // 元数据
     class?: any[]; // 所在单元格的class，string[]
     nzWidth?: string; // 所在列的列宽，只在<th></th>起作用
   }

2. [feildData] 类型为fieldItem[]：

   export class fieldItem {
     label: string; // key所在列的表头，必填
     feild: string; // key，必填
     class?: any[]; // 在th，默认用thClass，没有则用class；在td，默认用tdClass，没有则用class；
     thClass?: any[]; // th class
     tdClass?: any[]; // td class
     nzWidth?: string; // 所在列的列宽，只在<th></th>起作用
   }

3. [cotentData] 类型为dataItem[]：

   export class dataItem {
     label: string; // content默认显示内容，必填
     rowSpan: number; // 需要跨的最大行数，必填
     contentList: contentItem[][]; // 复合列表子数组，必填，可为空数组
     metadata?: any; // 元数据
     class?: any[]; // 所在单元格的class，string[]
   }
   
   export class contentItem {
     label: string; // content默认显示内容，必填
     metadata?: any; // 元数据
     class?: any[]; // 所在单元格的class，string[]
   }

4. 当 [firstTemplate] 不传时，默认显示 [defaultFirstTemplate]：

   <ng-template #defaultFirstTemplate>
       <div class="padding-container">
           <span style="display: flex;justify-content: center;align-items: center;">
               姓名
               <ng-container *ngIf="feildList && feildList.length && option && option.feildDataExpand">
                   <i nz-icon *ngIf="!isShowExtraTh && feildList && feildList.length" class="hoverClass" (click)="toggleTh()" nzType="right" nzTheme="outline"></i>
                   <i nz-icon *ngIf="isShowExtraTh && feildList && feildList.length" class="hoverClass" (click)="toggleTh()" nzType="left" nzTheme="outline"></i>
               </ng-container>
           </span>
       </div>
   </ng-template>

5. 当 [feildHeaderTemplate] 不传时，默认显示 [defaultFeildHeaderTemplate] , 因此fieldItem内label字段必填：

   <ng-template #defaultFeildHeaderTemplate let-obj>
       {{obj.item ? obj.item.label : null}}
   </ng-template>

6. 当 [headerTemplate] 不传时，默认显示 [defaultHeaderTemplate] , 因此headerItem内label字段必填：

   <ng-template #defaultHeaderTemplate let-obj>
       {{obj.item ? obj.item.label : null}}
   </ng-template>

7. 当 [slotTemplate] 不传时，默认显示 [defaultSlotTemplate] , 特指表格第一列，因此dataItem内label字段必填：

   <ng-template #defaultSlotTemplate let-obj>
       {{obj.slot ? obj.slot.label : null}}
   </ng-template>

8. 当 [feildContentTemplate] 不传时，默认显示 [defaultFeildContentTemplate] , 因此fieldItem内label字段和feild字段必填，且feild代表的key在dataItem.metadata中存在，否则显示null：

   <ng-template #defaultFeildContentTemplate let-obj>
       {{obj['slot'] && obj['slot']['metadata'] ? obj['slot']['metadata'][obj['key']] : null}}
   </ng-template>

9. 当 [contentTemplate] 不传时，默认显示 [defaultContentTemplate] , 因此contentItem内label字段必填：

   <ng-template #defaultContentTemplate let-obj>
       {{obj.shift ? obj.shift.label : null}}
   </ng-template>

10. 当 [headerData] length不为0 且 [cotentData] length也不为0时，dataItem.contentList.length需等于headerData.length（dataItem.contentList.length=0除外），否则控制台扔出报错；

11. 当 [feildData] length不为0时，显示slot外的其他固定列，当同时设置option.feildDataExpand = true时，会显示扩展图标，点击扩展图标展开[feildData] 固定列，再次点击则隐藏；

12. [option] 配置项：

    export class option {
      firstThWidth: string; // 第一列列宽
      size: string; // 表格大小，分为'small', 'default', 'large'3种，默认为'default'
      thAlign: string;
      tdAlign: string;
      cdkDrop: boolean; // 是否接收拖拽，若为true，则表格为接收区
      bordered: boolean; // 是否有边框
      showPagination: boolean; // 是否显示分页
      frontPagination: boolean; // 是否前端分页
      pageNumber: number; // 当前页数
      pageSize: number; // 每页显示数量
      feildDataExpand: boolean; // feildData是否可展开收缩
      scrollOption: {y: string, x: string}; // 滚动scrollOption
      firstThClass: string[]; // th第一格的样式
      total: number; // 总数据量
      isQueryLoad: boolean; // 是否远程加载
    }

    
    



## 自定义内容举例

以 `[headerTemplate]` 为例

在html中：

​```html
<lib-calendar-matrix [headerData]="headerData" [cotentData]="cotentData" [headerTemplate]="headerTemplate"></lib-calendar-matrix>

<ng-template #headerTemplate let-obj>
    {{obj.item ? obj.item.label : null}}{{'(周' + weekDayMap[dateWeekdayList[obj.headerIndex]] + ')'}}
</ng-template>

其余template如上类似；

自定义部位图解

firstTemplate	feildHeaderTemplate	headerTemplate
slotTemplate	feildContentTemplate	contentTemplate
slotTemplate	feildContentTemplate	contentTemplate
slotTemplate	feildContentTemplate	contentTemplate

当不存在 [feildData] 时，feildHeaderTemplate及feildContentTemplate所在列消失；

配置项

参数	说明	类型	默认值	例子
[loading]	是否加载中	boolean	false
[headerData]	表头数据	headerItem[]
[feildData]	除slot外固定列数据	fieldItem[]
[cotentData]	表格主体数据	dataItem[]
[firstTemplate]	自定义第一列第一格内容	TemplateRef<>	defaultFirstTemplate
[feildHeaderTemplate]	自定义除slot外的固定列表头内容	TemplateRef<{$implicit: {item: f, feildIndex: feildIndex}>	defaultFeildHeaderTemplate
[headerTemplate]	自定义表头内容	TemplateRef<{ $implicit: {item: h, headerIndex: headerIndex} }>	defaultHeaderTemplate
[slotTemplate]	自定义纵轴（表格第一列）内容	TemplateRef<{ $implicit: {slot: slot, slotIndex: slotIndex, rowIndex: rowIndex} }>	defaultSlotTemplate
[feildContentTemplate]	自定义除slot外的固定列内容	TemplateRef<{ $implicit: {key: f.feild, slot: slot, feildIndex: feildIndex, slotIndex: slotIndex, rowIndex: rowIndex} }>	defaultFeildContentTemplate
[contentTemplate]	自定义表格主体内容（除表头和slot外）	TemplateRef<{ $implicit: {shift: slot['contentList'][headerIndex][rowIndex], headerIndex: headerIndex, rowIndex: rowIndex, slotIndex: slotIndex} }>	defaultContentTemplate
[option]	{'cdkDrop': 是否接受cdkDrag对象, 'thAlign': th列内容的对齐方式, 'tdAlign': td列内容的对齐方式,'scrollOption':表格虚拟滚动设置宽高}	{'cdkDrop': boolean, size: string, 'thAlign': string<'left' | 'center' | 'right'>, 'tdAlign': string<'left' | 'center' | 'right'>,'scrollOption':{x:string, y:string}, 'bordered': boolean,showPagination: boolean,frontPagination: boolean,pageNumber: number,pageSize: number,'feildDataExpand': boolean,firstThWidth: string;firstThClass: string[], total: number, isQueryLoad: boolean}	{'cdkDrop':false,size: 'default','thAlign':'center', 'tdAlign':'center','scrollOption':{y:'800px'},'bordered': false,showPagination: false,frontPagination: false,pageNumber: number,pageSize: 10,'feildDataExpand': false,firstThWidth: '200px',firstThWidth: string;firstThClass: ['class-name'], total: 20, isQueryLoad: false}
(onRightClick)	右键表格时触发的事件	EventEmitter
(onDropListDropped)	当cdkDrag对象dropped时触发的事件	EventEmitter
(onPageIndexChanged)	当前页码发生变化时触发的事件	EventEmitter
(onQueryParamsChanged)	当服务端分页、筛选、排序时，用于获得参数，具体见示例	EventEmitter