2016-05-20 33 views
5

ORİJİNAL ben Angular2 RC ile PrimeNG beta6 kullanıyorum (may 20)primeNG Datatable - filtre gibi

excel.

P-dataTable örneğim, [filter] = "true" kullanarak sütun filtresini etkinleştirdim, ancak bu yalnızca normal metin filtresi seçeneği sunuyor.

<p-dataTable [value]="products" [rows]="2" [paginator]="true" [pageLinks]="3" > 
    <header>List of products</header> 
    <p-column field="productName" header="productName" [sortable]="true"></p-column> 
    <p-column field="productCode" header="productCode" [filter]="true"></p-column> 
    <p-column field="releaseDate" header="releaseDate" [filter]="true"></p-column> 
    <p-column field="description" header="description"></p-column> 
</p-dataTable> 

Bu konuda excel gibi filtreleri nasıl uygularım?


DÜZENLEME (10 Temmuz):

Ben benziyor Eğik 2 RC4 sürümü ile

p-dataTable filtreleri PrimeNG beta 9'a başvurumu güncelledik aşağıda- enter image description here

Ancak, excel filtreleri aşağıdaki gibi görünüyor - enter image description here

Herkesin fikri var primeNG veri tablosuna nasıl filtre uygulayabilirim?

+0

'[sortable] =" true "' –

+0

yes ... 'ı deneyin – Sanket

cevap

0

Muhtemelen bir MultiSelect Filtresi ile!

<p-dataTable [value]="products" [rows]="2" [paginator]="true" [pageLinks]="3" > 
    <header>List of products</header> 
    <p-column field="productName" header="productName" [sortable]="true"></p-column> 
    <p-column field="productCode" header="productCode" [filter]="true"> 
<ng-template pTemplate="filter"> 
      <p-multiSelect [options]="SelectedItemObject" 
          appendTo="body" 
          defaultLabel="SelectProduct" 
          styleClass="ui-column-filter" 
      ></p-multiSelect> 
     </ng-template> 
</p-column> 
    <p-column field="releaseDate" header="releaseDate" [filter]="true"></p-column> 
    <p-column field="description" header="description"></p-column> 
</p-dataTable> 

multiSelect bilgisi için bkz.https://www.primefaces.org/primeng/#/multiselect