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 - 禁止特定行的單元格編輯

回答

相關問題