我在ngx-datatable的每个标题单元格中都有自定义下拉组件。但是当我点击下拉菜单时,它会进入ngx-datatable体内。我该如何解决这个问题请帮助我。
我使用角4.0和打字稿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>
我有同样的问题:
我的自定义下拉列表被<datatable-body>
隐藏了。
我得到了它的工作:
.datatable-header-cell,
.datatable-header {
overflow:visible !important;
}
.datatable-row-center{
z-index:11;
}
但随后使用水平滚动[scrollbarH]
,<datatable-header>
内部的内容水平地飞越,所以我将<ngx-datatable>
包裹在<div>
并将overflow:hidden
设置为它。
我希望有人可能会在将来发现它有用。 :)
您可以通过添加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]
!
您可以尝试将以下内容添加到组件样式中:
ngx-datatable {
overflow: visible;
.datatable-header {
overflow: visible;
.datatable-header-cell {
overflow-x: visible;
}
}
}
我找到了这个解决方案(可以帮助某人):1)使用@ ng-select / ng-select 2)添加属性:appendTo =“body”,例如:
<ng-select [items]="simpleItems"
appendTo="body"
[(ngModel)]="selectedSimpleItem">
</ng-select>
无需任何其他z-index配置。
只是在组件中使用ViewEncapsulation.None
进行设置
datatable-body-cell {
overflow: visible !important;
}
在.css或.scss中为我做了这份工作。