PrimeNG Datatable - отключить редактирование ячеек для определенных строк

Пожалуйста, наберитесь терпения с длинным постом.

У меня есть редактируемый файл данных с использованием PrimeNG и Angular2, аналогичный их пример:

<p-dataTable [value]="cars" [editable]="true">
   <p-column field="vin" header="Vin" [editable]="true"></p-column>
   <p-column field="year" header="Year" [editable]="true"></p-column>
   <p-column field="brand" header="Brand" [editable]="true" [style]="{'overflow':'visible'}">
       <template let-col let-car="rowData" pTemplate="editor">
           <p-dropdown [(ngModel)]="car[col.field]" [options]="brands" [autoWidth]="false" [style]="{'width':'100%'}" required="true"></p-dropdown>
       </template>
   </p-column>
   <p-column field="color" header="Color" [editable]="true"></p-column>
   <p-column field="saleDate" header="Sale Date" [editable]="true" [style]=" {'overflow':'visible' }">
       <template let-col let-car="rowData" pTemplate="body">
            {{car[col.field]|date }}
       </template>
       <template let-col let-car="rowData" pTemplate="editor">
           <p-calendar [(ngModel)]="car[col.field]"></p-calendar>
       </template>
   </p-column>
</p-dataTable>

* В моей таблице есть все столбцы с шаблонами, потому что мне нужно установить собственный CSS, если в ячейке есть ошибки.

Допустим, у нас есть поле Цена.

<p-column field="price" header="Car Price">
    <template let-col let-car="rowData" pTemplate="body">
         <span [ngClass]="{'error':car['hasError']}">{{car[col.field] }}</span>
    </template>
</p-column>

Мне нужно установить свойство [editable] для этого столбца, но оно также должно быть независимым от строк (для каждой ячейки в столбце Price), например ячейку Price можно редактировать только для автомобилей, для которых Audi выбрана как Brand.

Я попытался добавить contentEditable={customCondition}, но он не работает, также свойство [editable] отключает редактирование для всего столбца, а не для конкретной ячейки.

Любая помощь или предложения приветствуются.


angular primeng
person Cosmin Ionascu    schedule 21.02.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я предполагаю, что вы хотите контролировать, когда ячейка становится доступной для редактирования на основе какого-либо другого условия. У меня была аналогичная проблема, которую я смог решить, контролируя, когда элемент управления в шаблоне становится редактируемым. Выпадающий список становится редактируемым только тогда, когда для свойства "editable" установлено значение true для строки. Надеюсь это поможет...

Вот мой пример -

<p-column [style]="{'width':'200px','overflow':'visible'}" [editable]="true" field="default_policy" header="Default Policy">                     
               <template let-col let-car="rowData" pTemplate="body">
                   {{car[col.field]}}
                </template>
                <template let-col let-car="rowData" pTemplate="editor">
                    <p-dropdown [disabled]="!car.editable"  [(ngModel)] = "car.default_policy" [options]="policyEditList" [autoWidth]="false" [style]="{'width':'100%'}"></p-dropdown>
                </template>                       
            </p-column>
person karthiks3000    schedule 13.03.2017

arrow_upward
0
arrow_downward

Я согласен с тем, что объяснил karthiks3000. Однако, если вы хотите, чтобы эффект не отображался (раскрывающийся список с отключенным отображается при нажатии на ячейку), вы можете использовать * ngIf, который удаляет шаблон редактора на основе значения.

Например:

<p-column [style]="{'width':'200px','overflow':'visible'}" [editable]="true" field="default_policy" header="Default Policy">                     
               <template let-col let-car="rowData" pTemplate="body">
                   {{car[col.field]}}
                </template>
                <template let-col let-car="rowData" pTemplate="editor">
                    <p-dropdown *ngIf="!car.editable"  [(ngModel)] = "car.default_policy" [options]="policyEditList" [autoWidth]="false" [style]="{'width':'100%'}"></p-dropdown>
                </template>                       
            </p-column
person Shubhashish Mishra    schedule 24.04.2017