Question

请耐心等待长篇文章。

我有一个使用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]属性也会禁用整个列的编辑，而不是特定单元格的编辑。

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

Answer 1

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

Answer 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

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

2 个答案: