2016-05-20 7 views
5

मूल (20 मई)primeNG datatable - फिल्टर की तरह

मैं Angular2 आर सी के साथ PrimeNG beta6 उपयोग कर रहा हूँ उत्कृष्टता।

मैं पी-डेटाटेबल का मेरा नमूना, मैंने [फ़िल्टर] = "सत्य" का उपयोग करके कॉलम फ़िल्टर सक्षम किया है लेकिन यह सामान्य टेक्स्ट फ़िल्टर विकल्प देता है।

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

मैं इस पर फ़िल्टर की तरह एक्सेल कैसे लागू करूं?


संपादित करें (10 जुलाई):

मैं

पी DataTable फिल्टर कोणीय 2 RC4 संस्करण के साथ PrimeNG बीटा 9 करने के लिए अपने आवेदन को अद्यतन किया है की तरह लग रहा below- enter image description here

हालांकि, एक्सेल फ़िल्टर नीचे दिखते हैं- enter image description here

किसी के पास कोई विचार है कि मैं प्राइमएनजी डाटाटेबल पर फ़िल्टर की तरह एक्सेल कैसे लागू करूं?

+0

क्या आपने '[sortable] =" true "' –

+0

हाँ कोशिश की है ... उपरोक्त कोड में productName कॉलम देखें – Sanket

उत्तर

0

शायद मल्टीसेलेक्ट फ़िल्टर के साथ!

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

बहुउद्देश्यीय जानकारी के लिए primeNg का संदर्भ लें! https://www.primefaces.org/primeng/#/multiselect

संबंधित मुद्दे