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

Question

我已经从 here. I have checked demo 下载了源代码，但没有在任何地方实现单个 select 下拉功能。所以我修改了最后一行“完成”的代码。因为我想在单元格编辑中实现下拉功能。以下是单个 select 下拉列表的现有源 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 后，每次事件触发时仅作为“Yes”值。为什么会这样？

Answer 1

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

首先，已经有一个 select 下拉编辑器，没有必要再创建一个。所有编辑器都显示在 Example 3 中，单个 select 编辑器位于“完成百分比”列中。你只需要这段代码

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，你先看看再参考吧

还要指出的是，Formatter 不会更改数据，它与编辑无关，因此您的 customEnableButtonFormatter 永远不会做任何事情。您需要比创建编辑器多很多的代码，并且还有 Custom Inline Editor - Wiki 的代码。在 Formatter 上要清楚，您使用它们向用户显示其他内容，它不会更改您的任何数据，它只会以不同的方式显示并便于人类阅读。

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

Dropdown not working in angular-slickgrid

angular

grid

slickgrid

angular-slickgrid