时间戳

首页 > 解决方案 > Thymeleaf 表单输入的 Java 列表

java - Thymeleaf 表单输入的 Java 列表

问题描述

我有一个来自存储过程查询的Java列表，我想做的是将列表的值传递给百里香形式的输入，但我想知道如何在控制器中传递该列表并在视图中对其进行迭代，它是一个 Boostrap 模态，如果我可以使用 Ajax 或 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]

控制器

@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>

标签： javaajaxspringthymeleaf

解决方案

当然，这是一个如何实现这一目标的示例。首先，您的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;
        }
    }

您的控制器方法将调整为：

@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 个对象添加到方法中的type列表中getTypePlan，就像在您的示例中一样。如果您要从数据库中提取更多结果并将其添加到type列表中，那么您将获得多个呈现的 HTML 表单，这可能不是预期的行为。

因此，如果您要期待多个结果（您可能应该期待），那么您应该考虑组织这个有点不同，但我会留给您，因为您希望如何拥有它取决于您呈现。这个例子应该可以帮助你走上正轨。

推荐阅读