模板下载地址:https://files.cnblogs.com/files/han-guang-xue/%E5%88%86%E9%A1%B5%E6%A8%A1%E6%9D%BF.zip
jquery代码
var pn; var maxPn; $(function () { loading(1); $("#add").click(function () { $("#addModal").modal(); }); //添加模态框,向后台发送请求添加数据并刷新页面 $("#confirmAdd").click(function () { $.post("addUser", $("#addForm").serialize(), function (date) { $("#addModal").modal("hide"); loading(maxPn); //刷新页面 }) }) //修改模态框,向后台发送数据并刷新页面 $("#confirmUpdate").click(function () { $.post("updateUser", $("#updateForm").serialize(), function (date) { $("#updateModal").modal("hide"); loading(pn); }) }) //Echart的使用,可视化数据的使用 $("#data").click(function () { $.post("data", function (list) { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '商城顾客来源分析', subtext: '纯属虚构', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', }, series: [ { name: '年龄占比:', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: list[0].value, name: list[0].name}, {value: list[1].value, name: list[1].name}, {value: list[2].value, name: list[2].name}, {value: list[3].value, name: list[3].name}, {value: list[4].value, name: list[4].name}, {value: list[5].value, name: list[5].name}, ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); $("#drawingModal").modal(); }) }) }) //加载数据 function loading(pn) { $("tbody").empty(); $.post("queryAllUser", {"pn": pn}, function (msg) { $.each(msg.list, function (index, item) { var tr = $("<tr class='data_tr''>" + "<td>" + item.uId + "</td>" + "<td>" + item.uName + "</td>" + "<td>" + item.uTruename + "</td>" + "<td>" + item.uPassword + "</td>" + "<td>" + item.uAge + "</td>" + "<td>" + item.uSex + "</td>" + "<td>" + item.uPhone + "</td>" + "<td>" + item.uRole + "</td>" + "<td>" + item.uStatue + "</td>" + "<td>" + item.uNote + "</td>" + "<td><a href='#' type="button" class="btn btn-info" data-toggle='modal' data-target='#myModal' onclick='getDetails(" + item.uId + ")'>详情/修改</a>|" + "<a href='#' type="button" class="btn btn-danger" onclick='getdel(" + item.uId + ")'>删除</a></td></tr>").appendTo($("tbody")); }); pn = msg.pageNum; maxPn = msg.pages; loadPaging(msg); }, "JSON"); } //分页的标签 function loadPaging(page) { $("#paging").empty(); var nav = $("<nav class='text-right'></nav>"); var ul = $("<ul class='pagination'><li><a onclick='loading(1)' aria-label='Previous'> 首页 </a></li>" + "<li><a onclick='loading(" + (page.pageNum - 1) + ")' aria-label='Previous'> <span aria-hidden='true'>上一页</span></a></li></ul>").appendTo(nav); $.each(page.navigatepageNums, function (index, item) { var li = $("<li><a onclick='loading(" + item + ")'>" + item + "</a></li>").appendTo(ul); if (page.pageNum == item) { li.addClass("active"); } }); var edit_btn = $("<li><a onclick='loading(" + (page.pageNum + 1) + ")' aria-label='Next'> <span aria-hidden='true'>下一页</span></a></li>" + "<li><a onclick='loading(" + page.pages + ")' aria-label='Next'> 末页 </a></li>").appendTo(ul); nav.appendTo($("#paging")); } //编辑方法,使用编辑模态框 function getDetails(id) { $("#updateModal").modal(); $.post("queryUserById", {"id": id}, function (user) { $("#updateForm input[name='uId']").val(id); $("#updateForm input[name='uName']").val(user.uName); $("#updateForm input[name='uTruename']").val(user.uTruename); $("#updateForm input[name='uPassword']").val(user.uPassword); $("#updateForm input[name='uAge']").val(user.uAge); $("#updateForm input[name='uSex']").val([user.uSex]); $("#updateForm input[name='uPhone']").val(user.uPhone); $("#updateForm select[name='uRole']").val([user.uRole]); $("#updateForm select[name='uStatue']").val([user.uStatue]); $("#updateForm textarea[name='uNote']").val(user.uNote); }, "JSON") } //删除方法,使用删除模态框 function getdel(id) { $.post("deleteUser", {"id": id}, function (data) { loading(pn); $("#promptModal").modal(); //消息提示模态框 setTimeout("$("#promptModal").modal('hide')", 1000); }, "JSON") }
jsp代码:
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2018/11/9 009 Time: 17:05 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="<c:url value="/static/css/headbott.css"/> " type="text/css"/> <link rel="stylesheet" href="<c:url value="/static/css/bootstrap.min.css"/>"/> <link rel="stylesheet" href="<c:url value="/static/css/dashboard.css"/> "/> <script type="text/javascript" src="<c:url value="/static/js/jquery-1.42.min.js" />"></script> <script type="text/javascript" src="<c:url value="/static/js/jquery.js"/> "></script> <script type="text/javascript" src="<c:url value="/static/js/bootstrap.min.js"/> "></script> <script type="text/javascript" src="<c:url value="/static/js/countUp.js"/> "></script> <script type="text/javascript" src="<c:url value="/static/js/user.js"/> "></script> <script type="text/javascript" src="<c:url value="/static/js/echarts.min.js"/> "></script> </head> <body> <%--======================================================顶部====================================================--%> <div id="header"> <div class="heade-con"> <div class="nav posa"> <ul> <li><a href="jumpMain">个人中心</a></li> <li><a class="vcolor" href="jumpUser">用户信息</a></li> <li><a href="jumpProduct">商品信息</a></li> <li><a href="jumpComment">商品评论</a></li> </ul> </div> <div class="index-login"> <a href="jumpLogin">${sessionScope.user.uName}</a> <a href="jumpExit">退出</a> </div> </div> </div> <%--======================================================顶部====================================================--%> <%--======================添加模态框=======================--%> <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <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="exampleModalLabel">添加用户</h4> </div> <div class="modal-body"> <form id="addForm"> <div class="form-group"> <label class="control-label">姓名:</label> <input type="text" name="uName" class="form-control"> </div> <div class="form-group"> <label class="control-label">真实姓名:</label> <input type="text" name="uTruename" class="form-control"> </div> <div class="form-group"> <label class="control-label">密码:</label> <input type="text" name="uPassword" class="form-control"> </div> <div class="form-group"> <label class="control-label">年龄:</label> <input type="text" name="uAge" class="form-control"> </div> <div class="form-group"> <label class="control-label">性别:</label> <input type="text" name="uSex" class="form-control"> </div> <div class="form-group"> <label class="control-label">手机号:</label> <input type="text" name="uPhone" class="form-control"> </div> <div class="form-group"> <label class="control-label">权限:</label> <select name="uRole" class="form-control"> <option value="0">管理员</option> <option value="1">普通用户</option> <option value="2">VIP用户</option> <option value="3">特级用户</option> </select> </div> <div class="form-group"> <label class="control-label">状态:</label> <select name="uStatue" class="form-control"> <option value="1">已激活</option> <option value="0">未激活</option> <option value="-1">已注销</option> </select> </div> <div class="form-group"> <label class="control-label">备注:</label> <textarea rows="3" type="text" name="uNote" class="form-control"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" id="confirmAdd" class="btn btn-primary">确认添加</button> </div> </div> </div> </div> <%--======================详情/修改模态框=======================--%> <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <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">修改用户信息</h4> </div> <div class="modal-body"> <form id="updateForm"> <input type="hidden" name="uId"> <div class="form-group"> <label class="control-label">姓名:</label> <input type="text" name="uName" class="form-control"> </div> <div class="form-group"> <label class="control-label">真实姓名:</label> <input type="text" name="uTruename" class="form-control"> </div> <div class="form-group"> <label class="control-label">密码:</label> <input type="text" name="uPassword" class="form-control"> </div> <div class="form-group"> <label class="control-label">年龄:</label> <input type="text" name="uAge" class="form-control"> </div> <div class="form-group"> <label class="control-label">性别:</label> <input type="text" name="uSex" class="form-control"> </div> <div class="form-group"> <label class="control-label">手机号:</label> <input type="text" name="uPhone" class="form-control"> </div> <div class="form-group"> <label class="control-label">权限:</label> <select name="uRole" class="form-control"> <option value="0">管理员</option> <option value="1">普通用户</option> <option value="2">VIP用户</option> <option value="3">特级用户</option> </select> </div> <div class="form-group"> <label class="control-label">状态:</label> <select name="uStatue" class="form-control"> <option value="1">已激活</option> <option value="0">未激活</option> <option value="-1">已注销</option> </select> </div> <div class="form-group"> <label class="control-label">备注:</label> <textarea rows="3" type="text" name="uNote" class="form-control"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" id="confirmUpdate" class="btn btn-primary">确认修改</button> </div> </div> </div> </div> <%--==========================删除提示模态框========================--%> <div id="promptModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="alert btn-success" role="alert"> 删除成功.....(◕ᴗ◕✿) </div> </div> </div> <%--==========================画图模态框===============================--%> <div id="drawingModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" 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="gridSystemModalLabel">Modal title</h4> </div> <div class="modal-body"> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style=" 800px;height:800px;"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button> </div> </div><!-- /.modal-content --> </div> </div><!-- /.modal --> <style> body { position: relative; } #promptModal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .alert { text-align: center; } </style> <%--============================================中部==============================================--%> <div class="container-fluid"> <div class="row"> <!--左侧导航栏end--> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-1 main"> <h1 class="page-header">用户信息管理</h1> <div class="panel panel-default"> </div> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title"> <h3>用户信息管理</h3> </div> <div class="btn-group"> <a id="add" type="button" class="btn btn-primary col-md-offset-9">添加用户</a> <a id="data" type="button" class="btn btn-warning col-md-offset-5">查看用户年龄分布的数据</a> </div> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr class="active"> <th>Uid</th> <th>Name</th> <th>TrueName</th> <th>Password</th> <th>Age</th> <th>Sex</th> <th>Phone</th> <th>Role</th> <th>Statue</th> <th>Note</th> <th>Operation</th> </tr> </thead> <tbody> </tbody> </table> </div> <div id="paging" class="col-md-6 col-md-offset-4"> </div> </div> </div> </div> </div> </div> <%--============================================中部==============================================--%> <div id="bottom"> <div class="bot-con1"> <ul> <li class="bot-con1-li1">阿里</li> <li>阿里巴巴集团<span class="inde-span1"></span></li> <li>阿里云计算<span class="inde-span2"></span></li> <li>阿里云科技<span class="inde-span3"></span></li> </ul> </div> <div class="bot-con1 bot-con2"> <ul> <li><span class="inde-span4"></span>淘宝网</li> <li><span class="inde-span4"></span>全球速卖通</li> <li><span class="inde-span5"></span>项目获得支持</li> <li><span class="inde-span6"></span>发起人发放回报</li> <li><span class="inde-span7"></span>联系我们</li> </ul> </div> <div class="bottom-ggt"><a href=""><img src="<c:url value="/static/imgs/bottbom_68.jpg"/> " alt=""/></a></div> <div class="zc-yqlink"> <ul> <li><a href="">阿里巴巴集团</a></li> <li><a href="">淘宝网</a></li> <li><a href="">天猫</a></li> <li><a href="">聚划算</a></li> <li><a href="">全球速卖通</a></li> <li><a href="">阿里巴巴国际交易市场</a></li> <li><a href="">1688</a></li> <li><a href="">阿里妈妈</a></li> <li><a href="">阿里旅行</a></li> <li><a href="">阿里云计算</a></li> <li><a href="">阿里巴巴集团</a></li> <li><a href="">淘宝网</a></li> <li><a href="">天猫</a></li> <li><a href="">聚划算</a></li> <li><a href="">全球速卖通</a></li> <li><a href="">阿里巴巴国际交易市场</a></li> <li><a href="">1688</a></li> <li><a href="">阿里妈妈</a></li> <li><a href="">阿里云计算</a></li> </ul> </div> <div class="footer-bd"> <a href=" ">关于淘宝</a> <a href=" ">合作伙伴</a> <a href=" ">营销中心</a> <a href=" ">廉正举报</a> <a href=" ">联系客服</a> <a href=" ">开放平台</a> <a href=" ">诚征英才</a> <a href=" ">联系我们</a> <a href=" ">网站地图</a> <a href=" ">法律声明</a> <em>© 2003-2015 Taobao.com 版权所有</em><br> <br> <span>网络文化经营许可证：<a href=" ">浙网文[2013]0268-027号</a></span> <b>|</b> <span data-spm-protocol="i">增值电信业务经营许可证：<a href="">浙B2-20080224-1</a></span> <b>|</b> <span>信息网络传播视听节目许可证：1109364号</span> <b>|</b> <span>举报电话:0571-81683755</span> </div> </div> </body> </html>
后台代码:
//查询所有 @RequestMapping("queryAllUser") @ResponseBody public PageInfo<User> queryAll(@RequestParam(defaultValue = "1")Integer pn){ PageHelper.startPage(pn,6); List<User> list = userService.queryAll(); PageInfo pageInfo = new PageInfo(list); return pageInfo; }