1

部門のサインアウト/サインインしている本を表示するためのテーブルを作成しました。名前、日付でソートされています。時々（いくつかのチェックインとチェックアウトが行われた後）、利用可能な数を確認するために本の在庫が確認されます（そして数はそれに応じて修正されます）。

現在、名前、日付でソートされたすべての本を表示するテーブルがあります。しかし、行がたくさんあるので、このタイプの本がいつインベントリされたかに基づいて、折りたたみ可能なセクションを作成したいと思っていました。

望ましい：

Name |  Date | Count | Action
-----------------------------
- First Foo Section -
Foo    SomeD     +3    check-in
Foo    SomeD     -1    check-out
Foo    SomeD     5     inventoried
+ Another Foo Section
+ Bar Section

現在のコード：

<c:forEach var='item' items='${bookLogs}'>
            <tr>
                <td>${f:replaceNewLineWithBR(f:escapeHtml(item.name))}</td>
                <td><c:out value='${item.date.formattedValue}'/></td>
                <td>${f:replaceNewLineWithBR(f:escapeHtml(item.count))}</td>
                <td>${f:replaceNewLineWithBR(f:escapeHtml(item.actionType))}</td>
            </tr>
    </c:forEach>

item.actionTypeでテストを行う必要がありますか？または、bookLogsを、テーブル内のさまざまな折りたたみセクションのリストのリストとして渡す必要がありますか？

4

3 に答える 3

4

上記の私のコメントはあなたの質問に答えませんでしたが、これはそれを行う方法のチュートリアルですhttp://www.a2ztechguide.com/2011/07/javascript-expand-collapse-table-rows.html。

私はずっと前にデータベースでこれを行いましたが、今ではxmlを使用して、必要なものだけを表示するのは面白くありません。

上記のリンクは素晴らしい仕事をしており、JavaScriptを使用して展開と折りたたみを行う方法を説明しています。上記のコードは正しい方向に進んでいましたが、まだ完全にはありません。

于 2012-06-18T18:59:31.860 に答える
0

クライアントには、広く利用可能なJSベースのテーブル/グリッドソリューションを使用することをお勧めします。

http://www.omnisdata.com/omnigrid/

http://dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

私は個人的にOmnigridを使用しており、将来の要件や現在の傾向に合わせて拡張できるこの種のことを考え出すために、数時間投資する価値があることを発見しました。

于 2012-06-24T16:43:42.167 に答える
0

Bootstrapを調べてください。特にテーブルに関して、いくつかの非常に壮大な機能があります。

http://twitter.github.com/bootstrap/

于 2012-06-25T15:28:42.930 に答える