Handsontable 7.4 带有虚假值 (0) 的下拉单元格显示占位符

问题描述

我正在寻找一种在单元格为空时在包含占位符文本的下拉列表中显示数值 0 的方法。当前，如果选择 0，则占位符文本会显示出来。我希望有一个内置选项，如果可以的话，我想避免将数字转换为字符串并返回（这会破坏我当前的验证方案）。以下示例是从 HandsOnTable 下拉文档修改而来的。 “机箱颜色”列包含问题。

jsfiddle： https://jsfiddle.net/y3pL0vjq/

片段：

  function getCarData() {
    return [
      ["Tesla",2017,"black","black"],["Nissan",2018,"blue","blue"],["Chrysler",2019,"yellow",["Volvo",2020,"white","gray"]
    ];
  }
  var
    container = document.getElementById('example1'),hot;
  hot = new Handsontable(container,{
    data: getCarData(),colHeaders: ['Car','Year','Chassis color','Bumper color'],columns: [
      {},{type: 'numeric'},{
        type: 'dropdown',placeholder: "blah",source: [null,1,2,3]
      },source: ['yellow','red','orange','green','blue','gray','black','white']
      }
    ]
  });

解决方法

我发现处理这个数字下拉列表的最佳方法是省略“type”属性并将编辑器和验证器指定为“自动完成”。然后创建一个自定义渲染器，将 NumericRenderer 功能与自动完成下拉列表合并。

要完成与原生下拉功能类似的外观和感觉，您可以添加“strict: true”和“filter: false”，如下拉文档中所述。

在内部，单元格 {type: "dropdown"} 等价于单元格 {type: "autocomplete",strict: true,filter: false}。 Dropdown Docs

示例：

  function getCarData() {
    return [
      ["Tesla",2017,null,"black"],["Nissan",2018,"blue"],["Chrysler",2019,1,["Volvo",2020,2,"gray"]
    ];
  }
  var
    container = document.getElementById('example1'),hot;

  function myRenderer(instance,td,row,col,prop,value,cellProperties) {
    Handsontable.renderers.NumericRenderer.apply(this,arguments);
    td.innerHTML += '<div class="htAutocompleteArrow">▼</div>'
  }
  
  hot = new Handsontable(container,{
    data: getCarData(),colHeaders: ['Car','Year','Chassis color','Bumper color'],columns: [
      {},{type: 'numeric'},{
        editor: 'autocomplete',validator: 'autocomplete',renderer: myRenderer,filter: false,placeholder: "blah",source: [null,3]
      },{
        type: 'dropdown',source: ['yellow','red','orange','green','blue','gray','black','white']
      }
    ]
  });