MatTable行跨度拖放问题

时间:2019-05-06 15:07:42

标签: angular typescript drag-and-drop angular-material mat-table

我正在尝试在角度表行中实现拖放功能,但问题是我的表具有跨度行。当我尝试拖放跨度行时,它只选择了一行而不是整个跨度行

我正在使用https://stackblitz.com/edit/angular-wudscb-kpjdfv来实现角度表中的行跨度。

app.component.html

import pandas as pd
%matplotlib notebook
import matplotlib.pyplot as plt
import networkx as nx
import numpy as np

G = nx.DiGraph()
G.add_edge('Owner','Contact1')
G.add_edge('Owner','Conatct2')
G.add_edge('Contact1','Firm1')
G.add_edge('Conatct2','Firm2')
G.add_edge('Firm1','Org1')
G.add_edge('Firm1','Org2')
G.add_edge('Firm2','Org3')

pos=nx.spring_layout(G)
nx.draw_networkx(G)
nx.draw_networkx_nodes(G,pos,
                           nodelist=['Owner'],
                           node_color='k',
                           node_size=500,
                       alpha=0.8)
nx.draw_networkx_nodes(G,pos,
                           nodelist=['Contact1','Contact2'],
                           node_color='r',
                           node_size=500,
                       alpha=0.8)
nx.draw_networkx_nodes(G,pos,
                           nodelist=['Firm1','Firm2'],
                           node_color='#8B8378',
                           node_size=500,
                       alpha=0.8)
nx.draw_networkx_nodes(G,pos,
                           nodelist=['Org1','Org2','Org3'],
                           node_color='r',
                           node_size=500,
                       alpha=0.8)

app.component.ts

<table mat-table [dataSource]="dataSource"
 class="mat-elevation-z8" multiTemplateDataRows
 cdkDropList
[cdkDropListData]="dataSource"
(cdkDropListDropped)="dropTable($event)">

    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> Priority </th>
        <td mat-cell *matCellDef="let data;let i = dataIndex" [attr.rowspan]="getRowSpan('Priority',i)" [style.display]="getRowSpan('Priority', i) ? '' : 'none'">
         {{ data.id }} </td>
    </ng-container>

    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let data;let i = dataIndex" [attr.rowspan]="getRowSpan('Name',i)" [style.display]="getRowSpan('Name', i) ? '' : 'none'">
         {{ data.name }} </td>
    </ng-container>

    <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let data;let i = dataIndex" [attr.rowspan]="getRowSpan('Weight',i)" [style.display]="getRowSpan('Weight', i) ? '' : 'none'">
         {{ data.weight }} </td>
    </ng-container>

    <ng-container matColumnDef="descriptions">
        <th mat-header-cell *matHeaderCellDef> Descriptions </th>
        <td mat-cell *matCellDef="let data"> {{ data.descriptions }} </td>
    </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag [cdkDragData]="row"></tr>



</table>

我希望整个跨行都能够拖放到其他位置。 enter image description here

0 个答案:

没有答案