弹簧表单复选框 - 将每 2 个复选框放在一行中答案

【问题标题】：Spring form checkboxes - Putting each 2 checkboxes in one row弹簧表单复选框 - 将每 2 个复选框放在一行中
【发布时间】：2018-01-05 10:03:38
【问题描述】：

我一直在尝试使用引导程序将每个 2 个 Spring Form 复选框放在单独的表格行中，但我做不到。
这是我的代码：

<f:form action="/saveEvent" modelAttribute="event" method="post" id="eventForm">

...

        <div class="form-group">
            <label>Trainers</label><br>
            <f:checkboxes path="trainers" items="${trainersList}" 
                          element="div class='col-md-6 checkbox form-control' 
                          CssStyle='float:right'"
                          itemLabel="fullName" itemValue="id" delimiter=""/>
        </div>
</f:form>

这就是我得到的结果

这是生成的 HTML 代码

<div class="form-group">
    <label>Trainers</label><br>
    <div class="col-md-6 checkbox form-control" cssstyle="float:right">
    <input id="trainers1" name="trainers" type="checkbox" value="6" checked="checked">
    <label for="trainers1">Walid Mbarek</label>
  </div>
  <div class="col-md-6 checkbox form-control" cssstyle="float:right">
    <input id="trainers2" name="trainers" type="checkbox" value="7" checked="checked">
    <label for="trainers2">Bouraoui Chebili</label>
  </div>
  <div class="col-md-6 checkbox form-control" cssstyle="float:right">
    <input id="trainers3" name="trainers" type="checkbox" value="14">
    <label for="trainers3">Randy Ross</label>
  </div>
  <div class="col-md-6 checkbox form-control" cssstyle="float:right">
    <input id="trainers4" name="trainers" type="checkbox" value="17">
    <label for="trainers4">Mohamed Ali Thaier</label>
  </div>
  <div class="col-md-6 checkbox form-control" cssstyle="float:right">
    <input id="trainers5" name="trainers" type="checkbox" value="21" checked="checked">
    <label for="trainers5">Echrak Saidani</label>
  </div>
  <div class="col-md-6 checkbox form-control" cssstyle="float:right">
    <input id="trainers6" name="trainers" type="checkbox" value="25">
    <label for="trainers6">Marwen Chatti</label>
  </div><input type="hidden" name="_trainers" value="on"> </div>

我真的很喜欢它们现在的外观，但我需要它们显示的方式是每行一对。

我还需要将结果放在表格中，因为我将有一个基于 js 的搜索过滤器，该过滤器仅适用于表格

【问题讨论】：

标签： html spring jsp checkbox css-tables

【解决方案1】：

我找到了一个临时解决方案，它将项目列表 ${trainersList} 拆分为控制器中的两个列表，并将它们作为单独的属性传递。控制器中的代码是

model.addAttribute("trainersList",trainersList);

现在变成了

model.addAttribute("trainersList1",trainersList.subList(0,(int)(trainersList.size()/2 +1))); model.addAttribute("trainersList2",trainersList.subList((int)(trainersList.size()/2 +1),trainersList.size()));

在 JSP 页面中我将代码更改为

<div class="form-group">
  <label>Trainers</label><br>
  <div class="col-md-6"style="padding-left:0px;padding-right:6px;">
    <f:checkboxes path="trainers" items="${trainersList1}"
                  element="div class='col-md-6 checkbox form-control' 
                  style='padding-left:6px;'"
                  itemLabel="fullName" itemValue="id" delimiter=""/>
  </div>
  <div class="col-md-6"style="padding-left:6px;padding-right:0px;">
    <f:checkboxes path="trainers" items="${trainersList2}"
                  element="div class='col-md-6 checkbox form-control' 
                  style='padding-right:6px;'"
                  itemLabel="fullName" itemValue="id" delimiter=""/>
  </div>
</div>

Current Result Screenshot

我觉得这不是最好的解决方案，如果有更好的解决方案，请与我分享

【讨论】：