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

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 をインストールします

推薦する

Prometheusコンテナのデプロイメントのための実用的なソリューション

環境ホスト名IPアドレス仕えるプロメテウス192.168.237.137プロメテウス、グラファナノー...

HTML テーブル セルの幅と高さを設定する方法

Web ページを作成するときに、テーブルの幅が揃っていないという問題に遭遇することがよくあります。 ...

JavaScriptは検証コードと検証のランダム生成を実装します

この記事では、検証コードのランダム生成と検証を実現するためのJavaScriptの具体的なコードを参...

MySQL でのフィルター条件なしのカウントの詳細な説明

カウント(*)成し遂げる1. MyISAM: テーブル内の行の総数をディスク上に保存し、フィルタリン...

Mysqlのprepare前処理の具体的な使用法

目次1. 前処理2. 前処理塗布方法A. 例: B. 実行計画の変更を追跡するための前処理C. スト...

MySQLデータベースの数千万件のデータクエリとストレージの詳細な説明

目次百万レベルのデータ処理ソリューションデータストレージ構造設計クエリステートメントの最適化1000...

ウェブページのカラーマッチングにおけるオーバーラップとソフトカラーマッチングの手法を詳しく説明

この記事には、細かい点は一切なく、カラーマッチングのテクニックをシェアするだけです。とてもシンプルで...

ECMAScript のイテレータの詳細な説明

目次序文以前のバージョンイテレータパターンイテレータファクトリ関数イテレータプロトコル最後に序文多く...

CSS属性のマージンの理解について話す

1.マージンとは何ですか?マージンは、要素の周囲のスペースの間隔を制御するために使用され、視覚的にス...

Vueはechartsに基づいて3次元の縦棒グラフを実装します

3次元縦棒グラフは、正面、右側、上部の3つの部分で構成されています。描画するときは、正面をグラフィッ...

Linux\Nginx 環境での仮想ドメイン名の設定とテスト検証

Nginx 仮想ドメイン名設定を使用すると、ドメイン名を購入せずに特定のドメイン名を介してローカル ...

単一の Nginx IP アドレスに複数の SSL 証明書を設定する例

デフォルトでは、Nginx は IP アドレスごとに 1 つの SSL 証明書のみをサポートします。...

CentOS 7にChromeブラウザをインストールする方法

この記事では、CentOS 7 に Chrome ブラウザをインストールする方法を紹介します。詳細は...

js 加算、減算、乗算、除算の正確な計算方法のサンプルコード

序文コンピュータの数値は浮動小数点であるため、計算プロセス中に取得されるデータは通常正確ではなく、そ...