Dalam artikel sebelumnya, ringkasan pengalaman dari kerangka kerja pengembangan berdasarkan bootstrap metronik [II] daftar pemrosesan pagination dan penggunaan plug-in JStree, pemrosesan pagination data diperkenalkan, plug-in paginator bootstrap digunakan, dan daftar pohon digunakan, plug-in JStree digunakan. Artikel ini terus memperkenalkan Control Select2 yang umum digunakan di halaman Edit. Kontrol ini dapat memperkaya kontrol daftar drop-down terpilih tradisional, menyediakan lebih banyak fungsi dan pengalaman pengguna yang lebih baik.
1. Pengantar Kontrol Select2
Plug-in ini adalah plug-in ekstensi berdasarkan Select, yang dapat memberikan fungsi yang lebih kaya dan pengalaman pengguna. Alamat situs web resmi GitHub adalah: https://select2.github.io/. Untuk kasus penggunaan tertentu, silakan merujuk ke alamat: https://select2.github.io/examples.html.
Di seluruh kerangka kerja, kami telah menggunakan banyak kontrol Select2 untuk menangani tampilan konten, termasuk daftar drop-down terpilih tunggal (termasuk kotak pilihan cascading), daftar drop-down yang dipilih, daftar drop-down pohon, dll. Efek antarmuka adalah sebagai berikut.
1) Efek antarmuka cascading dari provinsi, kota, dan daerah administrasi di bawah antarmuka pengeditan . Jika Anda memilih provinsi, kota di bawah provinsi yang sesuai akan dimuat. Jika Anda memilih kota, daerah administrasi di bawah kota akan terus memuat, dengan demikian mencapai efek daftar drop-down dari korelasi multi-level.
2) Beberapa daftar drop-down seleksi di bawah antarmuka pengeditan
Tetapi ketika kami memilih konten, sistem akan secara otomatis menampilkan data daftar tanpa pemilihan, yang sangat intuitif dan ramah, seperti yang ditunjukkan di bawah ini.
3) Daftar drop-down daftar pohon
Terkadang, beberapa data kami mungkin memiliki hubungan hierarkis, seperti organisasi, daftar tingkat atas, dll.
2. Analisis Kode Penggunaan Aktual Kontrol Pilih2
1) Kode dan operasi antarmuka dasar
Gunakan kontrol Select2, biasanya pada kontrol pilih reguler, cukup atur (atur kelasnya ke Select2).
<dv> <div> <label> Level Penting </Label> <div> <pilih id = "penting" name = "penting" placeholder = "penting ..."> </pilih> </div> </div> </div> <verv> <vet> </label> </div> <pilih id = "pengakuan" name = "pengakuan" Placeholder = "Placeholder ="
Jika itu adalah daftar tetap, maka itu hanya mengatur konten opsi, seperti yang ditunjukkan di bawah ini.
<div> <div> <label> merokok </LABEL> <IV> <SELECT ID = "Smoking" Name = "Smoking" Type = "Text" Placeholder = "Smoking ..."> <pection> Smoking </pection> <pection> Jangan merokok </pect> </pilih> </Div> </Div> </Div>
Kode inisialisasi Kontrol Simple Select2 adalah sebagai berikut.
$ (dokumen) .ready (function () {$ (". js-example-basic-single"). select2 ();});Secara umum, jika beberapa item diizinkan untuk dipilih, lalu atur beberapa = "Multiple" seperti yang ditunjukkan dalam kode berikut.
<pilih id = "responsedemand" name = "responseDemand" multiple = "Multiple"> </ pilih>
2) Operasi pengikatan data asinkron
Secara umum, data kontrol pilih kami dimuat secara dinamis dari database, sehingga data biasanya diperoleh dan diikat melalui AJAX.
Berdasarkan pertimbangan penggunaan kembali kode, kami menulis fungsi JS umum untuk mengurangi kode operasi pengikatan dan meningkatkan penggunaan kembali kode.
// BIND Konten Kamus ke BindSelect Function Pilih Pilih SELECT (CTRLNAME, URL) {var control = $ ('#' + ctrlname); // atur control pemrosesan terpilih. // Ikat konten Ajax $ .getjson (url, function (data) {control.empty (); // hapus kotak drop-down $ .each (data, fungsi (i, item) {control.append ("<option value = '" + item.value + ">" + item.text + "</option>");}); });Dengan cara ini, data yang terikat pada modul Kamus Publik dapat dienkapsulasi dan diproses lebih lanjut sebagai berikut.
// Bind konten kamus ke fungsi kontrol yang ditentukan binddictitem (ctrlname, dicttypeName) {var url = '/dictdata/getdictjson? DicttypeName =' + encodeuri (dicttypeName); BindSelect (ctrlname, url);}Dengan cara ini, kami menginisialisasi kontrol Select2 dan secara dinamis mengikat nilai kamus yang sesuai atau data lainnya. Ini dapat dicapai melalui kode inisialisasi berikut. Di antara mereka, Binddictitem adalah operasi yang secara langsung mengikat konten kamus, Bindselect adalah operasi yang memperoleh dan mengikat data berdasarkan URL, dan $ ("#provinsi"). On ("ubah", fungsi (e) {}); adalah operasi pemrosesan fungsi seperti $ ("#provinsi"). on ("ubah", fungsi (e) {}); Menangani operasi tautan yang menangani perubahan dalam konten yang dipilih.
// inisialisasi informasi kamus (daftar drop-down) fungsi initdictitem () {// referensi penugasan kedua binddictitem ("area", "partisi pasar"); Binddictitem ("industri", "industri pelanggan"); Binddictitem ("grade", "level pelanggan"); Binddictitem ("customerType", "tipe pelanggan"); Binddictitem ("sumber", "sumber pelanggan"); Binddictitem ("creditstatus", "rating kredit"); Binddictitem ("tahap", "tahap pelanggan"); Binddictitem ("status", "status pelanggan"); Binddictitem ("penting", "tingkat penting"); // Bind Provinsi, Kota, dan Wilayah Administratif (Pemrosesan Tautan) Bindselect ("Provinsi", "/Provinsi/GetAllProvincenamedictjson"); $ ("#Provinsi"). On ("ubah", fungsi (e) {var provincename = $ ("#provinsi"). Val (); bindselect ("city", "/city/getCitySbyprovincenamedictjson? Provinsi nama ="+ provinsi);}); $ ("#City"). On ("ubah", fungsi (e) {var cityname = $ ("#city"). Val (); bindselect ("district", "/district/getdistrictbycitynamedictjson? Cityname ="+ cityname);}); }Adapun data yang dikembalikan oleh pengontrol MVC, kami mengembalikan daftar data JSON ke halaman front-end, dan format data mereka adalah sebagai berikut.
[{"Teks": "", "value": ""}, {"text": "Academic Conference", "Value": "Academic Conference"}, {"Teks": "Teman Pendahuluan", "Nilai": "Teman Pendahuluan"}, {"Teks": "Media Periklanan", "Value": "Advertising Media"}]]Dengan cara ini, ketika halaman front-end mengikat kontrol Select2, properti objek JSON digunakan.
// Ikat konten Ajax $ .getjson (url, function (data) {control.empty (); // hapus kotak drop-down $ .each (data, fungsi (i, item) {control.append ("<option value = '" + item.value + ">" + item.text + "</option>");});Kode implementasi pengontrol adalah sebagai berikut:
/// <summary> /// Get the corresponding dictionary data according to the dictionary type to facilitate binding of UI controls /// </summary> /// <param name="dictTypeName">Dictionary type name</param> /// <returns></returns> public ActionResult GetDictJson(string dictTypeName) { List<CListItem> treeList = new Daftar <ClistItem> (); Clistitem pnode = clistitem baru ("", ""); trearis.insert (0, pnode); Kamus <string, string> dict = bllfactory <cictData> .instance.getDictByDictType (DictTypeName); foreach (tombol string di dict.keys) {trearise.add (new clistitem (kunci, dikt [kunci]))); } return toJSonContent (TreeList); }3) Mengikat operasi daftar pohon
Untuk daftar atribut, seperti data hierarkis dari perusahaan, departemen, dan lembaga yang berafiliasi, operasi pengikatan mereka juga serupa, seperti yang ditunjukkan dalam kode berikut.
// bindselect ("company_id", "/user/getMyCompanydictjson? Userid ="+@sesi ["userid"]); $ ("#Company_id"). On ("ubah", function (e) {var companyId = $ ("#company_id"). Val (); bindselect ("dept_id", "/user/getdeptdictjson? ParentId ="+ companyId);}); $ ("#Dept_id"). On ("ubah", function (e) {var deptid = $ ("#dept_id"). Val (); bindselect ("pid", "/user/getuserdictjson? Deptid ="+ deptid);});Ini hanya data yang mereka kembalikan, kami hanya menggunakannya sebagai konten tampilan indentasi.
[{"Teks": "grup iqidi", "value": "1"}, {"teks": "cabang Guangzhou", "value": "3"}, {"teks": "cabang shanghai", "nilai": "4"}, "teks": "cabang beijing", "value" "" "" 5 "5" 5 "Atau seperti yang ditunjukkan di bawah ini
[{"Teks": "Cabang Guangzhou", "Value": "3"}, {"Teks": "Kantor Manajer Umum", "Nilai": "6"}, {"Teks": "Departemen Keuangan", "Nilai": "7"}, {"Teks": "Departemen Teknik", "Value": "8"}, "{" Teks ":" Departemen Teknik "," Value ":" 8 "}," {"Teks": " "Teks": "Kembangkan grup", "nilai": "14"}, {"teks": "Kembangkan grup 2", "nilai": "15"}, {"Teks": "Test Group 2", "Value": "15"}, {"Teks": "Test Group 2" Value ":" 16 "}, {" "" "" "" "" "" "" "" "" "" "" "" "" "" "{" "" TEXT "TEXT" PAREDION "," Nilai "," 1 "," Value ":" 23 "}, {" Teks ":" Departemen Pasar 2 "," Nilai ":" 24 "}, {" Teks ":" Departemen Komprehensif "," Nilai ":" 11 "}, {" Teks ":" Departemen Produksi "," Nilai ":" 12 "}, {" Teks ":" Departemen Sumber Daya Manusia "," "Nilai": ""Untuk meringkas dua bagian di atas, kita dapat melihat bahwa konten teks mereka adalah untuk meningkatkan ruang sesuai dengan hubungan hierarkis, sehingga mewujudkan tampilan hubungan hierarkis.
Namun, dalam hal efek antarmuka, pemrosesan ini memang tidak sebagus tampilan pohon daftar drop-down di easyui. Mungkin plug-in bootstrap yang lebih baik dapat digunakan untuk menampilkan konten berbentuk pohon ini.
4) Pemrosesan Penugasan Kontrol Pilih2
Metode yang diperkenalkan di atas adalah semua tentang menginisialisasi kontrol select2 dan data terkait yang mengikat. Jadi jika kita mengikat nilai antarmuka pengeditan setelah menginisialisasi antarmuka, kita perlu menetapkan nilai ke kontrol untuk membiarkannya menampilkan item yang benar -benar perlu ditampilkan.
Metode membersihkan kontrol adalah sebagai berikut.
// Hapus nilai Kontrol SELECT2 $ ("#PID"). SELECT2 ("VAL", ""); $ ("#Company_id"). Select2 ("val", ""); $ ("#Dept_id"). Select2 ("val", "");Jika beberapa kontrol perlu dibersihkan, Anda dapat menggunakan koleksi untuk memprosesnya
var select2ctrl = ["Area", "Industri", "Grade", "CustomerType", "Source", "Creditstatus", "Stage", "Status", "penting"]; $ .each (select2ctrl, function (i, item) {var ctrl = $ ("#" + item); ctrl.select2 ("val", "");});Tetapkan nilai ke kontrol Select2 untuk menampilkan item dengan konten nilai yang sesuai, dan operasi akan serupa dengan yang di atas.
$ ("#CustomerType"). SELECT2 ("VAL", INFO.CUSTOMERTYPE); $ ("#Grade"). Select2 ("val", info.grade); $ ("#Creditstatus"). Select2 ("val", info.creditstatus); $ ("#Penting"). Select2 ("val", info.ispublic);Jika Anda perlu menampilkannya dengan cara yang mengalir, maka tambahkan pemrosesan fungsi Onchange, sebagai berikut pemrosesan penugasan dari kode cascading berikut.
$ ("#Provinsi"). Select2 ("val", info.province) .trigger ('ubah'); // tautan $ ("#city"). Select2 ("val", info.city) .trigger ('ubah'); // tautan $ ("#distrik"). Select2 ("val", info.district); $ ("#Company_id1"). Select2 ("val", info.company_id) .trigger ('ubah'); $ ("#Dept_id1"). Select2 ("val", info.dept_id) .trigger ('ubah'); $ ("#PID1"). SELECT2 ("VAL", INFO.PID);Akhirnya, ada dua efek antarmuka terintegrasi untuk referensi.
Di atas adalah ringkasan dari pengalaman kerangka pengembangan metronik bootstrap berdasarkan daftar drop-down [tiga] dari konten yang relevan dari penggunaan plug-in select2. Saya harap ini akan membantu semua orang. Jika Anda ingin mengetahui informasi lebih lanjut, harap perhatikan situs web Wulin.com!