0

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

语境

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

预期行为

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

当前行为

显示为空

环境

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

4

1 回答 1

2

更新 2020-11-18

这现在是 Angular-Slickgrid 的一部分（从 version 开始2.23.1）并且默认启用，您也可以使用 flag 禁用它enableEmptyDataWarningMessage。您还可以使用新属性emptyDataWarningGrid Options 提供一些选项（有关更多信息，请参阅EmptyWarning界面）

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

原始答案

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

但是，您还有其他选择，我认为您能做的最好的事情就是在网格中间（或顶部）的一个跨度中显示您的文本。您可以查看 SlickGrid示例 - Yahoo Search，它在屏幕中间显示“缓冲...”。最后一点是要知道何时显示它，您可以使用 DataViewonRowCountChanged事件，该事件将为您提供项目计数。

<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`;
   */
}

在此处输入图像描述

新的现场演示

您还可以通过将整个代码移动到实用程序服务中来使其完全可重用，这样您就不必在网格中一遍又一遍地复制相同的代码。我们也可以只使用 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';
    }
}
于 2020-11-03T14:01:03.780 回答