Java 列表到 Thymeleaf 表单输入

Question

我有一个来自存储过程查询的Java列表，我想做的是将列表的值传递给thymeleaf表单的输入，但我想知道如何传递该列表在 Controller 中并在 View 中迭代它，它是一个 Boostrap Modal，如果我可以使用 Ajax 或 thymeleaf 的 th: 片段来完成它，我希望获得帮助。

模型函数

public List getTypePlan(int id){
        List type = new ArrayList<>();
        try {
            Connection conn = AppConnection.getConnection();
            CallableStatement cstmt = conn.prepareCall("{call SP_LEER_PFI_TIPOS_PLANES(?)}");
            cstmt.setInt(1, id);
            ResultSet results = cstmt.executeQuery();
            while (results.next()) {
                int cod_plan = results.getInt("cod_plan");
                String des_plan = results.getString("des_plan");
                int can_dias_plazo = results.getInt("can_dias_plazo");
                type.add(cod_plan);
                type.add(des_plan);
                type.add(can_dias_plazo);
            }
            conn.close();
        } catch (SQLException ex) {
        }
        return type;
    }

输出示例: [1,General,3]

Controller

@RequestMapping(value="/typePlan/{id}", method = RequestMethod.GET)
    public String typePlan(@PathVariable("id") int id, Model m){
        Users_Access model = new Users_Access();
        m.addAttribute("type", model.getTypePlan(id));
        return "home :: type";
    }
}

Boostrap 模态形式

<div class="modal fade" data-keyboard="false" data-backdrop="static" id="TiposPlanes" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">TIPOS DE PLANES</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
          <div class="modal-bodyh">
            <h6 class="modal-subtitle"><i class="fas fa-pencil-alt"></i>  MODIFICAR TIPOS DE PLANES</h6>
            <h6 class="modal-subtitle">Presione click en el boton Modificar para grabar los cambios</h6>
          </div>
          <div class="modal-form" th:fragment="type">
            <form class="form" th:method="post">
              <div class="form-group">
                <label class="col-form-label">Codigo:</label>
                <input type="text" class="form-control" id="codigo" name="codigo">
              </div>
              <div class="form-group">
                <label class="col-form-label">Descripcion:</label>
                <input type="text" class="form-control" id="descripcion" name="descripcion">
              </div>
              <div class="form-group">
                <label class="col-form-label">Diaz plazo:</label>
                <input type="text" class="form-control" id="dias" name="dias">
              </div>
              <div class="form-group">
                <button type="button" class="btn btn-primary" value="save">Modificar</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancelar</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

当然，这是一个如何实现这一目标的示例。首先，您的 getTypePlan 方法可能看起来像这样(我使用 CustomObject 作为自定义模型对象，因此您必须调整为适合您的名称目的):

    public List<CustomObject> getTypePlan(int id) throws Exception {
        List<CustomObject> type = new ArrayList<>();
        try {
            Connection conn = AppConnection.getConnection();
            CallableStatement cstmt = conn.prepareCall("{call SP_LEER_PFI_TIPOS_PLANES(?)}");
            cstmt.setInt(1, id);
            ResultSet results = cstmt.executeQuery();
            while (results.next()) {
                int cod_plan = results.getInt("cod_plan");
                String des_plan = results.getString("des_plan");
                int can_dias_plazo = results.getInt("can_dias_plazo");

                CustomObject listObject = new CustomObject();
                listObject.setCodPlan(cod_plan);
                listObject.setDesPlan(des_plan);
                listObject.setCanDiasPlazo(can_dias_plazo);

                type.add(listObject);
            }
            conn.close();
        } catch (SQLException ex) {
            ex.printStackTrace();
        }
        return type;
    }

我的例子中的模型类如下所示(我试图使其尽可能接近您的示例):

    public class CustomObject {

        private int codPlan;
        private String desPlan;
        private int canDiasPlazo;


        public int getCodPlan() {
            return codPlan;
        }

        public void setCodPlan(int codPlan) {
            this.codPlan = codPlan;
        }

        public String getDesPlan() {
            return desPlan;
        }

        public void setDesPlan(String desPlan) {
            this.desPlan = desPlan;
        }

        public int getCanDiasPlazo() {
            return canDiasPlazo;
        }

        public void setCanDiasPlazo(int canDiasPlazo) {
            this.canDiasPlazo = canDiasPlazo;
        }
    }

您的 Controller 方法将调整为:

@RequestMapping(value="/typePlan/{id}", method = RequestMethod.GET)
    public String typePlan(@PathVariable("id") int id, Model m){
        Users_Access model = new Users_Access();
        m.addAttribute("type", model.getTypePlan(id));
        return "home";
    }
}

在您看来，可以执行以下操作来呈现 type 的每个对象的值(由您的 getTypePlan 方法返回):

<div class="modal fade" data-keyboard="false" data-backdrop="static" id="TiposPlanes" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">TIPOS DE PLANES</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-body">
                    <h6 class="modal-subtitle"><i class="fas fa-pencil-alt"></i>  MODIFICAR TIPOS DE PLANES</h6>
                    <h6 class="modal-subtitle">Presione click en el boton Modificar para grabar los cambios</h6>
                </div>
                <div class="modal-form">

                    <!-- the customObject in the th:each is the iteratee and type is the list passed into the Model in the controller method -->
                    <form class="form" th:method="post" th:each="customObject : ${type}">
                        <div class="form-group">
                            <label class="col-form-label">Codigo:</label>
                            <input type="text" class="form-control" th:id="${customObject.getCodPlan()}" th:name="${customObject.getCodPlan()}" th:value="${customObject.getCodPlan()}">
                        </div>
                        <div class="form-group">
                            <label class="col-form-label">Descripcion:</label>
                            <input type="text" class="form-control" th:id="${customObject.getDesPlan()}" th:name="${customObject.getDesPlan()}" th:value="${customObject.getDesPlan()}">
                        </div>
                        <div class="form-group">
                            <label class="col-form-label">Diaz plazo:</label>
                            <input type="text" class="form-control" th:id="${customObject.getCanDiasPlazo()}" th:name="${customObject.getCanDiasPlazo()}" th:value="${customObject.getCanDiasPlazo()}">
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary" value="save">Modificar</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Cancelar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

请记住，此示例按预期工作，将 1 个对象添加到 getTypePlan 方法中的 type 列表中，就像您的示例一样。如果您想从数据库中提取更多结果并将其添加到 type 列表中，那么您将获得呈现的多个 HTML 表单，这可能不是预期的行为。

因此，如果您期望获得多个结果(您可能应该期望)，那么您应该考虑将其组织得有点不同，但我将把它留给您，因为这取决于您想要的方式来渲染它。这个例子应该可以帮助您走上正确的道路。