[英]How use sorting in ngx-datatable / ngx-datatable-column in Angular?
[英]Is it possible to use the input property [columns], together with the ngx-datatable-column directive?
所以我正在为我的应用程序中的表格开发一项功能。 我已经将 ngx-datatable 作为一个组件进行了抽象,该组件充当我应用程序中其他组件的外观(someComponent => FacadeTableComponent => Ngx-DataTable)。
这些列是基于 someComponent 在 FacadeTableComponent 中创建的,并作为输入传递给 NgxDataTable。
但现在我想向数据表添加一个树视图(有效),但我希望 FacadeTableComponent 设置一个默认的第一列,并带有一个按钮来执行树的折叠/展开。 所以我认为默认列可以定义为 FacadeTableComponent html 模板中的 ngx-datatable-column 。 问题似乎是输入列似乎覆盖了我的默认列。
现在我尝试以某种方式使用@ViewChild 获取 ngx-datatable-column 并将其取消移动到 FacadeTableComponent 中的生成列,但我无法将其作为指令获取,而是作为 ElementRef 获取。
我当然可以在 .ts 文件中定义一个默认列,并在生成其余列时生成它,但我想知道是否可以按照我在标题中描述的方式来完成。
这个默认列的原因是,当我将现有列之一设置为treeView列时,ngx数据表添加了一个默认按钮,即使我为单元格提供了自己的模板,并且我想在模板。
<ngx-datatable #ngxDataTable class="datatable" [rows]="collection" [columnMode]="columnMode"
[footerHeight]="footerHeight" [selectionType]="selectionType" [sortType]="sortType" [sorts]="sorts"
[rowIdentity]="rowIdentity" [messages]="tableMessages" [selected]="selectedRows" [columns]="columns"
[headerHeight]="headerHeight" [rowHeight]="rowHeight" [scrollbarV]="true" [scrollbarH]="true"
(select)="onSelect($event)" (activate)="onActive($event)" [externalSorting]="true" [rowClass]="rowCssClass"
[sortType]="'single'" [treeFromRelation]="'MasterId'" [treeToRelation]="'id'"
(treeAction)="onTreeAction($event)" (sort)="sortRows($event)" (resize)="resizeTriggered($event)">
<!-- Datatable tree view column -->
<ngx-datatable-column #column_tree_view name="Tree" [isTreeColumn]="true" [width]="150"
[treeLevelIndent]="20">
<ng-template ngx-datatable-tree-toggle let-tree="cellContext">
<button [disabled]="tree.treeStatus==='disabled'" (click)="tree.onTreeAction()">
<span *ngIf="tree.treeStatus==='loading'">
...
</span>
<span *ngIf="tree.treeStatus==='collapsed'">
↑
</span>
<span *ngIf="tree.treeStatus==='expanded'">
↓
</span>
<span *ngIf="tree.treeStatus==='disabled'">
⃠
</span>
</button>
</ng-template>
</ngx-datatable-column>
<ngx-datatable>
如果有人踩到这个问题,我已经解决了:
首先我们在 FacadeTableComponent 的 html 上定义一个 ng-template:
<ng-template #treeTemplate let-row="row">
<div *ngIf="row.IsTreeColumn" class="tree-cell">
<ng-container *ngTemplateOutlet="treeColumnTemplate; context: {row : row}"></ng-container>
<p-button (click)="onTreeAction(row)">
<span *ngIf="row.treeStatus==='collapsed'">
↑
</span>
<span *ngIf="row.treeStatus==='expanded'">
↓
</span>
</p-button>
</div>
之后,我只需使用指令 viewChild 获取模板,定义一个属性值为 '_treeColumnName' 的列,该列作为 Facade 的输入提供,并将其取消移动到列数组:
@ViewChild('treeTemplate') private _treeViewTemplate: TemplateRef<any>;
private createTreeViewColumn(): void {
const column: TableColumn= {
name: this._treeColumnName,
prop: this._treeColumnName,
} as TableColumn;
if (this.columns.findIndex((tablecolumn: TableColumn) => tablecolumn.prop === this._treeColumnName) === -1) {
// the isTreeColumn is not included in the TableColumn, therefore a cast is needed
const tablecolumn = column as TableColumn;
tablecolumn.isTreeColumn = true;
this.columns.unshift(tablecolumn);
}
}
private removeTreeViewColumn(): void {
const treecolumnindex = this.columns.findIndex((tablecolumn: TableColumn) => tablecolumn.prop === this._treeColumnName);
if (treecolumnindex !== -1) {
this.columns.splice(treecolumnindex, 1);
}
}
最后,我只是将实现添加到展开/折叠功能中:
private readonly _treeStatusCollapsed: string = 'collapsed';
private readonly _treeStatusExpanded: string = 'expanded';
...
/** Expands or collapses a tree view row
*/
public onTreeAction(event: any): void {
const row = event;
if (row.treeStatus === this._treeStatusCollapsed) {
row.treeStatus = this._treeStatusExpanded;
} else {
row.treeStatus = this._treeStatusCollapsed;
}
// trigger a change detection
this.rows= [...this.rows];
this._changeDetectorRef.detectChanges();
}
就是这样,就像一个魅力。 当然,然后可以提供它想要的任何模板,或者通过 css 类更改图标。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.