【问题标题】:How to Split Table nicely in JSP如何在 JSP 中很好地拆分表
【发布时间】:2012-06-18 19:05:56
【问题描述】:

我创建了一个表格,用于显示部门签出/签入的书籍。排序依据:姓名、日期。每隔一段时间(在进行了一些签入和签出之后)就会对书籍进行清点以确认有多少可用(并据此更正数字)。

我目前有一个表格,显示按名称、日期排序的所有书籍。但由于有很多行,我希望根据此类图书的入库时间设置可折叠部分。

期望:

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 作为表格中不同折叠部分的列表传递?

【问题讨论】:

标签: javascript html spring jsp struts


【解决方案1】:

我上面的评论没有回答你的问题,但这里有一个关于如何做到这一点的教程http://www.a2ztechguide.com/2011/07/javascript-expand-collapse-table-rows.html

我很久以前就用数据库做了这个,现在我们使用 xml 并显示我们需要的内容并不好玩。

上面的链接做得很好,并解释了如何使用 javascript 进行展开和折叠。您上面的代码在正确的轨道上,但还没有完全正确。

【讨论】:

  • 嗯,这是朝着正确方向迈出的一步,但我需要动态生成这些部分,我不知道每个 bookLogs 需要多少个部分
  • 让你的服务器定义每一个,这样它就有一个部分的值,比如&lt;td value="sectionname"&gt;Row1&lt;/td&gt;,服务器会将sectionname更改为部分名称,这样你的javascript就会找到所有部分名称然后将它们链接为一个组,然后您可以隐藏该组
  • 嗯,总的来说,它并没有说明我需要的一切。现在我已经明白了表格都是分段的,但我不知道如何最好地创建和存储每个部分元素的 id。
  • 是否需要显示 id 或者只是代码中的一个东西,最终会链接到像 book 这样的页面?id=87 因为你可以设置&lt;td value="sectionname" id="idnumber"&gt; Row 1 &lt;/td&gt;
  • 好吧,我有一个图书 ID 和一个交易 ID,图书 ID 不能使用,因为可以有多个部分使用该图书。所以它必须是事务 ID,但是如何将其与其他部分分组?
【解决方案2】:

我建议您为客户使用广泛可用的基于 JS 的表格/网格解决方案。

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

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

还有许多其他人。我个人使用过 Omnigrid,发现它值得投入几个小时来提出这种可以适应未来需求和当前趋势的东西。

【讨论】:

    【解决方案3】:

    看看 Bootstrap,它有一些非常棒的功能,尤其是表格。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-03-15
      • 2010-10-14
      • 2019-07-28
      • 2013-03-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多