添加和删​​除列内联编辑不起作用

如何解决添加和删​​除列内联编辑不起作用

我有一个要求，内联编辑器，带有添加和删除列的复选框行选择。在 Angular Slick grid Master 源代码中，我正在使用示例 3 页面尝试上述功能。我在网格选项中添加了一个复选框选项，如下面提到的那样。

dynamicallyAddTitleHeader() {
    const newCol = {
      id: `title${this.duplicateTitleHeaderCount++}`,name: 'Title',field: 'title',editor: {
        model: Editors.text,required: true,validator: myCustomTitleValidator,// use a custom validator
      },sortable: true,minWidth: 100,filterable: true,params: { useFormatterOuputToFilter: true }
    };
    const allColumns = this.gridObj.getColumns();
    allColumns.push(newCol);
    this.columnDefinitions = allColumns.slice(); // or use spread operator [...cols]
  } 

并在示例 3 中添加此网格选项。

checkboxSelector: {
    // you can toggle these 2 properties to show the "select all" checkbox in different location
    hideInFilterHeaderRow: false,width: 60
  },rowSelectionOptions: {
    // True (Single Selection),False (Multiple Selections)
    selectActiveRow: false,},enableCheckboxSelector: true,enableRowSelection: true,

除了内联编辑不起作用外，一切正常。

解决方法

请注意，我是 Angular-Slickgrid 的作者

答案在我在那个问题上留给您的评论中，看起来您没有在代码中使用它，这就是它不起作用的原因。基本上，您引用的是 issue 的旧代码（我认为它不起作用，答案是在同一问题上引用的最后一个 PR 中的 1 个）示例 3 注释包含您需要的所有答案和解释（其中是我在锁定问题之前留下的代码片段，我因此将其锁定，因为那是答案，我缩短了问题中的代码片段，以使其更清楚地表明它是您需要的，为了快速回顾一下，它是下面的行）

const allColumns = this.angularGrid.gridService.getAllColumnDefinitions(); 

它不会不工作与 grid.getColumns() 仅仅因为 Angular-Slickgrid 按摩列定义（快速解释在下面的评论中）并且它在示例 3 代码中提到{{3 }}，您必须阅读底部的注意，其中确实涵盖了您的用例。

  dynamicallyAddTitleHeader() {
    const newCol = {
      id: `title${this.duplicateTitleHeaderCount++}`,name: 'Title',field: 'title',editor: {
        model: Editors.text,required: true,validator: myCustomTitleValidator,// use a custom validator
      },sortable: true,minWidth: 100,filterable: true,};

    // you can dynamically add your column to your column definitions
    // and then use the spread operator [...cols] OR slice to force Angular to review the changes
    this.columnDefinitions.push(newCol);
    this.columnDefinitions = this.columnDefinitions.slice(); // or use spread operator [...cols]

    // NOTE if you use an Extensions (Checkbox Selector,Row Detail,...) that modifies the column definitions in any way
    // you MUST use "getAllColumnDefinitions()" from the GridService,using this will be ALL columns including the 1st column that is created internally
    // for example if you use the Checkbox Selector (row selection),you MUST use the code below
    /*
    const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
    allColumns.push(newCol);
    this.columnDefinitions = [...allColumns]; // (or use slice) reassign to column definitions for Angular to do dirty checking
    */
  }

因此，在您的用例中，如果我们放大到我在示例 3 中所写的注释 NOTE，这正是您需要做的，因为您使用的是复选框选择器扩展（可用在此 here 的示例 3 中）。

  dynamicallyAddTitleHeader() {
    //... add your new column

    // NOTE if you use an Extensions (Checkbox Selector,you MUST use the code below
    const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
    allColumns.push(newCol);
    this.columnDefinitions = [...allColumns]; // (or use slice) reassign to column definitions for Angular to do dirty checking
  }

如果你想知道这是为什么？然后继续阅读下面的完整解释...

您可能想知道，为什么 Angular-Slickgrid 会处理列定义？出于一个简单的原因，SlickGrid 在内部使用 editor 属性（这是您想要使用的任何编辑器，例如 Editor.singleSelect），但我想将编辑器和过滤器与类似的结构对齐，因此出于这个原因，您简单地写一个这样的列定义（你可以在下面看到，editor 和 filter 都是相同的结构）

const genderList = [{ label: 'male',value: 'male' },{ label: 'male',value: 'male' }];

this.columnDefinitions = [
  { 
     id: 'gender',name: 'Gender',editors: { 
        model: Editors.singleSelect,collection: genderList 
     },filters: {
        model: Editors.singleSelect
        collection: genderList 
     }
  }
];

但实际上在您初始化 Angular-Slickgrid 之后，它变成了如下所示，它执行以下步骤

1. 获取用户列定义 editor 内容并将其移动到新属性 internalColumnEditor
2. 将 editor 属性替换为 editor.model 的内容

this.columnDefinitions = [
  { 
     id: 'gender',editor: Editors.singleSelect,internalColumnEditor: {  // <-- this is used internally by Angular-Slickgrid you should never change this,you can read it though
        model: Editors.singleSelect,filters: {
        model: Editors.singleSelect
        collection: genderList 
     }
  }
];

同样，这只是为了为编辑器和过滤器提供相同且易于理解的结构。当我构建它时，我可以使用另一种方法和另一种属性，但我觉得以这种方式使用它更容易......而且我们很少需要使用 internalColumnEditor，但有一些例外（比如这个 SO question ) 所以最好理解“为什么”。

,

在这里，我分享了重现此问题代码的步骤。

步骤

1. 我已经克隆了 angular-master 版本 2.25.1
2. 我选择了示例 3 模板。因为我想要内联编辑和复选框行选择。
3. 现在我正在更改网格选项 - 添加了

   "checkboxSelector": {
      "hideInFilterHeaderRow": false,"width": 60
   },"rowSelectionOptions": {
      "selectActiveRow": false
   },"enableCheckboxSelector": true,"enableRowSelection": true

4. 更改了dynamicAddTitleHeader获取列代码和命令列定义代码。

const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
allColumns.push(newCol);
this.columnDefinitions = [...allColumns];

5. npm install 和 ng serve

在步骤检查示例 3 后，添加/删除标题，然后单击进行编辑。这是行不通的。