この記事では、jQueryツリービューツリー構造のアプリケーションコードを例として紹介します。具体的な内容は次のとおりです。 Bootstrap-treeview の適用に続いて、jquery-treeview を使用してこの問題を解決しようとし、解決策を記録しましたが、これが最善ではない可能性があります。 必要なCSSを導入する
必要な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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Nginx proxy_redirect の使用方法の詳細な説明
>>: CentOS7 は rpm パッケージを使用して mysql 5.7.18 をインストールします
環境ホスト名IPアドレス仕えるプロメテウス192.168.237.137プロメテウス、グラファナノー...
Web ページを作成するときに、テーブルの幅が揃っていないという問題に遭遇することがよくあります。 ...
この記事では、検証コードのランダム生成と検証を実現するためのJavaScriptの具体的なコードを参...
カウント(*)成し遂げる1. MyISAM: テーブル内の行の総数をディスク上に保存し、フィルタリン...
目次1. 前処理2. 前処理塗布方法A. 例: B. 実行計画の変更を追跡するための前処理C. スト...
目次百万レベルのデータ処理ソリューションデータストレージ構造設計クエリステートメントの最適化1000...
この記事には、細かい点は一切なく、カラーマッチングのテクニックをシェアするだけです。とてもシンプルで...
目次序文以前のバージョンイテレータパターンイテレータファクトリ関数イテレータプロトコル最後に序文多く...
1.マージンとは何ですか?マージンは、要素の周囲のスペースの間隔を制御するために使用され、視覚的にス...
3次元縦棒グラフは、正面、右側、上部の3つの部分で構成されています。描画するときは、正面をグラフィッ...
検索ページ: search.wxml ページ: <view class="form&...
Nginx 仮想ドメイン名設定を使用すると、ドメイン名を購入せずに特定のドメイン名を介してローカル ...
デフォルトでは、Nginx は IP アドレスごとに 1 つの SSL 証明書のみをサポートします。...
この記事では、CentOS 7 に Chrome ブラウザをインストールする方法を紹介します。詳細は...
序文コンピュータの数値は浮動小数点であるため、計算プロセス中に取得されるデータは通常正確ではなく、そ...