zTreeの使用概要について

3897 ワード

前の1、2ヶ月は練習種目をしてずっとzTreeまで使って、いくつかのものは繰り返して使って、しかしいつも覚えられないで、だからいくつか総括したいと思っています.まとめといっても、ドキュメントを見ることで見つけることができます.
なぜzTreeは?フロントフレームで使用しているEasyUIは、easyuiにも独自のツリーがあります.しかし、zTreeで来られない専門的な点に比べて、最も重要なのはeasyuiのツリーがネストされたデータ構造を使用しなければならないことです.js処理でも簡単なフォーマットを使用することができますが、面倒です.
ドキュメント接続:zTreeドキュメントを貼り付けます.私はこのDemoとapiを見て問題を解決します.
1、簡単なデータフォーマット:
単純なデータフォーマットを使用するには、設定する必要があります.
var setting = {
	data: {
		simpleData: {
			enable: true,
		}
	}
};

データ形式:
var nodes = [
	{id:1, pId:0, name: "   1",field1:"value1"...},
	{id:11, pId:1, name: "   1"},
	{id:12, pId:1, name: "   2"}
];

field 1、field 2はカスタムフィールドで、必要に応じて自分で書きます.
id,pIdは名前を見てその意味を知っていて、zTreeのデフォルトの2つのフィールド名で、バックグラウンドから伝わってきたフィールド名と一致しない場合はsimpleDataで指定できます
simpleData{idKey: "name1",pIdKey: "name2",rootPId: 0}//rootPId是根节点默认值

自定义指定name的字段名,需要在key中设置

data: {
		key: {
			name: "ename"
		}
	}

2、非同期ロード
非同期ロード設定
settingで非同期ロードモードをオンにする
	async: {
		enable: true,
	}

asyncの他の構成可能なパラメータ:
	async: {
		url: "http://host/getNode.php",			//         
		autoParam: ["id"]		//     ,       id  ,    id
		autoParam: ["id=zId"]		//         ,            zId
		otherParam: ["id":"1", "name":"test"]	//             ,       ,       JSON  
		dataFilter: funName	//              ,            

	}
	在callBack中可设置这几个跟异步有关的函数
	callback: {
		onAsyncError: zTreeOnAsyncError
		onAsyncSuccess: zTreeOnAsyncSuccess
		beforeAsync: zTreeBeforeAsync}

3、チェックボックス
setting設定
check: {
		enable: true	//     		
	chkboxType: { "Y": "p", "N": "s" }	//         。                       
}
4、ノードフィルタ
getNodesByFilter()/カスタムフィルタ関数
getNodesByParam()/正確な一致パラメータ
getNodesByParamFuzzy()/ファジイマッチングパラメータ
5、右クリックメニュー
イベントバインド
自分がどのようにもっと良い総括を知らないことに気づくと書いてあります.最初はできなかったので、小さな問題で長い間悩んでいました.しかし、使用後、振り返ってみると、非常に簡単で、ドキュメントを調べてもほとんど問題ありません.まずこのようにして、後で技術が進歩してから修正します.