由每一行数据收集的角度光滑网格动态编辑器集合

Question

这是我光滑的网格数据集

[{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

编辑

使用最新版本的角-Slickgrid(参见2.25.0 )，我们现在可以选择从列定义重写集合，就像在最初的问题中所问的那样。还有一个新的Wiki -集合覆盖

例如，您现在可以这样做了

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 )获得

最初的答案选择编辑器/筛选器构建时从未考虑到动态集合和对项目dataContext的访问，但与其他回答类似，因此，您可以再次扩展Select并重写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或create 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;
  }
}

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)，并为编辑器查找提供行值。