したがって、このスクリプトの公式ウェブサイト： jstree.com 、最新バージョンは現在0.9.8です
最小限の作業（XSLTおよびCookiesサポートなし）の場合、3つのファイルを接続するだけで十分です。
一般的なスタイル：
<link href="/js/jstree/tree_component.css" type="text/css" rel="stylesheet" />
そして、2つのjsスクリプト：
ツリー自体は次のようになります。
<div id="tree">
<ul>
<li><a href="#"> 1</a></li>
<ul>
<li><a href="#"> 1</a></li>
<li><a href="#"> 2</a></li>
<li><a href="#"> 3</a></li>
</ul>
<li><a href="#"> 2</a></li>
<ul>
<li><a href="#"> 1</a></li>
</ul>
</ul>
</div>
これが最も簡単なオプションです。 ここでの主なことは、すべてがコンテナ内にあり、idをul要素自体に設定しないことを忘れないことです。 そして、リンクがliタグ内にネストされるべきであるという事実。 一般に、ツリーを形成するためのすべてのソースオプションは、ここ（ http://www.jstree.com/reference/_examples/1_datasources.html ）の例で説明されています 。 簡単に言うと、次の機能があります。
1.事前定義されたHTML（事前定義されたHTML）
2.事前定義JSON（事前定義JSON）
3.事前定義XML（事前定義XML）
4.リモートXMLファイルからのダウンロード（ファイルからの読み込み）
5.リモートスクリプトからJSONデータを読み込む（非同期読み込みを使用）
XMLデータを使用するメソッドの場合、SarissaライブラリとjQuery XSLTプラグインも接続する必要があります
JsTreeには柔軟で大きな設定があります。 まず、トピックをオンザフライで変更できます。 デフォルトでは、5つのトピックのみがあります。 既存のテーマを変更しても問題はありません。テーマを変更すると、画像を置き換えて背景の位置を調整することになります。 第二に、20を超えるコールバックがあり、必要なアクションをほぼすべてのイベントにバインドできます。 第三に、選択可能な要素、クリック可能な要素、要素のドラッグや削除などを指定できるルールがあります...
非常に便利なのは、その場で追加および削除することです。 さらに、任意の項目を追加し、アイコンと機能をそれに追加できるコンテキストメニューがあります。 さらに、コンテキストメニューは、各要素または要素のグループごとに異なる場合があります。
jsTreeで行ったこと
一般に、私は2つの欲求によって記事を書くことに触発されました。このスクリプトがどのように機能するかを共有するためです。 そして、私は仕事でjsTreeを使用せざるを得ませんでした。 私はプロバイダーで働いており、マネージャーの顔を書いています。 サポートなど。 機器のマップを作成するタスクがありました。 つまり tsiskaがあり、そこからスイッチ、スイッチ上の他のスイッチ、そして当然クライアントがあります。 さらに、スイッチをクリックすると、スイッチに関する情報を表示できます。必要に応じて、このスイッチに変更、別のスイッチを追加、または子孫がない場合は削除できます。 この問題を解決するために、jsTreeを使用しました。
最も難しい部分は、ツリーをHTMLコードに収集することでした。 それを行うために、ajaxによる子孫の汲み出しはデータベースにとって高すぎます。クリックすることでスイッチとクライアントに関する情報（2リクエスト）を収集する必要があるため、必要なすべてを実行するためにテーブルをすぐに配列にマージすることにしました。 さらに、ツリー上のスイッチとクライアントの検索を実装する必要がありましたが、これも独自の困難を追加しました。
最後に、これは右側に表示されるjsツリーです。 アイコンはフーガパッケージから取得され、利用可能なスイッチは緑で強調表示され、アクセスできない赤、青、人のアイコン、クライアントがあります。 完全に計画された機能を作成するには、jsTree自体とjQueryの両方に真っ向から取り組む必要がありました。 プロバイダのデータベースは閉じられており、内部からのみ機能するため、リンクを提供できないのは残念です。
このようなツールを使用して何ができるかを詳細に説明したいと思います。