Lo que se quiere hacer en este ejemplo es seleccionar los filtros y dar en "buscar" para que se carge la grilla con Ajax usando DWR
Si no has visto aún cómo configurar DWR, sugiero revisar el post anterior Integración DWR 1.0 con Spring. En ese post vimos los métodos "removeAllOptions" y "addOptions" que interactuaban con los combos, esta vez utilizaremos los métodos "removeAllRows" y "addRows".
En el ejemplo tenemos un combo de "Fuerza de venta" que va a cargar un grid de "políticas".
En el evento onchange del combobox invocamos la función "cargarPoliticas()"
Si estás usando DWR 1.0 tu clase dwr será DWRUtil, si estás usando la 2.0 tu clase será dwr.util
Script:
Mensaje de espera :
Aquí les paso el código del jsp completo:
Si no has visto aún cómo configurar DWR, sugiero revisar el post anterior Integración DWR 1.0 con Spring. En ese post vimos los métodos "removeAllOptions" y "addOptions" que interactuaban con los combos, esta vez utilizaremos los métodos "removeAllRows" y "addRows".
En el ejemplo tenemos un combo de "Fuerza de venta" que va a cargar un grid de "políticas".
En el evento onchange del combobox invocamos la función "cargarPoliticas()"
Si estás usando DWR 1.0 tu clase dwr será DWRUtil, si estás usando la 2.0 tu clase será dwr.util
Script:
<script type='text/javascript' src='/app/dwr/interface/PoliticManager.js'></script>
<script type="text/javascript">
function cargarPoliticas() {
// muestra el mensaje de espera
DWRUtil.useLoadingMessage('Loading ...');
// obtenemos el valor del combo seleccionado
var coFuerzaDeVenta = DWRUtil.getValue('coFuerzaDeVenta');
// obtenemos la lista de politicas a través de un manager
PoliticManager.getPoliticas(coFuerzaDeVenta ,function(data) {
// Borramos el grid, en este caso el id del tbody es "politicas"
DWRUtil.removeAllRows("politicas");
// Agregamos filas con los datos obtenidos del manager
DWRUtil.addRows("politicas",data, cellFuncs, { escapeHtml:false });
});
// Declaramos las columnas :
// La primera comlumna tiene un hipervínculo que llevará
// a otra página con el id de la política seleccionada
var cellFuncs = [
function(data) { return "<a href='politicForm.html?politicId=" + data.coPolitic + "'>" + data.dePolitic + "</a>"; },
function(data) { return data.coLineaFuerzaDeVenta;}
];
}
</script>
Mensaje de espera :
Aquí les paso el código del jsp completo:
<%@ include file="/common/taglibs.jsp"%>
<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html; charset=utf-8" %>
<head>
<title><fmt:message key="roleList.title"/></title>
<content tag="heading"><fmt:message key="politic.heading"/></content>
</head>
<form:form commandName="command" >
<c:set var="buttons">
<input type="button" style="margin-right: 5px"
onclick="location.href='<c:url value="/politicForm.html"/>'"
value="<fmt:message key="button.add"/>"/>
<input type="button" onclick="location.href='prototipoPseudocodigo.htm'"
value="<fmt:message key="button.done"/>"/>
</c:set>
<div>
<ul>
<li>
<div><bscweb:label key="label.salesForce" styleClass="desc" />
<form:select path="coFuerzaDeVenta" id="coFuerzaDeVenta" cssClass="text medium" onchange="cargarPoliticas()">
<form:options items="${fuerzasDeVenta}" itemValue="coSalesForceConceptType" itemLabel="coSalesForceConceptCode"/>
</form:select></div>
</li>
</ul>
</div>
<table class="table" width="200" border="1">
<thead>
<tr>
<th scope="col">Descripción</th>
<th scope="col">Linea Fuerza de Venta</th>
</tr>
</thead>
<tbody id="politicas">
</tbody>
</table>
<c:out value="${buttons}" escapeXml="false" />
</form:form>
<script type='text/javascript' src='/app/dwr/interface/PoliticManager.js'></script>
<script type="text/javascript">
function cargarPoliticas() {
DWRUtil.useLoadingMessage('Loading ...');
var coFuerzaDeVenta = DWRUtil.getValue('coFuerzaDeVenta');
PoliticManager.getPoliticas(coFuerzaDeVenta ,function(data) {
DWRUtil.removeAllRows("politicas");
DWRUtil.addRows("politicas",data, cellFuncs, { escapeHtml:false });
});
var cellFuncs = [
function(data) { return "<a href='politicForm.html?politicId=" + data.coPolitic + "'>" + data.dePolitic + "</a>"; },
function(data) { return data.coLineaFuerzaDeVenta;}
];
}
</script>
Comentarios