写好长没保存,还要重新写了。。。。。。。。。。
首先要从service层得到一个基础对象(包含一个List属性和其他所需属性),然后把基础对象包装成jsonObject代码如下:
JSONObject jsonObject=new JSONObject(reportBase,false);reportBase就是这个基础对象引用,
然后转换成字符串发送到客户端 return toClient(jsonObject.toString());
在客户端进行接收,解析,代码如下:
$.ajax({
url: '/market/daily.action?',
type: 'POST',
data: "startDate="+startDate+"&endDate="+endDate+"&busId="+busId+"&dqy="+dqy+"&pageSize="+pageSize,
success: function(data){
//alert(data);
eval("data = " + data);//通过eval解析action传来的data
$("#report").remove();//移除下面创建的table,以便与在此创建
// 通过$('')创建表单对象
var tableObject = $('<table></table>').att({width:"100%",border:"0",cellspacing:"0",cellpadding:"0",id:"report"});
//通过jquery的each方法遍历list,并获取其中的值,create()创建td,这个是我自定义方法,
$.each(data.list,function (index,value){
var tr = $('<tr></tr>').append(creatTd(value.time,'20%')).append(creatTd(value.busName,'30%')).append(creatTh(value.countSum,'20%')).append(creatTh(value.countSuc,'30%'));
tableObject.append(tr);
});
添加到页面的div中:$('#dataDiv').append(tableObject);
下面就是分页了:
if(data.dqy > 1){
//通过调用上面的js方法getReport()进行动态显示,通过传入值不同,查询数据也不相同
//这点儿就遇到一点问题了,在点击下一页时,重复调用getReport()方法时,传日期参数,
传入的是"2009-1-1"但是进行过异步提交后(或许不是,我是这样认为的)日期就会
//自动进行减法运算变成2007了,成为一个数字了,解决方法:把日期的"-"去掉,用startDate=startDate.replace(/-/g,"");
//然而传过去就变成一个数字类型的了,下次执行时就不能用replace方法了,用startDate+="";把数字类型转换成字符串
问题就解决了
temp=$('<a></a>').attr({href:"javascript:getReport("+1+","+pageSize+","+startDate+","+endDate+");"}).append("首页");
html.append(temp);
temp=$('<a></a>').attr({href:"javascript:getReport("+temppre+","+pageSize+","+startDate+","+endDate+");"}).append("上一页");
html.append(temp);
}else{
temp=$('<span></span>').append("首页");
html.append(temp);
temp=$('<span></span>').append("上一页");
html.append(temp);
}
if (data.dqy < data.pageTotal){
temp=$('<a></a>').attr({href:"javascript:getReport("+tempnext+","+pageSize+","+startDate+","+endDate+");"}).append("下一页");
html.append(temp);
temp=$('<a></a>').attr({href:"javascript:getReport("+temppageTotal+","+pageSize+","+startDate+","+endDate+");"}).append("尾页");
html.append(temp);
}else{
temp=$('<span></span>').append("下一页");
html.append(temp);
temp=$('<span></span>').append("尾页");
html.append(temp);
}
也可以这样:$("#page-next").live('click',function(){
getReport(currPage+1) }); 通过对下一页按钮进行click绑定,也能实现就不用像上面这么麻烦了,
刚开始用$("#page-next").bind('click', getReport(currPage+1) );但是这样对所用按钮绑定的操作会自动执行
所以选择了live(),live方法防治js冒泡,但是支持的操作较少,是1.3的新方法,开始没有用function包装,会报错(这点查了好长时间才搞定,以后要注意)
这样就可以实现了
仅用于个人备忘。。。