最近、作業にはツリードロップダウンボックスコンポーネントが必要なため、情報を検索した後、通常、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プラグインを学ぶのが誰でも役立つことを願っています。