البرنامج التعليمي للبدء مع الشجرة المنسدلة في المكون الإضافي Ztree

في الآونة الأخيرة ، نظرًا لأن العمل يتطلب مكون مربع منسد الشجرة ، فهناك عمومًا طريقتين للتنفيذ بعد البحث عن المعلومات. أولاً ، يتم تنفيذها باستخدام Ztree ؛ ثانياً ، يتم تنفيذها باستخدام Easyui. نظرًا لأن الواجهة الأمامية للشركة غير مصممة باستخدام Easyui ، فقد اخترت Ztree لتنفيذ الشجرة المنسدلة هنا.

هنا ، يتم استخدام تنسيق بيانات بسيط (أي تنسيق JSON بسيط) مشابه لـ JSON التالي:

 var znodes = [{id: 1 ، pid: 0 ، الاسم: "beijing"} ، {id: 2 ، pid: 0 ، الاسم: فتح: صواب ، noCheck: True} ، {id: 41 ، pid: 4 ، الاسم: "Shijiazhuang"} ، {id: 42 ، pid: 4 ، الاسم: الاسم: "مقاطعة قوانغدونغ" ، مفتوحة: صواب ، noCheck: True} ، {id: 51 ، pid: 5 ، الاسم: "Guangzhou"} ، {id: 52 ، pid: 5 ، name: {id: 6 ، pid: 0 ، الاسم: "مقاطعة فوجيان" ، مفتوح: صواب ، noCheck: true} ، {id: 61 ، pid: 6 ، الاسم: "fuzhou"} ، {id: 62 ، pid: 6 ، الاسم: الاسم: "Sanming"}] ؛

هنا ، هناك حاجة أولاً إلى حبة كيان لتغليف البيانات التي تم العثور عليها المقابلة ، على النحو التالي:

 الفئة العامة ZtreEnode {// ID معرف السلسلة الخاصة ؛ // Parent ID Private String PID ؛ // اسم العرض اسم السلسلة الخاصة ؛ // ما إذا كان سيتم فتحه (لا يتم فتح الافتراضي هنا ، إذا كان بحاجة إلى فتحه ، أو ضبطه على صواب) // مفتوح منطقي خاص ؛ // هل يمكنك تحديد (تعيين ما إذا كان يمكن تحديد العقدة افتراضيًا ، ولا يمكن تحديد العقدة المقابلة للمعيين إلى TRUE) // nucheck المنطقي الخاص ؛ /** getter و setter*/}

تجدر الإشارة هنا إلى أن الرسالة الثانية في PID ترسمها. إذا كان مكتوبًا بصوريًا ، فلا يمكن بناؤه في بنية شجرة. كلها عقد الجذر.

بعد ذلك ، قم بتحويل البيانات الموجودة من قاعدة البيانات إلى الفاصوليا المقابلة المطلوبة بواسطة Ztree ، ثم قم بتحويلها إلى JSON المقابلة. الرمز كما يلي:

 // احصل على شجرة تصنيف المنتج وإرجاع json public string getGoodScategoryTreeJson () {list <EgelsCategory> allgoodscategorylist = goodscategoryservice.getGoodScategoryTreeJson () ؛ قائمة <ZtreEnode> Ztreelist = new ArrayList <ZtreEnode> () ؛ لـ (getScategory gcty: allgoodscategorylist) {ztreenode treenade = new ZtreEnode () ؛ treenade.setid (gcty.getId ()) ؛ treenade.setpid (gcty.getParent () == null؟ "": gcty.getParent (). getId ()) ؛ treenade.setName (gcty.getName ()) ؛ Ztreelist.add (Treenade) ؛ } إرجاع ajax (ztreelist) ؛ }

تحويل القائمة إلى طريقة JSON المقابلة ، على النحو التالي:

تستخدم مجموعة أدوات JSON:

 استيراد org.springframework.base.Util.jsonutil ؛ header header_encoding = utf-8 "utf-8" ؛ String aJax (محتوى السلسلة ، string contentType) {try {httpservletresponse reponse = initresponse (contentType) ؛ استجابة. getWriter (). الكتابة (المحتوى) ؛ استجابة. getWriter (). flush () ؛ } catch (ioException e) {E.PrintStackTrace () ؛ } إرجاع لا شيء ؛ } // الإخراج AJAX String Ajax (نص سلسلة) {return ajax (text ، header_text_content_type) ؛ } // الإخراج Ajax String Ajax (حالة الحالة) {httpservletresponse respons = initResponse (header_json_content_type) ؛ خريطة <string ، string> jsonmap = new hashmap <string ، string> () ؛ jsonmap.put (status_parameter_name ، status.toString ()) ؛ jsonutil.tojson (الرد ، jsonmap) ؛ لا شيء } // الإخراج AJAX String Ajax (حالة الحالة ، رسالة السلسلة) {httpservletresponse response = initresponse (header_json_content_type) ؛ خريطة <string ، string> jsonmap = new hashmap <string ، string> () ؛ jsonmap.put (status_parameter_name ، status.toString ()) ؛ jsonmap.put (message_parameter_name ، message) ؛ jsonutil.tojson (الرد ، jsonmap) ؛ لا شيء } // إخراج السلسلة المحمية AJAX وفقًا للكائن AJAX (كائن كائن) {httpservletResponse Response = initresponse (header_json_content_type) ؛ jsonutil.tojson (الرد ، كائن) ؛ لا شيء } // الإخراج وفقًا لحالة Boolean Ajax المحمية Ajax (Boolean BooleAnstatus) {httpservletresponse = initresponse (header_json_content_type) ؛ خريطة <string ، object> jsonmap = new HashMap <string ، Object> () ؛ jsonmap.put (status_parameter_name ، booleanstatus) ؛ jsonutil.tojson (الرد ، jsonmap) ؛ لا شيء } private httpservletresponse initResponse (string contentType) {httpservletResponse respress = servleTactionContext.getResponse () ؛ استجابة. if (header_no_cache) {response.setDateHeader ("Expires" ، 1L) ؛ Response.addheader ("pragma" ، "no-cache") ؛ استجابة. } استجابة العودة ؛ }

وبهذه الطريقة ، يتم إخراج البيانات التي يتطلبها مكتب الاستقبال من المكتبة وتغليفها في JSON المقابلة.

التالي هو تنفيذ مكتب الاستقبال. JS و CSS التي يحتاج مكتب الاستقبال إلى استيرادها هي كما يلي:

 <link rel = "stylesheet" href = "$ {base} /template/ztree/css/demo.css" type = "text/css"> <link rel = "stylesheet" href = "$} type = "text/javaScript" src = "$ {base} /template/ztree/js/jquery.ztree.core.js"> </script>

هنا ، تتم إضافة demo.css فقط في حد ذاته ، والآخرون صاغوا رسميا. يتم استخدام Demo.css لتعديل CSS المستخدمة من قبل العرض التوضيحي الرسمي ، على النحو التالي (هناك أنماط زائدة هنا لم يتم حذفها) ؛

 div.content_wrap {width: 400px ؛} div.content_wrap div.left {float: left ؛} div.content_wrap div.right {float: right ؛ width: 340px ؛} div.ztreedeMobackourground {text-align: left ؛ #617775 ؛ الخلفية: #fefefe ؛ العرض: 220px ؛ الارتفاع: 360px ؛ overflow-y: scroll ؛ overflow-x: auto ؛} ul.log {border: 1px solid #61775 ؛ background: #f0f6e4 ؛ width: 300px ؛ leight: 170px ؛ {الارتفاع: 45px ؛} ul.log li {color: #666666 ؛ style list: none ؛ padding-left: 10px ؛} ul.log li.dark {background-color: #e3e3e3 ؛}/ */div.ruler {height: 20px ؛ العرض: 220 بكسل ؛ خلفية اللون: #f0f6e4 ؛ الحدود: 1 بكسل Solid #333 ؛ هامش القاع: 5 بكسل ؛ المؤشر: مؤشر} div.Ruler div.cursor {الارتفاع: 20px ؛ العرض: 30 بكسل ؛ خلفية اللون:#3C6E31 ؛ اللون: أبيض. محاذاة النص: صحيح ؛ حشو اليمين: 5px ؛ المؤشر: مؤشر}

ثم ، المربع المنسدل المقابل:

 <viv> <input id = "citysel" type = "text" onClick = "showmenu () ؛ return false ؛" readonly value = ""/> <input id = "treeids" type = "hidden" name = "goods.goodscategory.id"> <input type = "button" onClick = "showmenu () ؛" value = "∨"> </div> </viv> 8 <div id = "menucontent" style = "display: none ؛ position: absomute ؛"> <ul id = "treedemo" style = "margin-top: 0 ؛"> </ul> </viv>

فيما يلي مربع نص مخفي لتخزين المعرف المقابل لمحتوى تحديد المربع المنسدلة.

البرامج النصية المقابلة هي كما يلي:

 <script type = "text/javaScript"> var setting = {view: {dblclickexpand: false} ، data: {simpledata: {enable: true}} ، callback: {onclick: onClick} ، view: {// الرمز المقابل لم يتم عرض Showicon: false}}}}}}}}}}}}}} دالة onClick (E ، TreeId ، treenode) {var ztree = $ .fn.ztree.getztreeobj ("treedemo") ، العقد = ztree.getSelectedNodes () ، v = "" ؛ IDS = "" ؛ nodes.sort (وظيفة مقارنة (a ، b) {return A.ID-B.ID ؛}) ؛ لـ (var i = 0 ، l = nodes.length ؛ i <l ؛ i ++) {v += noles [i] .name +"،" ؛ ids + = العقد [i] .id + "،" ؛ } if (v.length> 0) v = v.subString (0 ، v.length-1) ؛ var cityobj = $ ("#citysel") ؛ cityobj.attr ("value" ، v) ؛ // ضع المعرف المحدد في حقل النص المخفي إذا (ids.length> 0) ids = ids.subString (0 ، ids.length-1) ؛ var treeids = $ ("#treeids") ؛ treesids.attr ("القيمة" ، IDS) ؛ } وظيفة showmenu () {var cityobj = $ ("#citysel") ؛ var cityoffset = $ ("#citysel"). Offset () ؛ $ ("#menucontent"). $ ("body"). ربط ("mousedown" ، onbodydown) ؛ } وظيفة hideMenu () {$ ("#menucontent"). fadeout ("fast") ؛ $ ("body"). Undind ("Mousedown" ، OnbodyDown) ؛ } وظيفة OnBodyDown (event) {if (! (event.target.id == "menubtn" || event.target.id == "menucontent" || $ (event.target) .Parents ("#menucontent"). length> 0)) }} var Znodes ؛ $ (document) .Ready (function () {// تحميل البيانات $ .ajax ({arsync: false ، cache: false ، اكتب: 'post' ، datatype: 'json' ، url: '$ {base} /admin/goods! GoodScategoryTreejson.Action' ، error () البيانات ؛ </script>

وبهذه الطريقة ، تم الانتهاء من صندوق المنسدلة.

كما هو مبين في الشكل أدناه:

إذا كنت بحاجة إلى إعادة كتابة بيانات القائمة المنسدلة المقابلة في صفحة التعديل ، أضف البرنامج النصي التالي:

 <script type = "text/javaScript"> $ (document) .Ready (function () {if ("$ {goods.goodscategory.id}"! = "") {var treeObj = $ .fn.ztree.getztreeObj ("treedemo") ؛ var node = treeobj.getNodeBybybybybybybybybybaram ("،" {{{{{{{{{{{{ {{{{{{{{ {{{$ { null) ؛

ما ورد أعلاه هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم مكون Ztree.