Webの＋−で開いたり閉じたりするもの

環境/言語:[VisualStudio2010, C#, AJAX .NET Framework4]
分類:[ASP.NET]

いつもお世話になっております。

ASP.NETでWebアプリの開発を行っています。
＋や−で開いたり閉じたりするリストのようなものを使いたいと思っています。
これはどのようにしたらいいのでしょうか？

思いつくところで＋をボタンにしてパネルの表示/非表示を切り替えるのかな、
とも考えているのですが、他にいい方法があるような気がします。

イメージとしてはExcelの集計のような感じです。

＋アイテム１
＋アイテム２
−アイテム３
　・子アイテム１
　・子アイテム２
＋アイテム４

孫、ひ孫アイテムまで考えています。
参考になるページ、ヒント、やり方等教えて頂けると助かります。
名前がわからず、うまく検索ができないでいます。

よろしくお願いいたします。

開発はVisualStudio2010、C#、AJAXを使用しています。
Silverlightは使えません。

■No30818に返信(ななきさんの記事)

jQuery Treeview
で検索するとjQueryを使った方法が見つかります。

■No30818に返信(ななきさんの記事)
> いつもお世話になっております。
>
> ASP.NETでWebアプリの開発を行っています。
> ＋や−で開いたり閉じたりするリストのようなものを使いたいと思っています。
> これはどのようにしたらいいのでしょうか？
>
> 思いつくところで＋をボタンにしてパネルの表示/非表示を切り替えるのかな、
> とも考えているのですが、他にいい方法があるような気がします。
>
> イメージとしてはExcelの集計のような感じです。
>
> ＋アイテム１
> ＋アイテム２
> −アイテム３
> 　・子アイテム１
> 　・子アイテム２
> ＋アイテム４
>
> 孫、ひ孫アイテムまで考えています。
> 参考になるページ、ヒント、やり方等教えて頂けると助かります。
> 名前がわからず、うまく検索ができないでいます。
>
> よろしくお願いいたします。
>
> 開発はVisualStudio2010、C#、AJAXを使用しています。
> Silverlightは使えません。
>

ASP.NET サーバーコントロールで行うなら TreeView を使えばいいわけですが。
http://www.atmarkit.co.jp/fdotnet/dotnettips/283asptreeview1/asptreeview1.html
http://www.atmarkit.co.jp/fdotnet/dotnettips/286asptreeview2/asptreeview2.html

せっかく ASP.NET AJAX を使っているなら、UpdatePanel と組み合わせてみては。

shu様、じゃんぬねっと様、ありがとうございます。

VS2010で標準でjQueryを使えたんですね。
VS2005で作ったテンプレートを使っていたので忘れておりました。
プロジェクトに組み込んで使えるようにしました。
使っていきたいと思います。

問題の方ですが、行き詰まっています。
テーブルのイメージで、グループ化したものを表示したいと思っています。
(図を添付してみました)

お二人が教えてくれたようにTreeViewの延長で出来ると思っていたのですが
なんか違うような気がしてきました。

このようなものを作ろうとしたときに、皆様でしたらどのように作りますか？
よろしくお願いいたします。

■No30839に返信(ななきさんの記事)
> shu様、じゃんぬねっと様、ありがとうございます。
>
> VS2010で標準でjQueryを使えたんですね。
> VS2005で作ったテンプレートを使っていたので忘れておりました。
> プロジェクトに組み込んで使えるようにしました。
> 使っていきたいと思います。
>
> 問題の方ですが、行き詰まっています。
> テーブルのイメージで、グループ化したものを表示したいと思っています。
> (図を添付してみました)
>
> お二人が教えてくれたようにTreeViewの延長で出来ると思っていたのですが
> なんか違うような気がしてきました。
>
> このようなものを作ろうとしたときに、皆様でしたらどのように作りますか？
> よろしくお願いいたします。

1. SPREAD (3rd パーティ コンポーネント) の階層表示 + Expand/Collapse 機能
2. GridView の階層表示
3. CollapsiblePanel + Table に見えるレイアウト

とか思いつきましたが、方法だけなら他にもたくさんありそうですね。
どれが最適解かは人にもよりそうですね。

じゃんぬねっと様、ありがとうございます。

3番でやってみることにしました。
時間が取れなくてまだ1階層までしかできていませんが、
イメージ通りのものはできそうです。

動的にすべてのコントロールを生成するのと、8階層まで作る必要がでてきたため
処理時間など不安はありますが、どこまでできるかやってみたいと思います。

ありがとうございました。