この記事では、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 をインストールします
1. はじめに不明な値または部分的に既知の値をフィルタリングする場合は、like 演算子を使用でき...
コンセプトインデックスにクエリ要件を満たすすべてのデータが含まれている場合、それはカバーリング イン...
現在、DockerイメージのほとんどはDebianベースです # cat /etc/issue De...
純粋な CSS で固定ヘッダーを実装するのが難しい主な理由は 2 つあります。まず、最大のシェアを持...
SQL 左結合、右結合、内部結合、自然結合 さまざまな結合の概要SQL には、左結合、右結合、内部結...
コードをコピーコードは次のとおりです。 <meta name="viewport&q...
公式サイトからMySQL-5.7.11-winx64の圧縮版をダウンロード。インストール後、パスワー...
<br />原文: http://andymao.com/andy/post/103.h...
最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...
序文SpringBoot + Vueのフロントエンドとバックエンドを分離したプロジェクトをどのように...
Web デザインでは、Web サイトに表示されるデータの構造とコンテンツをユーザーが明確に理解できる...
MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...
質問1:インストール中に net start mysql と入力すると、次のエラー メッセージが表示...
序文この記事では、主にライブラリ内のすべてのテーブルを返すMysql8.0ドライバgetTables...
序文正直に言うと、最近とても混乱していると感じています。テクノロジーと人生について。また、将来の発展...