如何使用Bootstrap和thymeleaf在模态内填充表单中的值?

时间:2018-05-22 09:57:07

标签: javascript java html spring-boot thymeleaf

在我的春季启动项目中,我有一个l1 <- list() # Initialize empty list for (i in 1:nrow(df)){ l1[[i]] <- transform(df[i,]) # Fill list with transformed rows } DF1 <- data.frame(do.call("rbind",l1)) # Bind the transformed rows together 页面,其中包含学生列表。在该页面中,我为每个学生提供了两个选项htmlEdit。当我点击Delete时,我希望在每个学生信息的模态中显示值。但我无法做到这一点。另一个奇怪的事情是每次我点击任何Edit时,表单只会填充列表的第一个成员。也许我将不得不添加一些Edit代码或其他内容。这里是学生列表页面![enter image description here] 1

的屏幕截图

我的JavaScript文件是

html

我的整个<!DOCTYPE html> <html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sf="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Student List</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <script th:if="${existRoll != null}"> $(function () { $('#myModal').modal('show'); }); </script> <body> <div class="container"> <h1 style="text-align:center;">Students List</h1> <table class="table table-striped"> <tr> <th>Id</th> <th>Roll</th> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>Setting</th> </tr> <tr th:each="student : ${studentList}"> <td th:text="${student.id}"></td> <td th:text="${student.roll}"></td> <td th:text="${student.firstName}"></td> <td th:text="${student.lastName}"></td> <td th:text="${student.age}"></td> <td> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit </button> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <!--Form code start from here --> <!-- Form Name --> <legend>Registration Form</legend> <form class="form-horizontal" action="#" th:action="@{/doRegistration}" method="post"> <fieldset> <div class="form-group"> <label class="col-md-4 control-label" for="roll">Roll</label> <div class="col-md-4"> <input id="id" path="id" name="id" type="hidden" placeholder="id" class="form-control input-md" th:value="${student.id}"/> <input id="roll" path="roll" name="roll" type="text" placeholder="Roll" class="form-control input-md" th:value="${student.roll}"/> <span th:if="${existRoll !=null}" style="color:Red;"> Already Exist !</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="firstName">First Name</label> <div class="col-md-4"> <input id="firstName" path="firstName" name="firstName" type="text" placeholder="firstName" class="form-control input-md" th:value="${student.firstName}" /> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="lastName">Last Name </label> <div class="col-md-4"> <input id="lastName" path="lastName" name="lastName" type="text" placeholder="lastName" class="form-control input-md" th:value="${student.lastName}"/> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="age">Age </label> <div class="col-md-4"> <input id="age" path="age" name="age" type="text" placeholder="age" class="form-control input-md" th:value="${student.age}"/> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="pass">Password</label> <div class="col-md-4"> <input id="pass" path="pass" name="pass" type="password" placeholder="password" class="form-control input-md" th:value="${student.pass}"/> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="register"></label> <div class="col-md-4"> <button id="register" name="register" class="btn btn-primary"> Register </button> </div> </div> </fieldset> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <a th:href="@{/deleteStudent/(id=${student.id})}" onclick="return confirm('Are you sure you want to delete this item?');">Delete</a> </td> </tr> </table> </div> </body> </html> 课程是

Controller

1 个答案:

答案 0 :(得分:0)

最后在堆栈上花了1个小时流量我找到了解决方案。我在我的HTML代码中改变了一点

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit </button>

 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" th:attrappend="data-target=${student.id}">Edit </button>

<div class="modal fade" id="myModal" role="dialog">

<div class="modal fade" id="myModal" role="dialog" th:attrappend="id=${student.id}">

现在一切正常!