Miss Zhu 2022-02-13 08:39:10 阅读数:538
Modify the function , You need to click the selected element , Then click the Modify button , Go to modify page , The modification page should display all the data of the element to be modified , Please see the following two pictures for details , Pay attention to digital process :
The idea is to select the row , Get the content of the first child element , namely id( You can also use data-id In the form of , different approaches but equally satisfactory results ). Revise the JS Code :
var selectedId = -1;// The default is -1, If not selected , Then for -1
$("#data .stu").click(function() {
$("#data .stu").removeClass("selected")
$(this).addClass("selected");
selectedId = $(this).children().eq(0).text();
})
Add a... To the Modify button id:
<button type="button" class="btn btn-primary" id="showUpdate"> modify </button>
When you click the Modify button , First judge whether to select the row , If no line is selected , Pop up a warning box to prompt , Otherwise, report to the background stu Path send request , carry type=showUpdate and id= Parameters with specific values .
$("#showUpdate").click(function() {
if (selectedId > -1) {
location.href = "stu?type=showUpdate&id="+selectedId;
} else {
alert(" Please select a piece of data ");
}
})
Background controller StudentController.java Of doGet In the method , Add one more else if:
else if (type.equals("showUpdate")) {
showUpdate(request, response);
}
Corresponding showUpdate Method , adopt request.getParameter(“id”) get HTTP Requested parameters , And then call dao Layer of search(int id) Method , That is, from the database according to id Find out a student object . Add the object to request Scope , Forwarding to update.jsp page .
public void showUpdate(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int id = Integer.parseInt(request.getParameter("id"));
StudentDao stuDao = new StudentDao();
Student stu = stuDao.search(id);
request.setAttribute("stu", stu);
request.getRequestDispatcher("WEB-INF/update.jsp").forward(request, response);
}
StudentDao.java You need to define a search(int id) Method , Method overloading technology is used here :
public Student search(int id) {
Student stu = new Student();
// jdbc Seven steps
// 1. Will database jar Package copy to lib Under the folder
try {
// 2. The load driver
Class.forName("com.mysql.jdbc.Driver");
// 3. Establishing a connection
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/school_sk1", "root", "123456");
// 4. establish SQL actuator
Statement stat = conn.createStatement();
// 5. perform sql sentence
ResultSet rs = stat.executeQuery("select * from student where id=" + id);
// 6. Processing results
while (rs.next()) {
stu.setId(rs.getInt("id"));
stu.setName(rs.getString("name"));
stu.setGender(rs.getString("gender"));
stu.setAge(rs.getInt("age"));
}
// 7. Close the connection
conn.close();
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return stu;
}
update.jsp and add.jsp The structure is the same , The difference is for its value Set the default value :
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@page import="entity.Student"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style> #main {
width: 600px; margin: 10px auto; } </style>
</head>
<body>
<%
Student stu = (Student) request.getAttribute("stu");
%>
<div id="main">
<form class="form-horizontal" action="stu">
<input type="hidden" name="type" value="update" />
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label"> name </label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder=" Please enter a name " name="name" value="<%=stu.getName()%>">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label"> Gender </label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder=" Please enter gender " name="gender" value="<%=stu.getGender()%>">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label"> Age </label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder=" Please enter age " name="age" value="<%=stu.getAge()%>">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary"> preservation </button>
</div>
</div>
</form>
</div>
</body>
</html>
above , Completed the second step of modifying the function , That is, the picture of this article 2 The effect of —— Show modification page .
copyright:author[Miss Zhu],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/02/202202130839080921.html