Clever Geek Handbook

ツリーを表示するための単純な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


More articles:


All Articles