ng-zorro的工具类

技术支持：[email protected]
在线示例：https://zhtt.gitee.io/angular-demo/ng-zorro/#/list/table-tree02

友情链接

great-vue、 great-generator、 great-jsutils、 great-ngform、 great-zorroutils

功能介绍

1.布局工具类

1、实现头部、底部固定高度，中间自适应，头部与底部与可以自选其一或全部或不选。

2、也可以百分比布局三行，分别为头部、中间、底部指定占百分多少

2.表格树工具类

1、实现表格树节点的动态添加、删除、修改等功能。

2、同时也可以添加复选框，进行级联选中、取消选中效果。还可以获取到全选、半选状态的节点。

3、拖拽功能（greatTdDrag）

3.消息提醒工具类

1、检测表单变化后，提醒用户留下、直接离开、保存后再离开

4.开发中的工具类

1、……

敬请期待……

1、安装

npm i great-zorroutils --save

2、在自己module中添加CUSTOM_ELEMENTS_SCHEMA属性

@NgModule({
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})

3、在share.module.ts中，修改THIRDMODULES数组，添加ZorroTableUtilsModule

const THIRDMODULES = [
  ZorroTableUtilsModule,ZorroLayoutUtilsModule
];

4、在自己的组件中使用，将nz-table放到zorro-table-box中

4.2 属性

• heightOffset:高度偏移量，与表格兄弟节点所占的用的高度
• nzTotal:数据总条数

4.2 事件

• nzPageIndexChange：当索引页修改时的事件
• nzPageSizeChange：当每页条数改变时的事件
• setNzScrollHeight：调整表格滚动条高度的事件

<zorro-table-box
  (nzPageIndexChange)="nzPageIndexChange($event)"
  (nzPageSizeChange)="nzPageSizeChange($event)"
  (setNzScrollHeight)="setNzScrollHeight($event)"
  [nzTotal]=nzTotal
  [nzShowSizeChanger]=true
  [nzPageIndex]=nzPageIndex
  [heightOffset]="160"
>
  <nz-table
    #nzTable
    [nzData]="dataSet"
    [nzPageSize]=nzPageSize
    [nzScroll]="{ y: nzScrollHeight+'px' }"
    [nzShowPagination]="false"
  >
    <thead>
    <tr>
      <th nzWidth="150px">Name</th>
      <th nzWidth="150px">Age</th>
      <th>Address</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of nzTable.data">
      <td>{{data.name}}</td>
      <td>{{data.age}}</td>
      <td>{{data.address}}</td>
    </tr>
    </tbody>
  </nz-table>
</zorro-table-box>

5、修改组件的ts

  dataSet = [];
  nzTotal=0;
  nzPageIndex=1;
  nzPageSize=10;
  nzScrollHeight=200;

  ngOnInit(): void {
    for (let i = 0; i < 100; i++) {
      this.dataSet.push({
        name   : `Edward King ${i}`,
        age    : 32,
        address: `London, Park Lane no. ${i}`
      });
    }
    this.nzTotal=this.dataSet.length;
  }

  nzPageIndexChange($event){
    this.nzPageIndex=$event;
  }

  nzPageSizeChange($event){
    this.nzPageSize=$event;
  }

  setNzScrollHeight($event){
    this.nzScrollHeight=$event.h;
  }

布局工具类

这个例子是两行布局，第一行占60%，第二个行占40%；

.div1,.div2{
  padding: 10px;overflow: auto;
}
.div1{
  height: 60%;background: #ccddff;
}
.div2{
  height: 40%;background: #c7fe09;text-align: right;
}

<zorro-layout-box heightOffset="-10">
  <div class="div1">
    <h2>什么时候出现滚动条啊！！！</h2>
    <h2>什么时候出现滚动条啊！！！</h2>
    <h2>什么时候出现滚动条啊！！！</h2>
    <h2>什么时候出现滚动条啊！！！</h2>
    <h2>什么时候出现滚动条啊！！！</h2>
    <h2>什么时候出现滚动条啊！！！</h2>
    <h2>什么时候出现滚动条啊！！！</h2>
  </div>
  <div class="div2">
    <h2>什么时候出现滚动条啊！！！</h2>
    <h2>什么时候出现滚动条啊！！！</h2>
  </div>
