jueves, 24 de octubre de 2019

Cargar datos en una lista desplegable

Supongamos que queremos agregar un registro a una tabla que se relaciona mediante una clave foránea con otra, solo requiere que se le ingrese el código o id, pero colocar ello en una caja de texto es incómodo, lo ideal sería desplegar en una lista desplegable vertical los registros de la tabla cuyo identificador o código queremos mostrar. Ilustremos ello con un ejemplo:

Sin lista desplegable Con lista desplegable

Agregar datos







Agregar datos








Trabajaremos con las siguientes tablas:


Además, le vamos a crear una vista a la tabla "pagos" (para saber como crear este código paso a paso has clic aquí)

Si deseas ver la implementación para visualizar la tabla "pagos" en un JSP (has clic aquí)

Primero vamos a crear una función en el "DaoInquilinos" (clic aquí para ver como realizar el DAO):
  1. package dao;
  2. import java.util.List;
  3. import dto.Inquilinos;
  4. public interface DaoInquilinos {
  5. public List <Inquilinos> inquilinosSel();
  6. public Inquilinos inquilinosGet(Integer id);
  7. public String inquilinosIns(Inquilinos inquilino);
  8. public String inquilinosUpd(Inquilinos inquilino);
  9. public String inquilinosDel(List<Integer> ids);
  10. public List<Object[]> inquilinosCbo();
  11. public String getMessage();
  12. }

Y la implementación para la función "inquilinosCbo"sería en el "DaoInquilinosImpl.java" (clic aquí para ver la implementación completa):
 
    @Override
    public List<Object[]> inquilinosCbo() {
        List<Object[]> list = null;
        StringBuilder sql = new StringBuilder();
        sql.append("SELECT ")
                .append("idinquilinos,")
                .append("dni,")
                .append("nombres,")
                .append("paterno,")
                .append("materno")
                .append(" FROM inquilinos");
        try (Connection cn = conectaDb.conexionDB()) {
            PreparedStatement ps = cn.prepareStatement(sql.toString());
            ResultSet rs = ps.executeQuery();
            list = new ArrayList<>();
            while (rs.next()) {
                Object[] inquilino = new Object[5];                
                inquilino[0]=rs.getInt(1);
                inquilino[1]=rs.getString(2);
                inquilino[2]=rs.getString(3);
                inquilino[3]=rs.getString(4);
                inquilino[4]=rs.getString(5);
                list.add(inquilino);
            }
        } catch (SQLException e) {
            mensaje = e.getMessage();
        }
        return list;
    }
 


En "PagosValidator" agregar una función llamada "pagosCbo" (has clic para ver el Validator original)
 
    public void pagosCbo() {
        List<Object[]> inquilinos = daoInquilinos.inquilinosCbo();
        request.setAttribute("inquilinos", inquilinos);
    }
 


Modificar el Servlet agregando una nueva funcionalidad (has clic para ver el Servlet original):
 
                case "CBO":
                validator.pagosCbo();
                target = request.getParameter("target") + ".jsp";
                break;
 

Crear un botón o enlace que llame a una función de JS que llamaremos: "pagosIns();"

 
    <a href="#" onclick="pagosIns();">
        Agregar pago
    </a>
 

El código JavaScript sería:
 
   function pagosIns() {
       window.location = "Pagos?accion=CBO&target=pagosIns";
   }
 

Nuestro "target" o lugar a donde apuntamos es "pagosIns" que en el Servlet es aumentado con la extensión ".jsp", por lo que requerimos crear un JSP que se llame "pagosIns.jsp", que sería el siguiente:
  1. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  2. <%@page contentType="text/html" pageEncoding="UTF-8"%>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Agregar un pago</title>
  8. </head>
  9. <body>
  10. <a href="pagos.jsp">Regresar</a><br/>
  11. <h1>Agregar pago</h1>
  12. <form action="Pagos" method="post" style="margin: auto; display: table">
  13. <input type="hidden" name="accion" value="INS"/>
  14. <fieldset>
  15. <legend>Agregar datos</legend>
  16. <br/>
  17. <label>Seleccione el inquilino</label> 
  18. <select name="inquilino">
  19. <c:forEach var="i" items="${inquilinos}">
  20. <option value="${i[0]}">${i[1]} - ${i[2]} ${i[3]} ${i[4]}</option>
  21. </c:forEach>
  22. </select>
  23. <br/><br/>
  24. <label>Ingrese el monto</label> 
  25. <input type="number" name="monto" style="width: 400px" min="0.01" step="0.01"/>
  26. <br/>
  27. <br/><p style="text-align: center;">
  28. <button type="submit">Agregar</button>
  29. </p>
  30. </fieldset>
  31. </form>
  32. <c:if test="${message != null}">
  33. <div>${message}</div>
  34. </c:if>
  35. </body>
  36. </html>

Tendríamos algo similar a:
Agregar datos
 

 


Estructura

1 comentario:

  1. Hola, una consulta. Existe algún lugar donde se pueda bajar el ejemplo completo , como se ve en la imagen de ESTRUCTURA. Desde ya muchas gracias!

    ResponderEliminar