บทความนี้สรุปการใช้งานส่วนประกอบ bootstrap select2 ในบางโครงการจริง มันถูกแบ่งปันกับคุณ เพื่อนที่ต้องการสามารถเรียนรู้จากมันและหลีกเลี่ยงการออกนอกเส้นทาง เนื้อหาเฉพาะมีดังนี้
ภาพการทำซ้ำ:
ไม่ว่าจะเป็นการรับข้อมูลในวิธีที่แน่นอนหรือเพื่อรับ AJAX, bootstrap.js/css และ select2.js/css และ::
{{stylesheet_link ('css/bootstrap.css')}} {{stylesheet_link ('css/select2.min.css')}} {{{stylesheet_link stylesheet_link ('css/prettify.css')}} {{javascript_include ('js/lib/jquery.js')}} {{javascript_include ('js/lib/select2.full.js') javascript_include ('js/lib/bootstrap.js')}} <div> <ส่วน id = "แท็ก"> <div> <p> <เลือกหลายตัว = "หลาย"> <ตัวเลือกที่เลือก = "เลือก"> </ตัวเลือก> </div> </section> </div> </div>วิธีแก้ไขเพื่อรับ:
$ (". js-example-tags"). select2 ({tags: true, // คุณสามารถปรับแต่งแท็ก createSearchChoice: ฟังก์ชั่น (คำศัพท์, ข้อมูล) {แจ้งเตือน (1); ถ้า ($ (data) .filter (ฟังก์ชั่น () {ส่งคืน text.localeCompare }, หลาย: จริง, ข้อมูล: [{id: 0, text: 'story'}, {id: 1, text: 'bug'}, {id: 2, text: 'task'}]});รับวิธี Ajax:
$ (". js-example-tags"). select2 ({// เปิดใช้งานแท็กแท็กแท็ก: จริง, // การโหลดข้อมูลระยะไกล // ดู https://select2.github.io/options.html#ajax ajax: {url: "usk2/tags" arr = [];อธิบาย
รูปแบบการส่งคืนข้อมูลใน ajax ควรมีลักษณะเช่นนี้: [{id: 0, text: 'story'}, {id: 1, text: 'bug'}, {id: 2, text: 'task'}]
ตัวอย่างรหัส PHP ที่สอดคล้องกัน
... $ p1 = อาร์เรย์ (id => "1", text => "java"); $ p2 = array (id => "2", text => "jvm"); $ test = array (1 => $ p1,2 => $ p2); $ params ['responsedata'] = $ test; $ this-> view-> disable (); Return Parent :: AjaxResponse ($ params);
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นการแนะนำวิธีการใช้งานบางอย่างของ Select2 ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคน