Question

我一直试图使用bootstrap将每个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>

这是我得到的结果

Current result screenshot

这是生成的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的搜索过滤器，它只适用于表

Answer 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

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

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

1 个答案: