Angular ng-zorro table拖拽配置列宽
一、技术框架及版本
- 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 width: 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文件中引入，如上。
- 如果存在多个组件都需要使用该自定义指令，请将新建一个公共模块，在公共模块中依赖注入自定义指令，在待使用组件中依赖注入公共模块。
四、运行截图
五、源码
