【发布时间】：2015-11-03 01:33:25
【问题描述】：
我正在尝试扩展可动手做的插件以支持其下拉列表中的多项选择。我已经尝试按照建议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也准备好之后设置单击事件，但是我什至无法通过单击一个选择下拉单元格来获得触发警报。我可以通过简单的点击获得“正常”单元格：
$('body').on('click','#handsontable td', someAlert)
但是，菜单内容并非如此。右键单击检查下拉菜单意味着首先禁用上下文菜单，如http://handsontable.com/ 上的上下文菜单。然后您会注意到右键单击检查任何内容都会触发一个事件，该事件会关闭您尝试检查的下拉菜单。
我在库源代码中都设置了断点，但我无法弄清楚这一点。
我唯一想做的就是找出突出显示菜单项并将其设置为活动选择的代码部分的位置，将其转换为接受多个选择的方法（直到整个选项数组可用，单击一个活动项目将禁用它让我们说）。
然后确保这些选择实际上在 Handsontable 的“数据范围”内。
就是这样，我什至不需要它来在单元格中呈现已选择的内容，尽管任何帮助都会非常有用，因为不幸的是，当下拉菜单中的选项被呈现时，我还没有找到位置.
我也尝试过使用为 handsontable 制作的 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 将转换为包含 ['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 以接受数组，然后在打开和关闭下拉菜单时突出显示并选择这两个值的地方。我还需要能够通过触摸或单击事件选择多个选项。
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
}
}
更新如果有人解决了这个问题，我会亲自飞到你所在的任何地方，和你握手。两次。
【问题讨论】：
标签： javascript angularjs drop-down-menu multi-select handsontable