jQuery ツリービューツリー構造アプリケーション

この記事では、jQueryツリービューツリー構造のアプリケーションコードを例として紹介します。具体的な内容は次のとおりです。

Bootstrap-treeview の適用に続いて、jquery-treeview を使用してこの問題を解決しようとし、解決策を記録しましたが、これが最善ではない可能性があります。

必要なCSSを導入する

jquery.treeview.css

必要なjsを導入する

jQuery 3.0.0.js について
jquery.treeview.js

treeview_jQuery.htmlページを記述します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
 <title>JQuery によるツリービュー</title>
 <link href="../static/css/jquery.treeview.css" rel="スタイルシート">
 <script src="../static/js/jquery-3.0.0.js"></script>
 <script src="../static/js/jquery.treeview.js"></script>
</head>
<スクリプト>
 $(関数() {
 $.ajax({
 タイプ:"GET",
 url:"/tree/treeView.do", //バックエンドインターフェースパス async:false, //非同期 dataType:"json", //データ形式はjson
 成功:関数 (データ) {
 var html = buildTree(data); //buildtree() を呼び出してツリー構造を構築します $("#tree").append(html); //ツリー構造を DOM 要素に追加します }
 });

 $("#tree").treeview({}); //jquery.treeview を使用して、構築された属性構造を動的ツリーに変換します });
 /*
 バックグラウンドから返されたデータに再帰的にアクセスし、HTML コードを記述してツリー構造を構築します*/
 var buildTree = 関数(データ){
 var html="";
 $.each(data,function(i,n){ //現在のデータ内のすべてのツリーノードをトラバースしますhtml = html+"<li><span class=\"folder\">"+n.text+"</span>"; //現在のノードは親ノードですvar children = buildTree(n.nodes); //現在のノードのすべての子ノードを再帰的にトラバースしますhtml = html+"<ul>"+children+"</ul>"; //親ノードと子ノードをまとめます})

 return html; //構築されたツリー構造を返す}

</スクリプト>
<本文>
<ul id="tree" class="filetree"></ul>

</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:

MVC5 と Bootstrap に基づく jQuery TreeView ツリーコントロール (パート 2) データは、json 文字列とリストコレクションをサポートします。
MVC5とBootstrap（I）データに基づくjQuery TreeViewツリーコントロールは、json文字列とリストコレクションをサポートします。
jQueryは、TreeViewテキストの親ノードをクリックして子ノードを展開/折りたたむことを実装しています。
ASP.NET の JQUERY に基づく高性能 TreeView サプリメント
jQuery (asp.net) をベースにした高性能 TreeView の構築
jQuery.Treeviewに右クリックメニューの実装コードを追加する
Jquery.TreeView は ASP.Net とデータベースを組み合わせてメニューナビゲーションバーを生成します
jQuery 学習レッスン 6 Ajax TreeView の実装
TreeView コントロールのツリーデータノードを選択するための JS メソッド (jquery)
jQuery ツリー構造セレクター

<<: Nginx proxy_redirect の使用方法の詳細な説明

>>: CentOS7 は rpm パッケージを使用して mysql 5.7.18 をインストールします