Angular ng-zorro table拖拽配置列宽

云朵爱打呼噜 發表於 2019-12-30 12:24:00

一、技术框架及版本
<ol>
<li>JS框架 Angular，版本：6.0.0</li>
<li>UI框架 ng-zorro，版本：1.8.1</li>
</ol>
二、前提
<ol>
<li>搭建Angular环境</li>
<li>在Angular项目中引入ng-zorro</li>
<li>创建一个自定义指令，用于监听鼠标事件</li>
<li>在要监听的table 单元格元素标签上使用自定义指令</li>
</ol>
　　下面用一个demo示例来说明：
三、代码
<ul>
<li>在组件模板上使用ng-zorro table ，components.component.html
<div class="cnblogs_code">
<pre> 1 <div nz-row nzGutter="0">
 2 <div nz-col nzSpan="20" nzOffset="2">
 3 <nz-table nzBordered #ajaxTable nzShowSizeChanger ="false" ="tableDatas" ="loading"
 4 ="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></pre>
</div>
 
</li>
<li>组件ts文件，components.component.ts
<div class="cnblogs_code">
<pre>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"];

}
}</pre>
</div>
 
</li>
<li>封装模拟请求服务器的接口服务，table-data.service.ts 
<div class="cnblogs_code">
<pre> 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 }</pre>
</div>
 
</li>
<li>自定义指令，dynamic-column-width.directivej.ts 
<div class="cnblogs_code">
<pre> 1 import { Directive, ElementRef, HostListener } from '@angular/core';
 2
 3 @Directive({
 4 selector: ''
 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 }</pre>
</div>
 
</li>
<li>在模块中依赖注入自定义指令，components.module.ts 
<div class="cnblogs_code">
<pre>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:
})
export class ComponentsModule { }</pre>
</div>
注意：
</li>
<li>自定义指令需要在待使用组件所在模块module文件中引入，如上。</li>
<li>如果存在多个组件都需要使用该自定义指令，请将新建一个公共模块，在公共模块中依赖注入自定义指令，在待使用组件中依赖注入公共模块。</li>
</ul>
四、运行截图
<img src="https://img2018.cnblogs.com/i-beta/1477871/201912/1477871-20191230114714777-374642260.png">
 
五、源码
　　源码请参考 https://github.com/guojije/dynamicColumn 
来源：https://www.cnblogs.com/mycnblogs-guoguo/p/12119111.html

頁: [1]

琼殿技术论坛's Archiver

Angular ng-zorro table拖拽配置列宽