function gettNames(){ var size=$("#tth thead th").size(); var tNames=new Array; for(var i=1;i<size-1;i=i+1) tNames[i-1]=$("#tth thead th:eq("+i+")").attr("tName") return tNames; } function gettNamesSize(){ var size=$("#tth thead th").size(); var tNamesSize=new Array; for(var i=0;i<size;i=i+1) tNamesSize[i]=$("#tth thead th:eq("+i+")").attr("width") return tNamesSize; } /* * 分页函数 * page 请求的页面 * rows 每页记录数 * queryStr 被查找的字符串 * colStr 被查找的字段,为空则查找所有的字段 * who 分页的对象,就是struts-config.xml 配置的path(无'/') * return tbody里的数据,以及对这些数据操作的功能,最后一定要加上(return ;),否则会重复的调用getDate()方法 */ function getDate(page,rows,queryStr,colStr,who){ if(who=="" || who=="undefined"){ alert("请在参数中添加要查找的对象名称"); return ; } //请求数据的地址 var url="../"+who+".do?page="+page+"&rows="+rows; if(queryStr!="" || queryStr!="undefined") url=url+"&queryStr="+queryStr; if(colStr!="" || colStr!="undefined") url=url+"&colStr="+colStr; //将地址统一转成ISO,在服务端在统一转回UTF-8(汉字在不同浏览器中编码不同,若不统一编码地址,则在服务器无法解析多种编码同时共存的情况) url=encodeURI(url); //ajax前,使背景变灰等待,阻止用户进一步操作 $(".mask").css("display","block").css("width","100%").css("height","100%"); $(".mask-msg").css("display","block").css("top","49%").css("left","44%"); $.post(url,null,function(date){ var objs=eval(date); if(objs=="") { $("#tDate").append("<tr><td colspan=7>没有记录~</td></tr>"); total=0; return ; } $("#tDate tr").remove(); //表的第一列显示行号 var lineNum=1; //表的第一列显示背景色为标题栏颜色 var lineCSS=0; //得到thead th 中定义的所有tName,用户获取json数据,为obj对象的下标 var tName=gettNames(); var tNameSize=gettNamesSize(); for(var i in objs){ var obj=objs[i]; //存储每行的信息 var outPut=""; //隔行换色 if(lineNum%2==0) outPut+="<tr class=alt><td>"+lineNum+"</td>" else outPut+="<tr><td>"+lineNum+"</td>" //由tName作为下标获取obj中的json数据存储到各数据列中 for(var t=0;t<tName.length;t=t+1){ outPut+="<td width='"+tNameSize[t+1]+"'>"+obj[tName[t]]+"</td>"; } //定义操作,此处可能对函数的兼容性有破坏性 outPut+="<td width='"+tNameSize[tNameSize.length-1]+"'><div align=center><a href=# onclick=openWin('../"+who+".do?command=updateDetail&num="+obj[tName[0]]+"','updateReport',500,300);>详细</a>" +"      <a href=# onclick=del('../"+who+".do?command=del"+who+"&num="+obj[tName[0]]+"');>删除</a>" +"      <a href=# onclick=openWin('../"+who+".do?command=updateInput&num="+obj[tName[0]]+"','update"+who+"',500,300);>修改</a></div></td></tr>"; $("#tDate").append(outPut); //取得有json传递的总记录数,此obj.total将改变index.jsp页面上的变量total的值 if(lineNum==1) total=obj.total; //首列标题色 $("tbody tr td:eq("+lineCSS+")").css("background","#F0F0F0").css("text-align","center").css("width",tNameSize[0]); //行数自曾 lineNum=lineNum+1; //跳到下一行的首列 lineCSS=lineCSS+tName.length+2; } $("#tDate tr:odd").mouseover(function(){ $(this).removeClass("alt"); $(this).addClass("over"); }).click(function(){ $(this).removeClass("alt"); if($(this).attr("class").indexOf("beClick")==-1){ $(this).addClass("beClick"); }else{ $(this).removeClass("beClick"); $(this).addClass("alt"); } }); $("#tDate tr:odd").mouseout(function(){ if($(this).attr("class").indexOf("beClick")==-1){ $(this).removeClass("over"); $(this).addClass("alt"); } }); $("#tDate tr:even").mouseover(function(){ $(this).addClass("over"); }).click(function(){ if($(this).attr("class").indexOf("over")!=-1) $(this).removeClass("over"); if($(this).attr("class")=="beClick") $(this).removeClass("beClick"); else $(this).addClass("beClick"); }); $("#tDate tr:even").mouseout(function(){ $(this).removeClass("over"); }); //总页数 if(total%rows==0) totalPage=parseInt(total/rows); else totalPage=parseInt(total/rows)+1; //设置index.jsp页面相应地点的值 $("#pageNum").val(page); $("#fromNum").html((page-1)*rows); $("#toNum").html(page*rows); $("#totalNum").html(total); $("#totalPage").html(totalPage); $(".mask").css("display","none"); $(".mask-msg").css("display","none"); }); //(重要!)否则当点击下一页或上一页按钮时,页面会级数的执行,由1-2-4-8 return ; } //响应用户请求函数,不放到getDate()中主要是因为放入则出错,具体原因和表现,忘了 function opt(page,rows,queryStr,colStr,who){ //设置跳转到目的页 $("#pageNum").keyup(function(event){ var keycode=event.which; if(keycode==13){ setPage=parseInt($(this).val()); if(setPage==page) return ; if(setPage>totalPage) page=totalPage; else page=setPage; getDate(page,rows,queryStr,colStr,who); } }); $("#reloadPage").click(function(){ getDate(page,rows,queryStr,colStr,who); }); $("#nextPage").click(function(){ if(page==totalPage) return ; page=page+1; getDate(page,rows,queryStr,colStr,who); }); $("#prevPage").click(function(){ if(page==1) return ; page=page-1; getDate(page,rows,queryStr,colStr,who); }); $("#lastPage").click(function(){ if(page==totalPage) return ; page=totalPage; getDate(page,rows,queryStr,colStr,who); }); $("#firstPage").click(function(){ if(page==1) return ; page=1; getDate(page,rows,queryStr,colStr,who); }); $("#setRows").change(function(){ rows=parseInt($(this).val()); page=1; getDate(page,rows,queryStr,colStr,who); }); $("#SIMsearch").click(function(){ queryStr=$("#SearchStr").val(); colStr=$("#listColumn").val(); page=1; getDate(page,rows,queryStr,colStr,who); }); $("#SearchStr").keyup(function(event){ var keycode=event.which; if(keycode==13){ $("#SIMsearch").click(); } }); $("#addBut").click(function(){ openWin("/test2/"+who+"/add.jsp","add"+who,500,300); }); getDate(page,rows,queryStr,colStr,who); }表头固定后,在chrome中内容部显示有滚动条时,内容被挤压,在IE下,由于本人烂css原因,本来就存在无法100%width的BUG,可是滚动条刚好暂用空白部分,显示的还算可以过的去