Effectuez cette tâche pour activer les colonnes éditables pour les tables existantes. Vous pouvez ensuite utiliser les attributs d'en-tête isEditable, fieldConfig et options dans une table.
Procédure
- Déclarer
"tokenId": "abctable-custom-service", en parallèle à la propriété headers.
Par exemple :
{
"order-table": { //Add new columns to the outbound order search results table
"name": "order-table",
"aliases": [
"inbound-order-table" //Add the same columns to the inbound order search results table
],
"tokenId": "abctable-custom-service"
"headers": [
- Mettez à jour le fichier app-customization.impl.ts avec le code suivant:
import { ABCTableCustomEditableFieldsService } from "./services/abctable-custom.service";
export class AppCustomizationImpl {
static readonly components = [];
static readonly providers = [
{
provide: 'abctable-custom-service',
useClass: ABCTableCustomEditableFieldsService
}
];
static readonly imports = [];
}
- Déclarer le nouveau service:
import { Injectable } from "@angular/core";
import { BucTableHeaderItem, EditableFieldsInterface } from "@buc/common-components";
import { OrderlineListTableComponent } from "../../app/features/order/orderline-list-table/orderline-list-table.component"
@Injectable()
export class ABCTableCustomEditableFieldsService implements EditableFieldsInterface {
tableContext: OrderlineListTableComponent;
initializeTableParentContext(parentContext) {
// set the context of the table here. Mandatory method
this.tableContext = parentContext;
}
//processDefaultValueInField(header: BucTableHeaderItem, data: any): void {
// this is an optional method
// if the default value is set via the json configuration, this method can be used to update the parent context
//}
//getDataForField(header: BucTableHeaderItem, data) {
// This is an optional method. returns custom data for an editable field.
// Example - If the list in dropdown requires further filtering, then this methid can be used to return custom list
//}
onDropdownSelection(event, data) {
// logic to update the table data in parent tablecontext
const key = data.item.key;
this.tableContext.allTableData.forEach((row) => {
if (row.key === key) {
if (data.headerId === 'lineTypeCustom') {
// created a new property lineType to store the selected value
row.item.lineType = data.value;
}
}
});
this.tableContext.tableDataChange.emit(this.tableContext.allTableData);
}
}
Etape suivante
Vous pouvez utiliser les attributs d'en-tête isEditable, fieldConfig et options dans une table. Pour plus d'informations, voir Ajout de colonnes et d'actions à des tables existantes.