个人中心
gpt4 book ai didi

java - 如何在 Spring + Thymeleaf 上添加弹出窗口

转载 作者：行者123 更新时间：2023-11-30 05:27:52 36 4
gpt4 key购买 nike

对于如何在链接上实现弹出窗口，我确实遇到了一些问题。我目前正在使用 Spring-boot 和 Thymeleaf

我计划在按下“编辑”按钮时实现弹出窗口。目前它显示在新选项卡上。

这是 HTML:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="template::header">
</head>
<body>
    <div class="d-flex" id="wrapper">
        <div th:insert="template::sidebar">  
        </div>
        <div id="page-content-wrapper">
            <nav th:insert="template::navbar">
            </nav>
            <div class="container-fluid">
                    <h1> Employee List </h1>
                    <a href="/admin/employees/new">Add new Employee</a><br/><br/>

                    <table border="1" cellpadding="10">
                        <thead>
                        <tr>
                            <th> Employee Name </th>
                            <th> Designation </th>
                            <th> Credentials </th>
                            <th> Department </th>
                            <th> Image </th>
                            <th> Image filename </th>
                            <th> Actions </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="employee: ${employees}">
                            <td th:text="${employee.name}"></td>
                            <td th:text="${employee.designation}"></td>
                            <td th:text="${employee.credentials}"></td>
                            <td th:text="${employee.departmentName == null} ? 'Empty' : ${employee.departmentName}"></td>
                            <td><img th:src="@{'/uploads/' + ${employee.image_fn}}"/></td>
                            <td th:text="${employee.image_fn}"></td>
                            <td>
                                <a th:href="@{'/admin/employees/edit/' + ${employee.name}}" th:target="_blank"><button type="button" class="btn btn-primary">Edit</button></a> <!--Edit Button must launch a pop up window, but is currently launching only on new tab-->
                                <!-- &nbsp;&nbsp;&nbsp; -->
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#empDeleteConfirm">Delete</button>

                                <a th:href="@{'/admin/employees/imageUpload/' + ${employee.name}}">Upload Image</a>
                            </td>
                            <div class="modal fade" id="empDeleteConfirm" tabindex="-1" role="dialog" aria-labelledby="empDeleteConfirm" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <h5 class="modal-title" id="empDeleteConfirm">Are you sure?</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    </div>
                                    <div class="modal-body">
                                    Do you want to delete this employee?
                                    </div>
                                    <div class="modal-footer">
                                        <a th:href="@{'/admin/employees/delete/' + ${employee.name}}"><button type="button" class="btn btn-primary">Delete</button></a>
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </tr>
                    </tbody>
                </table>

                <!-- Modal -->
            </div>
        </div>
    </div>
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
</body>
</html>

这是要在弹出窗口上显示的窗口:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="template::header">
</head>
<body>
    <div class="d-flex" id="wrapper">
        <!-- <div th:insert="template::sidebar">  
        </div> -->
        <div id="page-content-wrapper">
            <!-- <nav th:insert="template::navbar">
            </nav> -->
            <div class="container-fluid" align="center">
                <h1> Edit Employee </h1>
                <form action="#" th:action="@{/admin/employees/update}" th:object="${employee}" method="post" th:fragment="empEdit">
                    <table border="0" cellpadding="10">
                        <td><input type="hidden" th:field="*{name}"/></td>
                        <td><input type="hidden" th:field="*{image_fn}"/></td>
                        <tr>
                            <td> Designation: </td>
                            <td><input type="text" th:field="*{designation}"/></td>
                        </tr>
                        <tr>
                            <td> Credentials: </td>
                            <td><input type="text" th:field="*{credentials}"/></td>
                        </tr>
                        <tr>
                            <select th:field="*{department}">
                                <option th:each="department: ${departments}" th:value="${department.name}" th:text="${department.description}"></option>
                            </select>
                        </tr>
                        <tr>
                            <td><button type="submit">Save</button></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
</body>
</html>

使用这些 Controller :


import com.ppt.contentmanagementsystem.dao.DepartmentDAO;
import com.ppt.contentmanagementsystem.dao.EmployeeDAO;
import com.ppt.contentmanagementsystem.model.Department;
import com.ppt.contentmanagementsystem.model.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.List;
import java.util.Optional;

@Controller
public class EmployeeVC {

    @Autowired
    EmployeeDAO employeeDAO;
    @Autowired
    DepartmentDAO departmentDAO;

    @GetMapping("/admin/employees")
    public String employeesHomePage(Model model){
        List<Employee> employees = employeeDAO.getAllEmployees();
        model.addAttribute("employees", employees);
        model.addAttribute("title", "Employees");

        return "employeeHome";
    }

