great-zorroutils v17.0.0
ng-zorro的工具类
技术支持:zhaoqingkaitt@163.com
在线示例: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
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; 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代码
```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
感谢你的支持,我将持续优化我的服务,希望为你提供更大的帮助!
2 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago