0

这是我的 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的行中没有真正的选项

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

4

2 回答 2

0

编辑

使用最新版本2.25.0的 Angular-Slickgrid（参见此处），我们现在可以选择直接从列定义中覆盖集合，如原始问题中所要求的那样。还有一个新的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 的访问，但类似于我给您的其他 SO 问题的其他 SO答案，您可以再次扩展 Select Editor 并覆盖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多个或false单个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;
  }
}
于 2020-12-23T06:22:45.677 回答
0

您的“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) 的当前行并为编辑器查找提供行值。

于 2020-12-20T07:06:44.167 回答