jQuery+AJAX+SpringMVC
一.适用于多个结果图/表放在一个页面而且没有分页情况
jsp页面:
<div id="histPic_ExpectEndSituation" class="show_echart1"> <div class="tb_tit" >强制终止表</div> <div class="tb_dw">单位:件、万元</div> <table id="pageTable" border="1" cellspacing="1" width="100%" align="center" bordercolor="white" style="table-layout:fixed;"> <thead> <tr class="td_tit"> <td>年</td> <td>件</td> <td>本金</td> <td>本息和</td> <td>保单价值</td> <td>终止率(按件数)</td> <td>终止率(按金额)</td> </tr> </thead> <tbody > </tbody> </table> </div> </div>
js页面:
var searchData = { "org" : org, "year" : year, "sector" : sector }; function searchExpectEndSituation(searchData) { var searchUrl = getRootPath() + "debitReport/searchExpectEndSituation"; ajaxFun(searchUrl, searchData, histPicExpectEndSituation); } function ajaxFun(ajaxUrl, ajaxData, callback) { $.ajax({ type : "POST", dataType : "json", url : ajaxUrl, data : ajaxData, //可选。映射或字符串值。规定连同请求发送到服务器的数据 success : function(data) { //当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。 callback(data); }, error : function(data) { } }); } function histPicExpectEndSituation(data) { //请求成功后调用的callback(data)方法 $("#pageTable tbody").empty(); for (var i = 0; i < 4; i++) { if (i % 2 === 0) { var trObj = $("<tr class='tr_odd'>" + "<td>"+data.timeList[i]+"</td>" + "<td>"+data.policyNum[i]+"</td>" + "<td>"+data.amount[i]+"</td>" + "<td>"+data.allmount[i]+"</td>" + "<td>"+data.policeValue[i]+"</td>" + "<td>"+data.policyNumRates[i]+"</td>" + "<td>"+data.amountRates[i]+"</td>" + "</tr>"); } else { var trObj = $("<tr class='tr_even'>" + "<td>"+data.timeList[i]+"</td>" + "<td>"+data.policyNum[i]+"</td>" + "<td>"+data.amount[i]+"</td>" + "<td>"+data.allmount[i]+"</td>" + "<td>"+data.policeValue[i]+"</td>" + "<td>"+data.policyNumRates[i]+"</td>" + "<td>"+data.amountRates[i]+"</td>" + "</tr>"); } $("#pageTable tbody").append(trObj); } }
Controller.java页面:
/** * @param org * @param time * @param sector * @return map */ @RequestMapping(value = "/searchExpectEndSituation") @ResponseBody //POST模式下,使用 @RequestBody绑定请求对象,Spring会帮你进行协议转换,将Json、Xml协议转换成你需要的对象. public Map<String, Object> searchExpectEndSituation(String org, Integer year, String sector) { Map<String, Object> map = new HashMap<String, Object>(); List<Object[]> list = debitReportService.queryExpectEndSituation(org, year, sector); List<String> timeList = debitReportService.getThirdPeriod(year, sector); map.put("list", list); map.put("timeList", timeList); return map; }
二.适用于单个图/表有分页条件的情况
jsp页面:
<div id="role_content_div"> <div id="select_div"> 角色名称:<input id="name" type="text" name="name" class="role_select_name" /> <span class="role_select_btn" onclick="clickSelect()">查询</span> </div> <div class="table_head"> <span>角色名称</span> <span>角色代码</span> <span>操作</span> </div> <div class="table_body"> </div> <div class="table_page"> <span id="totle">0条搜索结果</span> <span> <a href="#" class="page_left"><img src="<c:url value="/img/u556.png"/>" width="15px" onclick="changePage(-1)"></a> //图片是一个 "<" <input id="page_input" name="page" type="text" value="1" onchange="changePage(0)" /> <span id="page_totle">/ 1</span> <a href="#" class="page_right"><img src="<c:url value="/img/u558.png"/>" width="15px" onclick="changePage(1)"></a> //图片是一个 ">" </span> <span id="add_role" class="role_select_btn" onclick="addRole()">增加</span> </div> </div>
js页面:
var totlePage = 0; var oldPage = 1; $(function(){ loadRoleData(); }); function clickSelect(){ $("#page_input").val(1); loadRoleData(); } function loadRoleData(){ var name=$("#name").val(); var size = new Number(10); var page=$("#page_input").val(); var ajaxUrl = getRootPath()+"role/findPageRole"; var ajaxData = {"name":name,"page":page,"pageSize":size}; ajaxOnReturn(ajaxUrl,ajaxData,loadRoleDataHtml); } function loadRoleDataHtml(data){ var tableBody = $(".table_body"); tableBody.empty(); $("#totle").html(data.totle+"条搜索结果") totlePage = data.totlePage!=0?data.totlePage:1; if($("#page_input").val() > totlePage){ $("#page_input").val(1); } $("#page_totle").html("/ "+totlePage); var dataList = data.list; for (var i = 0; i < dataList.length; i++) { var data = dataList[i]; var tName = $("<span>"+data.name+"</span>"); var tCode = $("<span>"+data.code+"</span>"); var tOrgCode =$("<span>"+checkNull(data.orgCode)+"</span>"); var tDoBtn = $("<span></span>"); var btnUp = $("<span class=\"role_select_btn\" onclick=\"updateDetailRole('"+data.id+"','update')\">修改</span>"); var btnDel = $("<span class=\"role_select_btn\" onclick=\"deleteRole('"+data.id+"')\">删除</span>"); var btnDetail = $("<span class=\"role_select_btn\" onclick=\"updateDetailRole('"+data.id+"','detail')\">详情</span>"); tDoBtn.append(btnUp); tDoBtn.append(btnDel); tDoBtn.append(btnDetail); tableBody.append(tName); tableBody.append(tCode); tableBody.append(tDoBtn); } } function changePage(addValue){ var page=new Number($("#page_input").val()) + new Number(addValue); if(page <= totlePage && page > 0 ){ oldPage = page; $("#page_input").val(page); loadRoleData(); }else{ $("#page_input").val(oldPage); } } 删除 function deleteRole(roleId){ openMsgSureDialog("您确定要删除该角色吗?","isReayDeleteRole",roleId); } function isReayDeleteRole(roleId){ var ajaxUrl = getRootPath()+"role/deleteRole"; var ajaxData = {"id":roleId}; ajaxOnReturn(ajaxUrl,ajaxData,deleteRoleReturn); } function deleteRoleReturn(data){ var result = data.result; if(result.success){ openMgsShowDialog(result.msg); loadRoleData(); } } 修改 function updateDetailRole(roleId,action){ var url = "role/doRole"; var data = {"id":roleId,"action":action}; loadHomeDialog(url,data); } //增加 function addRole(){ var url = "role/doRole"; loadHomeDialog(url,null); } //打开消息确认框,关闭消息提示框 function openMsgSureDialog(content,returnName,value){ $("#msg_dialog").show(); //关闭消息确认框 $("#mgs_show_dialog").hide(); //打开消息提示框 $("#msg_sure_dialog > div[class='msg_dialog_content']").html(content); $("#msg_sure_dialog").show(); $("#msg_sure_btn").attr("onclick",returnName+"("+value+")"); } /** * ajax请求回调 * @param ajaxUrl * @param ajaxData-->json格式 * @param returnName */ function ajaxOnReturn(ajaxUrl,ajaxData,returnName){ $.ajax({ type:"POST", dataType:"json", url:ajaxUrl, data:ajaxData, success:function(data){ returnName(data); }, error:function(data){ } }); } //打开消息提示框,关闭消息确认框 function openMgsShowDialog(content){ $("#msg_dialog").show(); //关闭消息确认框 $("#msg_sure_dialog").hide(); //打开消息提示框 $("#mgs_show_dialog > div[class='msg_dialog_content']").html(content); $("#mgs_show_dialog").show(); }
Java--control层:
/** * 分页获取角色信息 * @return */ @RequestMapping(value="/findPageRole") @ResponseBody public Map<String, Object> findPageRole(String name,int page, int pageSize){ Pageable pageable = new PageRequest(page-1,pageSize); RoleEO role=new RoleEO(); role.setName(name); Map<String,Object> map = new HashMap<String,Object>(); Page<RoleEO> data = roleService.query(role,pageable); map.put("totle", data.getTotalElements()); map.put("totlePage", data.getTotalPages()); map.put("list", data.getContent()); return map; }