Q&A
質問者さんの案の通り実装してみたのでしょうか？ であれば、その結果はどうなりましたか？ まずはそれを書いていただけませんか？ 期待した結果と異なるならどこがどのように異なるのか書いてください。
###前提・実現したいこと
ASP.NETにてDBから抽出したデータを以下のように表形式で表示することを考えています。
| 分類名 | 数値 |
|---|---|
| 大分類 | 中分類の合計 |
| 中分類1 | 小分類a～dの合計 |
| 小分類a | 数値 |
| 小分類b | 数値 |
| 小分類c | 数値 |
| 小分類d | 数値 |
| 中分類2 | 小分類a'～c'の合計 |
| 小分類a' | 数値 |
| 小分類b' | 数値 |
| 小分類c' | 数値 |
| 中分類3 | 小分類の合計 |
| 小分類 | 数値 |
| : | : |
単純な表でしたら、DataSetにデータを入れて、GridViewにbindすればいいのですが、
アコーディオンにしたいという要求があります。
例えば、中分類1の行をクリックしたら、小分類が隠れ、
もう一度クリックすると再び表示されると言った具合です。
また、大分類をクリックしたら、中分類が隠れることになります。
なお、アコーディオンを開く際は、他のアコーディオンは閉じないようにしたいです。
| 分類名 | 数値 |
|---|---|
| 大分類 | 中分類の合計 |
| 中分類1 | 小分類a～dの合計 |
| 中分類2 | 小分類a'～c'の合計 |
| 小分類a' | 数値 |
| 小分類b' | 数値 |
| 小分類c' | 数値 |
| 中分類3 | 小分類の合計 |
| 小分類 | 数値 |
| : | : |
###試したこと
これを実現するために以下のようなイメージで動的に画面を作ることを考えています。
vbnet
1<ajaxToolkit:Accordion> 2 <Panes> 3 <ajaxToolkit:AccordionPane> 4 <Header> 5 <table> 中分類 6 </Header> 7 <Content> 8 <asp:GridView> 小分類 9 </Content> 10 </ajaxToolkit:AccordionPane> 11 </Panes> 12</ajaxToolkit:Accordion>
上記のアコーディオンを大項目のアコーディオンに入れる
vbnet
1<ajaxToolkit:Accordion> 2 <Panes> 3 <ajaxToolkit:AccordionPane> 4 <Header> 5 <table> 大分類 6 </Header> 7 <Content> 8 <ajaxToolkit:Accordion> 中分類1 9 <ajaxToolkit:Accordion> 中分類2 10 <ajaxToolkit:Accordion> 中分類3 11 </Content> 12 </ajaxToolkit:AccordionPane> 13 </Panes> 14</ajaxToolkit:Accordion>
これを実現するために以下のようなプログラムを書きました。
vbnet
1 Private Sub SetContents(ByVal control As ControlCollection, ByVal header As DataRow, ByVal content As DataTable) 2 3 Dim accordion As AjaxControlToolkit.Accordion 4 Dim accordionPane As AjaxControlToolkit.AccordionPane 5 6 Dim table As Table 7 Dim tableRow As TableRow 8 9 Try 10 11 ' Accordion Header 12 table = New Table 13 tableRow = CreateRow(header) ' TableRowを生成する関数(省略) 14 table.Controls.Add(tableRow) 15 16 contentRows = content.Select(pattern) ' patternは抽出条件(省略) 17 18 If (contentRows.Length = 0) Then 19 ' コンテンツなし 20 control.Add(table) 21 22 Else 23 ' コンテンツあり 24 25 accordion = New AjaxControlToolkit.Accordion 26 accordion.ID = "accordion_" + header("xxx") 27 accordion.ContentCssClass = "accordionContent" 28 accordion.HeaderCssClass = "accordionHeader" 29 accordion.RequireOpenedPane = False 30 accordionPane = New AjaxControlToolkit.AccordionPane 31 accordionPane.ID = "accordionPane_" + header("xxx") 32 33 ' ヘッダー追加 34 accordionPane.HeaderContainer.Controls.Add(table) 35 36 ' コンテンツの追加は、再帰呼出しによって行う 37 For Each row As DataRow In contentRows 38 39 SetContents(accordionPane.ContentContainer.Controls, row, content) 40 41 Next 42 43 ' ペインの追加 44 accordion.Panes.Add(accordionPane) 45 46 ' 作成したアコーディオンを追加する 47 control.Add(accordion) 48 49 End If 50 51 Catch ex As Exception 52 Throw 53 End Try 54 55 End Sub
より良い方法がございましたらご教授いただければ幸いです。
よろしくお願いいたします。
###補足情報(言語/FW/ツール等のバージョンなど)
Visual Studio 2015
.NET Framework 4.6.2
jQuery 3.1.1
返信が遅くなり申し訳ありません。 上記の案で実装したところ、想定通りの動きをするものはできました。 ただし、実際には分類は5段階あるため、 データが多くなると表示に時間がかかります。 より良い方法がありましたらご教授頂けたら幸いです。
質問者さんは解答欄に書かないで、追加情報などを書く場合は最初の質問欄に追記する形で 書いていただけませんか 。ここはそれが流儀のようですので、そうしていただけないと、スレッドが意味不明になってきます。
回答1件
0
自己解決
関数にControlを渡してコンテンツを追加する方法から、
コンテンツを追加したControlを返す方法に変えました。
これにより、葉の部分はテーブルにまとめられるようになりましたので、若干軽量化できたと思います。
vbnet
1Private Function CreateAccordion(ByVal header As DataRow, ByVal content As DataRow()) As Control 2 3 CreateAccordion = Nothing 4 5 Dim contentDT As DataTable = Nothing 6 Dim accordion As AjaxControlToolkit.Accordion 7 Dim accordionPane As AjaxControlToolkit.AccordionPane 8 Dim table As Table = Nothing 9 Dim headerRow As TableRow 10 Dim children As DataRow() = Nothing 11 Dim pattern As String 12 13 Try 14 15 ' Accordion Header 16 headerRow = CreateRow(header) ' TableRowを生成する関数(省略) 17 18 If ((Not content Is Nothing) AndAlso (content.Length > 0)) Then 19 ' Get Children 20 contentDT = content.CopyToDataTable 21 pattern = "xxxx" ' patternは抽出条件(省略) 22 children = contentDT.Select(pattern) 23 End If 24 25 If ((Not children Is Nothing) AndAlso (children.Length > 0)) Then 26 ' Have children 27 28 accordion = New AjaxControlToolkit.Accordion 29 accordion.ID = "accordion_" + header("xxx") 30 accordion.ContentCssClass = "accordionContent" 31 accordion.HeaderCssClass = "accordionHeader" 32 accordion.RequireOpenedPane = False 33 accordionPane = New AjaxControlToolkit.AccordionPane 34 accordionPane.ID = "accordionPane_" + header("xxx") 35 36 ' Add Header 37 table = New Table 38 table.ID = "table_" + header("xxx") 39 table.Controls.Add(headerRow) 40 accordionPane.HeaderContainer.Controls.Add(table) 41 42 table = Nothing 43 44 For Each row As DataRow In children 45 46 pattern = "xxxx" ' patternは抽出条件(省略) 47 Dim control As Control = CreateAccordion(row, contentDT.Select(pattern)) 48 49 If (TypeOf control Is TableRow) Then 50 ' Child-Node is TableRow 51 52 If (table Is Nothing) Then 53 ' Table is not created yet 54 55 table = New Table 56 57 End If 58 59 ' Add Child-Node 60 table.Controls.Add(control) 61 62 Else 63 ' Child-Node is Accordion 64 65 If (Not table Is Nothing) Then 66 ' table is created -> add first 67 68 accordionPane.ContentContainer.Controls.Add(table) 69 table = Nothing 70 71 End If 72 73 ' Add Child-Node 74 accordionPane.ContentContainer.Controls.Add(control) 75 76 End If 77 78 Next 79 80 If (Not table Is Nothing) Then 81 ' table still remain 82 accordionPane.ContentContainer.Controls.Add(table) 83 84 End If 85 86 accordion.Panes.Add(accordionPane) 87 CreateAccordion = accordion 88 89 Else 90 ' Have no children 91 92 CreateAccordion = headerRow 93 94 End If 95 96 Catch ex As Exception 97 Throw 98 End Try 99 100End Function
これで締めさせていただきます。
ありがとうございました。
投稿2018/01/19 07:38
編集2018/02/08 10:37総合スコア22
あなたの回答
tips
プレビュー
