在jsp中按照一个组将数据拆分成多个html表

Question

我有一个大数据表，必须在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 中得到的。 我从我的 Controller 那里得到了这个水果列表，它从 db 中的水果表中获取数据。 由于水果类型可以是任何类型，因此我无法对基于 pk1 的水果执行简单的“for each”循环，然后执行“if”子句将其呈现到 jsp 中。 数据库表中的每一行都有一个 pk1。

您对我应该如何将它们分成更小的表格的建议将不胜感激。

Answer 1

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

因此问题就解决了。

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