Slickgrid GetItemMetadata 函数只引用最后一项 #563

Question

我正在尝试使用以下代码块更改多行的样式：

DV.getItemMetadata = function (row) {
  let description = this.getItem(row).Description;

  if (description != null) {
    return {
      cssClasses: 'notify'
    };
  }
  return null;
};

在这里我可以看到所有元素都正确完成了，但只有最后一个元素是彩色的。

Answer 1

我不确切知道你的问题是什么，但我向你展示了适合我的代码，请注意它是用 ES6 (TypeScript) 语法编写的，如果你可能需要稍微更改一下想保留 ES5 语法。

我工作的例子有这段代码

  /** Change the Duration Rows Background Color */
  changeDurationBackgroundColor() {
    this.dataView.getItemMetadata = this.updateItemMetadataForDurationOver40(this.dataView.getItemMetadata);

    // also re-render the grid for the styling to be applied right away
    this.grid.invalidate();
    this.grid.render();
  }

  /**
   * Change the SlickGrid Item Metadata, we will add a CSS class on all rows with a Duration over 50
   * For more info, you can see this SO 
   */
  updateItemMetadataForDurationOver50(previousItemMetadata: any) {
    const newCssClass = 'duration-bg';

    return (rowNumber: number) => {
      const item = this.dataView.getItem(rowNumber);
      let meta = {
        cssClasses: ''
      };
      if (typeof previousItemMetadata === 'object') {
        meta = previousItemMetadata(rowNumber);
      }

      if (meta && item && item.duration) {
        const duration = +item.duration; // convert to number
        if (duration > 50) {
          meta.cssClasses = (meta.cssClasses || '') + ' ' + newCssClass;
        }
      }

      return meta;
    };
  }

然后，一旦您通过单击按钮调用 changeDurationBackgroundColor()，它会更改持续时间超过 50 的每一行的背景颜色。

你也可以自己试试，这里是直播Demo

希望这可以帮助您找到问题，元数据更改后您可能会丢失 grid.invalidate()？

Slickgrid GetItemMetadata 函数只引用最后一项 #563

Slickgrid GetItemMetadata function refers only to the last item #563

javascript

dataview

slickgrid