<div class="content__title">
|
<h1>
|
A Full Demo Tables
|
</h1>
|
</div>
|
<nz-card>
|
<form nz-form>
|
<div nz-row nz-form-item [nzGutter]="16">
|
<div nz-form-label nz-col [nzSm]="2">
|
<label for="name">Name</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="5">
|
<nz-input [(ngModel)]="args.name" name="name" [nzId]="'name'"></nz-input>
|
</div>
|
<div nz-form-label nz-col [nzSm]="2">
|
<label>Created</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="8">
|
<div nz-row>
|
<div nz-form-control nz-col [nzSpan]="11">
|
<nz-datepicker [(ngModel)]="args.created_begin" name="created_begin" [nzPlaceHolder]="'begin'"></nz-datepicker>
|
</div>
|
<div nz-col [nzSpan]="1">
|
<p nz-form-split>-</p>
|
</div>
|
<div nz-form-control nz-col [nzSpan]="11">
|
<nz-datepicker [(ngModel)]="args.created_end" name="created_end" [nzPlaceHolder]="'end'"></nz-datepicker>
|
</div>
|
</div>
|
</div>
|
<div nz-form-label nz-col [nzSm]="2">
|
<label>Gender</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="5">
|
<nz-dropdown>
|
<a class="ant-dropdown-link" nz-dropdown>
|
{{args.gender ? args.gender : 'unlimit'}} <i class="anticon anticon-down"></i>
|
</a>
|
<ul nz-menu>
|
<li nz-menu-item (click)="args.gender=''">unlimit</li>
|
<li nz-menu-item (click)="args.gender='male'">male</li>
|
<li nz-menu-item (click)="args.gender='female'">female</li>
|
</ul>
|
</nz-dropdown>
|
<span class="text-grey-light">(only valid)</span>
|
</div>
|
</div>
|
<div nz-row nz-form-item [nzGutter]="16" class="mb0">
|
<div nz-form-label nz-col [nzSm]="2">
|
<label for="userid">User ID</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="5">
|
<nz-input [(ngModel)]="args.userid" name="userid" [nzId]="'userid'" [nzPlaceHolder]="'placeholder'"></nz-input>
|
</div>
|
<div nz-form-label nz-col [nzSm]="2">
|
<label>Modified</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="8">
|
<div nz-row>
|
<div nz-form-control nz-col [nzSpan]="11">
|
<nz-datepicker [(ngModel)]="args.modified_begin" name="modified_begin" [nzPlaceHolder]="'begin'"></nz-datepicker>
|
</div>
|
<div nz-col [nzSpan]="1">
|
<p nz-form-split>-</p>
|
</div>
|
<div nz-form-control nz-col [nzSpan]="11">
|
<nz-datepicker [(ngModel)]="args.modified_end" name="modified_end" [nzPlaceHolder]="'end'"></nz-datepicker>
|
</div>
|
</div>
|
</div>
|
<div nz-col [nzSm]="5" [nzOffset]="2">
|
<button nz-button [nzType]="'primary'" (click)="load(1)" [nzLoading]="loading"><span>Search</span></button>
|
<button nz-button (click)="clear()" [disabled]="loading">Clear</button>
|
</div>
|
</div>
|
</form>
|
</nz-card>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="24">
|
<nz-card>
|
<div class="mb-sm text-right">
|
<nz-dropdown>
|
<button nz-button nz-dropdown [disabled]="!_allChecked && !_indeterminate">
|
<span>Export</span> <i class="anticon anticon-down"></i>
|
</button>
|
<ul nz-menu>
|
<li nz-menu-item>Excel</li>
|
<li nz-menu-item>JSON</li>
|
<li nz-menu-item>PNG</li>
|
</ul>
|
</nz-dropdown>
|
</div>
|
<nz-table #nzTable
|
[nzAjaxData]="list"
|
[nzShowSizeChanger]="true"
|
[nzLoading]="loading"
|
[nzTotal]="total"
|
[(nzPageIndex)]="pi"
|
(nzPageIndexChange)="load()"
|
[(nzPageSize)]="ps"
|
(nzPageSizeChange)="load()">
|
<thead nz-thead>
|
<tr>
|
<th nz-th [nzCheckbox]="true">
|
<label nz-checkbox
|
[(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate"
|
(ngModelChange)="_checkAll()">
|
</label>
|
</th>
|
<th nz-th><span>Avatar</span></th>
|
<th nz-th><span>Name</span></th>
|
<th nz-th><span>Age</span></th>
|
<th nz-th><span>Email</span></th>
|
<th nz-th><span>Event</span></th>
|
<th nz-th><span>Price</span></th>
|
<th nz-th><span>Registered</span></th>
|
<th nz-th><span>Actions</span></th>
|
</tr>
|
</thead>
|
<tbody nz-tbody>
|
<tr nz-tbody-tr *ngFor="let data of nzTable.data">
|
<td nz-td [nzCheckbox]="true">
|
<label nz-checkbox [(ngModel)]="data.checked"
|
(ngModelChange)="refChecked()">
|
</label>
|
</td>
|
<td nz-td>
|
<nz-avatar [nzSrc]="data.picture.thumbnail" [nzSize]="'large'"></nz-avatar>
|
</td>
|
<td nz-td>{{data.name.first}} {{data.name.last}}</td>
|
<td nz-td>
|
<nz-tag *ngIf="data.gender=='female'" [nzColor]="'pink'">female</nz-tag>
|
<nz-tag *ngIf="data.gender=='male'" [nzColor]="'green'">male</nz-tag>
|
</td>
|
<td nz-td>{{data.email}}</td>
|
<td nz-td style="width: 90px">
|
<mini-bar height="30" theme="mini" color="#999" borderWidth="3" [padding]="[36, 50, 30, 0]" [data]="events"></mini-bar>
|
</td>
|
<td nz-td>{{data.price | _currency}}</td>
|
<td nz-td>{{data.registered | _date: 'YYYY年MM月DD日'}}</td>
|
<td nz-td>
|
<a (click)="showMsg('Edit')">Edit</a>
|
<span nz-table-divider></span>
|
<nz-popconfirm [nzTitle]="'Are you sure？'" [nzOkText]="'ok'" [nzCancelText]="'cancel'" (nzOnConfirm)="showMsg('has deleted')" (nzOnCancel)="showMsg('cancel delete')">
|
<a nz-popconfirm>Delete</a>
|
</nz-popconfirm>
|
</td>
|
</tr>
|
</tbody>
|
</nz-table>
|
</nz-card>
|
</div>
|
</div>
|
