jquery zTreeの非同期読み込みの簡単な例sharing

まず、Ztree 公式 Web サイト http://www.ztree.me を提供します。 Ztreeとは、jQueryを使って実装されたJSPページの各種機能をツリー化したもので、ドロップダウンツリーにデータを非同期で取得する実装方法を紹介します。 現在のバージョン Ztree 3.5.01 simple.html

コードをコピー コードは次のとおりです: simple.html -equiv= "キーワード" content="キーワード 1,キーワード 2,キーワード 3"> "content-type" content="text/html; charset=UTF-8"> 🎜>

コードをコピーします

コードは次のとおりです: var settings = { data: { simpleData: { enable: true // idKey: "id", // pIdKey: "pId", } } , async: { Enable: true、 url:"/Java_Solr/servlet/ZTreeSerlvet"、 autoParam:["id", "name"]、 otherParam:{"otherParam":"zTreeAsyncTest"}、 // dataType: " text",//デフォルトのテキスト // type: "get",//デフォルトのポスト dataFilter: filter // 非同期復帰後、フィルタ } ,callback :{ / / beforeAsync: zTreeBeforeAsync, // 非同期ロード イベントの前に対応する情報を取得します asyncSuccess: zTreeOnAsyncSuccess, // 非同期でロードされた fun asyncError: zTreeOnAsyncError, // 間違った fun をロードします beforeClick:beforeClick // ノードをクリックする前にイベント コールバック関数をキャプチャします。 } } //treeId は、treeDemo function filter(treeId,parentNode, childNodes) { if (! childNodes) return null; for (var i=0, l=childNodes.length; i childNodes[i].name = childNodes[i].name.replace('', ''); } return childNodes; } function beforeClick(treeId,treeNode){ if(!treeNode.isParent){ alert("親を選択してくださいノード"); return false; }else{ return true; } } function zTreeOnAsyncError(event,treeId,treeNode){ alert("非同期読み込みに失敗しました!"); } function zTreeOnAsyncSuccess(event,treeId,treeNode, msg){

} /***********************親ノードをクリックすると、サーブレットに非同期でアクセスされ、IDが渡されます********* ****** ****************/ var zNodes=[ ]; /* var zNodes =[ { id:1, pId:0, name:"parentNode 1", open:true}, { id:11, pId:1, name:" parentNode 11"}, { id:111, pId:11, name:"leafNode 111"}, { id:112, pId:11, name:"leafNode 112"}, { id :113, pId:11, name:"leafNode 113"}, { id:114, pId:11, name:"leafNode 114"}, { id:12, pId:1, name:" parentNode 12"}, { id:121, pId:12, name:"leafNode 121"}, { id:122, pId:12, name:"leafNode 122"}, { id :123, pId:12, name:"leafNode 123"}, { id:13, pId:1, name:"parentNode 13", isParent:true}, { id:2, pId:0 , name:"parentNode 2" , isParent:true} ]; */ $(document).ready(function(){ $.fn.zTree.init($("#treeDemo" )、設定、zNodes);

zTree オブジェクトの取得: var zTree = $.fn.zTree.getZTreeObj("treeDemo"), ZtreeServlet

コードをコピー コードは次のとおりです: パッケージ org.hzy.servlets; インポート java.io.IOException; インポート java.io.PrintWriter; インポート java.util.ArrayList; java.util.List をインポートします。 インポート javax.servlet.ServletException; インポート javax.servlet.http.HttpServlet; インポート javax.servlet.http.HttpServletRequest; インポート javax.servlet.http.HttpServletResponse; org.hzy.bean.ZtreeBean をインポートします。 com.alibaba.fastjson.JSON をインポートします。 public class ZTreeSerlvet extends HttpServlet { public void destroy() { super.destroy(); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println(request.getParameter("id") " " request.getParameter("name") " " request.getParameter("otherParam")); response.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); ZtreeBean zb = new ZtreeBean(0, -1, "zb", true); ZtreeBean zb1 = new ZtreeBean(1, 0, "zb1", true); ZtreeBean zb2 = new ZtreeBean(2, 1, "zb2", false); ZtreeBean zb3 = new ZtreeBean(2, 0, "zbss", true); リスト list = new ArrayList (); list.add(zb); list.add(zb1); list.add(zb2); list.add(zb3); 文字列 str = JSON.toJSONString(list); out.print(str); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } public void init() throws ServletException { } }