Spring + html 接口访问回显 + table + table操作

~听风~

已于 2023-12-27 11:55:16 修改

阅读量571

点赞数 9

文章标签： spring html java

于 2023-12-27 11:21:29 首次发布

本文链接：https://blog.youkuaiyun.com/m0_51551000/article/details/135240929

版权

html页面

<!DOCTYPE html>
<html>

<head>
</head>

<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
            <!-- 用户信息 -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <i class="fa fa-cube"></i>
                    <h3 class="box-title">用户信息</h3>
                </div>

                <div class="box-body">

                    <!-- 数据表格 -->
                    <div class="table-box">

                        <!--数据列表-->
                        <table id="myTable" class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>
                                <th class="">id</th>
                                <th class="">用户名称</th>
                                <th class="">邮箱</th>
                                <th class="">创建时间</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <!--数据列表/-->

                    </div>
                    <!-- 数据表格 /-->

                </div>
                <!-- /.box-body -->

            </div>
            <!-- 用户信息 /-->
</div>


<script src="/adminlte/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script>

    var data = undefined;


    $.ajax({
        url: "/test/selectUserList",  // 请求的URL
        method: "GET",  // 请求的HTTP方法
        success: function(response) {  // 请求成功时的回调函数
            // 处理响应数据
            console.log(response);
            data = response;
            populateTable();

        },
        error: function(xhr, status, error) {  // 请求失败时的回调函数
            // 处理错误
            console.log(error);
        }
    });

    function populateTable() {
        var tableBody = $("#myTable tbody");

        // 遍历数组中的每个对象
        for (var i = 0; i < data.length; i++) {
            var rowData = data[i];

            // 创建新的表格行和单元格
            var newRow = $("<tr>");
            var idCell = $("<td>").text(rowData.id);
            var nameCell = $("<td>").text(rowData.userName);
            var emailCell = $("<td>").text(rowData.email);
            var createTimeCell = $("<td>").text(rowData.createTime);

            // 将单元格添加到行中
            newRow.append(idCell, nameCell,emailCell, createTimeCell);


            // 创建包含按钮的单元格
            var actionCell = $("<td>");

            // 创建按钮元素    
            var button = $("<button>").text("test")
                .addClass("btn bg-olive btn-xs")
                .click((function(rowData) {
                    return function() {
                        // location.href = "/admin/sysLogin";

                        $.ajax({
                            url: "/test/selectUserList",
                            type: "POST",
                            data: {
                                userName: rowData.userName
                            },
                            success: function (response) {
                                // 处理成功响应
                                console.log(response);
                                 $("#myTable tbody").empty(); //清空原有的历史数据
                                data = response;
                                populateTable();
                            },
                            error: function (xhr, status, error) {
                                // 处理错误响应
                                console.log(xhr, status, error);
                            }
                        });
                    }
                })(rowData));// 通过立即执行的函数将 rowData 传递给闭包保存

            // 添加按钮元素到单元格中
            actionCell.append(button);

            // 将操作列添加到行中
            newRow.append(actionCell);
            // 将行添加到表格体中
            tableBody.append(newRow);
        }
    }



</script>





</body>

</html>

创建按钮部分：使用一个闭包来保存每个循环迭代的 rowData 值。可以通过将 rowData 传递给一个立即执行的函数，该函数返回一个处理点击事件的回调函数来实现。这样，每个回调函数中的 rowData 变量都会被捕获并保存在封闭的作用域中。这样，每个按钮的点击事件将使用正确的数据进行 POST 请求。

后端接口：


@Controller
@RequestMapping("/test")
public class TestController {

    @Autowired
    private UserService userService;

   
    @ResponseBody
    @RequestMapping("/selectUserList")
    public List QueryUserList(User user){

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

        List<User> userList = userService.selectUserList(user);
        for (User user1 : userList) {
            System.out.println(user1);
            Date createTime = user1.getCreateTime();
            if (createTime != null){
                String format = sdf.format(createTime);
                System.out.println(format);
            }
        }
        return userList;

    }


}