<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>用户列表</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="static/js/jquery-1.11.3.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="col-md-2"> <button type="button" data-toggle='modal' data-target='#myModal1' class="btn btn-primary">添加</button> </div> <div class="col-md-10"> <form class="form-inline"> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" placeholder="用户名"> </div> <div class="form-group"> <label for="usertel">电话</label> <input type="tel" class="form-control" id="usertel" placeholder="电话"> </div> <button type="button" class="btn btn-default" οnclick="searchUser()">搜索</button> </form> </div> </div> <table class="table table-bordered"> <tr> <%-- <th>序号</th>--%> <th>用户名</th> <th>年龄</th> <th>性别</th> <th>电话</th> <th>操作</th> </tr> <tbody id="tab"></tbody> </table> <!-- Modal(修改) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">用户修改</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <input id="userId" type="hidden" name="user_id"> <div class="form-group"> <label for="inputUserName" class="col-sm-2 control-label">用户名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputUserName" placeholder="用户名"> </div> </div> <div class="form-group"> <label for="inputUserAge" class="col-sm-2 control-label">年龄</label> <div class="col-sm-10"> <input type="number" class="form-control" id="inputUserAge" placeholder="年龄"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性别</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="sex" id="inlineRadio1" value="男"> 男 </label> <label class="radio-inline"> <input type="radio" name="sex" id="inlineRadio2" value="女"> 女 </label> </div> </div> <div class="form-group"> <label for="inputUserTel" class="col-sm-2 control-label">电话</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputUserTel" placeholder="电话"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" οnclick="updateUser()" class="btn btn-primary">确认</button> </div> </div> </div> </div> <%--用户添加--%> <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel1">用户添加</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="inputUserName" class="col-sm-2 control-label">用户名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputUserName1" placeholder="用户名"> </div> </div> <div class="form-group"> <label for="inputUserAge" class="col-sm-2 control-label">年龄</label> <div class="col-sm-10"> <input type="number" class="form-control" id="inputUserAge1" placeholder="年龄"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性别</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="inlineRadio11" value="男"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="inlineRadio21" value="女"> 女 </label> </div> </div> <div class="form-group"> <label for="inputUserTel" class="col-sm-2 control-label">电话</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputUserTel1" placeholder="电话"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" οnclick="addUser()" class="btn btn-primary">确认</button> </div> </div> </div> </div> </body> <script> $(function () { $.ajax({ url:"user", type:"GET", dataType:"json", data:{"method":"queryUserAll"}, success:function (data) { console.log(data); var str=""; for(var i=0;i<data.length;i++){ str+="<tr id='t_"+data[i].id+"'><td>"+data[i].userName+"</td><td>"+data[i].userAge+"" +"</td><td>"+data[i].userSex+"</td><td>"+data[i].userTel+"" +"</td><td><button type='button' οnclick='deleteUser("+data[i].id+")'>删除</button>"+"" +"<button type='button' data-toggle='modal' data-target='#myModal' οnclick='findUser("+data[i].id+")'>修改</button></td></tr>"; } $("#tab").html(str); } }); }); function deleteUser(id) { $.ajax({ url:"user", type:"GET", data:{"method":"deleteUserById","id":id}, dataType:"text", success:function (data) { console.log(data); if(data=="success"){ //删除成功刷新页面 // window.location.reload(); $("#t_"+id).remove(); } } }); } /** * 点击修改按钮,弹出模态框,根据id查询出数据放入模态框中的表单做数据回显 * @param id */ function findUser(id) { $.ajax({ url:"user", type:"GET", data:{"method":"queryUserByID","id":id}, dataType:"json", success:function (data) { $("#userId").val(data.id); $("#inputUserName").val(data.userName); $("#inputUserAge").val(data.userAge); if(data.userSex=="男"){ $("#inlineRadio1").prop("checked",true); }else{ $("#inlineRadio2").prop("checked",true); } $("#inputUserTel").val(data.userTel); } }); } /** * 修改完毕后保存 */ function updateUser() { var id = $("#userId").val(); var userName = $("#inputUserName").val(); var userAge = $("#inputUserAge").val(); var userSex = $('input[name="sex"]:checked').val(); var userTel = $("#inputUserTel").val(); var user = {"id":id,"userName":userName,"userAge":userAge,"userSex":userSex,"userTel":userTel,"method":"updateUserById"}; $.ajax({ url:"user", type:"POST", data:user, dataType:"text", success:function (data) { if(data=="success"){ window.location.reload(); } } }); } /*添加数据*/ function addUser() { var userName = $("#inputUserName1").val(); var userAge = $("#inputUserAge1").val(); var userSex = $('input[name="gender"]:checked').val(); var userTel = $("#inputUserTel1").val(); var user = {"userName":userName,"userAge":userAge,"userSex":userSex,"userTel":userTel,"method":"addUser"}; $.ajax({ url:"user", type:"POST", data:user, dataType:"text", success:function (data) { if(data=="success"){ window.location.reload(); } } }); } /*查询用户*/ function searchUser() { var username = $("#username").val(); var usertel = $("#usertel").val(); var queryUser = { "userName":username, "userTel":usertel, "method":"searchUser" }; $.ajax({ url:"user", type:"GET", dataType:"json", data:queryUser, success:function (data) { console.log(data); $("#tab").html(""); var str=""; for(var i=0;i<data.length;i++){ str+="<tr id='t_"+data[i].id+"'><td>"+data[i].userName+"</td><td>"+data[i].userAge+"" +"</td><td>"+data[i].userSex+"</td><td>"+data[i].userTel+"" +"</td><td><button type='button' οnclick='deleteUser("+data[i].id+")'>删除</button>"+"" +"<button type='button' data-toggle='modal' data-target='#myModal' οnclick='findUser("+data[i].id+")'>修改</button></td></tr>"; } $("#tab").html(str); } }); } </script> </html>
简单页面设计
最新推荐文章于 2024-06-03 13:36:49 发布
这是一个用户管理的网页应用示例,包括用户列表展示、添加、删除和修改功能。使用了JSP、Bootstrap和jQuery进行页面布局和交互设计。用户可以通过输入用户名和电话进行搜索,点击表格中的修改按钮会弹出模态框进行数据回显和更新。所有操作通过AJAX与后台进行数据交换。
摘要由CSDN通过智能技术生成