zTree の使用例を簡単に実装するための 5 つのステップ

この記事では主に zTree の使用を簡単に実装するための 5 つの手順を紹介します。興味のある方はぜひ参考にしてください。

1. zTree 構成ファイルをインポートします

<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script> 
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" />

2. 必要な場所に class="ztree" を設定します

<p data-options="title:&#39;基础菜单&#39;"> 
   <ul id="baseMenu" class="ztree"></ul> 
</p>

3. に従って、単純な zTree フォーマットまたは標準 zTree フォーマットを生成することを選択します。あなたのニーズに合わせて（ここでは単純さについて話しているだけです） ps: ページがロードされた後、関数に

var setting = { 
  data: { 
    simpleData: { 
      enable: true //支持json格式 
  } 
},

を記述するように注意してください。 4. ツリー メニューを作成します (単純さの点では dTree に似ています)

。

var zNodes = [ //驼峰式命名pId 
  {id:1,pId:0,name:"父节点1"},       
  {id:2,pId:0,name:"父节点2"},           
  {id:11,pId:1,name:"父1子节点1"}, 
  {id:12,pId:1,name:"父1子节点2"}, 
];

5. ツリーメニューを生成します

$.fn.zTree.init($("#baseMenu"), setting, zNodes);

関連する推奨事項:

zTree jQuery ツリープラグインの詳細な使用例

zTree プラグを使用した jQuery の例-でドラッグアンドドロップ機能を実現するため

jQuery での zTree ツリー プラグインの使用共有

以上がzTree の使用例を簡単に実装するための 5 つのステップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。