ในบทความก่อนหน้านี้สรุปประสบการณ์ของกรอบการพัฒนาตาม bootstrap metronic [ii] รายการการประมวลผลการปนเปื้อนและการใช้ปลั๊กอิน jstree การประมวลผลการปนเปื้อนของข้อมูลถูกนำมาใช้ บทความนี้ยังคงแนะนำตัวควบคุมที่ใช้กันทั่วไป Select2 ในหน้าแก้ไข การควบคุมนี้สามารถเสริมสร้างการควบคุมรายการแบบดรอปดาวน์แบบเลือกแบบดั้งเดิมให้ฟังก์ชั่นเพิ่มเติมและประสบการณ์การใช้งานที่ดีขึ้น
1. บทนำสู่การควบคุม Select2
ปลั๊กอินนี้เป็นปลั๊กอินส่วนขยายตาม Select ซึ่งสามารถให้ฟังก์ชั่นที่สมบูรณ์ยิ่งขึ้นและประสบการณ์ผู้ใช้ ที่อยู่เว็บไซต์ GitHub อย่างเป็นทางการคือ: https://select2.github.io/ สำหรับกรณีการใช้งานเฉพาะโปรดดูที่อยู่: https://select2.github.io/examples.html
ในเฟรมเวิร์กทั้งหมดเราได้ใช้ตัวควบคุม Select2 จำนวนมากเพื่อจัดการกับการแสดงเนื้อหารวมถึงรายการดรอปดาวน์แบบเลือกเดียว (รวมถึงกล่องเลือกเรียงซ้อน) รายการดรอปดาวน์ที่เลือกรายการดรอปดาวน์ต้นไม้ ฯลฯ เอฟเฟกต์อินเทอร์เฟซมีดังนี้
1) เอฟเฟกต์อินเทอร์เฟซแบบเรียงซ้อนของจังหวัดเมืองและภูมิภาคการบริหารภายใต้อินเทอร์เฟซการแก้ไข หากคุณเลือกจังหวัดเมืองภายใต้จังหวัดที่เกี่ยวข้องจะถูกโหลด หากคุณเลือกเมืองภูมิภาคการบริหารภายใต้เมืองจะยังคงโหลดต่อไปดังนั้นจึงบรรลุผลรายการแบบเลื่อนลงของความสัมพันธ์หลายระดับ
2) รายการแบบเลื่อนลงหลายรายการภายใต้อินเตอร์เฟสการแก้ไข
แต่เมื่อเราเลือกเนื้อหาระบบจะแสดงข้อมูลรายการโดยอัตโนมัติโดยไม่ต้องเลือกซึ่งใช้งานง่ายและเป็นมิตรดังที่แสดงด้านล่าง
3) รายการดรอปดาวน์รายการต้นไม้
บางครั้งข้อมูลของเราบางอย่างอาจมีความสัมพันธ์แบบลำดับชั้นเช่นองค์กรรายการระดับบน ฯลฯ
2. การวิเคราะห์รหัสการใช้งานจริงของการควบคุม Select2
1) รหัสอินเทอร์เฟซพื้นฐานและการทำงาน
ใช้ตัวควบคุม Select2 โดยปกติจะอยู่ในตัวควบคุมการเลือกปกติเพียงตั้งค่า (ตั้งค่าคลาสเป็น Select2)
<div> <div> <dable> ระดับที่สำคัญ </label> <div> <select id = "ความสำคัญ" name = "importance" placeholder = "ความสำคัญ ... "> </select> </div> </div> </div> <div> <dable>
หากเป็นรายการคงที่แสดงว่ามันเป็นเพียงการตั้งค่าเนื้อหาตัวเลือกดังที่แสดงด้านล่าง
<div> <div> <dable> การสูบบุหรี่ </label> <div> <เลือก id = "smoking" name = "smoking" type = "text" placeholder = "การสูบบุหรี่ ... "> <petion> การสูบบุหรี่ </petion>
รหัสการเริ่มต้นการควบคุม Select2 Simple 2 มีดังนี้
$ (เอกสาร) .ready (function () {$ (". js-example-basic-single"). select2 ();});โดยทั่วไปหากได้รับอนุญาตให้เลือกหลายรายการให้ตั้งค่าหลายรายการ = "หลาย" ตามที่แสดงในรหัสต่อไปนี้
<select id = "responsedemand" name = "responsedemand" multiple = "multiple"> </select>
2) การดำเนินการเชื่อมโยงข้อมูลแบบอะซิงโครนัส
โดยทั่วไปข้อมูลของการควบคุมที่เลือกของเราจะถูกโหลดแบบไดนามิกจากฐานข้อมูลดังนั้นข้อมูลมักจะได้รับและถูกผูกไว้ผ่าน AJAX
จากการพิจารณาความสามารถในการใช้รหัสใหม่เราเขียนฟังก์ชั่น JS ทั่วไปเพื่อลดรหัสการดำเนินการที่มีผลผูกพันและปรับปรุงการใช้รหัสซ้ำ
// ผูกเนื้อหาพจนานุกรมกับฟังก์ชั่นการเลือกที่ระบุ BindSelect (ctrlName, url) {var control = $ ('#' + ctrlName); // ตั้งค่าการควบคุมการประมวลผลของ Select2 Select2 ({ALLEDCLEAR: จริง, formatResult: formatResult, formatSelection: formatselection, escapemarkup: ฟังก์ชั่น (m) {return m;}}); // ผูกเนื้อหาของ ajax $ .getjson (url, ฟังก์ชั่น (ข้อมูล) {control.empty (); // ล้างกล่องดรอปดาวน์ $ .each (ข้อมูล, ฟังก์ชั่น (i, รายการ) {control.append ("<ตัวเลือกค่า = '" + item.value + ">" -ด้วยวิธีนี้ข้อมูลที่ผูกพันกับโมดูลพจนานุกรมสาธารณะสามารถห่อหุ้มและประมวลผลเพิ่มเติมได้ดังนี้
// ผูกเนื้อหาพจนานุกรมกับฟังก์ชั่นการควบคุมที่ระบุ bindDictItem (ctrlName, dicttypename) {var url = '/dictdata/getDictjson? dicttypename =' + encodeuri (dicttypename); bindSelect (ctrlName, url);}ด้วยวิธีนี้เราเริ่มต้นการควบคุม Select2 และเชื่อมโยงค่าพจนานุกรมที่เกี่ยวข้องหรือข้อมูลอื่น ๆ แบบไดนามิก สิ่งนี้สามารถทำได้ผ่านรหัสการเริ่มต้นต่อไปนี้ ในหมู่พวกเขา BindDictItem คือการดำเนินการที่เชื่อมโยงเนื้อหาพจนานุกรมโดยตรง BindSelect คือการดำเนินการที่ได้รับและผูกข้อมูลตาม URL และ $ ("#Province") ON ("เปลี่ยน", ฟังก์ชัน (e) {}); คือการทำงานของการประมวลผลฟังก์ชั่นเช่น $ ("#Province") ON ("เปลี่ยน", ฟังก์ชั่น (e) {}); จัดการการดำเนินการเชื่อมโยงที่จัดการการเปลี่ยนแปลงในเนื้อหาที่เลือก
// เริ่มต้นข้อมูลพจนานุกรม (รายการดรอปดาวน์) ฟังก์ชั่น initDictItem () {// การกำหนดที่สองอ้างอิง bindDictItem ("พื้นที่", "พาร์ติชันตลาด"); BindDictItem ("อุตสาหกรรม", "อุตสาหกรรมลูกค้า"); BindDictItem ("เกรด", "ระดับลูกค้า"); BindDictItem ("CustomerType", "ประเภทลูกค้า"); bindDictItem ("แหล่งที่มา", "แหล่งที่มาของลูกค้า"); BindDictItem ("CreditStatus", "คะแนนเครดิต"); BindDictItem ("ขั้นตอน", "เวทีลูกค้า"); bindDictItem ("สถานะ", "สถานะลูกค้า"); BindDictItem ("ความสำคัญ", "ระดับความสำคัญ"); // ผูกพันจังหวัดเมืองและภูมิภาคการบริหาร (การประมวลผลการเชื่อมโยง) bindselect ("จังหวัด", "/จังหวัด/getallprovincenamedictjson"); $ ("#Province"). on ("เปลี่ยน", ฟังก์ชั่น (e) {var provincename = $ ("#Province"). val (); bindselect ("เมือง", "/city/getcitysbyprovincenamedictjson? provincename ="+ provincename);}; $ ("#city"). on ("เปลี่ยน", ฟังก์ชั่น (e) {var cityname = $ ("#city"). val (); bindselect ("อำเภอ", "/district/getDistrictByCityNamedictjson? CityName ="+ CityName);}); -สำหรับข้อมูลที่ส่งคืนโดยคอนโทรลเลอร์ MVC เราส่งคืนรายการข้อมูล JSON ไปยังหน้าส่วนหน้าและรูปแบบข้อมูลของพวกเขามีดังนี้
[{"ข้อความ": "", "ค่า": ""}, {"ข้อความ": "การประชุมวิชาการ", "ค่า": "การประชุมวิชาการ"}, {"ข้อความ": "การแนะนำเพื่อน", "ค่า": "เพื่อนแนะนำ"}, {"ข้อความ": "สื่อโฆษณา"ด้วยวิธีนี้เมื่อหน้าส่วนหน้าเชื่อมโยงการควบคุม Select2 จะใช้คุณสมบัติของวัตถุ JSON
// ผูกเนื้อหาของ ajax $ .getjson (url, ฟังก์ชั่น (ข้อมูล) {control.empty (); // ล้างกล่องดรอปดาวน์ $ .each (ข้อมูล, ฟังก์ชั่น (i, รายการ) {control.append ("<ตัวเลือกค่า = '" + item.value + ">"รหัสการใช้งานของคอนโทรลเลอร์มีดังนี้:
/// <summary> /// รับข้อมูลพจนานุกรมที่สอดคล้องกันตามประเภทพจนานุกรมเพื่ออำนวยความสะดวกในการเชื่อมโยงการควบคุม UI /// </summary> /// <param name = "dicttypename"> ชื่อพจนานุกรม </param> /// รายการ <clistitem> (); clistitem pnode = new clistitem ("", ""); treelist.insert (0, pnode); พจนานุกรม <String, String> dict = bllfactory <CotdData> .instance.getDictByDictType (dicttypename); foreach (คีย์สตริงใน dict.keys) {treelist.add (ใหม่ clistitem (key, dict [key])); } return tojsoncontent (treelist); -3) การทำงานที่มีผลผูกพันของรายการต้นไม้
สำหรับรายการแอตทริบิวต์เช่นข้อมูลลำดับชั้นของ บริษัท ในเครือแผนกและสถาบันการดำเนินงานที่มีผลผูกพันของพวกเขาก็คล้ายกันดังที่แสดงในรหัสต่อไปนี้
// bindselect ("company_id", "/ผู้ใช้/getMyCompanyDictjson? userId ="+@เซสชัน ["userId"]); $ ("#company_id"). on ("เปลี่ยน", ฟังก์ชั่น (e) {var companyid = $ ("#company_id"). val (); bindlect ("dept_id", "/ผู้ใช้/getDeptDictjson? $ ("#dept_id"). on ("เปลี่ยน", ฟังก์ชั่น (e) {var deptid = $ ("#dept_id"). val (); bindlect ("pid", "/ผู้ใช้/getuserdictjson? deptid ="+ deptid);});มันเป็นเพียงข้อมูลที่พวกเขากลับมาเราแค่ใช้เป็นเนื้อหาการแสดงผลที่เยื้อง
[{"text": "กลุ่ม iqidi", "value": "1"}, {"ข้อความ": "สาขากวางโจว", "ค่า": "3"}, {"ข้อความ": "สาขาเซี่ยงไฮ้", "ค่า": "4"}, {"ข้อความ":หรือดังที่แสดงด้านล่าง
[{"ข้อความ": "สาขากวางโจว", "ค่า": "3"}, {"ข้อความ": "สำนักงานผู้จัดการทั่วไป", "ค่า": "6"}, {"ข้อความ": "แผนกการเงิน", "ค่า": "7"}, {"ข้อความ": " "text": "พัฒนากลุ่ม", "value": "14"}, {"text": "พัฒนากลุ่ม 2", "value": "15"}, {"text": "กลุ่มทดสอบ 2", "ค่า": "15"}, {"ข้อความ": 1 "," ค่า ":" 23 "}, {" ข้อความ ":" แผนกตลาด 2 "," ค่า ":" 24 "}, {" ข้อความ ":" แผนกที่ครอบคลุม "," ค่า ":" 11 "}, {" ข้อความ ":" แผนกผลิต "," มูลค่า ":" 12 "}, {" ข้อความ ":เพื่อสรุปสองส่วนข้างต้นเราจะเห็นว่าเนื้อหาของข้อความของพวกเขาคือการเพิ่มช่องว่างตามความสัมพันธ์แบบลำดับชั้นซึ่งจะตระหนักถึงการแสดงความสัมพันธ์แบบลำดับชั้น
อย่างไรก็ตามในแง่ของเอฟเฟกต์อินเทอร์เฟซการประมวลผลนี้ไม่ดีเท่าการแสดงของต้นไม้รายการแบบเลื่อนลงใน EasyUI บางทีปลั๊กอิน bootstrap ที่ดีกว่าสามารถใช้เพื่อแสดงเนื้อหารูปต้นไม้นี้
4) การประมวลผลการกำหนดของการควบคุม Select2
วิธีการที่แนะนำข้างต้นล้วนเกี่ยวกับการเริ่มต้นการควบคุม Select2 และข้อมูลที่เกี่ยวข้องกับการเชื่อมโยง ดังนั้นหากเราผูกค่าของอินเทอร์เฟซการแก้ไขหลังจากเริ่มต้นอินเทอร์เฟซเราจำเป็นต้องกำหนดค่าให้กับตัวควบคุมเพื่อให้มันแสดงรายการที่จำเป็นต้องแสดง
วิธีการล้างการควบคุมมีดังนี้
// ล้างค่าของ Select2 Control $ ("#PID") select2 ("val", ""); $ ("#company_id"). select2 ("val", ""); $ ("#dept_id"). select2 ("val", "");หากจำเป็นต้องล้างการควบคุมหลายตัวคุณสามารถใช้คอลเลกชันเพื่อประมวลผลได้
var select2ctrl = ["พื้นที่", "อุตสาหกรรม", "เกรด", "customerType", "แหล่งที่มา", "CreditStatus", "Stage", "สถานะ", "ความสำคัญ"]; $ .Each (select2ctrl, ฟังก์ชัน (i, item) {var ctrl = $ ("#" + item); ctrl.select2 ("val", "");});กำหนดค่าให้กับตัวควบคุม Select2 เพื่อแสดงรายการด้วยเนื้อหาค่าที่สอดคล้องกันและการดำเนินการจะคล้ายกับข้างต้น
$ ("#customerType"). select2 ("val", info.customertype); $ ("#เกรด"). select2 ("val", info.grade); $ ("#creditStatus"). select2 ("val", info.creditstatus); $ ("#สำคัญ"). select2 ("val", info.ispublic);หากคุณต้องการแสดงด้วยวิธีการเรียงซ้อนให้เพิ่มการประมวลผลฟังก์ชั่น onchange ดังต่อไปนี้การประมวลผลการกำหนดรหัสเรียงซ้อนต่อไปนี้
$ ("#Province"). select2 ("val", info.province) .trigger ('เปลี่ยน'); // link $ ("#city"). select2 ("val", info.city) .trigger ('เปลี่ยน'); // link $ ("#district"). $ ("#company_id1"). select2 ("val", info.company_id) .trigger ('เปลี่ยน'); $ ("#dept_id1"). select2 ("val", info.dept_id) .trigger ('เปลี่ยน'); $ ("#pid1"). select2 ("val", info.pid);ในที่สุดก็มีเอฟเฟกต์อินเทอร์เฟซแบบบูรณาการสองรายการสำหรับการอ้างอิง
ข้างต้นเป็นบทสรุปของประสบการณ์ของเฟรมเวิร์ก Bootstrap Metronic Development ตามรายการแบบดรอปดาวน์ [สาม] ของเนื้อหาที่เกี่ยวข้องของการใช้ปลั๊กอิน Select2 ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดให้ความสนใจกับเว็บไซต์ Wulin.com!