在过滤器中搜索数据时，我想在 Angular SlickGrid 中搜索结果为空数据集时显示 "No data to display"

Question

在过滤器中搜索数据时，当搜索结果为空数据集时，我想显示“没有要显示的数据”

上下文

在过滤器中搜索数据时，当搜索结果为空数据集时，我想显示“没有要显示的数据”

预期行为

显示“没有要显示的数据”消息而不是空消息

当前行为

显示为空

环境

Angular - 8.2.14，Angular-Slickgrid - 2.22.4，TypeScript - 3.7

Answer 1

更新 2020-11-18

这现在是 Angular-Slickgrid 的一部分（从版本 2.23.1 开始）并且默认启用，您也可以使用标志 enableEmptyDataWarningMessage 禁用它。您还可以使用新的属性 emptyDataWarning 网格选项提供一些选项（有关详细信息，请参阅 EmptyWarning 界面）

我也没有使用带有绝对定位的代码，因为这会导致问题，而是使用 .grid-canvas 的 class 搜索 DOM 元素，并且将 <div> 附加到该容器，以便它始终位于正确的位置。

原答案

这在 SlickGrid 中是不可能的，它只会显示必须适合单元格的数据。

但是你有其他选择，我认为你能做的最好的就是在网格中间（或顶部）的范围内显示你的文本。您可以查看 SlickGrid Example - Yahoo Search，它在屏幕中间显示“正在缓冲...”。最后一块是知道何时显示它，您可以使用 DataView onRowCountChanged 事件，它会为您提供项目计数。

<span class="empty-data" [hidden]="hasFilteredData">
   No data to display
</span>

<angular-slickgrid gridId="grid4" 
    [columnDefinitions]="columnDefinitions" 
    [gridOptions]="gridOptions"
    [dataset]="dataset" 
    (sgOnRowCountChanged)="handleOnRowCountChanged($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>

export class MyDemo {
  hasFilteredData = true;

  handleOnRowCountChanged(e, args) {
    this.hasFilteredData = args.current > 0;
  }
}

定位空数据<span>消息，你可以看一下我之前提供的Yahoo Example，他们是这样用的（你可以使用相关代码）

loader.onDataLoading.subscribe(function () {
      if (!loadingIndicator) {
        loadingIndicator = $("<span class='loading-indicator'><label>Buffering...</label></span>").appendTo(document.body);
        var $g = $("#myGrid");

        loadingIndicator
            .css("position", "absolute")
            .css("top", $g.position().top + $g.height() / 2 - loadingIndicator.height() / 2)
            .css("left", $g.position().left + $g.width() / 2 - loadingIndicator.width() / 2);
      }

      loadingIndicator.show();
    });

把它拼凑起来，我可以实现下图

@Component({
  styles: ['.empty-data { color: orange; z-index: 9999; position: absolute; }'],
  templateUrl: './my-demo.component.html'
})
export class MyDemo {
  hasFilteredData = true;

  handleOnRowCountChanged(e, args) {
    this.hasFilteredData = args.current > 0;

    const $grid = $('#grid4');

    $('.empty-data')
      .css("top", $grid.position().top + 90)
      .css("left", $grid.position().left + 10);
  }

   // or with pure JS
   /*
   const emptyDataElm = document.querySelector<HTMLSpanElement>('.empty-data');
   const grid = document.querySelector<HTMLDivElement>('#grid4');
   const gridPosition = grid.getBoundingClientRect();
   emptyDataElm.style.top = `${gridPosition.top + 90}px`;
   emptyDataElm.style.left = `${gridPosition.left + 10}px`;
   */
}

新建LIVE DEMO

您还可以通过将整个代码移动到实用程序服务中来使其完全可重用，这样您就不必在所有网格中一遍又一遍地复制相同的代码。我们也可以只使用 DOM 到 create/show/hide 消息完全动态并编码一次。

<span class="empty-data">
   No data to display
</span>

<angular-slickgrid>...</angular-slickgrid>

@Component({
  templateUrl: './my-demo.component.html'
})
export class MyDemo {
  handleOnRowCountChanged(e, args) {
    // display warning when there's no filtered data
    utility.showEmptyDataMessage('#grid4', 'No data to display', args.current === 0 /*, { color: 'red' } */);
  }
}

  // utility.ts

  /**
   * Display a warning of empty data when the filtered dataset is empty
   * NOTE: to make this code reusable, you could (should) move this code into a utility service
   * @param gridSelector - HTML Selector of the grid <div>
   * @param emptyMessage - empty data message to display in the <span>
   * @param isShowing - are we showing the message?
   * @param options - any styling options you'd like to pass like the text color
   */
  export function showEmptyDataMessage(gridSelector: string, emptyMessage: string, isShowing = true, options?: { color: string; class: 'empty-data' }) {
    const emptyDataClassName = options && options.class || 'empty-data';
    let emptyDataElm = document.querySelector<HTMLSpanElement>(`.${emptyDataClassName}`);
    const grid = document.querySelector<HTMLDivElement>(gridSelector);

    if (!emptyDataElm) {
      emptyDataElm = document.createElement('span');
      emptyDataElm.className = emptyDataClassName;
      emptyDataElm.textContent = emptyMessage;
      document.body.appendChild(emptyDataElm);
    }

    if (isShowing) {
      const gridPosition = grid.getBoundingClientRect();
      emptyDataElm.style.top = `${gridPosition.top + 90}px`;
      emptyDataElm.style.left = `${gridPosition.left + 10}px`;
      emptyDataElm.style.color = options && options.color || 'orange';
      emptyDataElm.style.zIndex = '9999';
      emptyDataElm.style.position = 'absolute';
      emptyDataElm.style.display = 'inline';
    } else {
      emptyDataElm.style.display = 'none';
    }
}

在过滤器中搜索数据时，我想在 Angular SlickGrid 中搜索结果为空数据集时显示 "No data to display"

When searching the data in the filter I want to show "No data to display" when search results with empty dataset in Angular SlickGrid

slickgrid

typescript

angular

angular-slickgrid

上下文

预期行为

当前行为

环境

更新 2020-11-18

原答案