angular - 使用角材料的拖放重新排列垫表行
问题描述
Angular 7 带来了强大的功能DragDropModule
:https ://material.angular.io/cdk/drag-drop/examples
该文档处理重新排列列表中的项目或在多个列表之间传输项目。但是,它没有谈论表格。
我想知道是否有一种舒适的方法可以使用 angular material 的拖放系统对 mat-table 或 cdk-table 中的行进行重新排序。
(您可以添加cdkDropList
使mat-table
机制工作但没有所有花哨的动画和默认拖动占位符的内容。)
是否存在类似于通过拖放对表格行进行排序的易于实现的默认设置?
解决方案
样式由 CSS 完成(查看示例页面上的 CSS 选项卡)。我对其进行了调整以使用 mat-table:
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
我把它放在我的主要 styles.scss 文件中。
对于想知道如何在 mat-table 上实现拖放的任何人,您需要:
- 添加
cdkDropList
到mat-table
- 添加
(cdkDropListDropped)="onListDrop($event)"
到mat-table
- 添加
cdkDrag
到mat-row
onListDrop
看起来像:
onListDrop(event: CdkDragDrop<string[]>) {
// Swap the elements around
moveItemInArray(this.myArray, event.previousIndex, event.currentIndex);
}
moveItemInArray
是一个角材质函数。你可以导入它。
推荐阅读
- reactjs - 如何在 reactjs 中使用 Grubhub 提供的 Grubhub 链接?
- java - JEditorPane 内容类型“text/html”换行符,不创建段落
- android - 如何分隔字符串?
- python - tkinter 按钮在使用它调用其他脚本后保持单击状态
- apache-camel - Apache Camel:如何从 setProperty-Exchange 中捕获异常?
- api - 原始.M 数组到字符串?以相同的结构响应http请求
- javascript - Django 和 Chart.js:具有多个数据集的折线图
- c++ - aruco::MarkerDetector 的未定义引用
- excel - 将工作表导出到新工作簿(特定工作表除外)的宏
- python - 弃用警告:inspect.getargspec() 自 Python 3.0 起已弃用