ホームページ > ウェブフロントエンド > jsチュートリアル > zTree の使用例を簡単に実装するための 5 つのステップ

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

小云云
リリース: 2017-12-28 11:48:43
オリジナル
4213 人が閲覧しました

この記事では主に 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート