jQuery Ztreeの基本的な使い方
4210 ワード
1.まずページに
2.ztreeの構成パラメータの定義
3.ztreeがバインドするデータを取得するには、静的データを使用してもajaxを使用してもよいデータa)Ztreeを使用してもよいデータには、2つのフォーマットがあります.標準のJSONデータは、ノードを表す親子の包含関係をネストする必要があります.たとえば、
b)単純データフォーマットは以下の通り(推奨使用):単純モードのJSONデータはid/pIdでノードの親子包含関係を表す必要があり、その他の属性で親子関連関係を設定する場合はsettingを参照.data.Simple内の各説明は次のとおりです.
単純なデータのid,pId,name,titleはsettingのdataで構成でき、対応するフィールドを指定できます.
settingのdataにsimpleDataをenable:trueとすると単純なデータフォーマットを用いることを示し、falseを構成しないかfalseとすると標準データフォーマットとなる.
4.ztree生成ツリーの初期化
1番目のパラメータは
- タグがあります
<ul id="tree" class="ztree"></ul>
2.ztreeの構成パラメータの定義
var setting = {
//check data ,
check: {
enable: true
},
data: {
simpleData: {
enable: true
},
}
};
3.ztreeがバインドするデータを取得するには、静的データを使用してもajaxを使用してもよいデータa)Ztreeを使用してもよいデータには、2つのフォーマットがあります.標準のJSONデータは、ノードを表す親子の包含関係をネストする必要があります.たとえば、
var nodes = [
{
name: " 1",
open:true,
children: [
{name: " 1"},
{name: " 2"}
]
}
];
b)単純データフォーマットは以下の通り(推奨使用):単純モードのJSONデータはid/pIdでノードの親子包含関係を表す必要があり、その他の属性で親子関連関係を設定する場合はsettingを参照.data.Simple内の各説明は次のとおりです.
var nodes = [
{id:1, pId:0, name: " 1"},
{id:11, pId:1, name: " 1"},
{id:12, pId:1, name: " 2"}
];
単純なデータのid,pId,name,titleはsettingのdataで構成でき、対応するフィールドを指定できます.
settingのdataにsimpleDataをenable:trueとすると単純なデータフォーマットを用いることを示し、falseを構成しないかfalseとすると標準データフォーマットとなる.
var setting = {
data: {
simpleData: {
enable: true
}
}
};
4.ztree生成ツリーの初期化
$.fn.zTree.init($("#tree"), setting, nodes);
1番目のパラメータは
- idで選択するjqueryオブジェクトであり、2番目のパラメータは構成のsettingであり、3番目のパラメータは取得するデータである.
5.zTreeObjツリーオブジェクトzTreeObjはツリーのオブジェクトであり、zTreeObjオブジェクトを取得するとztreeのNマルチメソッドを使用してツリーを操作することができ、取得方法:var treeObj=$.fn.zTree.getZTreeObj("tree");//パラメータがツリーのidの具体的な方法はすべてどれらがapiのzTreeObj部分を参照します
a)zTreeObj.getNodeByParam(key,value,parentNode)は、ノードデータの属性検索に基づいて、条件が完全に一致するノードデータJSONオブジェクトを取得する.Key:正確な一致が必要な属性名Value:正確な一致が必要な属性値は、任意のタイプであってもよく、keyが指定した属性値と一致することを保証すればparentNodeJSON:検索範囲、ある親ノードの下の子ノードで検索することを指定し、このパラメータを無視して、すべてのノードで検索することを表す
戻り値JSONは、正確に検索するノードデータ1、結果がない場合null 2、複数のノードがクエリ条件を満たす場合、最初に一致するノードvartreeObj=$のみを返す.fn.zTree.getZTreeObj("tree");var node = treeObj.getNodeByParam("id", 1, null);
b)zTreeObj.getNodes()はzTreeの全ノードデータを取得し、値Array(JSON)vartreeObj=$を返す.fn.zTree.getZTreeObj("tree");var nodes = treeObj.getNodes();
c)zTreeObj.getSelectedNodes()は、zTreeが現在選択するノードのデータセットを取得し、値Array(JSON)vartreeObj=$を返す.fn.zTree.getZTreeObj("tree");var nodes = treeObj.getSelectedNodes();
d)zTreeObj.expandAll(flag)全ノードを展開/折り畳むflag Boolean trueは展開を表し、falseは折り畳み戻り値Booleanを表す
戻り値は最終的な実際の動作を示しますtrueは、すべてのノードfalseを展開することを示します.すべてのノードnullを折り畳むことは、親ノードが存在しないことを示します.
vartreeObj = $.fn.zTree.getZTreeObj("tree");treeObj.expandAll(true);
e)zTreeObj.expandNode(treeNode,expandFlag,sonSign,focus,callbackFlag)指定されたノードを展開/折り畳むtreeNodeJSON:展開/折り畳みが必要なノードデータは、必ずこのノードデータオブジェクトがzTree内部のデータオブジェクトであることを保証してくださいexpandFlagBooleanexpandFlag=trueは、展開ノードexpandFlag=falseが折り畳みノードであることを示します.このノードの展開状態に応じてtoggle切り替えを行う
sonSignBooleansonSign=trueは、すべての子孫ノードがexpandFlagと同様の操作を行うことを示すsonSign=falseは、このノードにのみ影響を及ぼすことを示し、その子孫ノードに対してsonSign=falseおよびtreeNodeには何の影響も与えない.Open=expandFlagの場合、コールバック関数はトリガーされず、falseと同等にこのパラメータを省略します.
focusBooleanfocus=trueは展開/折りたたみ操作を表し、フォーカスを設定してこのフォーカスが可視領域内に入ることを保証focus=falseは展開/折りたたみ操作を表した後、フォーカスを設定せずにこのパラメータを省略し、trueに等しい
callbackFlagBooleancallbackFlag=trueは、このメソッドの実行時にbeforeExpand/onExpandまたはbeforeCollapse/onCollapseイベントコールバック関数callbackFlag=falseがトリガーされることを示します.このパラメータは、このメソッドの実行時にイベントコールバック関数をトリガーしないことを示します.false戻り値Boolean戻り値と同等最終的な実際の動作を表すtrue展開ノードfalse折りたたみノードnull親ノードでないことを示す
vartreeObj = $.fn.zTree.getZTreeObj("tree");var nodes = treeObj.getSelectedNodes();if (nodes.length>0) { treeObj.expandNode(nodes[0], true, true, true);}
6.treeNodeツリーノードオブジェクト各treeNodeオブジェクトにはNマルチプロパティとメソッドがあります.詳細はapiのtreeNodeセクションを参照してください.
例:a)treeNode.isParentは、ノードが親ノードbであるか否かを判断する)treeNode.nameノード名c)treeNode.childrenはノードのサブノードデータ集合d)treeNodeを取得する.getParentNode親ノードe)treeNodeを取得する.レベルはノードのレベルを取得し、ルートノードのレベルは0 f)treeNode.tIdが生成するツリーのノードのhtml idは、プライマリキーidg)treeNodeとは異なる.parentTIdが取得した親ノードのtIdh)ツリーにバインドされた他のフィールドは、treeNodeオブジェクトによって直接取得できます.例えば、treeNode.phone