[英]Ag-Grid Multi-line Edit with Multi Row Selection
I want implement multi row edit based on the selected rows, but unfortunatlty I am unable to find any example on ag-grid documentation.我想根据所选行实施多行编辑,但不幸的是我无法在 ag-grid 文档中找到任何示例。 Here is Plunker link where I have Multi-line checkboxes on Row groups whenever I selected the rows the selected rows become editable but the issues When II focus/edit on any one of the cell all of the other selected editable rows become normal.这是Plunker链接,每当我选择行时,我在行组上都有多行复选框,所选行变得可编辑,但是当 II 聚焦/编辑任何一个单元格时,所有其他选定的可编辑行都变得正常。 Is ag-grid provide this feature or is it possible in ag-grid? ag-grid 是否提供此功能或者是否可以在 ag-grid 中使用? Thanks!谢谢!
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
import { MenuModule } from '@ag-grid-enterprise/menu';
import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';
@Component({
selector: 'my-app',
template: `<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
class="ag-theme-alpine"
[modules]="modules"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[autoGroupColumnDef]="autoGroupColumnDef"
[rowSelection]="rowSelection"
(selectionChanged)="gridRowSelectionChanged($event)"
[groupSelectsChildren]="true"
[suppressRowClickSelection]="true"
[suppressAggFuncInHeader]="true"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
></ag-grid-angular>`,
})
export class AppComponent {
private gridApi;
private gridColumnApi;
public modules: Module[] = [
ClientSideRowModelModule,
RowGroupingModule,
MenuModule,
ColumnsToolPanelModule,
];
private columnDefs;
private defaultColDef;
private autoGroupColumnDef;
private rowSelection;
private rowData: [];
constructor(private http: HttpClient) {
this.columnDefs = [
{
field: 'country',
rowGroup: true,
hide: true,
},
{
field: 'gold',
aggFunc: 'sum',
editable: true
},
{
field: 'silver',
aggFunc: 'sum',
editable: true
},
{
field: 'bronze',
aggFunc: 'sum',
editable: true
},
{
field: 'age',
minWidth: 120,
checkboxSelection: true,
aggFunc: 'sum',
},
{
field: 'year',
maxWidth: 120,
},
{
field: 'date',
minWidth: 150,
},
];
this.defaultColDef = {
flex: 1,
minWidth: 100,
};
this.autoGroupColumnDef = {
headerName: 'Athlete',
field: 'athlete',
minWidth: 250,
cellRenderer: 'agGroupCellRenderer',
cellRendererParams: { checkbox: true },
};
this.rowSelection = 'multiple';
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.http
.get('https://www.ag-grid.com/example-assets/olympic-winners.json')
.subscribe((data) => {
this.rowData = data;
});
}
gridRowSelectionChanged(params) {
const selectedNodes = params.api.getSelectedNodes();
selectedNodes.forEach(node => {
this.gridApi.startEditingCell({
rowIndex: node.rowIndex,
colKey: 'gold',
});
});
}
}
You can change selected rows data with cellValueChanged event.您可以使用 cellValueChanged 事件更改选定行数据。 for example to make the value of column a same in selected rows ,you only need to edit 1 cell例如,要使选定行中列的值相同,您只需要编辑 1 个单元格
https://www.ag-grid.com/angular-grid/cell-editing/#event-cell-value-changed https://www.ag-grid.com/angular-grid/cell-editing/#event-cell-value-changed
You can prevent deselection using grid option suppressRowClickSelection: true
Have a look at my example below https://plnkr.co/edit/1aQyW0NSpjYYPNE2?preview您可以使用网格选项阻止取消选择suppressRowClickSelection: true
看看我下面的例子https://plnkr.co/edit/1aQyW0NSpjYYPNE2?preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.