最近、作業にはツリードロップダウンボックスコンポーネントが必要なため、情報を検索した後、通常、2つの実装方法があります。まず、Ztreeを使用して実装されます。第二に、EasyUIを使用して実装されます。会社のフロントエンドはEasyUIを使用して設計されていないため、ここでドロップダウンツリーを実装するためにZtreeを選択しました。
ここでは、単純なデータ形式（つまり、単純なJSON形式）が次のJSONと同様に使用されています。
var znodes = [{id：1、pid：0、name： "beijing"}、{id：2、pid：0、name： "tianjin"}、{id：3、pid：0、name： "shanghai"}、{id：6、pid：0、 "chongqing" open：true、nocheck：true}、{id：41、pid：4、name： "shijiazhuang"}、{id：42、pid：4、name： "baoding"}、{id：43、pid：4、name： "handan"}、 "handan"}、{id：44、pid：44、pid：44、pid：44、pid：44、pid：44、pid：44、pid：44、pid：44、pid：4名前：「広東省」、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： {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、pid：6、pid ""名前： "Sanming"}];ここでは、次のように、対応するデータをカプセル化するために最初にエンティティビーンが必要です。
public class ztreenode {// id private string id; //親IDプライベート文字列PID; //名前を表示プライベート文字列名。 //開くかどうか（ここではデフォルトが開かれていません。開く必要がある場合は、trueに設定）// private boolean open; //選択できます（デフォルトでノードを選択できるかどうかを設定し、trueにセットに対応するノードを選択できません）// private boolean nocheck; /** getter and setter*/}ここでは、PIDの2番目の文字が大文字であることに注意する必要があります。小文字で書かれている場合、ツリー構造に構築することはできません。すべてがルートノードです。
次に、データベースから見つかったデータをZtreeが必要とする対応する豆に変換し、対応するJSONに変換します。コードは次のとおりです。
//製品分類ツリーを取得して、JSONパブリックストリングgetGoodScategoryTreeJson（）{list <goodscategory> allgoodscategorylist = goodscategoryservice.getgoodscategorytreejson（）; List <Ztreenode> ztreeList = new ArrayList <Ztreenode>（）; for（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（Treenade）; } return ajax（ztreeList）; }次のように、リストを対応するJSONメソッドに変換します。
JSONツールキットが使用しています：
Import.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 static headededer_json_json_content_teped_tectepet_tectepet_tectepepeped string ajax（string content、string contentType）{try {httpservletResponse response = interresponse（contentType）; Response.getWriter（）。write（content）; Response.getWriter（）。flush（）; } catch（ioexception e）{e.printstacktrace（）; } returnなし; } //出力ajax保護された文字列ajax（string text）{return ajax（text、header_text_content_type）; } //出力ajax保護された文字列ajax（status status）{httpservletresponse response = initesponse（header_json_content_type）; map <string、string> jsonmap = new hashmap <string、string>（）; jsonmap.put（status_parameter_name、status.toString（））; jsonutil.tojson（Response、jsonmap）;なしなし; } //出力ajax保護された文字列ajax（status status、string message）{httpservletresponse response = initesponse（header_json_content_type）; map <string、string> jsonmap = new hashmap <string、string>（）; jsonmap.put（status_parameter_name、status.toString（））; jsonmap.put（message_parameter_name、message）; jsonutil.tojson（Response、jsonmap）;なしなし; } // output ajax保護された文字列object ajax（object object）{httpservletresponse response = initesponse（header_json_content_type）; jsonutil.tojson（応答、オブジェクト）;なしなし; } // Boolean Statusによる出力ajax保護された文字列ajax（boolean booleanstatus）{httpservletresponse response = initesponse（header_json_content_type）; map <string、object> jsonmap = new hashmap <string、object>（）; jsonmap.put（status_parameter_name、booleanstatus）; jsonutil.tojson（Response、jsonmap）;なしなし; } private httpservletResponse interresponse（string contentType）{httpservletResponse応答= servletactionContext.getResponse（）; Response.setContentType（contentType + "; charset =" + header_encoding）; if（header_no_cache）{respons.setdateheader（ "expires"、1L）; Response.Addheader（ "Pragma"、 "No-Cache"）; Response.setheader（ "Cache-Control"、 "No-Cache、No-Store、Max-Age = 0"）; }返信応答; }このようにして、フロントデスクで必要なデータはライブラリから取り出され、対応するJSONにカプセル化されます。
次はフロントデスクの実装です。フロントデスクがインポートする必要があるJSとCSSは次のとおりです。
<link rel = "styleSheet" href = "$ {base} /template/ztree/css/demo.css" type = "text/css"> <link rel = "styleSheet" href = "href =" $ {base} /template/ztree/ztree/css/ztreestyle/ztretyle/ cextele.cs "=" 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：width：340px;} div.ztreedemobackground {left-align：left;} ul.ztrote {magrim top：1px; ＃617775;背景：#fefefe; width：220px; height：360px; overflow-y：scroll; overflow-x：auto;} ul.log {border：1px solid＃617775; {height：45px;} ul.log li {color：＃666666; list-style：none; padding-left：10px;} ul.log li.dark {background-color：＃e3e3e3;}/ * rooler */div.ruler {height：20px;幅：220px;バックグラウンドカラー：＃F0F6E4;ボーダー：1PXソリッド＃333;マージンボトム：5px;カーソル：pointer} div.ruler div.cursor {height：20px;幅：30px;バックグラウンドカラー：＃3C6E31;色：白;テキストアライグ：右;パディング右：5px;カーソル：ポインター}次に、対応するドロップダウンボックス：
<div> <入力id = "citysel" type = "text" onclick = "showmenu（）; return false;" readonly value = ""/> <input id = "treeids" type = "hidden" name = "goods.id"> <入力タイプ= "ボタン" onclick = "showmenu（）;" value = "∨"> </div> </div> 8 <div id = "menucontent" style = "display：none; position：absolute;"> <ul id = "treedemo" style = "marign-top：0;"> </ul> </div>
ドロップダウンボックスの選択コンテンツの対応するIDを保存するための隠されたテキストボックスがあります。
対応するスクリプトは次のとおりです。
<script type = "text/javascript"> var setting = {view：{dblclickexpand：false}、data：{simpledata：{enable：true}}、callback：{onclick：onclick}、view：{//対応するアイコンは表示されないshowicon：false}; function onclick（e、treeid、treenode）{var ztree = $ .fn.ztree.getztreeobj（ "treedemo"）、nodes = ztree.getSelectedNodes（）、v = ""; ids = ""; nodes.sort（function compare（a、b）{return a.id-b.id;}）; for（var i = 0、l = nodes.length; i <l; i ++）{v += nodes [i] .name +"、"; ids + = nodes [i] .id + "、"; } if（v.length> 0）v = v.substring（0、v.length-1）; var cityobj = $（ "＃citysel"）; cityobj.attr（ "value"、v）; //選択したIDを非表示のテキストフィールドにしますif（ids.length> 0）ids = ids.substring（0、ids.length-1）; var treeids = $（ "＃treeids"）; troedids.attr（ "value"、ids）; }関数showmenu（）{var cityobj = $（ "＃citysel"）; var cityOffset = $（ "＃Citysel"）。offset（）; $（ "＃menucontent"）。css（{左：cityoffset.left + "px"、top：cityoffset.top + cityobj.outerheight（） + "px"}）。slidedown（ "fast"）; $（ "body"）。bind（ "mousedown"、onbodydown）; } function hidemenu（）{$（ "＃menucontent"）。fadeout（ "fast"）; $（ "body"）。unbind（ "mousedown"、onbodydown）; } function onbodydown（event）{if（！（event.target.id == "menubtn" || event.target.id == "menucontent" || $（event.target）.parents（ "＃menucontent"）。hidemenu（）; }} var znodes; $（document）.ready（function（）{// data $ .ajax（{async：async：async：false、false：false： 'post'、datatype： 'json'、url： '$ {base}/admin/goods！getgoodscategorytreejson.action'、エラー：unter（）{'zn> success（' nequed（ 'nequed（' nequed '）;データ; </script>このようにして、ドロップダウンボックスが完成します。
下の図に示すように：
[修正]ページに対応するドロップダウンリストデータを書き戻す必要がある場合は、次のスクリプトを追加します。
<script type = "text/javascript"> $（document）.ready（function（）{if（ "$ {goods.goodscategory.id}"！= ""）{var treeobj = $ .fn.ztree.getztreeobj（ "treedemo"）; var node = treeobj.getnodbyparam null）; selectnode（false、false）;上記はこの記事に関するものです。Ztreeプラグインを学ぶのが誰でも役立つことを願っています。