PrimeNG Datatable - 禁用特定行的单元格编辑答案

【问题标题】：PrimeNG Datatable - disable cell editing for specific rowsPrimeNG Datatable - 禁用特定行的单元格编辑
【发布时间】：2017-02-21 14:09:16
【问题描述】：

长帖请耐心等待。

我有一个使用 PrimeNG 和 Angular2 的可编辑数据表，与他们的 example 类似：

<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。

假设我们有 Price 字段。

<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 单元格只能对奥迪选择为Brand 的汽车进行编辑。

我尝试添加contentEditable={customCondition}，但它不起作用，[editable] 属性也禁用了对整个列的编辑，而不是在特定单元格上。

非常感谢任何帮助或建议。

【问题讨论】：

标签： angular primeng

【解决方案1】：

我假设您想根据其他条件控制单元格何时变为可编辑。我有一个类似的问题，我可以通过控制模板中的控件何时变为可编辑来解决仅当属性“可编辑”设置为某行的 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>

【讨论】：

【解决方案2】：

我同意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

【讨论】：