PrimeNG table 列过滤器自定义 - 添加按钮和 select 所有复选框

Question

我是 PrimeNG 库的新手，我想为过滤器自定义 primeng table 列下拉列表

我从设计团队那里得到了这个模型，我想添加应用按钮来根据选中的复选框和 select 所有复选框来过滤记录.. 我浏览了 primeng 示例，我在 primeng 官方网站上找到了类似的示例

我指的是这个例子，但我需要添加应用按钮和 select 所有复选框...谁能帮我解决这个问题，我该如何实现？下面是我指的代码

https://www.primefaces.org/primeng/showcase/#/table/filter

app.component.html

<p-table #dt [value]="customers" dataKey="id"
        [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading" styleClass="p-datatable-customers"
        [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
        [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
        <ng-template pTemplate="caption">
            <div class="table-header">
                List of Customers
                <span class="p-input-icon-left">
                    <i class="pi pi-search"></i>
                    <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search" />
                </span>
            </div>
        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <th>Name</th>
                <th>Country</th>
                <th>Representative</th>
                <th>Date</th>
                <th>Status</th>
                <th>Activity</th>
            </tr>
            <tr>
                <th>
                    <input pInputText type="text" (input)="dt.filter($event.target.value, 'name', 'startsWith')" placeholder="Search by Name" class="p-column-filter">
                </th>
                <th>
                    <input pInputText type="text" (input)="dt.filter($event.target.value, 'country.name', 'contains')" placeholder="Search by Country" class="p-column-filter">
                </th>
                <th>
                    <p-multiSelect [options]="representatives" placeholder="All" (onChange)="onRepresentativeChange($event)" styleClass="p-column-filter" optionLabel="name">
                        <ng-template let-option pTemplate="item">
                            <div class="p-multiselect-representative-option">
                                <img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.value.image}}" width="32" style="vertical-align: middle" />
                                <span class="p-ml-1">{{option.label}}</span>
                            </div>
                        </ng-template>
                    </p-multiSelect>
                </th>
                <th>
                    <p-calendar (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('', 'date', 'equals')" [showButtonBar]="true" styleClass="p-column-filter" placeholder="Registration Date" [readonlyInput]="true" dateFormat="yy-mm-dd"></p-calendar>
                </th>
                <th>
                    <p-dropdown [options]="statuses" (onChange)="dt.filter($event.value, 'status', 'equals')" styleClass="p-column-filter" placeholder="Select a Status" [showClear]="true">
                        <ng-template let-option pTemplate="item">
                            <span [class]="'customer-badge status-' + option.value">{{option.label}}</span>
                        </ng-template>
                    </p-dropdown>
                </th>
                <th>
                    <input pInputText type="text" (input)="onActivityChange($event)" placeholder="Minimum" class="p-column-filter" >
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-customer>
            <tr>
                <td>
                    {{customer.name}}
                </td>
                <td>
                    <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
                    <span class="image-text">{{customer.country.name}}</span>
                </td>
                <td>
                    <img [alt]="customer.representative.name" src="assets/showcase/images/demo/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
                    <span class="image-text">{{customer.representative.name}}</span>
                </td>
                <td>
                    {{customer.date}}
                </td>
                <td>
                    <span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
                </td>
                <td>
                    <p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="emptymessage">
            <tr>
                <td colspan="6">No customers found.</td>
            </tr>
        </ng-template>
    </p-table>

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Customer, Representative } from '../../domain/customer';
import { CustomerService } from '../../service/customerservice';
import { Table } from 'primeng/table';

@Component({
    templateUrl: './tablefilterdemo.html',
    styleUrls: ['./tabledemo.scss']
})
export class TableFilterDemo implements OnInit {

    customers: Customer[];

    representatives: Representative[];

    statuses: any[];

    loading: boolean = true;

    @ViewChild('dt') table: Table;

    constructor(private customerService: CustomerService) { }

    ngOnInit() {
        this.customerService.getCustomersLarge().then(customers => {
            this.customers = customers;
            this.loading = false;
        });

        this.representatives = [
            {name: "Amy Elsner", image: 'amyelsner.png'},
            {name: "Anna Fali", image: 'annafali.png'},
            {name: "Asiya Javayant", image: 'asiyajavayant.png'},
            {name: "Bernardo Dominic", image: 'bernardodominic.png'},
            {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
            {name: "Ioni Bowcher", image: 'ionibowcher.png'},
            {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
            {name: "Onyama Limba", image: 'onyamalimba.png'},
            {name: "Stephen Shaw", image: 'stephenshaw.png'},
            {name: "XuXue Feng", image: 'xuxuefeng.png'}
        ];

        this.statuses = [
            {label: 'Unqualified', value: 'unqualified'},
            {label: 'Qualified', value: 'qualified'},
            {label: 'New', value: 'new'},
            {label: 'Negotiation', value: 'negotiation'},
            {label: 'Renewal', value: 'renewal'},
            {label: 'Proposal', value: 'proposal'}
        ]
    }

    onActivityChange(event) {
        const value = event.target.value;
        if (value && value.trim().length) {
            const activity = parseInt(value);

            if (!isNaN(activity)) {
                this.table.filter(activity, 'activity', 'gte');
            }
        }
    }

    onDateSelect(value) {
        this.table.filter(this.formatDate(value), 'date', 'equals')
    }

    formatDate(date) {
        let month = date.getMonth() + 1;
        let day = date.getDate();

        if (month < 10) {
            month = '0' + month;
        }

        if (day < 10) {
            day = '0' + day;
        }

        return date.getFullYear() + '-' + month + '-' + day;
    }

    onRepresentativeChange(event) {
        this.table.filter(event.value, 'representative', 'in')
    }
    
}

任何建议都会很有帮助。提前致谢。

Answer 1

您可以在此部分中为多选添加页脚部分您可以添加将触发 select 全部

的按钮

<p-multiSelect [(ngModel)]="selectedColors" *ngSwitchCase="'color'" [options]="colors" 
   defaultLabel="All Colors"(onChange)="dt.filter($event.value, col.field, 'in')">
  <p-footer>
     <button pButton type="button" label="Select All" (click)="selectAllColors()" >
    </button>
 </p-footer>
</p-multiSelect>

为了触发 select 我使用 ngModel 可能是另一种方式，但这是简单的方式

selectedColors:string[];
selectAllColors(){
    this.selectedColors = this.colors.map(c => c.value)
}

I don't found an option to hide the checkbox for select all so I use css to hide the checkbox(✅) and clear(❎) button on the filter section check the style.css

stackblitz demo

PrimeNG table 列过滤器自定义 - 添加按钮和 select 所有复选框

PrimeNG table column filter customize - add button and select all checkbox

filter

primeng

angular

primeng-datatable

primeng-dropdowns