Angular ng-zorro table拖拽配置列宽
生活随笔
收集整理的這篇文章主要介紹了
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 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文件中引入，如上。
如果存在多個組件都需要使用該自定義指令，請將新建一個公共模塊，在公共模塊中依賴注入自定義指令，在待使用組件中依賴注入公共模塊。
四、運行截圖
五、源碼
源碼請參考https://github.com/guojije/dynamicColumn
總結
以上是生活随笔為你收集整理的Angular ng-zorro table拖拽配置列宽的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQL Join 与 In的效率
- 下一篇： 人民币符号在html的显示方法