フロントエンドツリー構造実現のztreeの実現

最近、プロジェクトの必要性のため、木の構造を実現して中国の各省・市街地を展示して、データはデータベースからロードして来て、ネット上で多くの木の構造のプラグインを探して、例えばeasyui、dynatree、ztreeなど、彼らの実現方式は大同小異です.最後にztreeを選びました.
zTreeは、jQueryによる多機能「ツリープラグイン」です.優れたパフォーマンス、柔軟な構成、さまざまな機能の組み合わせがzTreeの最大の利点です(公式サイトで説明).
jsとcssの導入
jquery.ztree.core-3.5.js
jquery.js
zTreeStyle.cssツリー構造のスタイル
公式サイトのアドレス:http://www.ztree.me/v3/main.php#_zTreeInfo
個人的にztreeの最大の特徴は、ノードが多い場合、ページのロード中に遅い場合があるなど、遅延ロード技術を提供することであり、ztreeはこの問題に対して最適化しています.
具体的な実装:
ページはjsonデータを受け入れて簡単なjsonデータと標準的なjsonデータに分けます
簡単なjsonデータ:
{id:1,pId:0,name:"親ノード1"},{id:11,pId:1,name:"子ノード1"},{id:12,pId:1,name:"子ノード2"}
標準のjsonデータフォーマット:
{name:[親ノード1],children:[
{name:「サブノード1」},
{name:「サブノード2」}
]}
標準的なjsonデータは典型的なツリー親子関係であることがわかる.
ここでは、データベース内のテーブルのデータ格納方式に基づいて、どのjsonデータフォーマットを採用するかを決定することができる.
ページの実装方法:
1.settingの設定

var setting = {		
		 data: {
			simpleData: {
				enable: true
			}
		} 
	};

2.ノード、簡単なjsonデータ

 var zNodes =[
 			{ id:1, pId:0, name:"   1 -   "},
 			{ id:11, pId:1, name:"   11 -   "},
 			{ id:111, pId:11, name:"    111"},
 			{ id:112, pId:11, name:"    112"},
 			{ id:113, pId:11, name:"    113"},
 			{ id:114, pId:11, name:"    114"},
 			{ id:12, pId:1, name:"   12 -   "},
 			{ id:121, pId:12, name:"    121"},
 			{ id:122, pId:12, name:"    122"},
 			{ id:123, pId:12, name:"    123"},
 			{ id:124, pId:12, name:"    124"},
 			{ id:13, pId:1, name:"   13 -      "},
 			{ id:2, pId:0, name:"   2 -   "},
 			{ id:21, pId:2, name:"   21 -   "},
 			{ id:211, pId:21, name:"    211"},
 			{ id:212, pId:21, name:"    212"},
 			{ id:213, pId:21, name:"    213"},
 			{ id:214, pId:21, name:"    214"},
 			{ id:22, pId:2, name:"   22 -   "},
 			{ id:221, pId:22, name:"    221"},
 			{ id:222, pId:22, name:"    222"},
 			{ id:223, pId:22, name:"    223"},
 			{ id:224, pId:22, name:"    224"},
 			{ id:23, pId:2, name:"   23 -   "},
 			{ id:231, pId:23, name:"    231"},
 			{ id:232, pId:23, name:"    232"},
 			{ id:233, pId:23, name:"    233"},
 			{ id:234, pId:23, name:"    234"},
 			{ id:3, pId:0, name:"   3 -      "}
 		]; 

 
3.ページに入ったときに読み込む

$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);			
		});

 
以上が最も簡単なztreeの実現方式である.
バックグラウンドからajaxでjsonデータを読み込みます.

var zNodes;
	$(document).ready(function(){
			    $.ajax({  
			        async : false,  
			        cache:false,  
			        type: 'POST',  
			        dataType : 'json',  
			        url: 'ajax/treeInfo',//   action    
			        error: function () {//          
			            alert('    '); 
			        },  
			        success:function(data){ //         。
			           zNodes = data;   //         Json    treeNodes
			        }  
			    }); 
			    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});

上記の取得ノードデータ情報に比べて、ここではajaxによって実現され、得られたdataはjsonフォーマットである.
ページにはidがtreeDemoであればよいのに.
treeを実装した後にtreenodeのクリック時間が必要になる場合があります.APIを調べてみるとsettingにonclick時間があることがわかります.ここでは関数を書いて、onclickを実装するときにコールバックします.
次のように

function zTreeOnClick(event, treeId, treeNode) {	
	$("#echoActive").text("    ："+treeNode.name+"----"+"   id ："+treeNode.id);
	};

settingでコールバックを実現し、以下のようにする.
callback: {  onClick: zTreeOnClick },
treenodeをクリックすると、idがechoActiveのdivにデータtextが自動的に埋め込まれます.