在过滤器中搜索数据时，当Angular SlickGrid中的数据集为空时，我想显示“无数据可显示” 上下文预期行为当前行为环境更新2020-11-18 原始答案

如何解决在过滤器中搜索数据时，当Angular SlickGrid中的数据集为空时，我想显示“无数据可显示” 上下文预期行为当前行为环境更新2020-11-18 原始答案

在过滤器中搜索数据时，如果搜索结果为空数据集，我想显示“无数据可显示”

上下文

在过滤器中搜索数据时，如果搜索结果为空数据集，我想显示“无数据可显示”

预期行为

显示“无数据可显示”消息，而不是空消息

当前行为

显示为空

环境

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

解决方法

更新2020-11-18

此功能现已成为Angular-Slickgrid（自2.23.1版开始）的一部分，并且默认情况下已启用，您也可以使用标志enableEmptyDataWarningMessage禁用它。新属性emptyDataWarning网格选项中还可以提供一些选项（有关更多信息，请参见EmptyWarning界面）

我也没有使用绝对位置显示的代码，因为这会引起问题，相反，方法是搜索类为.grid-canvas的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来创建/显示/隐藏消息以使其完全动态，并对其进行一次编码。

<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';
    }
}