E' questa una delle più classiche attività che capita fare sviluppando applicativi (in special modo gestionali).
Visualizziamo dei dati da una lista e li esponiamo a video , l'utente può quindi selezionarle tutte o nessuna o quelle che vuole lui e premendo il tasto invio dobbiamo inviare i dati, distinguendo tra selezionati e no.
Vediamo un immagine di esempio:
Vediamo come realizzarlo utilizzando jsp e jstl.
Lato javascript al momento dell'invio del form parte un evento che per ogni check selezionato va a settare un valore "ok" in un campo hidden.
Questo perchè lato server come parameter passeranno soltanto le check selezionate e a noi serve sapere per ogni elemento sia se è stato selezionato che se non lo è stato.
Ecco la jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form name="myForm" action="VisualizzaRisultati" method="post">
<table border="1">
<tr>
<td><input type="checkbox" name="chkAll" onclick="javascript:checkDececkAll()"/></td>
<td>Nome</td>
<td>Luogo</td>
<td>Status</td>
<td>Data</td>
</tr>
<c:forEach var="item" items="${lista}">
<tr>
<td>
<input type="checkBox" name="idValue" id="idValue" value="ko" ${item.checked}>
<input type="hidden" name="txtValore" value=""/>
</td>
<td>${item.name}</td>
<td>${item.location}</td>
<td>${item.status}</td>
<td>${item.dataCreation}</td>
</tr>
</c:forEach>
</table>
<br>
<input type="button" onclick="javascript:invio()" value="Prova"/>
</form>
</body>
<script language="javascript">
var checked=false;
function checkDececkAll()
{
var field=document.myForm.idValue;
if(checked){
// uncheck
for (var i = 0; i < field.length; i++){
field[i].checked = false ;
}
checked=false;
}
else
{
//check
for (var i = 0; i < field.length; i++){
field[i].checked = true ;
}
checked=true;
}
}
function invio(){
var field=document.myForm.idValue;
var txt=document.myForm.txtValore;
for(var i=0;i<field.length;i++){
if(field[i].checked){
field[i].value="ok";
txt[i].value="ok";
}
else
{
field[i].value="ko";
txt[i].value="ko";
}
}
document.myForm.submit();
}
</script>
</html>
Per gestire invece i valori lato server possiamo procedere in questo modo:
List<Item> liste=(List<Item>)request.getSession().getAttribute("lista");
String[] parametri=request.getParameterValues("txtValore");
for(int i=0;i<parametri.length;i++){
liste.get(i).setSelezionato((parametri[i].equals("ok")?true:false));
liste.get(i).setChecked(parametri[i].equals("ok")?"checked":"");
}
request.getSession().setAttribute("lista", liste);
RequestDispatcher rd=request.getRequestDispatcher("jsp/listaChkBox.jsp");
rd.forward(request, response);
Visualizziamo dei dati da una lista e li esponiamo a video , l'utente può quindi selezionarle tutte o nessuna o quelle che vuole lui e premendo il tasto invio dobbiamo inviare i dati, distinguendo tra selezionati e no.
Vediamo un immagine di esempio:
Lato javascript al momento dell'invio del form parte un evento che per ogni check selezionato va a settare un valore "ok" in un campo hidden.
Questo perchè lato server come parameter passeranno soltanto le check selezionate e a noi serve sapere per ogni elemento sia se è stato selezionato che se non lo è stato.
Ecco la jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form name="myForm" action="VisualizzaRisultati" method="post">
<table border="1">
<tr>
<td><input type="checkbox" name="chkAll" onclick="javascript:checkDececkAll()"/></td>
<td>Nome</td>
<td>Luogo</td>
<td>Status</td>
<td>Data</td>
</tr>
<c:forEach var="item" items="${lista}">
<tr>
<td>
<input type="checkBox" name="idValue" id="idValue" value="ko" ${item.checked}>
<input type="hidden" name="txtValore" value=""/>
</td>
<td>${item.name}</td>
<td>${item.location}</td>
<td>${item.status}</td>
<td>${item.dataCreation}</td>
</tr>
</c:forEach>
</table>
<br>
<input type="button" onclick="javascript:invio()" value="Prova"/>
</form>
</body>
<script language="javascript">
var checked=false;
function checkDececkAll()
{
var field=document.myForm.idValue;
if(checked){
// uncheck
for (var i = 0; i < field.length; i++){
field[i].checked = false ;
}
checked=false;
}
else
{
//check
for (var i = 0; i < field.length; i++){
field[i].checked = true ;
}
checked=true;
}
}
function invio(){
var field=document.myForm.idValue;
var txt=document.myForm.txtValore;
for(var i=0;i<field.length;i++){
if(field[i].checked){
field[i].value="ok";
txt[i].value="ok";
}
else
{
field[i].value="ko";
txt[i].value="ko";
}
}
document.myForm.submit();
}
</script>
</html>
Per gestire invece i valori lato server possiamo procedere in questo modo:
List<Item> liste=(List<Item>)request.getSession().getAttribute("lista");
String[] parametri=request.getParameterValues("txtValore");
for(int i=0;i<parametri.length;i++){
liste.get(i).setSelezionato((parametri[i].equals("ok")?true:false));
liste.get(i).setChecked(parametri[i].equals("ok")?"checked":"");
}
request.getSession().setAttribute("lista", liste);
RequestDispatcher rd=request.getRequestDispatcher("jsp/listaChkBox.jsp");
rd.forward(request, response);
Nessun commento:
Posta un commento