1レベルで多数のノードをオンデマンドでロードするツリービュー
-
08-07-2019 - |
質問
ツリーを表示する必要がある状況にいます。ただし、一部のノードには35000の子ノードがあります(直接の子!)。これはもちろん、使いやすさの点で遅くする方法です。
ツリーがブラウザのビューポートに表示されているノードのみをロードするようにしたいです。
WinFormsやC ++にはそのようなツリーが存在しますが、ASP.NETにそのようなツリーが存在するかどうか知っている人はいますか?
現在、 Telerik Treeview を使用しています。素敵なコントロールですが、説明されている状況はサポートしていません。
追加の質問
ユーザビリティの観点から:このようなツリーをどのように処理しますか。 1つのレベルで35000ノードを表示するのは便利ですが、そのツリーで何かを見つけるにはどうすればよいですか?ツリーでページングを使用しますか?または検索ボックス?または追加のレベルを追加しますか?
解決
これだけの数のノードがあると、それらを表示するためのパフォーマンスの高い方法を見つけることができたとしても、ユーザーにとってはあまり使いにくいでしょう。興味のあるノードを見つけるためだけに35,000個のノードをスクロールしようとすることを想像してください!ページングについても同様です。ユーザーは、ターゲットを見つけるために実際に3500ページ(ページサイズ10を想定)にページを移動しますか?おそらくそうではなく、もしそうなら、おそらく彼らはあまり幸せではないでしょう。 :)
代わりに、このような大きなデータセットでは、通常、ある種の<!> quot; Filter <!> quot;を提供するのが最善であることがわかります。 UI。ユーザーが<!> quot; shape <!> quot;できるようにするもの利用可能なデータをより管理しやすいコレクションに追加します。
フィルタリングを提供する機能(つまり、フィルタリングするフィールド)がわからないが、それが最善の策だと思う。 UIのオプションは次のとおりです。
- 組み込みのフィルタリングUIを提供できるRadGrid for ASP.NET AJAXのようなもので、ユーザーは興味のある値をすばやく見つけることができます。
- RadTreeViewのクライアント側APIとオンデマンドでのノードのロードのサポートを使用して、ユーザーの入力に応じてツリー内のノードをフィルターするテキストボックスを作成できます。 TextBoxのonkeyupイベントを処理してから、Webサービスへのリクエストを実行して、フィルター条件を満たすノードを取得し、TreeViewのノードコレクションを結果に置き換えます。これにより、ユーザーがターゲットノードを見つけやすくなります。
明らかに他のアプローチもありますが、うまくいけばいくつかのアイデアが得られます。
簡単な回答:大規模なデータセットの場合、リアルタイムフィルタリングとWebサービスの組み合わせを使用して、より管理しやすい結果セットをユーザーに提示します。初期ロードでは、パフォーマンスを高く保つために、最初の(たとえば)200ノードのみをロードします。
これがお役に立てば幸いです! -トッド
他のヒント
jQueryベースのツリーコントロールがあることは知っています。手元の名前がわからない。 ASP.NETツリーコントロールは、AJAXに対応していないため、これを確実にサポートしません。 35000ノードの表示に関する問題については、このようにページングします。
node
|
-- Sub Node 1
|
-- ...
|
-- Sub Node n
|
-- more...
さらにカーソルを合わせるかクリックすると、より多くのノードが取得されます。 100個のサブノードを表示している場合、200個をロードし、残りの100個を非表示にします。そして、さらにホバーするたびに、次の非表示の100がロードされます。
また、すべての上位ブラウザでカスタムツリーコントロールを作成することも難しくありません。<ul>
および<li>
を使用して、ノードとサブノードを作成し、適切なスタイルを適用します。クリック全体を簡単にしたい場合は、<=>にリンクを含めることができます。
私の2セント。