在Ag-grid的onGridReady事件中,需要为主表和详情表分别设置rowDragManaged参数和frameworkComponents组件。
具体代码如下:
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
// 主表行拖放设置
this.gridApi.setRowDragManaged(true);
// 详情表frameworkComponents组件设置
this.gridOptions.detailCellRendererFramework = DetailCellRendererComponent;
this.gridApi.sizeColumnsToFit();
}
其中,DetailCellRendererComponent是一个自定义的组件,用于展示详情表。
import { Component } from '@angular/core';
@Component({
selector: 'app-detail-cell-renderer',
template: `
`
})
export class DetailCellRendererComponent {
rowData = [];
columnDefs = [
{ field: 'make' },
{ field: 'model' },
{ field: 'price' }
];
defaultColDef = { resizable: true };
onGridReady(params) {
params.api.setRowData(this.rowData);
}
}
以上代码保证了主表和详情表都能够支持行拖放功能。