在拖动ngx-datatable和Angular4列时滚动水平滚动条,可以按照以下步骤进行操作:
以下是一个示例代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-datatable',
template: `
<ngx-datatable
class="material"
[rows]="data"
[columns]="columns"
[scrollbarH]="true"
(columnReordered)="onColumnReordered($event)"
>
</ngx-datatable>
`,
styleUrls: ['./datatable.component.css']
})
export class DatatableComponent {
data: any[] = [
{ name: 'John', age: 25, city: 'New York' },
{ name: 'Jane', age: 30, city: 'London' },
{ name: 'Bob', age: 35, city: 'Paris' }
];
columns: any[] = [
{ prop: 'name', name: 'Name' },
{ prop: 'age', name: 'Age' },
{ prop: 'city', name: 'City' }
];
onColumnReordered(event: any) {
const scrollBar = document.querySelector('.datatable-scroll');
const scrollLeft = (event.column.dragDistance - event.column.dragStartDistance) * -1;
scrollBar.scrollLeft += scrollLeft;
}
}
在上述示例中,我们使用了ngx-datatable组件来展示数据,并监听了列拖动事件columnReordered
。在onColumnReordered
方法中,我们获取拖动的距离,并将其应用到滚动条上,实现水平滚动的效果。
请注意,以上示例中的代码仅供参考,具体实现方式可能因项目环境和需求而有所不同。对于ngx-datatable的更多详细信息和使用方法,可以参考腾讯云的相关文档和示例代码。
领取专属 10元无门槛券
手把手带您无忧上云