PageHelper與bootstrap的模態框,以及jquery程式碼實現分頁查詢顯示以及Echart的使用
阿新 • • 發佈：2018-11-23
模板下載地址: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="width: 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; }