jQuery Ztreeの基本的な使い方

4210 ワード

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