web-dev-qa-db-fra.com

Jquery select2 données json avec optgroup et images

J'utilise select2 avec ressort mvc. J'ai obtenu les données de mon contrôleur que je dois afficher ici en termes d'options. Mais je veux qu'ils soient groupés en optgroup et je veux aussi que des images y soient ajoutées qui peuvent être insérées manuellement comme indiqué ci-dessous: -

 <optgroup label="group">
    <option value="imageName">value 1</option>
    <option value="imageName">value 1</option>
    </optgroup>

Où imageName est le nom de l'image. Je veux: 1) Grouper les options dans json. 2) Fournissez cet attribut d'image dans json afin que select2 puisse former les données.

Voici le code:

$("#my-select").select2({
        data : [ {
            id : 0,
            text : 'enhancement'
        }, {
            id : 1,
            text : 'bug'
        }, {
            id : 2,
            text : 'duplicate'
        }, {
            id : 3,
            text : 'invalid'
        }, {
            id : 4,
            text : 'wontfix'
        } ]
    });

Je crée mon json manuellement à partir de mes objets. Je peux donc fournir toutes les données ici. Aucune suggestion ?

javascriptjqueryjquery-select2
25
New Bee

Select2 mappe les objets de données à <option> et <optgroup> balises utilisant la logique suivante

Un objet de données (ce qui est retourné dans la liste) qui ressemble à

{
  'id': 'value-here',
  'text': 'text-here'
}

Sera mappé à un <option> qui ressemble

<option value="value-here">text-here</option>

Un objet de données qui ressemble

{
  'text': 'label-here',
  'children': [data_object, data_object]
}

Sera mappé dans un <optgroup> qui ressemble

<optgroup label="label-here">
  <!-- HTML for the `children` -->
</optgroup>

Donc, l'objet de données que vous cherchez à renvoyer est

{
  'text': 'group',
  'children': [
    {
      'id': 'imageName',
      'text': 'value 1'
    },
    {
      'id': 'imageName',
      'text': 'value 1'
    }
  ]
}
46
Kevin Brown