下拉在 angular-slickgrid 中不起作用

如何解决下拉在 angular-slickgrid 中不起作用

我已经从 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',type: FieldType.number,minWidth: 100,formatter: Formatters.mask,params: { mask: '[phone]' } },{ id: 'duration',name: 'Duration (days)',field: 'duration',formatter: Formatters.decimal,params: { minDecimal: 1,maxDecimal: 2 },minWidth: 90,exportWithFormatter: true },{ id: 'complete',name: '% Complete',field: 'percentComplete',formatter: Formatters.percentCompleteBar,minWidth: 100 },{ id: 'percent2',field: 'percentComplete2',formatter: Formatters.progressBar,{ id: 'start',name: 'Start',field: 'start',formatter: Formatters.dateIso,type: FieldType.date,{ id: 'finish',name: 'Finish',field: 'finish',{ id: 'effort-driven',name: 'Effort Driven',field: 'effortDriven',formatter: myCustomCheckmarkFormatter,{
        id: 'completed',name: 'Completed',field: 'completed',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),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”值。为什么会这样？

解决方法

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

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

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。要清楚格式化程序，您可以使用它们向您的用户显示其他内容，它不会更改您的任何数据，只会以不同的方式显示它并且是人类可读的。