Включить конкретный столбец при редактировании этой строки в PrimeNG datatable - PullRequest
Новая
       29

Включить конкретный столбец при редактировании этой строки в PrimeNG datatable

0 голосов
/ 05 июня 2018

Я использую angular2.У меня есть данные.Я могу редактировать определенную ячейку, когда нажимаю на нее.Но я также хочу, чтобы последний столбец отображался для той конкретной строки, ячейку которой я редактирую.

Предположим, я хочу отредактировать 1-й ряд 2-го элемента.В основном, 2-й элемент является редактируемым, когда я нажимаю на него, но в то же время мне нужно, чтобы в последнем столбце отображались все 3 кнопки сохранить , отменить и удалить только для 1-го ряда. 

<p-dataTable [value]="tableData" editable="true" editMode="cell">
                            <p-column field="id" header="CUSTOMER*" [editable]="true"></p-column>
                            <p-column field="category" header="CATEGORY" [editable]="true"></p-column>
                            <p-column field="featureName" header="FEATURE NAME" [sortable]="true" [editable]="true"></p-column>
                            <p-column field="devEstimate" header="DEV ESTIMATE" [editable]="true"></p-column>
                            <p-column field="supportEstimate" header="SUPPORT ESTIMATE" [editable]="true"></p-column>
                            <p-column field="started" header="STARTED" [editable]="true"></p-column>
                            <p-column field="release" header="RELEASE/TARGET" [sortable]="true" [editable]="true"></p-column>
                            <p-column field="notes" header="NOTES" [editable]="true"></p-column>

                            <p-column [hidden]="!isEditable"> 
                                    <template let-col let-row="rowData" let-index="rowIndex"  pTemplate="body"  >
                                        <div>
                                            <button pButton type="button" label="Save"></button>
                                            <button pButton type="button" label="Cancel"></button>
                                            <button pButton type="button" label="Delete"></button>
                                        </div>  
                                    </template> 
                            </p-column>

                    </p-dataTable>

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Это окончательное решение, которое у меня было для 1) Отображение кнопок в последнем столбце 2) Редактирование всей строки при нажатии на одну ячейку определенной строки и также 3) длядобавьте выпадающий список в ячейку таблицы данных. 

<p-dataTable [value]="tableOne" (onRowClick)="onSelectFeature($event)" [editable]="true">

                            <p-column field="customer" header="CUSTOMER*" [sortable]="true" [style]="{'width':'15%'}">
                                <template let-col let-row="rowData" let-index="rowIndex" pTemplate="body">
                                    <span *ngIf="!row.isEditable">{{row.customer}}</span>
                                    <span *ngIf="row.isEditable"><p-dropdown [options]="field_customer" [autoWidth]="false" appendTo="body" [placeholder]="row.customer"></p-dropdown></span>
                                </template>
                            </p-column>

<p-column field="notes" header="NOTES">
                                <template let-col let-row="rowData" let-index="rowIndex" pTemplate="body">
                        <span *ngIf="!row.isEditable">{{row.notes}}</span>
                                    <span *ngIf="row.isEditable"><input type="text" pInputText [(ngModel)]="row.notes" maxlength="64"></span>
                                </template>
                            </p-column>
                            <p-column>      
                                <template let-row="rowData" let-index="rowIndex" pTemplate="body">
                                    <div class="display" *ngIf="row.isEditable">
                                        <button pButton type="button" class="btn margin-left-3p float-right" label="Save"></button>
                                        <button pButton type="button" class="btn margin-left-3p float-right" label="Cancel"></button>
                                        <button pButton type="button" class="btn float-right" label="Delete"></button>
                                    </div>
                                </template>
                            </p-column>   
                    </p-dataTable>

файл component.ts 

isEditable:boolean;

ngOnInit(){
        this.isEditable=false;  
    }
constructor(private router: Router,private datePipe: DatePipe){
this.tableOne = [
            {customer:'PRODUCT',category:'Product', featureName:'OSS', devEstimate:'$12345.00', supportEstimate:'$',started:'TRUE',release:'SAIL 2.28',notes:'Funded by IMS'},
            {customer:'TECHNOLOGY',category:'Product', featureName:'QWE', devEstimate:'$12345.00', supportEstimate:'$',started:'TRUE',release:'SAIL 2.28',notes:'Funded by IMS'}];
}
onSelectFeature(e)
    {
        this.CloseAllEditable(this.tableOne);
        this.CloseAllEditable(this.tableTwo);
        e.data.isEditable=true;
    }
CloseAllEditable(data){
        for(let item of data)
        {
          if(item.isEditable)
          {
            item.isEditable = false;
          }
        }
    }
0 голосов
/ 05 июня 2018

Вы должны переместить [hidden]="!isEditable" из p-column в div внутри своего шаблона, а свойство isEditable должно применяться к объекту row , поэтому замените isEditable на row.isEditable.Тогда последний столбец должен выглядеть следующим образом: 

<p-column>
    <ng-template let-col let-row="rowData" let-index="rowIndex" pTemplate="body">
        <div [hidden]="!row.isEditable">
            <button pButton type="button" label="Save"></button>
            <button pButton type="button" label="Cancel"></button>
            <button pButton type="button" label="Delete"></button>
        </div>
    </ng-template>
</p-column>

В коде компонента TS добавьте это свойство isEditable к каждой строке tableData и инициализируйте его как false : 

this.tableData.forEach(function (row) {
  row.isEditable = false;
});

Наконец, добавьте событие onEditInit к вашему p-datatable и присвойте значение true isEditable свойству редактируемой строки: 

onEditInit(event) {
  this.disableAllRowsEdition();
  event.data.isEditable = true;
}

См. StackBlitz

...