javascript - 多种选择的可下拉菜单

Question

我正在尝试扩展handsontable插件以支持其下拉列表中的多个选择。我已经尝试通过按照建议的https://github.com/trebuchetty/Handsontable-select2-editor/issues/7修改'dropdownEditor'来扩展库中内置的基本编辑器。我花了数小时阅读和搜索源中的关键字，但没有提出任何实际用途。

我不介意是否使用Angular扩展或另一种本机ECMA5或6扩展https://github.com/handsontable/handsontable插件的方式来回答。

到目前为止，我唯一的想法是按照现有的模式用这段代码实际扩展框架。我在下面添加了所有指向的LOC:multiselect或Handsontable.MultiselectDropdownCell复制了dropdown方法，称为新名称，并且一切正常，但是仍然看不到我可以在哪里找到想要的东西。

Handsontable.MultiselectDropdownCell = {
  editor: getEditorConstructor('multiselectdropdown'),
  renderer: getRenderer('autocomplete')
};

Handsontable.cellTypes = {
  text: Handsontable.TextCell,
  date: Handsontable.DateCell,
  numeric: Handsontable.NumericCell,
  checkbox: Handsontable.CheckboxCell,
  autocomplete: Handsontable.AutocompleteCell,
  handsontable: Handsontable.HandsontableCell,
  password: Handsontable.PasswordCell,
  dropdown: Handsontable.DropdownCell,
  multiselect: Handsontable.MultiselectDropdownCell
};

Handsontable.cellLookup = { validator: {
    numeric: Handsontable.NumericValidator,
    autocomplete: Handsontable.AutocompleteValidator
}};

我有一个下拉编辑器的修改版本，如下所示:

import {getEditor, registerEditor} from './../editors.js';
import {AutocompleteEditor} from './autocompleteEditor.js';

/**
 * @private
 * @editor MultiSelectDropdownEditor
 * @class MultiSelectDropdownEditor
 * @dependencies AutocompleteEditor
 */
class MultiSelectDropdownEditor extends AutocompleteEditor {
  prepare(row, col, prop, td, originalValue, cellProperties) {
    super.prepare(row, col, prop, td, originalValue, cellProperties);
    this.cellProperties.filter = false;
    this.cellProperties.strict = true;
  }
}

export {MultiSelectDropdownEditor};

registerEditor('multiselectdropdown', MultiSelectDropdownEditor);

此时，我不知道当用户从下拉列表中选择一个项目时，单击事件在哪里发生。调试对我来说很痛苦，因为它是通过Traceur进行的。我尝试在模块准备好并且DOM也准备好后设置click事件，但是我什至无法获得基于单击选择下拉单元格之一的警报。我可以简单地点击“正常”单元格:
$('body').on('click','#handsontable td', someAlert)
但是，菜单内容并非如此。右键单击以检查下拉菜单意味着首先禁用上下文菜单，如 http://handsontable.com/上的菜单。然后，您会注意到右键单击以检查任何内容将触发一个事件，该事件将关闭您要检查的下拉菜单。

我已经在所有库源代码中放置了断点，我无法弄清楚这一点。

我要做的唯一一件事就是找出突出显示菜单项的代码部分并将其设置为 Activity 选择，然后将其转换为接受多个选择的方法(直至整个可用选项阵列，然后单击 Activity 项将禁用它，可以说)。

然后确保这些选择实际上在Handsontable的“数据范围”中。

就是这样，我什至不需要它来在单元格中呈现已选择的内容，尽管会有任何帮助，因为不幸的是，当下拉菜单中的任何一个呈现时，我都找不到位置。

我也尝试过使用为handttable创建的Select2Editor，如 http://jsfiddle.net/4mpyhbjw/40/和 https://github.com/trebuchetty/Handsontable-select2-editor/issues/3所示，但是它对我的原因没有太大帮助。
这是handsontable中的下拉单元格的样子:

http://docs.handsontable.com/0.15.1/demo-dropdown.html

最后，这是一个 小提琴:http://jsfiddle.net/tjrygch6/

如果有人可以在这里帮助我，我将非常感激。非常感谢!

更新

