ツリー構造をHTMLで表示する最も簡単なオプションはリストです。 しかし、動的なプロパティを持つツリーに興味があります。 ここではjavascriptなしではできません。 通常、ソリューションは高速なので、jQueryを使用すると動的なツリーを作成でき、コーディング時間をかなり節約できます。 時間を大幅に節約するには、検索エンジンにアクセスして適切なソリューションを探してください。 一般に、サイト上でのツリーの作成はしばしば制限されますが、ツリーが適切であるが小さなチップがなく、既存のツリーを変更する以外に何も残っていない状況があります。
現在、準備テーブルにはTreeviewとjQuery File Treeの 2つのツリーがあります。
Treeviewの場合、新しいノードをツリーに正しく追加する必要があります。 一方では、タスクが奇妙に見えるかもしれません。なぜなら、 ツリーには、追加セレクタを介して新しいノードを追加する機能があります。 このように：
var tree = $( ".selector" ).treeview();
$( ".button" ).click( function () {
var newSublist = $( "<li><span class='folder'>New Sublist</span><ul>" +
"<li><span class='file'>Item1</span></li>" +
"<li><span class='file'>Item2</span></li></ul></li>" ).appendTo(tree);
tree.treeview({
add: newSublist
});
});
ただし、この方法には欠点があります。ノードはツリーの最後に追加するか、厳密に定義されたサブノードにのみ追加できます。 しかし、選択したサブサイトに新しいノードを追加することは、ドキュメントで説明されているものとは異なる肯定的な結果の検索ではなかったため、明らかに簡単ではありません。
したがって、ツリーの動作に外部介入の方法を適用します。
$( function () {
var pervios_node; //
$( "#browser" ).treeview({
toggle: function () { //
$( this ).addClass( "selector" ); //
// ( )
if (pervios_node!=undefined && pervios_node!= this ) {
//
$(pervios_node).removeClass( "selector" );
};
pervios_node= this ;
}
});
$( "#add" ).click( function () {
//
var branches = $( "<li><span class='folder'>New Sublist</span><ul><li><span class='file'>Item2</span></li></ul></li>" ).appendTo( "li.selector ul:first" );
$( "#browser" ).treeview({
add: branches
});
});
});
介入のキーポイントはappendTo（“ li.selector ul：first”）です。 セレクタクラスを追加して、現在選択されているノードをマークし、それを見つけて新しいノードを追加できるようになりました。
2番目のツリーは、ファイルシステムの構造を表示するためのものです。 しかし、彼には1つの小さな欠陥があります。 コネクタでファイル表示を無効にした場合、ディレクトリのみを残すと、horseフォルダーの内容を表示できません。
この問題を解決するには、元のスクリプトに存在する小さなエラーを修正するために、ツリー自体を変更する必要があります。
始めましょう。 jqueryFileTree.jsツリースクリプトに進み、ツリーオプションのデフォルト値を設定した後、次の行を追加します。
var show_root=1; //true
以下のイテレータ関数では、欠落しているルートパラメーターを追加することでPOST要求のパラメーターの転送を修正します（現在、コネクターは欠落している変数を誓いません）。現在のバージョンでは、このパラメーターを空の文字列にします。 彼は、コネクタのパスの形成に参加しています。 最後に、ツリーへのルートノードの追加を制御するパラメーターshowrootを追加します。
$.post(o.script, { dir: t, root: '' ,showroot:show_root }, function (data) {
…
});
show_root=0; //false
関数の後、ルートノードをツリーに追加するためのパラメーターをリセットして、サブノードに表示されないようにします。
最後の仕上げは、コネクタの変更です。
$_POST[ 'dir' ] = urldecode($_POST[ 'dir' ]);
$root= urldecode($_POST[ 'root' ]);
$show_root=( bool )urldecode($_POST[ 'showroot' ]);
if ( file_exists($root . $_POST[ 'dir' ]) ) {
$files = scandir($root . $_POST[ 'dir' ]);
natcasesort($files);
if ( count($files) > 2 ) { /* The 2 accounts for . and .. */
echo "<ul class=\"jqueryFileTree\" style=\"display: none;\">" ;
//
if ($show_root)
{
echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST[ 'dir' ] . "." ) . "/\">root</a></li>" ;
}
else
{
// All dirs
foreach ( $files as $file ) {
if ( file_exists($root . $_POST[ 'dir' ] . $file) &&
$file != '.' &&
$file != '..' &&
is_dir($root . $_POST[ 'dir' ] . $file) ) {
echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST[ 'dir' ] . $file) . "/\">" . htmlentities($file) . "</a></li>" ;
}
}
// All files
}
echo "</ul>" ;
}
}
したがって、ルートディレクトリがあり、そこから残りはツリーのサブノードとしてすでに表示されています。
UPD：
木を扱うデモはこちらにあります 。