下拉菜单在 angular-slickgrid 中不起作用

Question

我已经从here 下载了源代码。我已经检查了demo，但没有在任何地方实现单选下拉功能。所以我修改了最后一行“完成”的代码。因为我想在单元格编辑上实现下拉功能。 以下是现有源代码 code 中用于单选下拉菜单的代码更改。

------grid-formatter.component.ts-----

const customEnableButtonFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {

  if (value == 'Yes') {
    return '<select style="font-size:8px; z-inex:1; font-weight:Normal;width:70px;"  class="c-select-status c-select-status__text target table-cell-dropdown" id="' + row + '"><option value="Yes" selected>' + 'Yes' + '</option><option value="No">' + 'No' + '</option> "</select>';
    }
    else {
    return '<select style="font-size:8px; z-inex:1; font-weight:Normal;width:70px; "  class="c-select-status c-select-status__text target table-cell-dropdown" id="' + row + '"><option value="Yes">' + 'Yes' + '</option><option value="No" selected>' + 'No' + '</option> "</select>';
    }
};

 this.columnDefinitions = [
      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70 },
      { id: 'phone', name: 'Phone Number using mask', field: 'phone', sortable: true, type: FieldType.number, minWidth: 100, formatter: Formatters.mask, params: { mask: '(000) 000-0000' } },
      { id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { minDecimal: 1, maxDecimal: 2 }, sortable: true, type: FieldType.number, minWidth: 90, exportWithFormatter: true },
      { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true, minWidth: 100 },
      { id: 'percent2', name: '% Complete', field: 'percentComplete2', formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100 },
      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true },
      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true },
      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 },
      {
        id: 'completed', name: 'Completed', field: 'completed', type: FieldType.string, sortable: true, minWidth: 100,
        formatter: customEnableButtonFormatter,
        onCellClick: (e, args) => {
          console.log("*****",args);
        
        }
      }
    ];


  this.dataset[i] = {
        id: i,
        title: 'Task ' + i,
        phone: this.generatePhoneNumber(),
        duration: (i % 33 === 0) ? null : Math.random() * 100 + '',
        percentComplete: randomPercent,
        percentComplete2: randomPercent,
        percentCompleteNumber: randomPercent,
        start: new Date(randomYear, randomMonth, randomDay),
        finish: new Date(randomYear, (randomMonth + 1), randomDay),
        effortDriven: (i % 5 === 0),
        completed:"Yes"     <<<<-------important change----I have passed 'Yes' by default

      };

------collection_100_numbers.json---
[
  { "value": 0, "label": "Yes" }, 
  { "value": 1, "label": "No"}

]

下面是我在单元格中的下拉菜单的外观

现在实际问题是 onCellChange() 事件在我用于列定义时不会触发。所以我使用了 onCellClick() 方法。将下拉值更改为 no 或 yes 后，仅每次事件触发为“是”值。为什么会这样？

Answer 1

看起来对如何使用代码和使用的一些术语有很多误解。

首先，已经有一个单一的选择下拉编辑器，不需要再创建一个。所有编辑器都显示在Example 3 中，单选编辑器位于“% Complete”列。你只需要这段代码

this.columnDefinitions = [
  {
    id: 'completed', name: 'Completed', field: 'completed', type: FieldType.boolean,
    editor: {
      model: Editors.singleSelect,
      //  the value can be changed to whatever your data is, while the label is what will be displayed on the screen
      collection: [{ value: false, label: 'No', value: true, label: 'Yes' }]
    }
  }
];

还有一个Single/Multiple Select Editor - Wiki

如果您认为示例 3 中没有编辑器，那可能是因为您认为编辑器始终可见，但事实并非如此，也永远不会如此，这可能是令人困惑的地方。 SlickGrid 永远不会同时显示所有编辑器，只有在单击单元格后，单元格才会 变为可编辑。原因很简单，出于性能原因，显示数据比同时创建每个编辑器要快得多（效率非常低），处理禁用的编辑器和验证也更容易，因为它们只显示单击后...如果您想告诉用户它是可编辑的，那么您将需要一个自定义格式化程序Wiki，您可以为可编辑字段添加轮廓或背景颜色，我们已经在我们的项目中使用大纲（下面显示的前 2 列是可编辑的）

您可以将此自定义格式化程序用于带有编辑器的单元格，然后在您的列定义中使用它formatter: customEditableInputFormatter

const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext, grid) => {
  const isEditable = !!columnDef.editor;
  value = (value === null || value === undefined) ? '' : value;
  return isEditable ? `<div style="background-color: aliceblue">${value}</div>` : value;
};

因此，正如您所见，无需创建已经存在的东西，您只需要学习如何正确使用它们即可。我写了一大堆Wikis，你应该先阅读并咨询他们。

还要指出，格式化程序不会更改数据，它与编辑无关，因此您的 customEnableButtonFormatter 将永远不会做任何事情。您需要很多 多的代码来创建编辑器，并且还有一个Custom Inline Editor - Wiki 用于此目的。为了清楚地了解 Formatter，您可以使用它们向用户显示其他内容，它不会更改您的任何数据，只会以不同的方式显示并且便于人类阅读。