Я пытаюсь расширить плавный плагин для поддержки нескольких вариантов в раскрывающемся списке. Я уже пробовал расширить базовый редактор, встроенный в библиотеку, изменив "dropdownEditor", как было предложено https://github.com/trebuchetty/Handsontable-select2-editor/issues/7. Я часами читал и просматривал источники ключевых слов, но я не придумываю ничего реального.
Я не возражаю, если на это ответят с помощью расширения 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);
В этот момент я не знаю, где происходит событие click, когда пользователь выбирает элемент из выпадающего списка. Отладка была болезненной для меня, потому что она через Трейсера. Я попытался настроить событие щелчка после того, как модуль готов, а DOM тоже, но я не могу получить предупреждение даже при нажатии на одну из выделенных выпадающих ячеек. "Нормальные" ячейки я могу получить щелчок простым:
$('body').on('click','#handsontable td', someAlert)
Однако это не так для содержимого меню. Щелчок правой кнопкой мыши, чтобы просмотреть раскрывающееся меню, означает сначала отключить контекстное меню, как на http://handsontable.com/. Затем вы заметите, что щелчок правой кнопкой мыши для проверки чего-либо приведет к событию, закрывающему раскрывающееся меню, которое вы пытаетесь проверить.
Я поставил точки останова по всему исходному коду библиотек, я не могу понять это.
Единственное, что я хочу сделать, это выяснить, где часть кода, которая выделяет элемент меню и устанавливает его на активный выбор, превращает это в метод, который принимает несколько выборов (вплоть до всего массива опций доступно, нажатие активного элемента отключит его, просто скажу).
Затем убедитесь, что эти выборки действительно находятся в области "Доступные данные".
Вот оно, мне не нужно даже рисовать в камере то, что было выбрано, хотя любая помощь там была бы замечательной, потому что, к сожалению, мне еще предстоит найти место, когда параметры в выпадающем меню отображаются либо.
Я также пробовал использовать Select2Editor для handsontable, как показано 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
Наконец, heres a скрипт: http://jsfiddle.net/tjrygch6/
Я был бы очень признателен, если бы кто-то мог помочь мне здесь. Спасибо, SO!
UPDATE
Мне удалось проанализировать значения в ячейке и превратить этот тип в массив, содержащий значения (поэтому набрав красный синий цвет, он будет содержать массив, содержащий ['red','blue']
). Я запустил этот массив через внутренний алгоритм сортировки, который анализирует параметры и возвращает индекс соответствующего элемента. Я получаю эту работу отлично, и теперь я передаю массив методу выделения. Этот метод передает значения основной библиотеки 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
}
}
ОБНОВЛЕНИЕ. Если кто-то решит это, я лично вылечу туда, где вы лично, и пожимаете руку. ДВАЖДЫ.