Question

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

基本上这是我的component.html

def __iter__(self):
    return self


def next(self):
    tempNode = self.head
    while tempNode:
        yield tempNode.data
        tempNode = tempNode.nextNode
    else:
        raise StopIteration

如何移动列？

Answer 1

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

Answer 2

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

请参阅此capturing group 您可以使用此Angular材质框架并通过使用cdkDropListDropped事件

2。如@Gaurav所述，您可以使用https://material.angular.io/cdk/drag-drop/overview

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);
  }

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

使用角度拖放表格中的列

2 个答案: