Cet article résume l'utilisation du composant bootstrap select2 dans certains projets réels. Il est partagé avec vous. Les amis dans le besoin peuvent en tirer des leçons et éviter les détours. Le contenu spécifique est le suivant
Image de reproduction:
Qu'il s'agisse d'obtenir des données de manière fixe ou d'obtenir AJAX, bootstrap.js / css et select2.js / css et:
{{Stylesheet_link ('css / bootstrap.css')}} {{Stylesheet_link ('css / select2 Stylesheet_link ('CSS / Prettify.css')}} {{javascript_include ('js / lib / jQuery.js')}} {{javascript_include ('js / lib / select2.full.js')}} {{javascript_include ('js / lib / bobotesSter }} <div> <section id = "tags"> <v> <p> <select multiple = "multiple"> <option selected = "select"> orange </ option> <opopoption> white </ option> <option selected = "selected"> violet </ div> </lect> </p> </ div> </ section> </div> </ div> </polyMoyen fixe d'obtenir:
$ (". js-example-tags"). select2 ({tags: true, // pouvez-vous personnaliser la balise createSearchCoice: function (term, data) {alert (1); if ($ (data) .filter (function () {return this.text.localecompare (term) === 0;}). multiple: true, data: [{id: 0, texte: 'story'}, {id: 1, texte: 'bug'}, {id: 2, texte: 'tâche'}]});Obtenez la méthode Ajax:
$ (". js-example-tags"). select2 ({// activer les balises de tagging: true, // charger des données distantes // voir https://select2 [];illustrer
Le format de retour de données dans ajax devrait ressembler à ceci: [{id: 0, texte: 'story'}, {id: 1, texte: 'bug'}, {id: 2, texte: 'tâche'}]
Exemple de code PHP correspondant
... $ p1 = array (id => "1", text => "java"); $ p2 = array (id => "2", text => "jvm"); $ test = array (1 => $ p1,2 => $ p2); $ params ['ResponseData'] = $ test; $ this-> voir-> Disable (); retour parent :: ajaxResponse ($ params);
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est une introduction à certaines méthodes d'utilisation de Select2, j'espère que cela sera utile à l'apprentissage de chacun.