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

请耐心等待较长的帖子。PrimeNG Datatable - 禁止特定行的单元格编辑

我有一个可编辑的数据表使用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如果小区有错误。

假设我们有价格字段。

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

我需要设置[编辑]属性此列，但是这也需要行独立的（在Price列中的每个小区），例如一个Price单元格仅可用于奥迪选为Brand的汽车。

我已经尝试添加contentEditable={customCondition}并且它不工作，[editable]属性也禁用整列的编辑，而不是特定的单元格。

任何帮助或建议，高度赞赏。

来源

2017-02-21 Cosmin Ionascu

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

来源

2017-03-13 17:58:29 karthiks3000

我在什么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

来源

2017-04-24 19:56:24

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

回答

相关问题