一、技术框架及版本
JS框架 Angular，版本：6.0.0
UI框架 ng-zorro，版本：1.8.1
二、前提
搭建Angular环境
在Angular项目中引入ng-zorro
创建一个自定义指令，用于监听鼠标事件
在要监听的table 单元格元素标签上使用自定义指令
下面用一个demo示例来说明：
三、代码
在组件模板上使用ng-zorro table ，components.component.html
1 <div nz-row nzGutter="0"> 2 <div nz-col nzSpan="20" nzOffset="2"> 3 <nz-table nzBordered #ajaxTable nzShowSizeChanger [nzFrontPagination]="false" [nzData]="tableDatas" [nzLoading]="loading" 4 [nzTotal]="totalItems" [(nzPageIndex)]="currentPage" [(nzPageSize)]="itemsPerpage" (nzPageIndexChange)="getData()" (nzPageSizeChange)="getData()"> 5 <thead > 6 <tr> 7 <th appDynamicColumnWidth>ID</th> 8 <th appDynamicColumnWidth>Name</th> 9 <th appDynamicColumnWidth>Gender</th> 10 <th appDynamicColumnWidth>Age</th> 11 </tr> 12 </thead> 13 <tbody > 14 <tr *ngFor="let data of ajaxTable.data"> 15 <td>{{data.id}}</td> 16 <td>{{data.name}}</td> 17 <td>{{data.gender}}</td> 18 <td>{{data.age}}</td> 19 </tr> 20 </tbody> 21 </nz-table> 22 </div> 23 <div nz-col nzSpan="2"> 24 25 </div> 26 </div> 27 28 <br><br>
组件ts文件 ，components.component.ts
import { Component, OnInit } from '@angular/core';
import { TableDataService } from '../services/table--data.service';
@Component({
selector: 'app-components',
templateUrl: './components.component.html',
styleUrls: ['./components.component.css']
})
export class ComponentsComponent implements OnInit {
public tableDatas: Array<Object> = [];
// 等待动画
public loading: boolean = false;
// 分页配置
public currentPage: number = 1;
public itemsPerpage: number = 5;
public totalItems: number = 0;
constructor(
private tableDataService:TableDataService
) {
}
ngOnInit() {
this.getData();
}
getData(){
// 从服务器查询表格数据
let result = this.tableDataService.getTableData(this.currentPage,this.itemsPerpage);
console.log("result:",result);
this.totalItems = result["totalCounts"];
this.tableDatas = result["list"];
}
}
封装模拟请求服务器的接口服务，table-data.service.ts
1 import { Injectable } from '@angular/core'; 2 3 @Injectable({ 4 providedIn: 'root' 5 }) 6 export class TableDataService { 7 8 constructor() { } 9 10 getTableData(currentPage: number, itemsPerpage: number): Object { 11 let totalDatas = [ 12 { id: 0, name: "张三", gender: "男", age: 23 }, 13 { id: 1, name: "李四", gender: "男", age: 25 }, 14 { id: 2, name: "王五", gender: "男", age: 28 }, 15 { id: 3, name: "赵六", gender: "男", age: 22 }, 16 { id: 4, name: "马七", gender: "男", age: 29 }, 17 { id: 5, name: "锅巴", gender: "男", age: 30 }, 18 { id: 6, name: "关羽", gender: "男", age: 56 }, 19 { id: 7, name: "张飞", gender: "男", age: 28 }, 20 { id: 8, name: "刘备", gender: "男", age: 26 }, 21 { id: 9, name: "王启年", gender: "男", age: 23 }, 22 { id: 10, name: "郭麒麟", gender: "男", age: 28 }, 23 { id: 11, name: "陈萍萍", gender: "男", age: 45 }, 24 { id: 12, name: "影子", gender: "男", age: 67 }, 25 { id: 13, name: "高达", gender: "男", age: 89 }, 26 { id: 14, name: "上山虎", gender: "男", age: 24 }, 27 { id: 15, name: "海棠朵朵", gender: "男", age: 18 }, 28 ] 29 30 31 let result = []; 32 let startNumber = (currentPage - 1) * itemsPerpage; 33 let endNumber = (currentPage) * itemsPerpage; 34 35 totalDatas.map((item, index) => { 36 if ((index >= startNumber) && (index < endNumber)) { 37 result.push(item); 38 } else { 39 // Do-nothing 40 } 41 }) 42 43 44 return { 45 currentPage: currentPage, 46 itemsPerpage: itemsPerpage, 47 totalCounts: totalDatas.length, 48 list: result, 49 } 50 } 51 }
自定义指令，dynamic-column-width.directivej.ts
1 import { Directive, ElementRef, HostListener } from '@angular/core'; 2 3 @Directive({ 4 selector: '[appDynamicColumnWidth]' 5 }) 6 export class DynamicColumnWidthDirective { 7 public elem = null; 8 public mouseDown: boolean = false; 9 public oldX: number = 0; 10 public oldWidth: number = 0; 11 public number = 0; 12 13 constructor(private el: ElementRef) { 14 15 } 16 17 ngOnInit(): void { 18 19 } 20 21 @HostListener('mousedown', ['$event']) 22 onMousedown(e) { 23 // 判断当前点击的是否是单元格元素 24 if (this.el != null) { 25 if (e.offsetX > this.el.nativeElement.offsetWidth - 15) { 26 this.el.nativeElement.mouseDown = true; 27 this.el.nativeElement.oldX = e.x; 28 this.el.nativeElement.oldWidth = this.el.nativeElement.offsetWidth; 29 } 30 } else { 31 // Do-nothing 32 } 33 } 34 35 36 37 @HostListener('mouseup', ['$event']) 38 onMouseup(e) { 39 if (this.el != null) { 40 this.el.nativeElement.mouseDown = false; 41 this.el.nativeElement.style.cursor = 'default'; 42 } 43 } 44 45 46 47 @HostListener('mousemove', ['$event']) 48 onMousemove(e) { 49 if(this.el != null){ 50 if (e.offsetX > this.el.nativeElement.offsetWidth - 15) { 51 this.el.nativeElement.style.cursor = 'col-resize'; 52 } else { 53 this.el.nativeElement.style.cursor = 'default'; 54 } 55 } 56 57 if (this.el.nativeElement.mouseDown != null && this.el.nativeElement.mouseDown == true) { 58 this.el.nativeElement.style.cursor = 'default'; 59 let wid = 0; 60 if (this.el.nativeElement.oldWidth + (e.x - this.el.nativeElement.oldX) > 0) { 61 wid = this.el.nativeElement.oldWidth + (e.x - this.el.nativeElement.oldX); 62 } 63 this.el.nativeElement.style.width = wid + 'px'; 64 this.el.nativeElement.style.cursor = 'col-resize'; 65 // ng-zorro table 列宽可以根据thead每个单元格的宽度自动适配，所以不用再做修改 66 } else { 67 // console.log("无所谓!"); 68 } 69 } 70 }
在模块中依赖注入自定义指令，components.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComponentsRoutingModule } from './components-routing.module';
import { ComponentsComponent } from './components.component';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { DynamicColumnWidthDirective } from '../directives/dynamic-column-width.directive';
@NgModule({
imports: [
CommonModule,
ComponentsRoutingModule,
NgZorroAntdModule.forRoot(),
],
declarations: [ComponentsComponent,DynamicColumnWidthDirective]
})
export class ComponentsModule { }
注意：
自定义指令需要在待使用组件所在模块module文件中引入，如上。
如果存在多个组件都需要使用该自定义指令，请将新建一个公共模块，在公共模块中依赖注入自定义指令，在待使用组件中依赖注入公共模块。
四、运行截图
五、源码
支付宝扫一扫
微信扫一扫
