Angular 启动表格列筛选器自定义-添加按钮并选中所有复选框

我对Priming库不熟悉，我想为过滤器定制Priming表列

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

我指的是这个例子，但我需要添加应用按钮并选中所有复选框。。。有人能帮我吗？我怎样才能做到？ 下面是我所指的代码

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>

客户名单
名称
国家
代表
日期
地位
活动
{{option.label}
{{option.label}
{{customer.name}
{{customer.country.name}
{{customer.representation.name}
{{customer.date}
{{customer.status}
没有找到客户。

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')
    }
    
}

从'@angular/core'导入{Component，OnInit，ViewChild}；
从“../../domain/Customer”导入{Customer，Representative}；
从“../../service/CustomerService”导入{CustomerService}；
从'priming/Table'导入{Table}；
@组成部分({
templateUrl:'./tablefilterdemo.html'，
样式URL:['./tabledemo.scss']
})
导出类TableFilterDemo实现OnInit{
客户：客户[]；
代表：代表[]；
状态：任何[]；
加载：布尔值=真；
@ViewChild（'dt'）表：表；
构造函数（私有customerService:customerService）{}
恩戈尼尼特（）{
this.customerService.getCustomersLarge（）。然后（customers=>{
这是。顾客=顾客；
这一点：加载=错误；
});
这是代表=[
{名称：“艾米·埃尔斯纳”，图片：'amyelsner.png'}，
{名称：“Anna Fali”，图片：'annafali.png'}，
{名称：“asiyajavayant”，图片：'asiyajavayant.png'}，
{名称：“Bernardo Dominic”，图片：'bernardodominic.png'}，
{名称：“Elwin Sharvill”，图片：'elwinsharvill.png'}，
{名称：“Ioni Bowcher”，图像：'ionibowcher.png'}，
{名称：“Ivan Magalhaes”，图片：'Ivan Magalhaes.png'}，
{名称：“Onyama Limba”，图片：'onyamalimba.png'}，
{名称：“斯蒂芬·肖”，图片：'stephenshaw.png'}，
{名称：“徐雪峰”，图片：'xuxuefeng.png'}
];
此参数。状态=[
{标签：'Unqualified'，值：'Unqualified'}，
{标签：'Qualified'，值：'Qualified'}，
{标签：'New'，值：'New'}，
{标签：'Negotiation'，值：'Negotiation'}，
{标签：'更新'，值：'更新'}，
{标签：'建议'，值：'建议'}
]
}
onActivityChange（事件）{
常量值=event.target.value；
if（value&&value.trim（）.length）{
const activity=parseInt（值）；
如果（！isNaN（活动））{
this.table.filter（activity，'activity'，'gte'）；
}
}
}
onDateSelect（值）{
this.table.filter（this.formatDate（值），'date'，'equals'）
}
格式日期（日期）{
let month=date.getMonth（）+1；
let day=date.getDate（）；
如果（月<10）{
月份='0'+月份；
}
如果（第10天）{
天='0'+天；
}
返回日期。getFullYear（）+'-'+月+'-'+日；
}
onRepresentativeChange（事件）{
this.table.filter（event.value，'representative'，'in'）
}
}

---

任何建议都会大有帮助。提前感谢。

您可以为multiSelect添加页脚部分。在此部分中，您可以添加触发全选的按钮

为了触发全选，我使用ngModel，也许是另一种方式，但这很简单

selectedColors:string[]；
选择所有颜色（）{
this.selectedColors=this.colors.map（c=>c.value）
}

我没有找到隐藏全选复选框的选项，所以我使用css来隐藏复选框(✅) 清晰(❎) 过滤器部分的按钮检查

style.css

---

stackblitz演示您可以在stackblitz上创建并共享它吗？添加全选是可能的，但需要选中应用按钮，因为您将更改现有模板。