</zorro-layout-box>

头部、尾部指定高度，中间自适应

 组件名称：

<zorro-layout-row></zorro-layout-row>

 属性： headerHeight：指定头部的高度

footerHeight：指定底部的高度

heightOffset：高度偏移量

本组件内，可指定三个div，分别用于显示头部、中间、底部的区域，需要分别指定class属性为: great-layout-header、great-layout-body、great-layout-footer。中间部分为必加区域，另外两个区域可以根据情况选择其中一个或两个。

<page-header [title]="''"></page-header>
<nz-card>
  <zorro-layout-row [headerHeight]="100" [footerHeight]="100" heightOffset="-10">
      <div class="great-layout-header" style="background:#ccddff;height: 100%;overflow: auto;">
        <h2>000</h2>
        <h2>000</h2>
        <h2>000</h2>
      </div>
      <div class="great-layout-body" style="background:#A2A2A2;height: 100%;overflow: auto;">
        <h2>111</h2>
        <h2>111</h2>
        <h2>111</h2>
      </div>
      <div class="great-layout-footer" style="background:#ccddff;height: 100%;overflow: auto;">
        <h2>222</h2>
        <h2>222</h2>
        <h2>222</h2>
        <h2>222</h2>
      </div>
  </zorro-layout-row>
</nz-card>

表格树节点动态管理

这个例子中实现了表格树节点动态添加、修改、删除、获取选中节点的功能

• ts代码，如果数据格式为：[{id:'id',children:[{}]}]，则只需new ZorroTableTreeUtil({data: this.data});

import { Component, OnInit } from '@angular/core';
import {ZorroTableTreeUtil} from "great-zorroutils";
@Component({
  selector: 'app-table-expand-children03',
  templateUrl: './expand-children03.component.html',
})
export class TableExpandChildren03Component implements OnInit {

  data=[
    {
      key: 1,
      name: 'John 01.',
      age: 60,
      address: 'New York No. 1 Lake Park',
      children: [
        {
          key: 11,
          name: 'John 01-01',
          age: 42,
          hasChildren: true,
          address: 'New York No. 2 Lake Park'
        },
        {
          key: 12,
          name: 'John 01-02',
          age: 30,
          address: 'New York No. 3 Lake Park'
        }
      ]
    },
    {
      key: 2,
      name: 'Joe 02',
      age: 32,
      address: 'Sidney No. 1 Lake Park'
    }
  ];

  treeUtils:ZorroTableTreeUtil<any>

  constructor() {
  }

  ngOnInit() {
    this.treeUtils=new ZorroTableTreeUtil({
      keys: {idKey: "key", pIdKey: "parentKey", pKey: "parent", childKey: "children"},
      data: this.data
    });
    this.treeUtils.init();
  }

/** 为id为11节点添加子节点 **/
  toAddNode() {
    let newNodes = [{
      key: Math.random(),
      name: 'John Brown' + Math.random(),
      age: Math.random(),
      parentKey: "11",
      address: 'New York No. 2 Lake Park',
    }] as Array<any>;
    this.treeUtils.toAddNode(newNodes);
  }

/** 为id为11节点进行更新 **/
  toUpdateNode() {
    let newNode = {
      key: 11,
      name: 'John Brown' + Math.random(),
      age: Math.random(),
      address: 'New York No. 2 Lake Park',
    };
    this.treeUtils.toUpdateNode(newNode);
  }

  toRemoveNode(item?: any) {
    if (item) {
      this.treeUtils.toRemoveNode(item);
    }
  }

