[英]Fix header in ngx-datatable
我正在嘗試修復 ngx-datatable 的 header,如下所示: https://swimlane.ZBF215181B5140522137B3D4F6B735#virtual-sc.io/ngx-datatable
我需要一個帶有固定 header 和可滾動內容的表格。
下面是代碼:
<ngx-datatable
[rows]="qrCodes"
class="material qr-list-table"
[columnMode]="'force'"
[rowHeight]="'auto'"
[limit]="10"
[count]="10"
[selected]="selected"
[selectAllRowsOnPage]="false"
[displayCheck]="displayCheck"
(activate)="onActivate($event)"
(select)="onSelect($event)"
[scrollbarV]="true"
[scrollbarH]="false"
[selectionType]="SelectionType.checkbox"
(mouseover)="getMouseOver()" (mouseleave)="getMouseLeave()">
<ngx-datatable-column
[headerCheckboxable]="true"
[checkboxable]="true">
</ngx-datatable-column>
<ngx-datatable-column prop="name">
<ng-template ngx-datatable-header-template>
Name of QR Code
</ng-template>
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<div class="row qr-info">
{{row.name}}
</div>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column prop="created">
<ng-template ngx-datatable-header-template>
QR Type
</ng-template>
<ng-template ngx-datatable-cell-template let-row="row" let-column="column" let-value="value" ngIf="isHoverButtonVisible">
{row?.qr_type_display}}
</ng-template>
</ngx-datatable-column>
我從中獲取數據的 ts 文件如下:
ngOnInit() {
this.qrCodes = this.qrCodeService.qrCodes;}
在 ngx-datatable 指令中傳遞另一個屬性[scrollbarV]="true"
例如:
<ngx-datatable [scrollbarV]="true"> </ngx-datatable>
試試下面的代碼。 它會工作
HTML 代碼
<div style="height:100%;">
<ngx-datatable class="material server-scrolling-demo" [rows]="resultList" [columnMode]="columnMode.force"
[headerHeight]="50" [rowHeight]="50" [loadingIndicator]="false" [scrollbarV]="true" [scrollbarH]="true"
style="height: 100%;">
<ngx-datatable-column *ngFor="let columnInfo of columnInfoArray" name="{{columnInfo['label']}}"
prop="{{columnInfo['prop']}}">
</ngx-datatable-column>
</ngx-datatable>
</div>
Typescript碼
import { ColumnMode } from "@swimlane/ngx-datatable";
// inside class global variables
public columnMode = ColumnMode;
public resultList = [{
user_name: "Test",
email: "test@example.com",
phone_number: "022 3254 2454 45",
gender: "Male",
address: "1, Main street, Chennai - 600123"
}]
public columnInfoArray = [{
label: "User Name",
prop: "user_name"
}, {
label: "Email",
prop: "email"
}, {
label: "Phone",
prop: "phone_number"
}, {
label: "Gender",
prop: "gender"
}, {
label: "Address",
prop: "address"
}]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.