我正在开发一个带有Spring mvc和jsp的内部网门户。 问题：在 jsp 页面中，我列出了对象。单击一个按钮，我想打开一个模态窗口(引导程序)，其中包含该对象的修改形式及其旧信息。但我无法理解逻辑/技术 来实施以实现这一目标。我花了很多时间在互联网上搜索，但我没有找到任何有用的解决方案。有人可以给我一个解决这个问题的想法吗？
如果我处于这种情况(曾经)，我会做这样的事情：
1-首先创建一个bootstrap模式，其中包含已经存在且要编辑的值。假设您要编辑三件事，即名字、中间名和姓氏。因此，创建一个具有三个inputs的模态，该模态应在文本框中显示这些值，并创建相似数量的输入字段但隐藏。所以总共 6 个(3 个可见 - 3 个隐藏 - 当然都有不同的id。
2-现在，当您单击该按钮时，假设Edit按钮，show此modal，并将值设置为存在的值(可以使用jQuery来设置输入的值)。因此，隐藏的 fname 输入和可见的 fname 输入应设置为应编辑的名字。中间名和姓氏也是如此。
3-现在您可以修改模态中的值。因此，现在显示的输入的值将更改，而隐藏的输入仍将携带较旧的值。
4-getParameterServlet中的所有这6个值，并使用隐藏的值将它们更新为新值。始终确保提供的值不会更改(主键)，以帮助您进行标识和更新。
希望能描绘出一幅图画。如果您有任何疑问，请告诉我。
<%@ taglib uri="http://www.springframework.org/security/tags"
prefix="security"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec"
uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from iamsrinu.com/bluemoon2.1/calendar.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 01 Aug 2017 10:53:49 GMT -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="resources/template/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<link href="resources/template/css/main.css" rel="stylesheet">
<link href="resources/template/css/color-picker/minicolors.css"
rel="stylesheet">
<link href="resources/template/fonts/icomoon/icomoon.css"
rel="stylesheet">
<link href="resources/template/css/wysiwyg-editor/editor.css"
rel="stylesheet">
<link href="resources/template/css/datatables/fixedHeader.bs.css"
rel="stylesheet">
<link href="resources/template/css/datatables/dataTables.bs.min.css"
rel="stylesheet">
<link rel="stylesheet"
href="resources/template/css/datatables/autoFill.bs.min.css">
<%@include file="static/header.jsp"%>
</head>
<body>
<%@include file="static/top-header.jsp"%>
<div class="container-fluid">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@include file="static/nav.jsp"%>
<div class="dashboard-wrapper">
<div class="top-bar clearfix">
<div class="row gutter">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="page-title">
<h4>Gestion des Equipes</h4>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
</div>
</div>
<div class="main-container">
<div class="row gutter">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-blue">
<div class="panel-heading">
<h4>Liste des Equipes</h4>
</div>
<div id="menuBarDiv" style="margin-left: 500px;">
<button class="btn btn-primary">
<i class="icon-printer2"></i> Imprimer
</button>
<button class="btn btn-primary" id="openAddModalBtn">
<i class="icon-users3"></i> Nouvelle Equipe
</button>
</div>
<div class="bar bar-header"></div>
<div class="panel-body">
<div class="table-responsive">
<table id="tableTeams"
class="table table-striped table-bordered no-margin">
<thead>
<tr>
<th class="text-center">Nom</th>
<th class="text-center">Validateur</th>
<th class="text-center">Couleur</th>
<th class="text-center">Statut</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<c:forEach var="t" items="${teams}">
<tr>
<td class="text-center">${t.name }</td>
<td class="text-center">${t.validateur.firstName}
${t.validateur.lastName}</td>
<td class="text-center"><i class="fa fa-square"
aria-hidden="true"
style="background-color:<c:out value="${t.color}"></c:out>; width= "></i></td>
<td class="text-center"><c:choose>
<c:when test="${t.isActif == true }">
<i class="icon-lens" style="color: #077a07;"></i>
</c:when>
<c:when test="${t.isActif == false }">
<i class="icon-lens" style="color: #c20b0b;"></i>
</c:when>
</c:choose></td>
<td class="text-center"><a
href="#update-team-modal_${t.id}" role="button"
class="btn btn-xs btn-transparent btn-info"
data-toggle="modal"><i
class="glyphicon glyphicon-edit" data-placement="bottom"
title="Editer"></i></a> <a
href="detailsTeam?id=<c:out value="${t.id}"></c:out>">
<button class="btn btn-xs btn-transparent btn-info">
<i class="glyphicon glyphicon-triangle-bottom"
data-toggle="tooltip" data-placement="bottom"
title="Voir Détails"></i>
</button>
</a><a
href="desactivateTeam?id=<c:out value="${t.id}"></c:out>">
<button class="btn btn-xs btn-transparent btn-danger ">
<i class="glyphicon glyphicon glyphicon-off"
data-toggle="tooltip" data-placement="bottom"
title="Désactiver"></i>
</button>
</a></td>
</tr>
<div class="modal fade" id="update-team-modal_${t.id}"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5>Modification Equipe</h5>
</div>
<div class="modal-body">
<form id="updateTeamForm" enctype="multipart/form-data"
method="POST" action="updateTeam">
<div class="form-group">
<input id="id" type="hidden" name="id"
class="form-control" value="${t.id}">
</div>
<label for="name">Nom </label><span class="req">*
</span>
<div class="form-group">
<div class="input-group">
<input type="text" name="name" id="name"
class="form-control-large" value="${t.name }"
required="required" />
</div>
</div>
<label for="color">Couleur</label><span class="req">*
</span>
<div class="form-group">
<input type="text" id="color" name="color"
class="form-control demo" style="width: 200px;"
data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|#0ff"
value="${t.color}" required="required">
</div>
<div class="form-group">
<label for="validateur">Validateur</label> <span
class="req">* </span> <select
class="form-control-small" id="validateur"
name="validateur" required="required">
<option value="${t.validateur.matricule}">${t.validateur.firstName }
${t.validateur.lastName }</option>
<c:forEach var="u" items="${users}">
<option value="${u.matricule}">${u.firstName}
${u.lastName}</option>
</c:forEach>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<a><button type="submit" class="btn btn-info btn-ok" data-dismiss="modal">
<i class="glyphicon glyphicon-ok" id="update"></i>Editer
</button></a>
<button type="button" class="btn btn-primary"
data-dismiss="modal">
<i class="glyphicon glyphicon-remove"></i>Annuler
</button>
</div>
</div>
</div>
</div>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="add-team-modal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5>Nouvelle Equipe</h5>
</div>
<div class="modal-body">
<form id="addTeamForm" enctype="multipart/form-data" method="POST"
action="addTeam">
<label for="name">Nom </label><span class="req">* </span>
<div class="form-group">
<div class="input-group">
<input type="text" name="name" id="name"
class="form-control-large" required="required" />
</div>
</div>
<label for="color">Couleur</label><span class="req">* </span>
<div class="form-group">
<input type="text" id="color" name="color"
class="form-control demo" style="width: 200px;"
data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|#0ff"
required="required">
</div>
<div class="form-group">
<label for="validateur">Validateur</label> <span class="req">*
</span> <select class="form-control-small" id="validateur"
name="validateur" required="required">
<option value="">-- Sélectionner un validateur --</option>
<c:forEach var="u" items="${users}">
<option value="${u.matricule}">${u.firstName}
${u.lastName}</option>
</c:forEach>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<a><button type="submit" id="save" class="btn btn-info btn-ok">
<i class="glyphicon glyphicon-ok"></i>Créer
</button></a>
<button type="button" class="btn btn-primary" id="cancelAdd"
data-dismiss="modal">
<i class="glyphicon glyphicon-remove"></i>Annuler
</button>
</div>
</div>
</div>
</div>
<%@include file="static/footer.jsp"%>
<script src="resources/template/js/jquery.js"></script>
<script src="resources/template/js/bootstrap.min.js"></script>
<script src="resources/template/js/scrollup/jquery.scrollUp.js"></script>
<script src="resources/template/js/sparkline/sparkline.js"></script>
<script src="resources/template/js/sparkline/custom-sparkline.js"></script>
<script src="resources/template/js/databars/jquery.databar.js"></script>
<script src="resources/template/js/databars/custom-databars.js"></script>
<script src="resources/template/js/datatables/dataTables.min.js"></script>
<script
src="resources/template/js/datatables/dataTables.bootstrap.min.js"></script>
<script src="resources/template/js/datatables/autoFill.min.js"></script>
<script
src="resources/template/js/datatables/autoFill.bootstrap.min.js"></script>
<script src="resources/template/js/datatables/fixedHeader.min.js"></script>
<script src="resources/template/js/datatables/custom-datatables.js"></script>
<script src="resources/template/js/fileinput.min.js"></script>
<script src="resources/template/js/custom.js"></script>
<script src="resources/template/js/fileinput/fr.js"></script>
<script src="resources/template/js/jquery.form.js"></script>
<script src="resources/template/js/color_picker/jscolor.js"></script>
<script src="resources/template/js/color-picker/minicolors.min.js"></script>
<script src="resources/template/js/color-picker/custom-colorpicker.js"></script>
<script>
$("#filtre").on("change", function() {
var selected = this.value;
});
$('#openAddModalBtn').on('click', function() {
$('#add-team-modal').modal('toggle');
});
$('#cancelAdd').on('click', function() {
$('#add-team-modal').find("input").val('').end();
document.getElementById('validateur').selectedIndex = 0;
});
$('#save').on('click', function() {
$('#addTeamForm').ajaxForm({
success : function(data) {
var res = JSON.parse(data);
if (res.code == 1) {
$('#add-team-modal').modal('hide');
location.reload();
$('#add-team-modal').find("input").val('').end();
}
else {
toastr["error"](res.message);
}
},
error : function(error) {
console.log(error);
}
}).submit();
});
$('#update').on('click', function() {
$('#updateTeamForm').ajaxForm({
success : function(data) {
var res = JSON.parse(data);
if (res.code == 1) {
$('#add-team-modal').modal('hide');
location.reload();
}
else {
toastr["error"](res.message);
}
},
error : function(error) {
console.log(error);
}
}).submit();
});
$('#tableTeams').DataTable({
"language" : {
"url" : "resources/template/lang/French.json"
}
});
</script>
</body>
</html>在此处输入图像描述
<%@ taglib uri="http://www.springframework.org/security/tags"
prefix="security"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec"
uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from iamsrinu.com/bluemoon2.1/calendar.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 01 Aug 2017 10:53:49 GMT -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="resources/template/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<link href="resources/template/css/main.css" rel="stylesheet">
<link href="resources/template/css/color-picker/minicolors.css"
rel="stylesheet">
<link href="resources/template/fonts/icomoon/icomoon.css"
rel="stylesheet">
<link href="resources/template/css/wysiwyg-editor/editor.css"
rel="stylesheet">
<link href="resources/template/css/datatables/fixedHeader.bs.css"
rel="stylesheet">
<link href="resources/template/css/datatables/dataTables.bs.min.css"
rel="stylesheet">
<link rel="stylesheet"
href="resources/template/css/datatables/autoFill.bs.min.css">
<%@include file="static/header.jsp"%>
</head>
<body>
<%@include file="static/top-header.jsp"%>
<div class="container-fluid">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@include file="static/nav.jsp"%>
<div class="dashboard-wrapper">
<div class="top-bar clearfix">
<div class="row gutter">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="page-title">
<h4>Gestion des Equipes</h4>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
</div>
</div>
<div class="main-container">
<div class="row gutter">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-blue">
<div class="panel-heading">
<h4>Liste des Equipes</h4>
</div>
<div id="menuBarDiv" style="margin-left: 500px;">
<button class="btn btn-primary">
<i class="icon-printer2"></i> Imprimer
</button>
<button class="btn btn-primary" id="openAddModalBtn">
<i class="icon-users3"></i> Nouvelle Equipe
</button>
</div>
<div class="bar bar-header"></div>
<div class="panel-body">
<div class="table-responsive">
<table id="tableTeams"
class="table table-striped table-bordered no-margin">
<thead>
<tr>
<th class="text-center">Nom</th>
<th class="text-center">Validateur</th>
<th class="text-center">Couleur</th>
<th class="text-center">Statut</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<c:forEach var="t" items="${teams}">
<tr>
<td class="text-center">${t.name }</td>
<td class="text-center">${t.validateur.firstName}
${t.validateur.lastName}</td>
<td class="text-center"><i class="fa fa-square"
aria-hidden="true"
style="background-color:<c:out value="${t.color}"></c:out>; width= "></i></td>
<td class="text-center"><c:choose>
<c:when test="${t.isActif == true }">
<i class="icon-lens" style="color: #077a07;"></i>
</c:when>
<c:when test="${t.isActif == false }">
<i class="icon-lens" style="color: #c20b0b;"></i>
</c:when>
</c:choose></td>
<td class="text-center"><a
href="#update-team-modal_${t.id}" role="button"
class="btn btn-xs btn-transparent btn-info"
data-toggle="modal"><i
class="glyphicon glyphicon-edit" data-placement="bottom"
title="Editer"></i></a> <a
href="detailsTeam?id=<c:out value="${t.id}"></c:out>">
<button class="btn btn-xs btn-transparent btn-info">
<i class="glyphicon glyphicon-triangle-bottom"
data-toggle="tooltip" data-placement="bottom"
title="Voir Détails"></i>
</button>
</a><a
href="desactivateTeam?id=<c:out value="${t.id}"></c:out>">
<button class="btn btn-xs btn-transparent btn-danger ">
<i class="glyphicon glyphicon glyphicon-off"
data-toggle="tooltip" data-placement="bottom"
title="Désactiver"></i>
</button>
</a></td>
</tr>
<div class="modal fade" id="update-team-modal_${t.id}"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5>Modification Equipe</h5>
</div>
<div class="modal-body">
<form id="updateTeamForm" enctype="multipart/form-data"
method="POST" action="updateTeam">
<div class="form-group">
<input id="id" type="hidden" name="id"
class="form-control" value="${t.id}">
</div>
<label for="name">Nom </label><span class="req">*
</span>
<div class="form-group">
<div class="input-group">
<input type="text" name="name" id="name"
class="form-control-large" value="${t.name }"
required="required" />
</div>
</div>
<label for="color">Couleur</label><span class="req">*
</span>
<div class="form-group">
<input type="text" id="color" name="color"
class="form-control demo" style="width: 200px;"
data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|#0ff"
value="${t.color}" required="required">
</div>
<div class="form-group">
<label for="validateur">Validateur</label> <span
class="req">* </span> <select
class="form-control-small" id="validateur"
name="validateur" required="required">
<option value="${t.validateur.matricule}">${t.validateur.firstName }
${t.validateur.lastName }</option>
<c:forEach var="u" items="${users}">
<option value="${u.matricule}">${u.firstName}
${u.lastName}</option>
</c:forEach>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<a><button type="submit" class="btn btn-info btn-ok" data-dismiss="modal" id="update">
<i class="glyphicon glyphicon-ok" ></i>Editer
</button></a>
<button type="button" class="btn btn-primary"
data-dismiss="modal">
<i class="glyphicon glyphicon-remove"></i>Annuler
</button>
</div>
</div>
</div>
</div>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="add-team-modal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5>Nouvelle Equipe</h5>
</div>
<div class="modal-body">
<form id="addTeamForm" enctype="multipart/form-data" method="POST"
action="addTeam">
<label for="name">Nom </label><span class="req">* </span>
<div class="form-group">
<div class="input-group">
<input type="text" name="name" id="name"
class="form-control-large" required="required" />
</div>
</div>
<label for="color">Couleur</label><span class="req">* </span>
<div class="form-group">
<input type="text" id="color" name="color"
class="form-control demo" style="width: 200px;"
data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|#0ff"
required="required">
</div>
<div class="form-group">
<label for="validateur">Validateur</label> <span class="req">*
</span> <select class="form-control-small" id="validateur"
name="validateur" required="required">
<option value="">-- Sélectionner un validateur --</option>
<c:forEach var="u" items="${users}">
<option value="${u.matricule}">${u.firstName}
${u.lastName}</option>
</c:forEach>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<a><button type="submit" id="save" class="btn btn-info btn-ok">
<i class="glyphicon glyphicon-ok"></i>Créer
</button></a>
<button type="button" class="btn btn-primary" id="cancelAdd"
data-dismiss="modal">
<i class="glyphicon glyphicon-remove"></i>Annuler
</button>
</div>
</div>
</div>
</div>
<%@include file="static/footer.jsp"%>
<script src="resources/template/js/jquery.js"></script>
<script src="resources/template/js/bootstrap.min.js"></script>
<script src="resources/template/js/scrollup/jquery.scrollUp.js"></script>
<script src="resources/template/js/sparkline/sparkline.js"></script>
<script src="resources/template/js/sparkline/custom-sparkline.js"></script>
<script src="resources/template/js/databars/jquery.databar.js"></script>
<script src="resources/template/js/databars/custom-databars.js"></script>
<script src="resources/template/js/datatables/dataTables.min.js"></script>
<script
src="resources/template/js/datatables/dataTables.bootstrap.min.js"></script>
<script src="resources/template/js/datatables/autoFill.min.js"></script>
<script
src="resources/template/js/datatables/autoFill.bootstrap.min.js"></script>
<script src="resources/template/js/datatables/fixedHeader.min.js"></script>
<script src="resources/template/js/datatables/custom-datatables.js"></script>
<script src="resources/template/js/fileinput.min.js"></script>
<script src="resources/template/js/custom.js"></script>
<script src="resources/template/js/fileinput/fr.js"></script>
<script src="resources/template/js/jquery.form.js"></script>
<script src="resources/template/js/color_picker/jscolor.js"></script>
<script src="resources/template/js/color-picker/minicolors.min.js"></script>
<script src="resources/template/js/color-picker/custom-colorpicker.js"></script>
<script>
$("#filtre").on("change", function() {
var selected = this.value;
});
$('#openAddModalBtn').on('click', function() {
$('#add-team-modal').modal('toggle');
});
$('#cancelAdd').on('click', function() {
$('#add-team-modal').find("input").val('').end();
document.getElementById('validateur').selectedIndex = 0;
});
$('#save').on('click', function() {
$('#addTeamForm').ajaxForm({
success : function(data) {
var res = JSON.parse(data);
if (res.code == 1) {
$('#add-team-modal').modal('hide');
location.reload();
$('#add-team-modal').find("input").val('').end();
}
else {
toastr["error"](res.message);
}
},
error : function(error) {
console.log(error);
}
}).submit();
});
$('#update').on('click', function() {
$('#updateTeamForm').ajaxForm({
success : function(data) {
var res = JSON.parse(data);
if (res.code == 1) {
$('#add-team-modal').modal('hide');
location.reload();
}
else {
toastr["error"](res.message);
}
},
error : function(error) {
console.log(error);
}
}).submit();
});
$('#tableTeams').DataTable({
"language" : {
"url" : "resources/template/lang/French.json"
}
});
</script>
</body>
</html>