Angular slickgrid 动态编辑器 collection 每行数据

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[=27= 的行中没有真正的选项 ]

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

Answer 1

您的 'multipleSelect' 编辑器有一个 Init 事件。这是您应该 select select 列表的值的地方。

编辑器是从网格中实例化的，在构造函数的 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) 并为编辑器查找提供行值。

Answer 2

编辑

使用 Angular-Slickgrid 的最新版本 2.25.0（参见 here), we now have an option to override the collection right from the column definitions as asked in the original question. There's also a new 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;
      },
    }
  }
];

另请注意，所有编辑器、过滤器和格式化程序现在都是 Public，因此更容易 extend 来自，例如export class CustomSelectEditor extends SelectEditor

原答案 Select Editor/Filter 从未构建过动态收集和访问项目 dataContext 的想法，但类似于另一个 SO I gave to your other SO Question, you can again extend the Select Editor and override the filterCollection() 函数，它在 renderDomElement() 之前调用，即在将其传递给 renderDomElement(inputCollection) 函数

之前覆盖输出集合的最佳位置

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

首先尝试直接扩展 SelectEditor（我认为它们目前不是 public，这行不通，但我可能会在未来的版本中更改它）

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 不是 public 可用，如果这是可行的方法，那么您还必须扩展 Editors.multipleSelect 或创建1 自定义编辑器并在 super(args, true) 调用

中为多个传递 true 或为单个传递 false

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

Angular slickgrid 动态编辑器 collection 每行数据

Angular slickgrid dynamic editor collection by every row data

slickgrid

angular-slickgrid