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功能与自动完成下拉列表合并。

要最终确定本机下拉函数的类似外观，然后添加"strict: true"one_answers"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']
}
]
});