<div class="content__title">
|
<h1>
|
Fullscreen Table
|
<small>使用
|
<a href="//ng-alain.com/components/simple-table" target="_blank">simple-table</a>、
|
<a href="//ng-alain.com/components/full-content" target="_blank">full-content</a> 组合，由于 nz-table 固定表头暂不支持自适应，因此表格的展示的效果在响应式里面效果并不是特别好。</small>
|
</h1>
|
</div>
|
<full-content (fullscreenChange)="fullChange($event)">
|
<nz-card>
|
<div nz-row class="mb-md">
|
<div nz-col nzSpan="12">
|
<form nz-form [nzLayout]="'inline'">
|
<nz-form-item>
|
<nz-form-label nzFor="userid">User ID</nz-form-label>
|
<nz-form-control>
|
<input nz-input [(ngModel)]="args.userid" name="userid" id="userid">
|
</nz-form-control>
|
</nz-form-item>
|
<nz-form-item>
|
<nz-form-control>
|
<button nz-button [nzType]="'primary'" (click)="st.load()" [nzLoading]="http.loading">Search</button>
|
<button nz-button (click)="st.load({_allow_anonymous: true})" [disabled]="http.loading">Clear</button>
|
</nz-form-control>
|
</nz-form-item>
|
</form>
|
</div>
|
<div nz-col nzSpan="12">
|
<div class="text-right">
|
<nz-dropdown>
|
<button nz-button nz-dropdown>
|
<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>
|
<button nz-button [nzType]="'default'" full-toggle class="ml-sm">Full</button>
|
</div>
|
</div>
|
</div>
|
<simple-table #st [data]="url" [extraParams]="args" [resReName]="{list: 'results' }" [total]="total" [ps]="ps" [columns]="columns"
|
[scroll]="scroll">
|
<ng-template st-row="events" let-item let-index="index">
|
<g2-mini-bar height="15" theme="mini" color="#999" borderWidth="3" [padding]="[0, 0, 0, 0]" [data]="events"></g2-mini-bar>
|
</ng-template>
|
</simple-table>
|
</nz-card>
|
</full-content>
|
