共有手順:
プロジェクトは、バックグラウンドから返されたデータをツリービューの形式で表示し、ノードをクリックして右側の ul にノード情報を追加する必要があります。これは後で取得して使用されます。その後の提出では、ノード情報の非同期ロードを実現できる zTree プラグインが選択されました。このプラグインがほぼすべてのニーズを満たすのに十分であることが証明されました。多くの人の共有と公式 API ドキュメントを組み合わせて、最終的にこの機能を実現しました。ここで私が学んだことの概要を共有します。 zTree のデフォルトの効果に加えて、いくつかの実用的な操作が追加されました。 API; アコーディオン効果を含む; 親ノードをクリックして効果を展開; 第 1 レベルの子ノード番号表示効果をクリックします。 css コード
1 <link rel="stylesheet" href="./zTree_v3-master/css/zTreeStyle/zTreeStyle.css"> 2 <script type="text/javascript" src="./jquery-1.9.1.js"></script> 3 <script type="text/javascript" src="./zTree_v3-master/js/jquery.ztree.all.min.js"></script>
js コード
<div class="box"> <ul id="treeDemo" class="ztree"></ul> <ul id="ulright"> <li style="text-align: center;background-color: #ddd;border-bottom: 1px dashed">已选择</li> </ul> </div>
バックエンドの php コード; 私は純粋にフロントエンドであり、バックエンドのコードは簡単にしか記述できません;
ul,li,body{ margin: 0; padding: 0; } .ztree li span.node_name { font-size: 16px; } .box{ width: 500px; margin:10px auto; border:3px solid #ccc; padding: 20px; border-bottom: none; } #treeDemo{ width: 200px; display: inline-block; background-color: #f1f1f1; min-height: 200px; } #ulright{ width: 200px; margin-left: 50px; min-height: 200px; border:1px solid #ccc; display: inline-block; vertical-align: top; background-color: #eeeee8; } #ulright li{ width: 100%; height: 30px; list-style: none; line-height: 30px; margin-bottom: 3px; background-color: #00b6ba; padding-left: 10px; box-sizing: border-box; } /**/ .ztree li a.curSelectedNode{ background-color: transparent; border:#00b6ba; } .ztree li span.node_name{ font-size: 18px; line-height: 18px; color: #000; } .ztree li a{ padding: 5px; vertical-align: middle; } .ztree li a:hover{ text-decoration: none; } .ztree li span.button.chk{ margin: 9px 3px; }
ほとんどの js コードには詳細な API があり、zTree にあります。公式ウェブサイト 公式 API ドキュメントを参照してください。コードはサーバー環境で実行する必要があります
最終的な栗のレンダリング
以上がjQuery での zTree ツリー プラグインの使用の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。