我设法解析了单元格中的值，并将类型转换为包含值的数组(因此，键入红色蓝色将变为包含 ['red','blue']的数组)。我已通过内部排序算法运行此数组，该算法分析选项并返回匹配项的索引。我可以正常工作，现在将数组传递给Highlight方法。此方法将值传递给核心库WalkOnTable。我看不到可以在何处更改逻辑以选择多个值而不是取消突出显示第一个选项。

 this.selectCell = function(row, col, endRow, endCol, scrollToCell, changeListener) {
var coords;
changeListener = typeof changeListener === 'undefined' || changeListener === true;
if (typeof row !== 'number' && !Array.isArray(row) || row < 0 || row >= instance.countRows()) {
  return false;
}
if (typeof col !== 'number' || col < 0 || col >= instance.countCols()) {
  return false;
}
if (typeof endRow !== 'undefined') {
  if (typeof endRow !== 'number' || endRow < 0 || endRow >= instance.countRows()) {
    return false;
  }
  if (typeof endCol !== 'number' || endCol < 0 || endCol >= instance.countCols()) {
    return false;
  }
}
// Normal number value, one item typed in
if (!Array.isArray(row) && typeof row === 'number'){
  coords = new WalkontableCellCoords(row, col);

  walkSelection(coords);
}

在这里，我认为我需要修改 WalkontableCellCoords以接受数组，然后在下拉列表打开和关闭时突出显示并选择两个值。我还需要能够通过touch或click事件选择多个选项。

else {
  // Array found, apply to each value
  new WalkontableCellCoords(row[0], col);
  new WalkontableCellCoords(row[1], col);
}

function walkSelection(coords){
  priv.selRange = new WalkontableCellRange(coords, coords, coords);
  if (document.activeElement && document.activeElement !== document.documentElement && document.activeElement !== document.body) {
    document.activeElement.blur();
  }
  if (changeListener) {
    instance.listen();
  }
  if (typeof endRow === 'undefined') {
    selection.setRangeEnd(priv.selRange.from, scrollToCell);
  } else {
    selection.setRangeEnd(new WalkontableCellCoords(endRow, endCol), scrollToCell);
  }
  instance.selection.finish();
}

return true;

};

更新2

我已经获得了内部方法来识别和部分选择DOM中的两个值，但是仍然远远不够正确。



这是由要调用的 WalkOnTableCellCords方法生成的控制台输出，在单元格仅包含1个值(默认功能)的情况下，这似乎突出显示了下拉选择。此输出是从将黑色蓝色键入到包含蓝色和黑色作为列表中各个选项的下拉单元格中。

extended_hot_v15-01.js:5041 DropdownEditor {
            "highlight": {
                    "row": 6,
                    "col": 0
            },
            "from":
                   {
                    "row": 4,
                    "col": 0
                   },
             "to": {
                    "row": 6,
                    "col": 0
                    }
            }

更新如果有人解决了这个问题，我将亲自飞往您身处何处，并与您握手。两次。

Answer 1

哇。太努力了。现在，一年多以后，它变得容易得多。

我成功使用了选择的jQuery插件。这很容易。

这是一个人的例子:
https://github.com/mydea/handsontable-chosen-editor

选择是美丽的。我正在将自动完成功能与多项选择一起使用。这是渲染器:

function customDropdownRenderer(instance, td, row, col, prop, value, cellProperties) {

    var selectedId;
    var optionsList = cellProperties.chosenOptions.data;

    if(typeof optionsList === "undefined" || typeof optionsList.length === "undefined" || !optionsList.length) {
        Handsontable.TextCell.renderer(instance, td, row, col, prop, value, cellProperties);
        return td;
    }

    var values = (value + "").split(",");
    value = [];
    for (var index = 0; index < optionsList.length; index++) {

        if (values.indexOf(optionsList[index].id + "") > -1) {
            selectedId = optionsList[index].id;
            value.push(optionsList[index].label);
        }
    }
    value = value.join(", ");

    Handsontable.TextCell.renderer(instance, td, row, col, prop, value, cellProperties);
    return td;
}

然后我像这样设置特定的列:

columns: [
    {},
    {},
    {type: 'numeric'},
    {type: 'dropdown', source: ['', 'NAME', 'FNB']},
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {type: 'dropdown', source: ['', 'S', 'M']},
    {},
    {},
    {
        renderer: customDropdownRenderer,
        editor: "chosen",
        width: 150,
        chosenOptions: {
            multiple: true,
            data: productData
        }
    },
    {},
    {editor: false, readOnly: true, width: 1}, 
    {editor: false, readOnly: true, width: 1}
],