Dropdowns handstable avec plusieurs sélections

j'essaie d'étendre le plugin handsontable pour supporter plusieurs sélections dans sa liste déroulante. J'ai déjà essayé d'étendre l'éditeur de base construit dans la bibliothèque en modifiant le 'dropdownEditor' comme suggéré https://github.com/trebuchetty/Handsontable-select2-editor/issues/7. J'ai passé des heures à lire et à chercher des mots-clés dans la source, mais je ne trouve rien d'utile.

cela ne me dérange pas si on répond en utilisant le Extension angulaire ou une autre ECMA5 ou 6 façon d'étendre lehttps://github.com/handsontable/handsontable plugin.

jusqu'à présent, mes seules pensées étaient d'étendre le cadre avec ce peu de code en suivant les modèles qui existent. J'ai ajouté tous LOC, ci-dessous, pointant vers: multiselect ou Handsontable.MultiselectDropdownCell copié le dropdown méthode, appelée le nouveau nom et tout fonctionne, cependant, ne voyez toujours pas où je pourrais commencer à trouver ce que je cherche pour.

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
}};

j'ai une version modifiée de dropdown editor en place qui ressemble à:

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);

À ce stade, je n'ai aucune idée de où l'événement click se produit lorsque l'utilisateur sélectionne un élément dans la liste déroulante. Débogage a été douloureux pour moi parce que c'est à travers Traceur. J'ai essayé de définir un événement de clic après le module est prêt et le DOM est aussi bien, mais je ne peux pas obtenir même une alerte à tirer basé sur un clic sur l'un des dropdown select cellule. "Normal", les cellules que je peux obtenir un cliquer avec un simple:

$('body').on('click','#handsontable td', someAlert)

cependant, ce n'est pas le cas pour le contenu du menu. Clic droit pour inspecter le menu déroulant signifie d'abord désactiver le menu contextuel comme sur http://handsontable.com/. Ensuite, vous remarquerez que le clic droit d'inspecter tout va déclencher un événement qui ferme le menu déroulant, vous essayez de les inspecter.

j'ai mis des points de rupture dans toutes les bibliothèques source code, Je ne peux pas comprendre celui-là.

la seule chose que je veux faire est de comprendre où se trouve la partie du code qui met en évidence l'élément du menu et le place dans une sélection active, le transformer en une méthode qui accepte plusieurs sélections (jusqu'à l'ensemble des options disponibles, cliquer sur un élément actif le désactivera, disons).

puis s'assurer que ces sélections sont effectivement dans le Handsontable 'data scope'.

c'est ça, je n'ai pas besoin il même pour rendre dans la cellule ce que les choses ont été choisies, bien que n'importe quelle aide là-bas serait grande parce que malheureusement, je ne suis pas encore trouver l'endroit où les options dans le dropdown sont rendus soit.

j'ai aussi essayé D'utiliser le Select2Editor fait pour handsontable comme vu http://jsfiddle.net/4mpyhbjw/40/ et https://github.com/trebuchetty/Handsontable-select2-editor/issues/3, cependant cela n'aide pas beaucoup ma cause. Voici ce que l' liste déroulante de la cellule dans handsontable ressemble à:

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

Enfin, voici un violon: http://jsfiddle.net/tjrygch6/

je vous serais super reconnaissante si quelqu'un pouvait m'aider ici. Merci!

UPDATE

j'ai réussi à analyser les valeurs dans la cellule et tournez le type dans un tableau contenant les valeurs (donc en tapant rouge bleu va tourner un tableau contenant ['red','blue']). J'ai lancé ce tableau à travers l'algorithme de tri interne qui analyse les options et renvoie un index d'un élément correspondant. J'obtiens que cela fonctionne bien et je passe maintenant le tableau dans la méthode de surlignage. Cette méthode passe les valeurs de la bibliothèque de base WalkOnTable. Je ne vois pas où je peux modifier la logique pour sélectionner plus d'une valeur au lieu de décrocher la première option.

 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);
}

C'est la endroit où je pense que j'ai besoin WalkontableCellCoords à modifier pour accepter un tableau, puis mettre en surbrillance et sélectionner les deux valeurs lorsque la liste déroulante est ouverte et fermée. J'ai aussi besoin d'être capable de sélectionner plusieurs options via l'événement touch ou 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;

};

mise à Jour 2

j'ai obtenu les méthodes internes pour reconnaître et sélectionner partiellement les deux valeurs dans le DOM mais il est encore loin d'être correct.

Voici la sortie de la console générés par la méthode WalkOnTableCellCords pour être appelé, ce qui semble être ce que souligne la liste déroulante de sélection dans le cas où la cellule ne contient que des 1 (valeur par défaut de la fonctionnalité). Cette sortie est de dactylographier le bleu noir dans une cellule de descente contenant à la fois le bleu et le noir comme options individuelles dans la liste.

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

UPDATE si quelqu'un résout cela, je le ferai volez personnellement à l'endroit où vous êtes en personne, et serrez votre main. À deux reprises.