Ng-zorro组件库的nz-table树形数据展示组件全网最新代码分享

最新推荐文章于 2024-08-28 14:44:00 发布

_梦里花落知多少

最新推荐文章于 2024-08-28 14:44:00 发布

阅读量300

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_63586335/article/details/135876004

版权

本文作者描述了如何参考Ng-zorro组件库的nz-table实现树形结构，并分享了TS代码片段，涉及数据获取、展开折叠及节点操作。作者欢迎读者交流树形组件开发的经验。

摘要由CSDN通过智能技术生成

需求是这样的我参考了Ng-zorro组件库的nz-table树形结构组建硬是磨了半天后来改了数据后实现了自己的需求

代码如下

    <tbody>
                <ng-container *ngFor="let data of expandTable.data">
                    <ng-container *ngFor="let item of mapOfExpandedData[data.key]">
                        <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">

                            <td class="fristTD">
                                <a (click)="edit(item.key)">编辑</a>
                                <span style="color: #ccc;">|</span>
                                <a nz-popconfirm nzPopconfirmTitle="确定将选择数据删除?" nzPopconfirmPlacement="bottom"
                                    (nzOnConfirm)="deleteRow(item.key)" (nzOnCancel)="cancel()"
                                    style="color: red;">删除</a>
                            </td>
                            <td [nzIndentSize]="item.level * 20" [nzShowExpand]="!!item.children.length"
                                [(nzExpand)]="item.expand"
                                (nzExpandChange)="collapse(mapOfExpandedData[data.key], item, $event)">
                                {{ item.JYZCFL_ZCFLMC }}
                            </td>

                            <td nzAlign="center" style="padding-top: 0; padding-bottom: 0;">
                                <img [src]="item.IMG" *ngIf="item.IMG" style="width: 30px;height: 30px;"
                                    (click)="showImg(item)" />
                            </td>
                            <td>{{ item.JYZCFL_KCYJSL }}</td>
                            <td>{{ item.JYZCFL_YXTS }}</td>
                            <td>{{ item.JYZCFL_BZ }}</td>
                            <td>{{ item.JYZCFL_WHR }}</td>
                            <td>{{ item.JYZCFL_WHSJ|date:'yyyy-MM-dd HH:mm:ss' }}</td>
                        </tr>
                    </ng-container>
                </ng-container>
            </tbody>

TS代码

 // 获取首页树状图
    async getMultiple() {
        try {
            this.loading = true;
            const res = await this.http.get('ZCFL/GetTreeList').toPromise()
            this.listOfMapData = res.data;
            this.listOfMapData.forEach(item => {
                this.mapOfExpandedData[item.key] = this.convertTreeToList(item);
            });

            this.loading = false;
        } catch (error) { }
    }

    collapse(array: any[], data: any, $event: boolean): void {
        if ($event === false) {
            if (data.children) {
                data.children.forEach(d => {
                    const target = array.find(a => a.key === d.key)!;
                    target.expand = false;
                    this.collapse(array, target, false);
                });
            } else {
                return;
            }
        }
    }
    convertTreeToList(root: any) {
        const stack: any[] = [];
        const array: any[] = [];
        const hashMap = {};
        stack.push({ ...root, level: 0, expand: false });

        while (stack.length !== 0) {
            const node = stack.pop()!;
            this.visitNode(node, hashMap, array);
            if (node.children) {
                for (let i = node.children.length - 1; i >= 0; i--) {
                    stack.push({ ...node.children[i], level: node.level! + 1, expand: false, parent: node });
                }
            }
        }
        return array;
    }
    visitNode(node: any, hashMap: { [key: string]: boolean }, array): void {
        if (!hashMap[node.key]) {
            hashMap[node.key] = true;

            if (node.WJID) {
                this.getImgViewSingle(node.WJID).then(img => {
                    node.IMG = img;
                });
            }
            array.push(node);
        }
    }

欢迎大家交流分享经验