我在ngx-datatable的每个标题单元格中都有一个自定义下拉组件

问题描述 投票:2回答:5

我在ngx-datatable的每个标题单元格中都有自定义下拉组件。但是当我点击下拉菜单时,它会进入ngx-datatable体内。我该如何解决这个问题请帮助我。

我使用角4.0和打字稿2.4。

截屏:enter image description here

enter image description here

这是我的代码:

 <div>
      <ngx-datatable style="height:450px;"
        class='material'
        [rows]='activeTabData | filtermanual:propKey:propValue | orderBy : {property: column, direction: direction}'
        [columnMode]="'force'"
        [headerHeight]="height"
        [rowHeight]="getRowHeight"
        [scrollbarV]="true"
        [scrollbarH]="true"
        [loadingIndicator]="loadingIndicator"
        [rowClass]="getRowClass"
        (page)="onPage($event)">
      <div>
        <ngx-datatable-column 
          [width]="50"
          [frozenLeft]="true">
            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
              <input type="checkbox" 
              (ngModelChange)="checkButtonState($event, row)"
              [ngModel]="row.status"
              >
          </ng-template>
        </ngx-datatable-column>

        <ul>
          <li *ngFor="let col of tableKeys; let i=index; let last = last" >
        <ngx-datatable-column name={{col}} width="230" [resizeable]="true">
          <ng-template let-column="column" ngx-datatable-header-template >
              <div class="draggable" style="height:30px;width:160px;background:transparent;z-index:1000;position:relative;cursor:pointer;"></div>

                                    <ng2-multiselect 
                                      [options]="dropdowns[col]"
                                      [loading]="isLoading"
                                      [(ngModel)]="multiModels[col]"
                                      [texts]="{'defaultTitle':col}"
                                      (dropdownOpen)="dropdownOpen()"
                                      (dropdownClosed)="dropdownClosed(col)"
                                      >
                                    </ng2-multiselect>   
        </ng-template>

          <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
              <i [innerHTML]="row[col]"></i>
          </ng-template>
        </ngx-datatable-column>

          </li>
        </ul>
      </div>
      </ngx-datatable>
    </div>
angular typescript angular2-template ngx-datatable
5个回答
1
投票

我有同样的问题: 我的自定义下拉列表被<datatable-body>隐藏了。 我得到了它的工作:

.datatable-header-cell,
.datatable-header {
    overflow:visible !important;   
}
.datatable-row-center{
   z-index:11;
}

但随后使用水平滚动[scrollbarH]<datatable-header>内部的内容水平地飞越,所以我将<ngx-datatable>包裹在<div>并将overflow:hidden设置为它。

我希望有人可能会在将来发现它有用。 :)


0
投票

您可以通过添加TemplateRef作为ViewChild来共享模板。

让我给你举个例子:

假设我们有这些列和模板(在列之外):

   <ngx-datatable-column prop="deadline" name="Deadline" [cellTemplate]="dateTemplate">
   <ngx-datatable-column prop="entryDate" name="Entry date" [cellTemplate]="dateTemplate">

   <ng-template #dateTemplate let-value="value">{{value | date:"shortDate"}}</ng-template>

你可以看到我将[cellTemplate]绑定到dateTemplate。此日期模板在我的组件中定义为带有模板引用的ViewChild。

export class TableComponent implements OnInit {
  @ViewChild("dateTemplate") dateTemplate: TemplateRef<any>;

...

在你的情况下,你可以做同样的,但使用[cellHeaderTemplate]而不是[cellTemplate]


0
投票

您可以尝试将以下内容添加到组件样式中:

ngx-datatable {
  overflow: visible;
  .datatable-header {
    overflow: visible;
    .datatable-header-cell {
      overflow-x: visible;
    }
  }
}

0
投票

我找到了这个解决方案(可以帮助某人):1)使用@ ng-select / ng-select 2)添加属性:appendTo =“body”,例如:

    <ng-select [items]="simpleItems"
               appendTo="body"
               [(ngModel)]="selectedSimpleItem">
    </ng-select>

无需任何其他z-index配置。


0
投票

只是在组件中使用ViewEncapsulation.None进行设置

datatable-body-cell {
  overflow: visible !important;
}

在.css或.scss中为我做了这份工作。

© www.soinside.com 2019 - 2024. All rights reserved.