使用角度材料以角度2将行从一个表格传输到另一个表格

时间:2018-03-26 11:18:30

标签: angular angular-material

我正在尝试将选定的行从一个表传输到另一个表。我已经实现了一个示例堆栈 - 闪电战示例,可以使用https://stackblitz.com/edit/angular-app-material-h2lcps?file=app%2Faccount%2Faccount.component.html

进行访问

使用上面的示例我在控制台中获取以下输出。

enter image description here

此处我已实施删除所选行按钮。但我无法实施转移所选行按钮。

有人可以指导我如何实现这种传输功能......?

1 个答案:

答案 0 :(得分:0)

我可以给你一些提示。我已经完成了项目中网格之间的交换。我正在使用kendo-grid。

首先选择复选框,我拿了一个数组,在其中我推送选定的行数据。然后在交换按钮上单击(从右向左交换),我通过检查两个数据位置来推送左网格数据中的数据并从右网格数据中拼接数据。

这可能会帮助您解决问题。交换代码在我的项目中要长得多,因为还有很多验证。所以我向你提供了一些我的代码。

OnSelectionChange(){
 if (event.selectedRows.length > 0 && event.selectedRows[0].dataItem != undefined) {
            for (let i = 0; i < event.selectedRows.length; i++) {
                this.rightGridSelectedData.push(event.selectedRows[i].dataItem);
            }
        }
        else if (event.deselectedRows.length > 0) {
            for (var index = 0; index < this.rightGridSelectedData.length; index++) {
                if (this.rightGridSelectedData[index].featureID === event.deselectedRows[0].dataItem.featureID && this.rightGridSelectedData[index].moduleID === event.deselectedRows[0].dataItem.moduleID) {
                    this.rightGridSelectedData.splice(index, 1);
                }
            }
        }
}