我正在尝试在角度表行中实现拖放功能,但问题是我的表具有跨度行。当我尝试拖放跨度行时,它只选择了一行而不是整个跨度行
我正在使用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>