使用角度拖放表格中的列答案

【问题标题】：Drag and drop columns in a table with angular使用角度拖放表格中的列
【发布时间】：2018-02-12 14:14:11
【问题描述】：

我需要移动表格的列，但我不知道该使用哪个组件或如何实现它，您能否推荐一个以及如何操作？

基本上这是我的component.html

<form>
<table class="table-fixed">
<thead>
  <tr>
    <th *ngIf="selectionMode == 'multi'" class="checkbox">
      <mat-checkbox (change)="onChangeSelectionAll($event)">
      </mat-checkbox>
    </th>
    <th *ngFor="let column of columns" class="pointer" (click)="sort(column)">{{column.label}}
    </th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let node of data">
    <td>
      <mat-checkbox [checked]="node.isSelected" name="node.id" (change)="onChangeSelection($event, node)" [ngClass]="node.isFiltered ? 'filtered' : ''">
      </mat-checkbox>

    </td>
    <td *ngIf="showIcon" class="icon" (click)="onClicked($event, node)">
      <i class="icon-{{node.data.iconname ? node.data.iconname.toLowerCase().replace('.png', '') : ''}}" height="24"></i>
    </td>
    <td *ngIf="showStatus" class="icon">
      <i *ngIf="node.tooltip !== '<ul></ul>'" tooltip-delay="300" tooltip='{{ node.tooltip }}' tooltip-position="right" class="material-icons {{node.icon_class}}"
        height="24">{{node.icon}}</i>
      <i *ngIf="node.tooltip === '<ul></ul>'" class="material-icons {{node.icon_class}}" height="24">{{node.icon}}</i>
    </td>
    <td *ngFor="let column of columns" class="{{(node.normalizedError && node.normalizedError[column.id]) ? 'error' : 'normal'}}"
      tooltip="{{(node.normalizedError && node.normalizedError[column.id]) ? node.normalizedError[column.id] : false}}"
      tooltip-delay="300" tooltip-position="below" tooltipDisabled="{{(node.normalizedError && node.normalizedError[column.id]) ? false : true}}"
      (click)="onClicked($event, node)" [innerHTML]="node.normalizedData[column.name.toLowerCase()] ? node.normalizedData[column.name.toLowerCase()] : ''"></td>
  </tr>
</tbody>
<!--</div>-->
</table>
</form>

如何移动列？

【问题讨论】：

我在这里找到了答案：stackoverflow.com/questions/56236058/…给男人一些爱。

标签： angular drag-and-drop

【解决方案1】：

您可以将primeng 组件用于数据表，它具有重新排序列的功能。 https://www.primefaces.org/primeng/#/datatable/colreorder

【讨论】：

【解决方案2】：

据我所知，您可以通过以下任一方式实现这一目标 -

参考这个https://material.angular.io/cdk/drag-drop/overview 您可以使用这个 Angular 材质框架并使用 cdkDropListDropped 事件

2.正如@Gaurav所说，您可以使用https://www.primefaces.org/primeng/#/datatable/colreorder

3.如果你不想使用任何额外的框架，你可以如下实现-

//在html中

   <th *ngFor="let t of tableHeader;index as i" draggable="true" (dragstart)="dragStartColumn(i)"
          (dragover)="allowDrop($event)" (drop)="dropColumn(i)""></th>

//在ts中

一个数组移动函数，它将从其索引中删除拖动的列并将其放在我们想要的索引处。

public arrayMove(arr, from, to) {
    let cutOut = arr.splice(from, 1)[0]; // remove the dragged element at index 'from'
    arr.splice(to, 0, cutOut);            // insert it at index 'to'
  }

// 和拖动事件

  public dragStartColumn(index) {
    this.draggedColumnIndex = index;
  }

  public allowDrop(event) {
    event.preventDefault();
  }

  public dropColumn(index) {
    this.arrayMove(this.tableHeader, this.draggedColumnIndex, index);
  }

就是这样！现在您的列可以拖动了。

【讨论】：