    @GetMapping("/admin/employees/new")
    public String newEmployeePage(Model model){
        Employee employee = new Employee();
        List<Department> departments = departmentDAO.getAllDepartments();
        model.addAttribute("employee", employee);
        model.addAttribute("departments", departments);

        return "employeeNew";
    }

    @PostMapping("/admin/employees/new")
    public String addEmployeePage(@ModelAttribute("employee") Employee employee){
        employeeDAO.addEmployee(employee);
        return "redirect:/admin/employees";
    }

    @GetMapping("/admin/employees/edit/{id}")
    public String editEmployeePage(Model model, @PathVariable String id){
        Optional<Employee> eopt = employeeDAO.getEmployee(id);
        Employee employee = eopt.get();
        List<Department> departments = departmentDAO.getAllDepartments();
        model.addAttribute("employee", employee);
        model.addAttribute("departments", departments);
        model.addAttribute("title", "Employee Edit");

        return "employeeEdit";
    }

    @GetMapping("/admin/employees/imageUpload/{id}")
    public String uploadEmployeeImagePage(Model model, @PathVariable String id){
        Optional<Employee> eopt = employeeDAO.getEmployee(id);
        Employee employee = eopt.get();
        model.addAttribute("employee", employee);
        model.addAttribute("title", "Employee Image");

        return "employeeImage";
    }

    @PostMapping("/admin/employees/imageUpload")
    public String updateEmployeeImage(@ModelAttribute("employee") Employee employee, @RequestParam("imageFile") MultipartFile imageFile) throws IOException{
        employeeDAO.saveEmployeeImage(employee, imageFile);

        return "redirect:/admin/employees";
    }

    @PostMapping("/admin/employees/update")
    public String updateEmployeePage(@ModelAttribute("employee") Employee employee){
        employeeDAO.updateEmployee(employee);

        return "redirect:/admin/employees";
    }

    @GetMapping("/admin/employees/delete/{id}")
    public String deleteEmployeePage(@PathVariable String id){
        employeeDAO.deleteEmployee(id);

        return "redirect:/admin/employees";
    }
}

最佳答案

对于模态窗口，您应该将 JavaScript 代码添加到模板中，如此处所述 Thymeleaf documentation 13.4 Textual parser-level comment blocks: removing code

模态窗口在js中的简单实现是:

<!DOCTYPE html> 
<html> <head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style> body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */ 
.modal {   
    display: none; 
/* Hidden by default */   
    position: fixed; 
/* Stay in place */   
    z-index: 1; 
/* Sit on top */
   padding-top: 100px;
/* Location of the box */
    left: 0;   top: 0;   width: 100%; 
/* Full width */   
    height: 100%; 
/* Full height */
    overflow: auto; 
/* Enable scroll if needed */
    background-color: rgb(0,0,0); 
/* Fallback color */
    background-color: rgba(0,0,0,0.4); 
/* Black w/ opacity */ 
}

/* Modal Content */ 
.modal-content {   
    background-color: #fefefe;   
    margin: auto;   
    padding: 20px;   
    border: 1px solid #888;   
    width: 80%; 
}

/* The Close Button */ 
.close {   
    color: #aaaaaa;   
    float: right;   
    font-size: 28px;   
    font-weight: bold; 
}

.close:hover, .close:focus {   
    color: #000;   
    text-decoration: none;   
    cursor: pointer; 
} 
</style> 
</head> 

<body>
<h2>Modal Example</h2>

<!-- Trigger/Open The Modal --> 
<button id="myBtn">Open Modal</button>

<!-- The Modal --> 
<div id="myModal" class="modal">

<!-- Modal content -->   
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>   
    </div>
</div>

<script> 
// Get the modal 
var modal = document.getElementById("myModal");
// Get the button that opens the modal 
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal  
btn.onclick = function() {   modal.style.display = "block"; }

// When the user clicks on <span> (x), close the modal 
span.onclick = function() {   modal.style.display = "none"; }

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) {   
    if (event.target == modal) {
        modal.style.display = "none";   
} } 
</script>
</body> </html>

关于java - 如何在 Spring + Thymeleaf 上添加弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58191271/

36 4 0
文章推荐： c++ - 调试 glibc free() : invalid pointer
文章推荐： Facebook - 发布到多个 friend 墙
文章推荐： c++ - 数组在C++中是否具有恒定大小
文章推荐： iphone - FB连接 : Facebook authent screen not redirecting to my app
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com