Angular 6 - 数据表

Question

我使用带有复选框的 Angular-Datatables（最新版本）

我想定义一个“全选”功能。 但我不知道如何将所有复选框标记为“已选中”：

创建的所有示例都是使用 Angular JS 或 Jquery 开发的，但是当我阅读文档时，它似乎不是这样工作的。

我认为（我可能错了）正确的方法是使用this.datatableElement.dtInstance。

我已经使用它来实现单个列过滤选项： https://l-lin.github.io/angular-datatables/#/advanced/individual-column-filtering

所以我想我必须保留它。

我的 HTML：

 <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                        <!--<table #dataTable class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">-->
                            <tfoot>
                                <tr>
                                    <th>Sélection</th>
                                    <!--<th>id</th>-->
                                    <th><input type="text" placeholder="Recherche Identifiant" name="search-identifiant"/></th>
                                    <th><input type="text" placeholder="Recherche nom" name="search-nom"/></th>
                                    <th><input type="text" placeholder="Recherche prénom" name="search-prenom"/></th>
                                    <th>Action</th>
                                </tr>
                            </tfoot>
                            <thead>
                                <tr>
                                    <th style="width: 1%">
                                        <input type="checkbox" (click)="masterToggle($event)">
                                    </th>
                                    <!--<th style="width: 1%">-->
                                        <!--<mat-checkbox (change)="$event ? masterToggle($event) : null"-->
                                        <!--[checked]="selection.hasValue() && isAllSelected(contactList.length)">-->
                                        <!--</mat-checkbox>-->
                                    <!--</th>-->
                                    <th>Identifiant</th>
                                    <th>Nom</th>
                                    <th>Prenom</th>
                                    <th>Action</th>
                                </tr>
                            </thead>

但是我不知道怎么实现masterToggle()函数...

我的 dtOptions 配置：

this.dtOptions = {
            pagingType: 'full_numbers',
            // displayLength: 10,
            // serverSide: true, // si true, execute l'appel ajax, puis l'exécute à chaque utilisation d'un des filtres
            // processing: true,
            ajax: (dataTablesParameters: any, callback) => {
                console.log('ContactsComponent - call Ajax()');
                // console.log(dataTablesParameters);
                that.http.get<ApiResponse>('/api/contacts')
                    .subscribe(resp => {
                        that.contactList = resp.content;
                        // console.log(that.contactList);
                        that.loading = false;
                        callback({
                            // recordsTotal: resp.totalElements,
                            // recordsFiltered: resp.totalElements,
                            // recordsFiltered: 0,
                            // data: []
                           data: that.contactList
                        });
                    });
            },
 columns: [
                {
                    // title: 'Selection',
                    data: null },
                // {
                //     title: 'N°',
                //     data: 'idaicontact' },
                {
                    // title: 'Identifiant',
                    data: 'identifiant' } ,
                {
                    // title: 'Nom',
                    data: 'nom' },
                {
                    // title: 'Prénom',
                    data: 'prenom' }
                ,
                {
                    // title: 'Action',
                    data: null }
            ],
columnDefs: [
                {
                    orderable: false,
                    // className: 'select-checkbox', // classname définit une checkbox par dessus une case vide [object Object] (data: null)
                    targets: [0],
                    render: function(data, type, full, meta) {
                        return '<input type="checkbox" ">';

                        // return ' <mat-checkbox (change)="$event ? masterToggle($event) : null"' +
                        //     '[checked]="selection.hasValue() && isAllSelected(contactList.length)">' +
                        //     '</mat-checkbox>'
                    }
                },
]
rowCallback: (row: Node, data: any[] | Object, index: number) => {
                const self = this;
                // Unbind first in order to avoid any duplicate handler
                // (see https://github.com/l-lin/angular-datatables/issues/87)
                // $('td:first-child', row).unbind('click');
                // $('td:first-child', row).bind('click', () => {
                const elt = $('td', row).find('[type="checkbox"]');
                if (elt) {
                    elt.unbind('click');
                    elt.bind('click', () => {
                        if (elt[0].checked) {
                            console.log((data as Contact).identifiant + ' a été sélectionné');
                        } else {
                            console.log((data as Contact).identifiant + ' a été déselectionné');
                        }
                        // self.someClickHandler(row, data, index);
                    });
                }

单个列过滤使用 dtInstance ：

ngAfterViewInit() {
        console.log('ContactsComponent - ngAfterViewInit()');
        this.dtTrigger.next();
        this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
            // console.log(dtInstance);
            // console.log(dtInstance.data());
            dtInstance.columns().every(function () {
                const that = this;
                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this['value']) {
                        that.search(this['value'])
                            .draw();
                    }
                });
            });
            // dtInstance.on('search.dt', function() {
            //     // Do you stuff
            //     console.log('search: ' + dtInstance.search());
            // });
        });

    }

但是如何将它用于我的复选框？

更新 我已经找到了解决方案：

this.isAllChecked = $('th', dtInstance.table(0).node()).find('[type="checkbox"]')[0].checked;
            console.log('Select All: ' + this.isAllChecked);
            let elts: any[] = [];
            $('td', dtInstance.table(0).node()).find('[type="checkbox"]') // renvoie la valeur des checkbox uniquement pour les
            // lignes affichées !!
            elts = $('td', dtInstance.table(0).node()).find('[type="checkbox"]');
            for (const elt of elts) {
                elt.checked = this.isAllChecked;
            };

最后一个问题是只有第一页的复选框被更新了……

Answer 1

我不喜欢这种 jquery “混乱”，所以我制作了这个 stackblitz 来展示另一种可能的解决方案，从我的角度来看，这要好得多。

首先，您需要为您的数据项实现检查绑定，以使您的生活更轻松。

就您使用服务器端处理而言，您需要在客户端存储检查状态，并在每次数据请求后相应地更新checked 属性（isPersonChecked 方法）。为此，有两个数组： checkedPersonIds - 未设置“检查所有”标志时放置已检查项目的位置，uncheckedPersonIds - 设置“检查所有”标志时放置未选中项目的位置。这就是跟踪“已检查”状态所需的全部内容。

希望这会对某人有所帮助。