2010.02.03——Jquery ajax 动态更新 局部刷新
2010.02.03——Jquery ajax 动态更新 局部刷新
最后的效果如图所示 ，说要达到的目标就是：
当我选着不同的时间，最后一列的时间也跟着变，并且将一系列的参数传到后台，计算出结果，并填充到下面的td中去
后台：
后台就是经过一系列的操作，得到一组类似1.2-2.3-25.1-0.5- 的数据
js:
设计思路 就是找到需要填充的列，挨个赋值
html
最后的效果如图所示 ，说要达到的目标就是：
当我选着不同的时间，最后一列的时间也跟着变，并且将一系列的参数传到后台，计算出结果，并填充到下面的td中去
后台：
public ModelAndView dataByYear(HttpServletRequest request,
HttpServletResponse response) throws Exception {
String name = MethodUtil.param(request, "name");
String st = MethodUtil.param(request, "startTime");
String et = MethodUtil.param(request,"endTime");
String nt = MethodUtil.param(request, "newTime");
.....
.....
List<Double> list = fn(request,K_RGNCD,stsb.toString(),etsb.toString(),sign,sxun,exun);
PrintWriter out = response.getWriter();
StringBuffer sb = new StringBuffer();
for(Double d: list){
sb.append(d);
sb.append("-");
}
out.print(sb.toString());
return null;
}
后台就是经过一系列的操作，得到一组类似1.2-2.3-25.1-0.5- 的数据
js:
<head>
<script type="text/javascript">
//用于生成那个下拉框内的时间
function fn3($year1){
var str1 = "";
var str2 = "";
//if(checkBrowser()){
// var date = new Date().getYear();
//}else{
// var date = new Date().getYear()+1900;
//}
var date = $('#endTime').attr('value');
for(var i = parseInt(date)-1;i>=1949;i--){
str1 += "<option value="+i+">"+i+"</option>";
}
$year1.empty();
$year1.append(str1);
}
//用于生成table的最后一列
function fn4(){
var $text = $('#year option:selected').text();
var text = "较"+$text+"年";
$('#year2').text(text);
//生成完 就调用ajax
fn5();
}
//解决浮点数的问题
function roundFloat(number,digits){
with(Math){
return round(number*pow(10, digits))/pow(10, digits);
}
}
//用于和后台的ajax请求
function fn5(){
$.ajax({
type: "POST",
url: "yuliang_dataByYear.do",
data: {name:$('#name').attr("value"),startTime:$('#startTime').attr('value'),endTime:$('#endTime').attr
('value'),newTime:$('#year option:selected').text()},
dataType: "html",
success: function(data){
var str = data;
var strs = str.split("-");//拆分后台传过来的数据，装到数组里面
//alert(strs);
var trNumber = $('tr').size();//得到table中一共有几行
var tdNumber = $('tr:first td').size();//得到一行中一共有几列
//alert(trNumber);
//alert(tdNumber);
//alert($('tr:eq(2) td:eq(8)').size())
for(var i=1;i<trNumber;i++){//i=1，不从0开始排除第一行表头
var text = 0;
text = $('tr:eq('+i+') td:eq(1)').text();//得到第二列的数据
//alert(text);
//tdNumber-2,因为列也是从0开始的，所以要减2，这个是给倒数第二列赋值
$('tr:eq('+i+') td:eq('+(tdNumber-2)+')').text(roundFloat(strs[i-1],2));
var number = roundFloat((text-strs[i-1]),2);
//if(number==0) {
// number = number+".0";
//alert(number);
//}
//给最后一列赋值
$('tr:eq('+i+') td:eq('+(tdNumber-1)+')').text(number);
}
}
});
}
$(function(){
fn3($('#year'));
fn4();
//fn5();
//alert();
$('#year').change(fn4);
});
</script>
</head>
设计思路 就是找到需要填充的列，挨个赋值
html
<hr>
<input id="name" type="hidden" value="${name }"/> //隐藏文本域，用于上面传参数
<input id="startTime" type="hidden" value="${start }"/>
<input id="endTime" type="hidden" value="${end }"/>
<center><font color="#005ECE" size="5">${name }统计表 <br />${start }至${end }</font>
<h5 align="right">收入单位：￥</h5>
<table cellspacing="0" align="center" bgcolor="#EFF6FE">
<tbody>
<tr>
<td>地区</td>
<td>收入</td>
<td>收入率</td>
<td>历年同期</td>
<td>较历年同期</td>
<td>去年同期</td>
<td>较去年同期</td>
<td><select id="year"><option value="2008">2008</option></select></td>
<td><div id="year2"></div></td>
</tr>
<c:forEach var="yuliangTable" items="${yuliangTableList}">
<tr>
<td>${yuliangTable.dq }</td>
<td>${yuliangTable.mpjyl }</td>
<c:if test="${!empty yuliangTable.yljpl }">
<td>${yuliangTable.yljpl }</td>
</c:if>
<c:if test="${empty yuliangTable.yljpl }">
<td> </td>
</c:if>
<c:if test="${!empty yuliangTable.lntq }">
<td>${yuliangTable.lntq }</td>
</c:if>
<c:if test="${empty yuliangTable.lntq }">
<td> </td>
</c:if>
<c:if test="${!empty yuliangTable.jlntq }">
<td>${yuliangTable.jlntq }</td>
</c:if>
<c:if test="${empty yuliangTable.jlntq }">
<td> </td>
</c:if>
<td>${yuliangTable.qntq }</td>
<td>${yuliangTable.jqntq }</td>
<td> </td>
<td> </td>
</tr>
</c:forEach>
</tbody>
</table>
</center>