带有 ngx-bootstrap 的 ag-grid 自定义日期组件

Question

我想用一个漂亮的日期选择器创建我的自定义日期过滤器。我添加了一个自定义日期组件，如下所述：https://www.ag-grid.com/javascript-grid-date-component

在这个组件中，我使用了 ngx-bootstrap 的 BsDatepickerModule。日期选择器正在显示和工作。

问题是，选择日期后，不仅日期选择器关闭，整个过滤器菜单也关闭。我希望用户先按应用过滤器。这对于用户必须输入两个日期的日期范围尤其麻烦。

请参阅以下插件进行演示： https://plnkr.co/edit/hM7uAZaadbjoGcXPRaDP

如何防止通过BsDatepickerModule datepicker选择日期后过滤菜单关闭？

customDate.component.html

<div class="filter">
    <input type="text"
    #dp="bsDatepicker"
    bsDatepicker
    [bsValue]="date"
    [bsConfig]="{ dateInputFormat: 'DD.MM.YYYY' }">
</div>

customDate.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-customdatecomponent",
  templateUrl: "./customDate.component.html",
})
export class CustomDateComponent  {
  private date: Date;
  private params: any;

  agInit(params: any): void {
    this.params = params;
  }
  onResetDate() {
    this.setDate(null);
    this.params.onDateChanged();
  }
  onDateChanged(event) {
    this.params.onDateChanged();
  }
  getDate(): Date {
    return this.date;
  }
  setDate(date: Date): void {
    this.date = date;
  }
}

Answer 1

您可能需要开发一个自定义组件，将 BS 日期选择器合并到带有“应用”按钮的弹出窗口中。在我的一个项目中，我们有一个在 ag-grid 中使用的自定义日期选择器组件，它在弹出窗口（无应用按钮）上集成了 ng-bootstrap 日期选择器，并带有一些自定义选项。然而，这是一项非常重要的工作，该组件需要一些时间才能投入生产。

Answer 2

由于我无法在 SO 上找到解决此问题的任何其他方法，因此我想提供解决此问题的方法。

实际情况是，当您单击日期选择器弹出窗口时，它会在 ag-grid 的 pop-up 服务的上下文之外创建元素。由于日期选择器元素不在 pop-up 服务的当前上下文中，单击日期选择器意味着 ag-grid 认为您在过滤器外部单击并且您想关闭过滤器 pop-up.

为了解决这个问题，您想为 onShown 添加一个事件处理程序到日期选择器，以将组件添加到 ag-grid 的 pop-up 服务。

customDate.component.html

<div class="filter">
    <input type="text"
           #dp="bsDatepicker"
           bsDatepicker
           [bsValue]="date"
           (onShown)="addDatepickerToAgGridContext($event)"
           [bsConfig]="{ dateInputFormat: 'DD.MM.YYYY' }">
</div>

然后，在事件处理程序中，您只需导航到 params 中可用的 API 中的 popupService，并将日期选择器添加到活动元素列表中。在我们的例子中，日期选择器是在标签 bs-datepicker-container 中实例化的，因此您想使用 JS 来 select 该元素，然后将其添加到数组中。

addDatepickerToAgGridContext(e){
    this.params.api.gridCore.popupService.activePopupElements.push(document.getElementsByTagName("bs-datepicker-container")[0]);
}

注意 ag-grid 的更高版本（我现在使用 "ag-grid-community": "22.0.0"），活动弹出元素列表的路径已更改。活动的弹出元素现在存储在 api.gridCore.popupService.popupList.

的数组中

addDatepickerToAgGridContext(e){
    this.params.api.gridCore.popupService.popupList.push(
       {element: document.getElementsByTagName("bs-datepicker-container")[0]}
    );
}

Answer 3

对于 "ag-grid-community": "25.0.0"，您可以解决在“params”中添加 filterParams 的问题：

addDatepickerToAgGridContext(e) {
    this.params.filterParams.api.gridCore.popupService.popupList.push(
      { element: document.getElementsByTagName("bs-datepicker-container")[0] }
    );
  }

Answer 4

对于"ag-grid-community": "25.3.0"

addDatepickerToAgGridContext(e){
    // @ts-ignore
    this.params.api.gridCompController.popupService.popupList.push(
       {element: document.getElementsByTagName("bs-datepicker-container")[0]}
    );
}

带有 ngx-bootstrap 的 ag-grid 自定义日期组件

ag-grid custom date component with ngx-boostrap

datepicker

ag-grid

ngx-bootstrap

angular