Discussion :

[momjunior]

Bonjour

J'utilise datatables dans mon application Angular et j'ai inséré des checkbox dans la 1ère colonne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
this.dtColumnSearchingOptions = {
 
    //  ajax: 'fake-data/datatable-data.json',
	"language": {
		"url": "fake-data/French.json",
		 buttons: {
                copyTitle: 'Ajouté au presse-papiers',
                copyKeys: 'Appuyez sur <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> pour copier les données du tableau à votre presse-papiers. <br><br>Pour annuler, cliquez sur ce message ou appuyez sur Echap.',
                copySuccess: {
                    _: '%d lignes copiées',
                    1: '1 ligne copiée'
                }
            }
		},
      columns: [
	  {
        title: '<input type="checkbox" id="checkall" />',
        render: function (data: any, type: any, full: any) {
          return '<input type="checkbox" class="checkthis" />';
        }
      },

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<table datatable [dtOptions]="dtColumnSearchingOptions" class="table table-striped row-border table-hover" *ngIf="this.temp">
 
 <tr *ngFor="let compte of this.empData " (click)="wholeRowClick()">
                <td></td>
                <td>{{compte.firstName}}</td>
                <td>{{compte.lastName}}</td>
                <td>{{compte.job}}</td>
                <td>{{compte.address}}</td>
                <td>{{compte.email}}</td>				
 </tr>

Cependant, je voudrai que toutes les checkbox soient cochées ou décochées lorsque je cliquerai sur celle qui est placée dans l’entête.

Comment faire?

[djedjethai]

Bonjour,

Tu peux faire un truc du style,

dans ton typescript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
//en propriete, false par default
isAllChecked: boolean = false;
 
//la method liee au click
wholeRowClick() {
if (this.isAllChecked) {
   this.isAllChecked = false;
} else {
   this.isAllChecked = true;
}

dans ton html, juste pour l'ex :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div (click)="wholeRowClick()">
  <form action="/action_page.php">
  <input type="checkbox" name="vehicle" value="Bike" ng-checked="isAllChecked"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" ng-checked="isAllChecked"> I have a car<br>
  <input type="checkbox" name="vehicle" value="motobike" ng-checked="isAllChecked"> I have a motobike<br>
  <input type="submit" value="Submit">
</form> 
</div>