jquery ztreeはjson data_jqueryを使用してドロップダウンツリーボックスを実装します-jsチュートリアル-php.cn

会社の最近のプロジェクトでは、ツリー型のドロップダウン ボックスを使用する必要がありました。インターネット上で多くのソース コードを見つけましたが、コードの移植性が高く、データの取得が容易なため、最終的に zTree を使用して実装しました。早速、コードに進みましょう。

index.jsp

コードをコピー コードは次のとおりです: " " "> " > var 設定 = { view: { dblClickExpand: false }, data: { simpleData: { enable: true } }, callback: { beforeClick: beforeClick, onClick : onClick } };

//json データ ソース。以下に示すように、バックグラウンドから json 文字列を読み取り、json オブジェクトに変換することもできます。 /var strNodes = '${jsonList}'; //var zNodes = eval("(" strNodes ")"); // json 文字列を json オブジェクト配列に変換します。strNode は「()」を追加する必要があります。変換は機能しません 成功しました var zNodes =[ {id:1, pId:0, name:"Beijing"}, {id:2, pId:0, name:"Tianjin"}, { id:3, pId:0, name:"上海"}、 {id:6, pId:0, name:"重慶"}、 {id:4, pId:0, name:"河北省", open:true}, {id:41, pId:4, name:"石家荘"}, {id:42, pId:4, name:"保定"}, { id:43, pId:4, name:"邯鄲"}, {id:44, pId:4, name:"承徳"}, {id:5, pId:0, name:"広東省", open:true}, {id:51, pId:5, name:"広州"}, {id:52, pId:5, name:"深セン"}, { id:53, pId:5, name:"東莞"}, {id:54, pId:5, name:"佛山"}, {id:6, pId:0, name:"福建省", open:true}, {id:61, pId:6, name:"福州"}, {id:62, pId:6, name:"アモイ"}, { id:63, pId:6, name:"Quanzhou"}, {id:64, pId:6, name:"Sanming"} ];

関数 beforeClick (treeId,treeNode ) { var check = (treeNode && !treeNode.isParent); if (!check)alert("都市のみ選択できます..."); return check; 🎜>}

function onClick(e,treeId,treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getSelectedNodes(), v = " "; nodes.sort(function Compare(a,b){return a.id-b.id;}); for (var i=0, l=nodes.length; i v = ノード[i].name ","; } if (v.length > 0 ) v = v.substring(0, v.length- 1); var cityObj = $("#citySel"); }

関数 showMenu() cityObj = $(" #citySel"); var cityOffset = $("#citySel").offset(); $("#menuContent").css({left:cityOffset.left "px" 、top:cityOffset.top cityObj.outerHeight() "px"}).slideDown("fast"); function hiddenMenu () { $("#menuContent").fadeOut("fast"); $("body").unbind("mousedown", onBodyDown); 🎜>function onBodyDown(event) { if (!(event.target.id == "menuBtn" ||event.target.id == "menuContent" || $(event.target).parents("# menuContent").length>0)) { hideMenu(); } }

$(document).ready(function(){ $.fn.zTree .init($( "#treeDemo"), 設定, zNodes); //-> ; 選択 都市を選択するときに、Ctrl キーまたは Cmd キーを押して複数選択を実行します City: / a> /div>

春の背景

json データ クラス コードをコピー コードは次のとおりです: public class EquipTypeJson { private String id; private String getId() { return id; >} public void setId(String id) { this.id = id; } public String getPId() { return } public void; setPId(String pId) { this.pId = pId; } public String getName() { 名前を返す; } public void setName(String name) { this .name = name;

}

コントローラー ページ

コードをコピー コードは次のとおりです。 public ModelAndView List(HttpServletRequest request, HttpServletResponse response,Product prod) throws Exception { Map map=new HashMap() ; List list = testService.getAllEquipType();// データベースからソース データを取得します JSONArray = JSONArray.fromObject(list); //リスト データを json オブジェクトに変換します= jsonArray.toString() ; // json オブジェクトを文字列に変換します map.put("jsonList", json); return new ModelAndView("equip/List").addAllObjects(map);