【问题标题】:How to scroll the horizontal scroll bar when drag the column of ngx-datatable,Angular4拖动ngx-datatable,Angular4的列时如何滚动水平滚动条
【发布时间】:2021-11-12 17:37:36
【问题描述】:

我试图在拖动 ngx-datatable 的列标题时滚动水平滚动条。我使用的是 Angular4。在我的 ngx-datatable 中有水平滚动条,当我从左到右拖动第一列时,然后水平滚动条应该移动。当我从左到右拖动 ngx-datatable 的列时,如何使水平滚动条移动。请帮帮我

 <ngx-datatable
    class="material"
    [rows]="row"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [reorderable]="true"
    [scrollbarV]="true"
    [scrollbarH]="true"
    >
    <ngx-datatable-column name="Name" [minWidth]="150" 
        [resizeable]="true">
      <ng-template let-column="column" ngx-datatable-header-template >
        Name
      </ng-template>

      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
        <div>
          {{row['Name']}}
        </div>
      </ng-template>
  </ngx-datatable-column>    

   <ngx-datatable-column name="Address" [minWidth]="150" 
        [resizeable]="true">
      <ng-template let-column="column" ngx-datatable-header-template >
        Address
      </ng-template>

      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
        <div>
          {{row['Address']}}
        </div>
      </ng-template>
  </ngx-datatable-column>  


   <ngx-datatable-column name="Age" [minWidth]="150" 
        [resizeable]="true">
      <ng-template let-column="column" ngx-datatable-header-template >
        Age
      </ng-template>

      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
        <div>
          {{row['Age']}}
        </div>
      </ng-template>
  </ngx-datatable-column>  

</ngx-datatable>

【问题讨论】:

    标签: angular typescript ngx-datatable


    【解决方案1】:

    需要这两个属性

    [scrollbarV]="true" [scrollbarH]="true"
    

    并添加你的组件 css 或全局 style.css 这个类:

    .material {
        height: 550px
    }
    

    "material" 是你的 ngx-datatable 类,如果你想改变它。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-09-05
      • 2016-12-04
      • 1970-01-01
      • 2020-11-23
      • 1970-01-01
      相关资源
      最近更新 更多