gpt4 book ai didi

jquery - Angular 6 - 数据表

转载 作者:行者123 更新时间:2023-12-04 15:52:33 25 4
gpt4 key购买 nike

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

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

enter image description here

创建的所有示例都是使用 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;
};

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

最佳答案

我不喜欢这种 jquery 的“困惑”,所以我做了这个 stackblitz展示另一种可能的解决方案,从我的 Angular 来看,这要好得多。

首先,您需要为您的数据项实现检查绑定(bind),让您的生活更轻松。

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

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

关于jquery - Angular 6 - 数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53265416/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com