angular - Ngx-Datatable 模板问题
问题描述
我正在使用 ngx-datatable 在我的 Angular 组件中呈现表格数据(下图)。一切正常,除了我无法从“操作”标题列中删除排序功能。在检查它时,我可以看到它在 span class = "datatable-header-cell-wrapper" 下使用 span class = "sort-btn"。关于如何删除排序功能的任何想法?我添加了以下代码:
日程管理.component.html:
<ol class="breadcrumb">
<li class="breadcrumb-item"><a [routerLink]="['/home']">Home</a></li>
<li class="breadcrumb-item"><a [routerLink]="['/cldtools']">Cloud Runner Tools</a></li>
<li class="breadcrumb-item active">Schedule Management</li>
</ol>
<div class="row" style="margin-top:20px;">
<div class="col-lg-12">
<h2>All Schedules</h2>
</div>
</div>
<div class="row" style="margin-top:20px;">
<div class="col-lg-12">
<div class="dropdown">
<button class="btn btn-primary">Create New </button>
<div class="dropdown-content">
<a [routerLink]="['/schedulemanagement/autoStartStopVm']" [queryParams]="{dropDownListSelectedItem:'AutoStart'}">AutoStart</a>
<a [routerLink]="['/schedulemanagement/autoStartStopVm']" [queryParams]="{dropDownListSelectedItem:'AutoShutdown'}">AutoShutdown</a>
<!--<a href="#">Auto Scale</a>-->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<!--<div style="overflow-x:scroll; overflow-y:scroll; width: 100%">-->
<ngx-datatable #table
class='datatable'
[sortType]="'single'"
[columns]="columns"
[columnMode]="'flex'"
[headerHeight]="40"
[footerHeight]="50"
[rowHeight]="'auto'"
[groupRowsBy]="'isCurrentDate'"
[limit]="10"
[rows]='rows'
[groupExpansionDefault]="true"
[scrollbarH]="true">
<ngx-datatable-group-header [rowHeight]="60" #myGroupHeader>
<ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
<div style="padding-left:5px;">
<a title="Expand/Collapse Group"
(click)="toggleExpandGroup(group)">
<b>{{group.value[0].isCurrentDate === true? 'Scheduled for Today':'Scheduled for other days'}}</b>
</a>
</div>
</ng-template>
</ngx-datatable-group-header>
<ng-template #sortableColumnTemplate let-sort="sortFn" let-column="column" ngx-datatable-header-template>
<span (click)="sort()" class="sort-fullwidth">{{column?.name}}</span>
<input class="filter-box" placeholder='' (keyup)='updateFilter($event)' />
</ng-template>
<ng-template #dateColumn let-row="row" let-value="value" ngx-datatable-cell-template>
<div>{{value | date:"short"}}</div>
</ng-template>
<ng-template #actionRowTemplate let-row="row" let-value="value" ngx-datatable-cell-template>
<div style="display:block; text-align:center;">
<!-- <a title="copy"><i class="glyphicon glyphicon-copy"></i></a> -->
<a title="delete" (click)="deleteWarningModal.show();scheduleToDelete = value"><i class="glyphicon glyphicon-remove"></i></a>
</div>
</ng-template>
</ngx-datatable>
</div>
</div>
<loading-spinner *ngIf="showSpinner"></loading-spinner>
<modal #deleteWarningModal>
<div class="app-modal-header">
Warning
</div>
<div class="app-modal-body">
Are you sure you want to delete the schedule?
</div>
<div class="app-modal-footer">
<button type="button" (click)="deleteSchedule()" class="btn btn-primary">Yes</button>
<button type="button" (click)="deleteWarningModal.hide()" class="btn btn-secondary">No</button>
</div>
</modal>
日程管理.component.ts:
import { Component, Inject, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { GridComponent } from '../shared/grid.component';
import { SchdedulingDetails } from '../../models/schedulingDetails';
//Services
import { ScheduleManagementService } from '../../services/schedulemanagement.service';
import { ToasterNotificationService } from '../../services/toasterNotification.service';
import { ModalComponent } from '../shared/modal.component';
@Component({
selector: 'schedulemanagement',
templateUrl: './schedule-management.component.html',
styleUrls: ['./schedule-management.component.css', '../shared/grid.component.css']
})
export class ScheduleManagementComponent extends GridComponent implements OnInit {
constructor(private _schedManagementService: ScheduleManagementService,
private notificationsService: ToasterNotificationService) {
super();
}
scheduleToDelete: string;
showSpinner: boolean = true;
@ViewChild('deleteWarningModal') deleteWarningModal: ModalComponent;
@ViewChild('dateColumn') dateColumn: TemplateRef<any>;
ngOnInit(){
this.buildTable();
this.populateTable();
}
buildTable() {
this.columns = [
{
name: 'SID',
prop: 'sapsid',
sortable: true,
sortString: '',
flexGrow: 1,
cellTemplate: this.customColumnTemplate,
headerTemplate: this.sortableColumnTemplate
},
{
name: 'CI Host',
prop: 'ciHostName',
sortable: true,
sortString: '',
flexGrow: 2,
cellTemplate: this.customColumnTemplate,
headerTemplate: this.sortableColumnTemplate
},
{
name: 'App Host',
prop: 'sapAppHostName',
sortable: true,
sortString: '',
flexGrow: 2,
headerTemplate: this.sortableColumnTemplate
},
{
name: 'Instance#',
prop: 'sapAppInstanceNumber',
sortable: true,
sortString: '',
flexGrow: 2,
headerTemplate: this.sortableColumnTemplate
},
{
name: 'DB Host',
prop: 'dbHostName',
sortable: true,
sortString: '',
flexGrow: 2,
headerTemplate: this.sortableColumnTemplate
},
{
name: 'Starts on',
prop: 'startDateTime',
sortable: true,
sortString: '',
flexGrow: 3,
headerTemplate: this.sortableColumnTemplate,
cellTemplate: this.dateColumn
},
{
name: 'Ends on',
prop: 'stopDateTime',
sortable: true,
sortString: '',
flexGrow: 3,
headerTemplate: this.sortableColumnTemplate,
cellTemplate: this.dateColumn
},
{
name: 'Scheduled For',
prop: 'actionName',
sortable: true,
sortString: '',
flexGrow: 2.7,
headerTemplate: this.sortableColumnTemplate,
},
{
name: 'Frequency',
prop: 'frequency',
sortable: true,
sortString: '',
flexGrow: 2,
headerTemplate: this.sortableColumnTemplate
},
{
name: 'Action',
prop: 'id',
cellTemplate: this.actionRowTemplate,
sortable: false,
flexGrow: 1.3
}
];
}
populateTable() {
this._schedManagementService.getSchedulingDetails().subscribe(
response=>{
this.showSpinner = false;
this.updateRows(response);
}, error => {
this.showSpinner = false;
this.notificationsService.notify('error', 'Error', "Unexpected error occured while retrieving Scheduling details.");
}
)
}
deleteSchedule(){
let id = this.scheduleToDelete;
this._schedManagementService.deleteSchedulingDetails(id).subscribe(
result =>{
this.rows = this.rows.filter(r=> r.id !== id);
this.deleteWarningModal.hide();
},error =>{
this.notificationsService.notify('error', 'Error', "Unexpected error occured while deleting schedule.");
});
}
}
解决方案
我可能有点晚了,但是对于仍然存在此问题的人,您可以将组件样式中的 css 类设置为:
.sort-btn { display: none; }
用按钮隐藏跨度。
至于停用排序,当您在 .ts 文件中定义列时,将不可排序的列的可排序属性设置为 false:
this.columns = [
{
name: 'SID',
prop: 'sapsid',
sortable: false, // THIS HERE SET TO FALSE
sortString: '',
flexGrow: 1,
cellTemplate: this.customColumnTemplate,
headerTemplate: this.sortableColumnTemplate
}, ...
如果列仍在排序(不应该),您可以尝试在 ngx-datatable中将外部排序设置为 true:
<ngx-datatable [externalSorting]="true">
</ngx-datatable>
推荐阅读
- windows-7 - 客户端应用程序发送用户名,SQL Server 2019 将其转换为 Windows 身份验证并引发错误
- cassandra - 修复 Cassandra 中的 system_auth 密钥空间
- php - 在类别或标签页面上找不到菜单项
- laravel - Laravel Collection sortBy函数的问题
- redis - Redis 6 aclfile 在 Openshift pod 中未生效
- python - 根据循环值输出获胜者的函数
- node.js - 您可以将 Map 实例用作简单的商店属性吗?
- r - 在 R 中添加空格 - 需要时将“a<-b”替换为“a <-b”
- python - 如何为每个索引找到具有最大列值的行?
- scala - 使用循环和仅循环从Scala中的列表中删除元素