Geekly Articles each Day

ツリーを表示するための単純なTypeScriptコンポーネント

小さなWebプロジェクトで作業するプロセスでは、ページに要素のツリーを表示するコンポーネントが必要でした。 このコンポーネントでは、ツリーノードの展開/折りたたみ、要素のクリックの処理、ツリーへの新しいノードの追加、一般的な最も基本的なツリービュー機能の提供が可能です。

コンポーネントを使用するための条件は、「一般に受け入れられている」ものとは多少異なります。最新の（IE9 +）ブラウザーがランタイム環境として使用されます（Webプロジェクトは完全に制御された内部ネットワーク内で使用されることになっています）。 もう1つのポイントは、サーバー部分の開発に基づいたプラットフォームです。 これはASP.NET MVCです。つまり、ASP.NET MVCアプリケーションの一般的なディレクトリ構造に適したNuGetパッケージとしてコンポーネントを配信することが望ましいということです。

この問題に取り組む過程で、既存のオプションを研究し、いつものように、 ブラックジャックとゲートウェイを備えた別の自転車を発明しました。


この記事の執筆時点では、インターネット上で、要素のツリーを表示するための最も一般的な6つのコンポーネントを見つけることができます。
  1. jsTree 。 昨年のhabrahabrでのjsTree の議論から判断すると、一部の開発者はDynatreeを好んでいます。
  2. jqTree 。 それは最も楽しい印象を与えます。 おそらく、優れた設計と詳細なドキュメントが原因です。
  3. jQuery TreeViewプラグイン 。 著者は、プロジェクトがもはや積極的に開発されていないと報告し、jqTreeの使用を推奨しています。
  4. ダイナツリー
  5. dhtmlxTree 。
  6. dTree 。

いくつかの結論。

長所と短所を比較検討した後、ASP.NET MVCおよびVisual Studio 2012に基づく最もシンプルで使いやすい標準アプリケーションテンプレートを、古いブラウザーをサポートする負担なしに、独自の自転車を発明することにしました。 自転車が発明されました。 その際立った特徴は次のとおりです。

CSSルールを分離するには、単純ですが、私の意見では、最も正しいアプローチが使用されます。
  1. 名前空間に対応するクラス名がツリーのコンテナ要素に追加されます。
  2. コンポーネントのすべてのCSSルールのセレクターはcontext- childであり、前の段落のクラスが唯一の必須ルート親として指定されます。
したがって、CSSルールは、各要素に特別なクラスを作成することなく、タグセレクターに基づいて構築できます。 LESSを使用すると、このようなCSSルールのソースコードが非常に視覚的になります。
少ないCSS
.resnyanskiy-tree > ul.container { border: 1px dotted gray; font-family: Tahoma; font-size: 10pt; padding: 1px; li { list-style-type: none; background-image: url(images/vline.png); background-repeat: repeat-y; ul { padding-left: 16px; } span { span { height: 16px; } } ... } 
 .resnyanskiy-tree > ul.container { border: 1px dotted gray; font-family: Tahoma; font-size: 10pt; padding: 1px; } .resnyanskiy-tree > ul.container li { list-style-type: none; background-image: url(images/vline.png); background-repeat: repeat-y; } .resnyanskiy-tree > ul.container li ul { padding-left: 16px; } .resnyanskiy-tree > ul.container li span span { height: 16px; } ...
メインのTypeScriptクラスTreeは3つのパブリックメンバーがあります。
2つのプライベートメソッドrenderNodeItemsTo(...)およびtoggleNodeItemsVisible(...)は基本的なロジックを実装します。 ツリー要素の可視性の変更は、DOM要素を追加/削除することで実装されます（ Element.removeChild(...) - jsperfを使用して削除します ）。
toggleNodeItemsVisible(...)メソッドは、指定されたツリーノード（JSオブジェクト）に要素がない場合、 false返します。 これにより、 onBranchExpandハンドラーを呼び出す条件はかなり簡潔になります。

 if(!this.toggleNodeItemsVisible(node) && (this.onBranchExpand instanceof Function)) { this.onBranchExpand(nodeId); }

特に、コンポーネントの実装時にTypeScript + LESSを使用すると、プロジェクトでの使用と、ニーズに合わせた改良が大幅に簡素化されます。

GitHub-github.com/resnyanskiy/js.tree
NuGet-nuget.org/packages/resnyanskiy.js.tree

Source: https://habr.com/ru/post/J183434/

More articles:


All Articles