  loadChildren(data: any) {
    let newNodes = [{
      key: Math.random(),
      name: 'John Brown' + Math.random(),
      age: Math.random(),
      address: 'New York No. 2 Lake Park',
    }];
    if (data && !data["children"]) {
      this.treeUtils.addNodes(data, newNodes);
    }
  }

  collapse(array: any[], data: any, $event: boolean): void {
    this.treeUtils.collapse(array, data, $event);
    this.loadChildren(data);
  }

}

• html代码

<nz-card>
  <h2>demo02</h2>
  <nz-button-group>
    <button nz-button nzType="primary" (click)="toAddNode()"><i nz-icon type="plus" theme="outline"></i>追加节点</button>
    <button nz-button nzType="primary" (click)="toUpdateNode()"><i nz-icon type="edit" theme="outline"></i>更新节点</button>
    <button nz-button nzType="primary" (click)="toRemoveNode()"><i nz-icon type="delete" theme="outline"></i>删除节点</button>
  </nz-button-group>
  <nz-table #nzTable [nzData]="treeUtils?.data">
    <thead>
    <tr>
      <th nzWidth="40%">Name</th>
      <th nzWidth="30%">Age</th>
      <th>Address</th>
    </tr>
    </thead>
    <tbody>
    <ng-template ngFor let-data [ngForOf]="nzTable.data">
      <ng-template ngFor let-item [ngForOf]="treeUtils?.expandDataCache[data[treeUtils?.keys.idKey]]">
        <tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
          <td [nzIndentSize]="item.level*20"
              [nzShowExpand]="!!item && (!!item[treeUtils?.keys.childKey] || item.hasChildren)"
              [(nzExpand)]="item.expand"
              (nzExpandChange)="collapse(treeUtils?.expandDataCache[data[treeUtils?.keys.idKey]],item,$event)">
            {{item.name}}
          </td>
          <td>{{item.age}}</td>
          <td>{{item.address}}</td>
          <td (click)="toRemoveNode(item)">删除</td>
        </tr>
      </ng-template>
    </ng-template>
    </tbody>
  </nz-table>
</nz-card>

为表格树添加复选框架

<td [nzIndentSize]="item.level*20"
              [nzShowExpand]="!!item && (!!item[treeUtils?.keys.childKey] || item.hasChildren)"
              [(nzExpand)]="item.expand"
              (nzExpandChange)="collapse(treeUtils?.expandDataCache[data[treeUtils?.keys.idKey]],item,$event)">
            <label nz-checkbox
                   [(nzChecked)]="item.checked"
                   [(nzIndeterminate)]="item.indeterminate"
                   [(ngModel)]="item.checked"
                   (ngModelChange)="checkboxChange($event,item)"
            >
              {{item.name}}
            </label>
          </td>

复选框选中，或取消选中时，级联修改子节点、父节点的选中、半选状态

  checkboxChange(state,node){
    this.treeUtils.updateCheckState(state,node);
  }

** 获取全选、半选状态的节点**

this.treeUtils.getCheckedNodeIdGroupByCheckState();

** 添加节点**

/** 为id为11节点添加子节点 **/
  toAddNode() {
    let newNodes = [{
      key: Math.random(),
      name: 'John Brown' + Math.random(),
      age: Math.random(),
      parentKey: "11",
      address: 'New York No. 2 Lake Park',
    }] as Array<any>;
    this.treeUtils.toAddNode(newNodes);
  }

更新节点

/** 为id为11节点进行更新 **/
  toUpdateNode() {
    let newNode = {
      key: 11,
      name: 'John Brown' + Math.random(),
      age: Math.random(),
      address: 'New York No. 2 Lake Park',
    };
    this.treeUtils.toUpdateNode(newNode);
  }

删除节点

  toRemoveNode(item?: any) {
    if (item) {
      this.treeUtils.toRemoveNode(item);
    }
  }

重新加载

  reload() {
    if (item) {
      this.treeUtils.reload();
    }
  }

展开子节点

为需要展开子节点的数据，添加expand属性，值为true

感谢你的支持，我将持续优化我的服务，希望为你提供更大的帮助！