inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

#82 multiselection UI for datatable

Browse Source
This commit is contained in:
Denys Vuika
2016-05-20 13:30:11 +01:00
parent 4e9deac9ed
commit 58f7429f25
7 changed files with 70 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html
View File

@@ -1,7 +1,18 @@
<table *ngIf="data" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
<table
*ngIf="data"
class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
<thead>
<tr>
<!-- Columns -->
<th *ngIf="multiselect">
<label
class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select"
[class.is-checked]="isSelectAllChecked"
for="table-header"
(click)="onSelectAllClick($event)">
<input type="checkbox" id="table-header" class="mdl-checkbox__input" />
</label>
</th>
<th class="mdl-data-table__cell--non-numeric {{col.cssClass}}"
*ngFor="#col of data.getColumns()"
[class.column-header]="col.title"
@@ -21,7 +32,14 @@
<!-- todo: special 'navigate parent row' support -->
<tr *ngFor="#row of data.getRows(); #idx = index">
<td *ngIf="multiselect">
<label
class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select"
[attr.for]="'row[' + idx + ']'"
[class.is-checked]="row.isSelected">
<input type="checkbox" [attr.id]="'row[' + idx + ']'" class="mdl-checkbox__input" [(ngModel)]="row.isSelected" />
</label>
</td>
<td *ngFor="#col of data.getColumns()" [ngSwitch]="col.type"
class="mdl-data-table__cell--non-numeric data-cell {{col.cssClass}}"
(click)="onRowClick(row, $event)" (dblclick)="onRowDblClick(row, $event)">