jsp中根据分组将数据拆分成多个html表答案

【问题标题】：Split data into multiple html tables according to a group in jspjsp中根据分组将数据拆分成多个html表
【发布时间】：2017-02-04 05:54:37
【问题描述】：

我有一个大数据表，必须在 jsp 中拆分成较小的表。这些表将根据组类型创建。花了几个小时试图弄清楚，但无法根据水果类型组过滤 jsp 中的列表。

     @RequestMapping(value = { "dynamicFruitSettings" }, method = RequestMethod.GET)
        public ModelAndView getDynamicComponents( Model model) {

        LOG.debug("Entering fruit components page");
        ModelAndView mav = new ModelAndView();

        ArrayList<DynamicFruitSettings> resultList = null;
            try {
                resultList = (ArrayList<DynamicFruitSettings>) dynamicFruitService.loadAllFruitComponents();
                mav.addObject(resultList);
            } catch (Exception ex) {

                ex.printStackTrace();
            }
            return new ModelAndView("fruitComponents" , "listFruitComponents", resultList);
        }




        @Entity
        @Table(name = "fruits_components")
        public class DynamicFruitSettings {

        /** The pk1. */
        @Id
        @SequenceGenerator(name = "fruits_components_seq", sequenceName = "fruits_components_seq", allocationSize = 1)
        @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "fruits_components_seq")


        private Long pk1;

        private String fruit_type;
        private String component_role;
        private Double fruit_wt;

        //getters and setters omitted for brevity

在 jsp 中显示所有数据的示例

/* DivTable.com */

.divTable {
  display: table;
  width: 100%;
}
.divTableRow {
  display: table-row;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}
.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}

<div class="divTable">
  <div class="divTableHeading">&nbsp;Fruits</div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;shake</div>
      <div class="divTableCell">&nbsp;10</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;ice cream</div>
      <div class="divTableCell">&nbsp;20</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;cake</div>
      <div class="divTableCell">&nbsp;40</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;candy</div>
      <div class="divTableCell">&nbsp;5</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;shake</div>
      <div class="divTableCell">&nbsp;13</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;ice cream</div>
      <div class="divTableCell">&nbsp;30</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;cake</div>
      <div class="divTableCell">&nbsp;90</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;candy</div>
      <div class="divTableCell">&nbsp;25</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;shake</div>
      <div class="divTableCell">&nbsp;19</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;ice cream</div>
      <div class="divTableCell">&nbsp;20</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;cake</div>
      <div class="divTableCell">&nbsp;40</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;candy</div>
      <div class="divTableCell">&nbsp;15</div>
    </div>
  </div>
</div>

我在 jsp 中的最终外观应该如下所示

.divTable {
  display: table;
  width: 100%;
}
.divTableRow {
  display: table-row;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}
.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}

<div class="divTable">
  <div class="divTableHeading">Banana</div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;shake</div>
      <div class="divTableCell">&nbsp;10</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;ice cream</div>
      <div class="divTableCell">&nbsp;20</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;cake</div>
      <div class="divTableCell">&nbsp;40</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;candy</div>
      <div class="divTableCell">&nbsp;5</div>
    </div>
  </div>
</div>
<br>
<div class="divTable">
  <div class="divTableHeading">&nbsp;Peach</div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;shake</div>
      <div class="divTableCell">&nbsp;13</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;ice cream</div>
      <div class="divTableCell">&nbsp;30</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;cake</div>
      <div class="divTableCell">&nbsp;90</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;candy</div>
      <div class="divTableCell">&nbsp;25</div>
    </div>
  </div>
</div>
<br>
<div class="divTable">
  <div class="divTableHeading">&nbsp;Apple</div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;shake</div>
      <div class="divTableCell">&nbsp;19</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;ice cream</div>
      <div class="divTableCell">&nbsp;20</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;cake</div>
      <div class="divTableCell">&nbsp;40</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;candy</div>
      <div class="divTableCell">&nbsp;15</div>
    </div>
  </div>
</div>
<br>

显示所有数据的示例是我当前在我的 jsp 中得到的。我从我的控制器中得到了这个水果列表，控制器从数据库中的水果表中获取数据。由于水果类型可以是任何东西，我不能基于 pk1 对水果执行简单的“for each”循环，然后执行“if”子句将其渲染到 jsp 中。数据库表中的每一行都有一个pk1。

非常感谢您对我应该如何将它们拆分为较小的表格的建议。

【问题讨论】：

另外，如果我可以在 jsp 中获得唯一组水果类型的列表，以便我可以在 for 循环中执行 if 子句来呈现表格，那么我应该更接近解决方案。
为什么不从控制器本身为每种水果类型发送不同的列表，这样会更容易
@Vivek Kumar，水果类型来自动态输入的表单数据。它们可以是 n 种水果类型。因此，我不确定发送不同的水果类型列表如何帮助显示所有水果类型。

标签： java html css jsp spring-mvc

【解决方案1】：

我设法通过更改我的控制器来将数据拆分为动态表，以了解我如何将数据发送到我的 jsp。不是将数据作为列表发送，而是将其作为列表映射发送。这样，我就可以循环地图，将键作为一个组获取并显示列表中的值。

因此问题解决了。

我有一个不同的问题，它将作为一个关于复制数据的新问题（即，作为我的表行的 jsp 中的列表值）发布，它会在每次刷新页面时不断添加，没有重复db 中我觉得很奇怪的行。仅当我重新启动应用程序时，才会从 jsp 中删除重复项。

【讨论】：