Baru-baru ini, karena pekerjaan memerlukan komponen kotak drop-down pohon, umumnya ada dua metode implementasi setelah mencari informasi. Pertama, diimplementasikan menggunakan Ztree; Kedua, diimplementasikan menggunakan easyui. Karena front-end perusahaan tidak dirancang menggunakan easyui, saya memilih Ztree untuk mengimplementasikan pohon drop-down di sini.
Di sini, format data sederhana (mis. Format JSON sederhana) digunakan mirip dengan JSON berikut:
var zNodes =[ {id:1, pId:0, name:"Beijing"}, {id:2, pId:0, name:"Tianjin"}, {id:3, pId:0, name:"Shanghai"}, {id:6, pId:0, name:"Chongqing"}, {id:4, pId:0, name:"Hebei Province", Buka: true, nocheck: true}, {id: 41, pid: 4, name: "shijiazhuang"}, {id: 42, pid: 4, nama: "baoding"}, {id: 43, pid: 4, nama: "handan"}, {id: 44, 44, 4, 4, 4, 4, 4, 4, 4, 4, 4, 444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 44444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 444, 44444, 444, 444, 444, 44444, 444, 444444444444444444444ia, name:"Guangdong Province", open:true, nocheck:true}, {id:51, pId:5, name:"Guangzhou"}, {id:52, pId:5, name:"Shenzhen"}, {id:53, pId:5, name:"Dongguan"}, {id:54, pId:5, name:"Foshan"}, {id:6, pId:0, name:"Fujian Province", open:true, nocheck:true}, {id:61, pId:6, name:"Fuzhou"}, {id:62, pId:6, name:"Xiamen"}, {id:63, pId:6, name:"Quanzhou"}, {id:64, pId:6, Nama: "Sanming"}];Di sini, sebuah entitas kacang pertama kali diperlukan untuk merangkum data yang ditemukan yang sesuai, sebagai berikut:
kelas publik ztreenode {// id private string id; // ID Parent Private String PID; // Tampilkan Nama Private String Nama; // apakah akan membuka (default tidak dibuka di sini, jika perlu dibuka, disetel ke true) // boolean pribadi terbuka; // Dapatkah Anda memilih (atur apakah simpul dapat dipilih secara default, dan simpul yang sesuai dengan set ke true tidak dapat dipilih) // nocheck boolean pribadi; /** Getter and Setter*/}Perlu dicatat di sini bahwa huruf kedua di PID dikapitalisasi. Jika ditulis dalam huruf kecil, itu tidak dapat dibangun ke dalam struktur pohon. Semua adalah node root.
Kemudian, konversi data yang ditemukan dari database menjadi kacang yang sesuai yang dibutuhkan oleh Ztree, dan kemudian mengubahnya menjadi JSON yang sesuai. Kodenya adalah sebagai berikut:
// Dapatkan pohon klasifikasi produk dan kembalikan string publik JSON getGoodScategoryTreejson () {list <GoodScategory> allGoodScategoryList = goodscategoryservice.getgoodscategorytreejson (); Daftar <Ztreenode> ztreRist = ArrayList baru <Ztreenode> (); untuk (goodscategory gcty: allgoodscategorylist) {ztreenode treenade = new ztreenode (); treenade.setid (gcty.getId ()); treenade.setpid (gcty.getParent () == null? "": gcty.getParent (). getId ()); treenade.setname (gcty.getName ()); Ztreelist.Add (Treeenade); } return ajax (ztreelist); }Konversi daftar ke metode JSON yang sesuai, sebagai berikut:
Toolkit JSON digunakan:
import org.springframework.base.util.JsonUtil;private static final String HEADER_ENCODING = "UTF-8";private static final boolean HEADER_NO_CACHE = true;private static final String HEADER_TEXT_CONTENT_TYPE = "text/plain";private static final String HEADER_JSON_CONTENT_TYPE = "text/plain";// AJAX output protected String AJAX (Konten String, String ContentType) {coba {httpservletResponse response = initResponse (contentType); response.getWriter (). Tulis (konten); response.getWriter (). flush (); } catch (ioException e) {e.printstacktrace (); } return tidak ada; } // output AJAX Protected String AJAX (Teks String) {return ajax (Text, header_text_content_type); } // output AJAX Protected String AJAX (Status Status) {httpservletResponse response = initResponse (header_json_content_type); Peta <string, string> jsonMap = hashmap baru <string, string> (); jsonmap.put (status_parameter_name, status.toString ()); Jsonutil.toJson (respons, jsonmap); tidak ada yang kembali; } // output AJAX Protected String AJAX (Status Status, String Message) {httpservletResponse response = initResponse (header_json_content_type); Peta <string, string> jsonMap = hashmap baru <string, string> (); jsonmap.put (status_parameter_name, status.toString ()); jsonmap.put (message_parameter_name, pesan); Jsonutil.toJson (respons, jsonmap); tidak ada yang kembali; } // output string protected AJAX sesuai dengan objek AJAX (objek objek) {httpservletResponse response = initResponse (header_json_content_type); Jsonutil.toJson (respons, objek); tidak ada yang kembali; } // output Menurut status boolean Ajax Protected String Ajax (Boolean Booleansstatus) {httpservletResponse response = initResponse (header_json_content_type); Peta <String, Object> jsonMap = HashMap baru <String, Object> (); jsonmap.put (status_parameter_name, booleansstatus); Jsonutil.toJson (respons, jsonmap); tidak ada yang kembali; } private httpservletResponse initResponse (string contentType) {httpservletResponse response = servletActionContext.getResponse (); response.setContentType (contentType + "; charset =" + header_encoding); if (header_no_cache) {response.setDateheader ("kedaluwarsa", 1l); response.addheader ("pragma", "no-cache"); response.setHeader ("cache-control", "no-cache, no-store, max-age = 0"); } return response; }Dengan cara ini, data yang diperlukan oleh meja depan dikeluarkan dari perpustakaan dan dienkapsulasi ke dalam JSON yang sesuai.
Berikutnya adalah implementasi meja depan. JS dan CSS yang perlu diimpor meja depan adalah sebagai berikut:
<tautan rel = "stylesheet" href = "$ {base} /template/ztree/css/demo.css" type = "text/css"> <link rel = "stylesheet" href = "$ {base} /template/ztree/cssssssssssssss type = "text/javascript" src = "$ {base} /template/ztree/js/jquery.ztree.core.js"> </script>Di sini, hanya demo.css yang ditambahkan dengan sendirinya, dan yang lainnya secara resmi diformulasikan. Demo.CSS digunakan untuk memodifikasi CSS yang digunakan oleh demo resmi, sebagai berikut (ada gaya yang berlebihan di sini yang belum dihapus);
Div.content_wrap {width: 400px;} div.content_wrap div.left {float: left;} div.content_wrap div.right {float: kanan; lebar: 340px;} div.ztreedemackground {text-align: left;} Ul.ztree {text-{Text-loign: left;} Ul.ztree {text-tix; left;} Ul.ztree {Text-oLiT; #617775; latar belakang: #fefefe; lebar: 220px; tinggi: 360px; overflow-y: gulir; overflow-x: auto;} ul.log {border: 1px solid #617775; latar belakang: #f0f6e4; lebar: 300px; tinggi: 170px: overfl: 170px; overfl; everfl; evelfx; evlev; evlev; evely. {height: 45px;} ul.log li {color: #666666; List-style: none; padding-left: 10px;} ul.log li.dark {latar belakang-warna: #e3e3e3;}/ * penguasa */div.ruler {tinggi: 20px; Lebar: 220px; latar belakang-warna: #f0f6e4; Border: 1px solid #333; margin-bottom: 5px; kursor: pointer} div.ruler div.cursor {height: 20px; Lebar: 30px; Latar Belakang-Color:#3C6E31; Warna: Putih; Teks-Align: Benar; Padding-Right: 5px; Kursor: Pointer}Kemudian, kotak drop-down yang sesuai:
<div> <input id = "citysel" type = "text" onclick = "showMenu (); return false;" readonly value = ""/> <input id = "treeIds" type = "hidden" name = "goods.goodscategory.id"> <input type = "tombol" onclick = "showMenu ();" value = "∨"> </div> </div> 8 <div id = "menucontent" style = "display: none; position: absolute;"> <ul = "treedemo" style = "margin-top: 0;"> </ul> </div>
Berikut adalah kotak teks tersembunyi untuk menyimpan ID yang sesuai dari konten pemilihan kotak drop-down.
Script yang sesuai adalah sebagai berikut:
<Script type = "text/javascript"> var pengaturan = {view: {dblclickExpand: false}, data: {simpledata: {enable: true}}, callback: {onClick: onClick}, lihat: {// ikon yang sesuai tidak ditampilkan showicon: false}}; fungsi onsclick (e, treeid, treenode) {var ztree = $ .fn.ztree.getztreeobj ("treedemo"), node = ztree.getSelectedNodes (), v = ""; id = ""; nodes.sort (function compare (a, b) {return a.id-b.id;}); untuk (var i = 0, l = node.length; i <l; i ++) {v += node [i] .name +","; IDS + = node [i] .id + ","; } if (v.length> 0) v = v.substring (0, v.length-1); var cityobj = $ ("#citysel"); cityobj.attr ("value", v); // Masukkan ID yang dipilih di bidang Teks Tersembunyi If (IDS.Length> 0) IDS = IDS.SubString (0, ids.length-1); var treeIds = $ ("#treeIds"); Treesids.attr ("Nilai", IDS); } function showMenu () {var cityobj = $ ("#citysel"); var CityOffset = $ ("#CitySel"). Offset (); $ ("#Menucontent"). CSS ({Left: cityoffset.left + "px", atas: cityoffset.top + cityobj.outerheight () + "px"}). Slidedown ("fast"); $ ("Tubuh"). Bind ("Mousedown", Onbodydown); } function hidemenu () {$ ("#menucontent"). fadeout ("fast"); $ ("tubuh"). unbind ("mousedown", onbodydown); } function onBodyDown (event) {if (! (event.target.id == "menubtn" || event.target.id == "menucontent" || $ (event.target) .parents ("#menucontent"). Panjang> 0)) {hidemenu (); }} var znodes; $ (dokumen) .ready (function () {// memuat data $ .AJAX ({async: false, cache: false, type: 'post', dataType: 'json', url: '$ {base}/admin/goods!getgoodsategorytreeJson.action', kesalahan: function () {function ') (function') (function ', function', function (function ', {function', function (function), function: {function () {function: {function () {function () {function () }}); </script>Dengan cara ini, kotak drop-down selesai.
Seperti yang ditunjukkan pada gambar di bawah ini:
Jika Anda perlu menulis kembali data daftar drop-down yang sesuai di halaman Modifikasi, tambahkan skrip berikut:
<script type="text/javascript">$(document).ready(function(){ if ("${goods.goodsCategory.id}"!="") { var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var node = treeObj.getNodeByParam("id", "${goods.goodsCategory.id}" , null);Di atas adalah semua tentang artikel ini, saya harap ini akan membantu semua orang untuk mempelajari plug-in Ztree.