每行数据的 Angular slickgrid 动态编辑器集合

Question

这是我的 slickgrid 数据集

[{title : 'foo', prerequisites : true}, {title : 'bar', prerequisites : false}]

这些是我的列定义：

[
     {
        id: "title",
        name: "Title", 
        field: "title"
     },  
     {
        id: 'prerequisites', name: 'Prerequisites', field: 'prerequisites',
        type: FieldType.string,
        editor: {
          model: Editors.multipleSelect,
          collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }]
        }
      }]

这将为先决条件列中的每一行创建一个静态编辑器下拉列表。

但我想要的是，在标题为 foo

的行中，下拉没有真正的选项

换句话说，我想根据相应行中另一列的值隐藏某些选定行的选项。

Answer 1

编辑

使用 Angular-Slickgrid 的最新版本 2.25.0（请参阅 here），我们现在可以选择直接从列定义中覆盖集合，如原始问题中所述。还有一个新的Wiki - Collection Override

例如，您现在可以这样做

this.columnDefinitions = [
  {
    id: 'prerequisites', name: 'Prerequisites', field: 'prerequisites',
    type: FieldType.string,
    editor: {
      model: Editors.multipleSelect,
      collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }]
        },
      collectionOverride: (finalCollection, args) => {
        console.log(args); 
        if (args.dataContext.title === 'foo') {
          return finalCollection.filter((col) => col.value !== true);
        }
        return finalCollection;
      },
    }
  }
];

还请注意，所有编辑器、过滤器和格式化程序现在都是公开的，因此更容易从 extend 发送，例如export class CustomSelectEditor extends SelectEditor

---

原始答案 选择编辑器/过滤器从未在构建时考虑到动态集合和对项目数据上下文的访问，但类似于我给您的其他 SO 问题的其他 SO Answer，您可以再次扩展选择编辑器并覆盖 filterCollection() 函数，在renderDomElement() 之前调用它，这是在将输出集合传递给renderDomElement(inputCollection) 函数之前覆盖输出集合的最佳位置

请注意，我没有测试下面的代码，但我希望这个概念可以工作，我不确定 SelectEditor 是否实际上是公开的，如果不是，请尝试扩展 Editors.singleSelect 和 Editors.multipleSelect

首先尝试直接扩展SelectEditor（我认为它们目前不公开，这不起作用，但我可能会在未来的版本中更改）

import { SelectEditor } from 'angular-slickgrid';

export class CustomSelectEditor extends SelectEditor {
  constructor(protected args: EditorArguments, protected isMultipleSelect) {
    super(args, true);
  }

  protected filterCollection(): any[] {
    const activeCell: { row: number; cell: number; } = this.grid.getActiveCell();
    const dataContext = this.grid.getDataItem(activeCell.row);
    // your custom logic
    // const customCollection = ...
    return customCollection;
  }
}

或Editors.singleSelect 如果SelectEditor 不公开并且如果这是要走的路，那么您还必须扩展Editors.multipleSelect 或创建1 个自定义编辑器并传递true 以获取多个或@987654340 @ 表示super(args, true) 呼叫中的单身

import { Editors } from 'angular-slickgrid';

export class CustomSelectEditor extends Editors.inputText {
  constructor(protected args: EditorArguments, protected isMultipleSelect) {
    super(args, true);
  }

  protected filterCollection(): any[] {
    const activeCell: { row: number; cell: number; } = this.grid.getActiveCell();
    const dataContext = this.grid.getDataItem(activeCell.row);
    // your custom logic
    // const customCollection = ...
    return customCollection;
  }
}

Answer 2

您的“multipleSelect”编辑器有一个Init 事件。这是您应该为选择列表选择值的地方。

编辑器是从网格中实例化的，在构造函数的args var 中有很多信息。这是实例化编辑器的网格代码：

  currentEditor = new useEditor({
    grid: self,
    gridPosition: absBox($container[0]),
    position: absBox(activeCellNode),
    container: activeCellNode,
    column: columnDef,
    columnMetaData: columnMetaData,
    item: item || {},
    event: e,
    commitChanges: commitEditAndSetFocus,
    cancelChanges: cancelEditAndSetFocus
  });

您的init 事件可以测试网格的当前行 (args.item) 并为编辑器查找提供行值。