jQuery Girl
  1. jQuery Girl
  3. Select2 avec plusieurs groupes nesteds
Intereting Posts
Les pages spécifiées restnt sélectionnées lors du rechargement de la page Comment puis-je passer des arguments à un gestionnaire d’événements? Personnaliser l’apparence des flèches haut / bas dans les entrées de nombres HTML IE11 collage de données du Presse-papiers sur un élément d’entraînement gênant Envoi de tableau Javascript au contrôleur asp.net MVC Changer la couleur de fond de div lors du rechargement Comment déclencher un lien (une balise) avec un double clic au lieu d’un simple clic? Impossible de supprimer l’encapsulation .d de la réponse JSON dans .net Evénement de balayage jQuery Mobile Procédure de validation ligne par ligne sur un formulaire tabulaire Oracle APEX à l’aide d’Ajax jQuery pour parsingr notre une partie d’un chemin d’URL Animation zoom papier Raphael Différents moyens de contrôler la taille et l’ombre des marqueurs d’image dans Google Maps Un comportement de chargement très intéressant, un bug ou une solution? Formater et append des données JSON au format html div

Select2 avec plusieurs groupes nesteds

Je n’arrive pas à utiliser le Select2 avec différents groupes, seul ce dernier apparaît. 

  2 - Gastos 2.1 - DESPESA OPERACIONAL FIXA 2.1.1 - PESSOAL 2.1.1.1 - GERENCIA/ADMINSTRATIVO 2.1.1.1.1 - SALÁRIOS 2.1.1.1.2 - DIVIDENDOS / COMISSÕES /BONUS 2.1.1.1.3 - INSS 2.1.1.1.4 - FGTS 2.1.1.1.5 - IRRF COD. 0561 2.1.1.1.6 - PLANO DE SAUDE 2.1.1.1.7 - TICKET REFEICAO 2.1.1.1.8 - VALE TRANSPORTE (...)   $('select').each(function () { $(this).select2({ allowClear: true, width: 'resolve', dropdownAutoWidth: true }); }); $('#txtConta').find('option').each(function () { if ($(this).attr("value").indexOf('S') == 0) { $('').attr('label', $(this).text()).appendTo($('#txtConta')); $(this).remove(); } else { $('#txtConta').find('optGroup').last().append($(this)); } });

Vous pouvez voir une démonstration dans ce jsfiddle .

Cette solution a été testée avec select2 version 4.0.1 et vous pouvez procéder de la manière suivante:

  1. Passez un tableau contenant un atsortingbut supplémentaire (le niveau de chaque nœud de la hiérarchie). La structure du tableau est simple

  2. Créer une fonction pour formater les résultats, c’est-à-dire à quoi ressemble chaque élément en fonction de son niveau dans la hiérarchie

  3. Lors de l’initialisation, sélectionnez la fonction créée pour atsortingbuer templateResult.

Vous pouvez voir dans le code suivant: 

  $(document).on("ready", function() { var data = [{ id: "2", text: "2 - Gastos", level: 1 }, { id: "2.1", text: "2.1 - DESPESA OPERACIONAL FIXA", level: 2 }, { id: "2.1.1", text: "2.1.1 - PESSOAL", level: 3 }, { id: "2.1.1", text: "2.1.1 - PESSOAL", level: 4 }, { id: "2.1.1.1", text: "2.1.1.1 - GERENCIA/ADMINSTRATIVO", level: 4 }, { id: "2.1.1.1.1", text: "2.1.1.1.1 - SALÁRIOS", level: 5 }, { id: "2.1.1.1.2", text: "2.1.1.1.2 - DIVIDENDOS / COMISSÕES /BONUS", level: 5 }, { id: "2.1.1.1.3", text: "2.1.1.1.3 - INSS", level: 5 }, { id: "2.1.1.1.4", text: "2.1.1.1.4 - FGTS", level: 5 }]; function formatResult(node) { var $result = $('' + node.text + ''); return $result; }; $("#mySelect").select2({ placeholder: 'Select an option', width: "600px", data: data, formatSelection: function(item) { return item.text }, formatResult: function(item) { return item.text }, templateResult: formatResult, }); });

Jetez un coup d’œil à ce problème GitHub . Ce qui compte, c’est

Le code HTML lui-même interdit l’imbrication de , de sorte que votre balisage est invalide avant même qu’il atteigne Select2. Toutefois, vous pouvez imbriquer de manière arbitraire des choix via des enfants lorsque vous utilisez des objects JS pour les représenter.

Cela signifie que vous pouvez utiliser les children pour obtenir plusieurs options nestedes. La solution suivante et jsfiddle sont basés sur la solution de fperie .

Avec cette solution, les feuilles sont toujours sélectionnables. Si vous ne voulez pas sélectionner les feuilles, vous devez supprimer l’atsortingbut id des feuilles.

Voir ce JSfiddle qui illustre les deux configurations. Notez que je n’ai utilisé qu’une partie des données que vous avez fournies.

J’ai utilisé comme ça. Travailler bien. 

 $(document).on("ready", function() { function formatResult(node) { var level = 0; if(node.element !== undefined){ level = (node.element.className); if(level.sortingm() !== ''){ level = (parseInt(level.match(/\d+/)[0])); } } var $result = $('' + node.text + ''); return $result; }; $("#select2").select2({ placeholder: 'Select an option', width: "300px", templateResult: formatResult, }); });

J’ai essayé d’append ceci en tant que commentaire dans le message de Saravanan ci-dessus, mais la longueur du commentaire était trop longue. Considérez ceci comme une extension de son message. Nous lui en sums reconnaissants de m’avoir donné cette idée.

C’est un peu une publication nécro de ma part, mais je voulais juste développer la façon dont j’ai implémenté la solution ci-dessus avec le nouveau format jQuery de $ document.ready au lieu de $ document.on. Légèrement modifié aussi, puisque le mien est nested dans un chargement de page, la fonction est donc en dehors du chargement de page, et j’ai utilisé un atsortingbut plutôt qu’une classe. Une partie importante cependant, est que je devais mettre à la fois templateResult et templateSelection pour que cela fonctionne, car sans ce dernier, rien ne s’est passé: 

 function pageLoad() { $(document).ready(function () { $(".multiple-group").select2({ allowClear: true, closeOnSelect: false, templateResult: formatResult, templateSelection: formatResult }); }); } function formatResult(node) { var level = 0; if (node.element !== undefined) { level = node.element.getAtsortingbute("hierarchy-level"); if (level.sortingm() !== '') { level = parseInt(level) - 1; } } var $result = $('' + node.text + ''); return $result; }