Conclua esta tarefa para ativar colunas editáveis para tabelas existentes.. Em seguida, é possível usar os atributos de cabeçalho isEditable, fieldConfig e options em uma tabela
Procedimento
- Declarar
"tokenId": "abctable-custom-service", em paralelo à propriedade de cabeçalhos.
Por exemplo:
{
"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": [
- Atualizar o arquivo app-customization.impl.ts com o código a seguir:
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 = [];
}
- Declare o novo serviço:
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);
}
}
O que fazer depois
É possível usar os atributos de cabeçalho isEditable, fieldConfig e options em uma tabela Para obter mais informações, consulte Incluindo colunas e ações em tabelas existentes.