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

推薦する

MySQLのlike演算子の詳細

1. はじめに不明な値または部分的に既知の値をフィルタリングする場合は、like 演算子を使用でき...

MySQLカバーインデックスの詳しい説明

コンセプトインデックスにクエリ要件を満たすすべてのデータが含まれている場合、それはカバーリング イン...

Debian Dockerコンテナにcrontabスケジュールタスクを追加する

現在、DockerイメージのほとんどはDebianベースです # cat /etc/issue De...

純粋な CSS ヘッダーの実装コードを修正

純粋な CSS で固定ヘッダーを実装するのが難しい主な理由は 2 つあります。まず、最大のシェアを持...

SQLのさまざまな結合サマリーの詳細な説明

SQL 左結合、右結合、内部結合、自然結合 さまざまな結合の概要SQL には、左結合、右結合、内部結...

メタタグのビューポートはデバイス画面のCSSを制御します

コードをコピーコードは次のとおりです。 <meta name="viewport&q...

mysql 5.7.11 winx64 初期パスワード変更

公式サイトからMySQL-5.7.11-winx64の圧縮版をダウンロード。インストール後、パスワー...

HTML チュートリアル: 順序付きリスト

<br />原文: http://andymao.com/andy/post/103.h...

DELL R730 サーバーの構成 RAID とインストール サーバー システムとドメイン制御の詳細なグラフィック チュートリアル

最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...

SpringBoot + Vue プロジェクトを Linux サーバーにデプロイするための詳細なチュートリアル

序文SpringBoot + Vueのフロントエンドとバックエンドを分離したプロジェクトをどのように...

CSS カウンターを使用して数字の順序付きリストを美しく表示する方法

Web デザインでは、Web サイトに表示されるデータの構造とコンテンツをユーザーが明確に理解できる...

Mysql SQL ステートメントのコメント

MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...

MySQLのインストール時に発生する可能性のある問題

質問1:インストール中に net start mysql と入力すると、次のエラー メッセージが表示...

MySQL 8.0 バージョンで getTables がすべてのデータベース テーブルを返す問題の簡単な分析

序文この記事では、主にライブラリ内のすべてのテーブルを返すMysql8.0ドライバgetTables...

ByteDance インタビュー: JS を使用して Ajax 同時リクエスト制御を実装する方法

序文正直に言うと、最近とても混乱していると感じています。テクノロジーと人生について。また、将来の発展...