Handsontable：动态添加下拉值答案

【问题标题】：Handsontable: Adding drop down values dynamicallyHandsontable：动态添加下拉值
【发布时间】：2015-03-30 09:19:51
【问题描述】：

我正在使用以下代码向第一行的所有列添加下拉菜单。

var hot = new Handsontable(container,
    {
        data: results,
        colWidths: [200, 200, 200, 200, 200, 200, 200, 200, 200],
        colHeaders: false,
        contextMenu: true,
        cells : function (row, col, prop) {
            if (row === 0) {
              this.type = 'dropdown';
              var val = this.instance.getValue();
              if(typeof val != 'undefined') {
                this.source = [val, 'Code', 'Type', 'Color'];
              }
            }
        }
    });

在我的单元格函数中，我试图将当前单元格值添加到下拉列表中（默认值是代码、类型和颜色）。但是如果用户决定在单元格中输入“重量”，那么我希望下拉列表包含（“重量”、“代码”、“类型”和“颜色”）。

上面的函数确实这样做了，但不正确......每次调用函数时，添加的值都会被下一个替换。

然后我尝试创建一个列表，将值 val 添加到该列表中，并将 source 设置到该列表中。

但我不禁觉得有更好的方法来做到这一点。

任何指针将不胜感激！

【问题讨论】：

我已经广泛处理了向下拉列表动态添加值的问题。您能否更好地解释该功能无法正常工作的含义？每次您使用每个单元格上的当前值加上其他值对任何单元格进行更改时，它所做的是替换源（每个单元格行===0）。你到底想发生什么？
这是一个行为示例。我们从下拉列表中的以下值开始（“代码”、“类型”和“颜色”）。然后用户决定将“代码”的单元格值更改为“重量”，此时下拉列表显示（“重量”、“代码”、“类型”和“颜色”。现在如果用户决定更改“ “身高”的重量”，然后下拉菜单将显示（“身高”，“代码”，“类型”和“颜色”）。但我希望它阅读（“身高”，“重量”，“代码” ，“类型”和“颜色”）。简而言之，我希望在第一行中输入的所有值都在下拉列表中。

标签： javascript handsontable

【解决方案1】：

我知道，从您的评论中，您似乎想将值附加到您的源列表中。因此，我建议如下：

var hot = new Handsontable(container,
    {
    data: results,
    colWidths: [200, 200, 200, 200, 200, 200, 200, 200, 200],
    colHeaders: false,
    contextMenu: true,
    cells : function (row, col, prop) {
        if (row === 0) {
          this.type = 'dropdown';
          var val = this.instance.getValue();
          if(typeof val != 'undefined') {
            this.source.push(val); // to add to the beginning do this.source.unshift(val) instead
          }
        }
    }
});

它的作用是将当前值附加到源列表中。这样，下次您输入一个值时，它将被追加而不是替换。

【讨论】：

太棒了！感谢您的帮助
有没有办法在更改任何其他下拉列表时添加下拉列表的更改数据？我正在尝试 afterChange 回调，但还没有成功
您能否发布一个更详细解释的问题？你可以按照你的建议去做，但具体细节可能很棘手

【解决方案2】：

<select ng-repeat="myModel">
 <option value=1>First Selection</option>
 <option value=2>Second Selection</option>
</select>

【讨论】：

考虑解释您的代码的作用以及它如何回答问题。