Question

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

我正在使用angular 4.0和typescript 2.4。

截屏：

这是我的代码：

 <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>

Answer 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它。

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

Answer 2

您可以通过将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]！

Answer 3

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

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

Answer 4

我找到了此解决方案（可能会对某人有所帮助）： 1）使用@ ng-select / ng-select 2）添加属性：appendTo =“ body”，例如：

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

不需要任何其他z-index配置。

Answer 5

仅在组件和{p>中设置ViewEncapsulation.None

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

.css或.scss中的内容为我完成了工作。

Answer 6

对于ngbDropdown下拉菜单，我通过添加如下的container="body"属性来解决了类似的问题：

<div ngbDropdown class="d-inline-block" container="body">
....
.....
</div>

Answer 7

有类似的问题，显示ngx-datatable列中的下拉列表（使用ngbTypeahead）。将 container="body" 添加到输入元素对我来说很有效。

<input name="xyz" [ngbTypeahead]="searchElement" container="body"/>

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

7 个答案: