Handsontable 7.4 具有虛假值 (0) 的下拉單元格顯示占位符

Question

我正在尋找一種在下拉列表中顯示數值 0 的方法，該下拉列表還包括單元格為空時的占位符文本。 目前，如果選擇 0，則占位符文本會顯示出來。 我希望有一個內置選項，如果可以的話，我想避免將數字轉換為字符串並返回（這會破壞我當前的驗證方案）。 以下示例是根據 HandsOnTable 下拉文檔修改的。 “機箱顏色”列包含問題。

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

片段：

  function getCarData() {
    return [
      ["Tesla", 2017, "black", "black"],
      ["Nissan", 2018, "blue", "blue"],
      ["Chrysler", 2019, "yellow", "black"],
      ["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, 0, 1, 2, 3]
      },
      {
        type: 'dropdown',
        source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
      }
    ]
  });

Answer 1

我發現處理此數字下拉列表的最佳方法是省略“類型”屬性並將編輯器和驗證器指定為“自動完成”。 然后制作一個自定義渲染器以將 NumericRenderer 功能與自動完成下拉列表合並。

為了最終確定與原生下拉菜單 function 相似的外觀和感覺，然后添加“strict: true”和“filter: false”，如下拉文檔中所述。

在內部，cell {type: "dropdown"} 等價於 cell {type: "autocomplete", strict: true, filter: false}。 下拉文檔

例子：

  function getCarData() {
    return [
      ["Tesla", 2017, null, "black"],
      ["Nissan", 2018, 0, "blue"],
      ["Chrysler", 2019, 1, "black"],
      ["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,
        strict: true,
        filter: false,
        placeholder: "blah",
        source: [null, 0, 1, 2, 3]
      },
      {
        type: 'dropdown',
        source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
      }
    ]
  });