当前位置: 代码迷 >> Web前端 >> 杂,瞧的懂就见鬼了
  详细解决方案

杂,瞧的懂就见鬼了

热度:131   发布时间:2012-11-05 09:35:12.0
杂,看的懂就见鬼了

/*
 * 分页函数
 * page 请求的页面
 * rows 每页记录数
 * queryStr 被查找的字符串
 * colStr 被查找的字段,为空则查找所有的字段
 * who 分页的对象,就是struts-config.xml 配置的path(无'/')
 * return tbody里的数据,以及对这些数据操作的功能,最后一定要加上(return;),否则会重复的调用getDate()方法
 */

function getDate(page,rows,queryStr,colStr,who,w,h){
	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","102%").css("height","100%");
	$(".mask-msg").css("display","block").css("top","49%").css("left","44%");
	
$.ajax({
    url: url,
    type: 'POST',
    data: null,
   	timeout: 10000,
    error: function(){
        alert('加载数据出错~');
        $("#pageNum").val(0);
    	$("#fromNum").html(0);
		$("#toNum").html(0);
    	$("#totalNum").html(0);
   	 	$("#totalPage").html(0);
		$(".mask").css("display","none");
		$(".mask-msg").css("display","none");
    },
    success: function(date){
		var objs=eval(date);
		total=objs.total;
		if(objs.total==0) {
			$("#tDate tr").remove();
			$("#tDate").append("<tr><td colspan=7>没有记录~</td></tr>");
			$("#pageNum").val(0);
    		$("#fromNum").html(0);
			$("#toNum").html(0);
    		$("#totalNum").html(0);
   	 		$("#totalPage").html(0);
			$(".mask").css("display","none");
			$(".mask-msg").css("display","none");
			return ;
		}
     	$("#tDate tr").remove();
     	//表的第一列显示行号
     	var lineNum=1;
     	//表的第一列显示背景色为标题栏颜色
     	var lineCSS=0;
     	
     	//得到thead th 中定义的所有tName,用户获取json数据,为obj对象的下标
     	var tName=gettNames();
     	for(var i in objs.rows){
     		var obj=objs.rows[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>"+obj[tName[t]]+"</td>";
     		}
     		//定义操作,此处可能对函数的兼容性有破坏性
     		outPut+="<td><div align=center><a href=# onclick=openWin('../"+who+".do?command=updateDetail&num="+obj[tName[0]]+"','updateReport',"+w+","+h+");>查看</a>"
				+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href=# onclick=openWin('../"+who+".do?command=updateInput&num="+obj[tName[0]]+"','update"+who+"',"+w+","+h+");>修改</a>"
				+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href=# onclick=del('../"+who+".do?command=del"+who+"&num="+obj[tName[0]]+"',"+page+");>删除</a></div></td></tr>";

     		$("#tDate").append(outPut);
     		
     		//首列标题色
     		$("tbody tr td:eq("+lineCSS+")").css("background","#E8ECE8").css("padding","0px").css("text-align","center");
     		//行数自曾
     		lineNum=lineNum+1;
     		//跳到下一行的首列
     		lineCSS=lineCSS+tName.length+2;
     	}
     	
     	//补充填满表格
     	var keepOn=lineNum;
     	if(keepOn<=rows){
     		for(var i=0;i<=rows-keepOn;i=i+1){
     			//存储每行的信息
     			var outPut="";
     			//隔行换色
     			if(lineNum%2==0)
     				outPut+="<tr class=alt><td>"+lineNum+"</td>";
     			else
     				outPut+="<tr><td>"+lineNum+"</td>";
     			for(var t=0;t<tName.length+1;t=t+1)
     				outPut+="<td></td>";
     			outPut+="</tr>";
     			$("#tDate").append(outPut);
     			$("tbody tr td:eq("+lineCSS+")").css("background","#E8ECE8").css("padding","0px").css("text-align","center");
     			//行数自曾
     			lineNum=lineNum+1;
     			//跳到下一行的首列
     			lineCSS=lineCSS+tName.length+2;
     		}
     	}
     	
     	var preClickIndex=-1;
    	$("#tDate tr:odd").mouseover(function(){
			$(this).removeClass("alt");
			if(!$(this).hasClass("beClick"))
				$(this).addClass("over");
		}).mouseout(function(){
			$(this).removeClass("over");
			if(!$(this).hasClass("beClick"))
				$(this).addClass("alt");
		});
		
		$("#tDate tr:even").mouseover(function(){
			if(!$(this).hasClass("beClick"))
				$(this).addClass("over");
		}).mouseout(function(){
			$(this).removeClass("over");
		});
		
		$("#tDate > tr").click(function(){
			if(preClickIndex!=-1){
				$("#tDate > tr:eq("+preClickIndex+")").removeClass("beClick");
				if(preClickIndex%2==1)
					$("#tDate > tr:eq("+preClickIndex+")").addClass("alt");
			}
			$(this).addClass("beClick");
			//index()方法,返回当前子元素所在位置
			preClickIndex=$( "#tDate tr" ).index($(this)[0]);
		});
		
		//总页数
		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,w,h){
	//设置跳转到目的页
	$("#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,w,h);
		}
	});
	
	$("#reloadPage").click(function(){
	 	getDate(page,rows,queryStr,colStr,who,w,h);
	});
	
	$("#nextPage").click(function(){
		if(page==totalPage)
			return ;
		page=page+1;
		getDate(page,rows,queryStr,colStr,who,w,h);
	});
	
	$("#prevPage").click(function(){
		if(page==1)
			return ;
		page=page-1;
		getDate(page,rows,queryStr,colStr,who,w,h);
	});
	
	$("#lastPage").click(function(){
		if(total%rows==0)
			totalPage=parseInt(total/rows);
		else
			totalPage=parseInt(total/rows)+1;
		if(page==totalPage)
			return ;
		page=totalPage;
		getDate(page,rows,queryStr,colStr,who,w,h);
	});
	
	//添加元素完成后,跳转到最后一页,与$("#lastPage").click()区别是当在最后一页添加记录时仍然会刷新页面
	$("#lastPage").dblclick(function(){
		if(total%rows==0)
			totalPage=parseInt(total/rows);
		else
			totalPage=parseInt(total/rows)+1;
		page=totalPage;
		queryStr="";
		colStr="";
		getDate(page,rows,queryStr,colStr,who,w,h);
	});
	
	$("#firstPage").click(function(){
		if(page==1)
			return ;
		page=1;
		getDate(page,rows,queryStr,colStr,who,w,h);
	});
	
	$("#setRows").change(function(){
		rows=parseInt($(this).val());
		page=1;
		$.cookie('pageSize',null,{ path: '/' });
		var date = new Date();  
        date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
		$.cookie('pageSize',rows,{ path: '/', expires: date });
		getDate(page,rows,queryStr,colStr,who,w,h);
	});
	
	$("#SIMsearch").click(function(){
		var QueryStr=$("#SearchStr").val();
		queryStr=$.trim(QueryStr);
		colStr=$("#listColumn").val();
		page=1;
		getDate(page,rows,queryStr,colStr,who,w,h);
	});
	
	$("#SearchStr").keyup(function(event){
		var keycode=event.which;
		if(keycode==13){
			$("#SIMsearch").click();
		}
	});
	
	$("#addBut").click(function(){
		openWin("/test2/"+who+"/add.jsp","add"+who,w,h);
	});
	
	getDate(page,rows,queryStr,colStr,who,w,h);
}



//日期验证
function validateCNDate( strValue ) { 
	var objRegExp = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/ 
	if(!objRegExp.test(strValue)) 
		return false; 
	else{ 
		var arrayDate = strValue.split(RegExp.$1); 
		var intDay = parseInt(arrayDate[2],10); 
		var intYear = parseInt(arrayDate[0],10); 
		var intMonth = parseInt(arrayDate[1],10); 

		if(intMonth > 12 || intMonth < 1) { 
			return false; 
		} 
		var arrayLookup = { '1' : 31,'3' : 31, '4' : 30,'5' : 31,'6' : 30,'7' : 31, 
				'8' : 31,'9' : 30,'10' : 31,'11' : 30,'12' : 31} 

		if(arrayLookup[parseInt(arrayDate[1])] != null) { 
		if(intDay <= arrayLookup[parseInt(arrayDate[1])] && intDay != 0) 
			return true; 
		} 

		if (intMonth-2 ==0) { 
			var booLeapYear = (intYear % 4 == 0 && (intYear % 100 != 0 || intYear % 400 == 0)); 
			if( ((booLeapYear && intDay <= 29) || (!booLeapYear && intDay <=28)) && intDay !=0) 
				return true; 
			} 
		} 
	return false; 
}

function checkDouble(obj){
 	var v=obj.val();
    var value=$.trim(v);
 	if(v=="" || v==null || isNaN(v)){
 		obj.val("");
 		obj.get(0).select();
 		alert("请输入数字");
 		return false;
	}
}


 function openWin(url,name,w,h,s){
	sb ="1";
	l = (screen.width - w)/2;
	t = (screen.height - h)/2;
	sFeatures = "left="+ l +",top="+ t +",height="+ h +",width="
			+w+ ",center=1,scrollbars=" + sb + ",status=0,directories=0,channelmode=0";
	//将地址都转成IOS编码,反正传递参数时含有汉字时,不同的浏览器会用不同的编码传递,导致服务端出错
	var url=encodeURI(url);
	openwin = window.open(url , name , sFeatures );
	if (!openwin.opener)
		openwin.opener = self;
	openwin.focus();
	return openwin;
}

function del(url,page){
	var c = "你确认要删除记录吗?";
	if(confirm(c)){
		var url=encodeURI(url);
		$.post(url,null,function(data){
			total=total-1;
			//总页数
			if(total%rows==0)
				totalPage=parseInt(total/rows);
			else
				totalPage=parseInt(total/rows)+1;
			if(page>totalPage)
				$("#lastPage").click();
			else
				$("#reloadPage").click();
		});
	}
}

function gettNames(){
	var size=$("#tt thead th").size();
	var tNames=new Array;
	for(var i=1;i<size-1;i=i+1)
		tNames[i-1]=$("#tt thead th:eq("+i+")").attr("tName")
	return tNames;
}

function sort(index,who,w,h){
	//一行总共有多少列
	var tdNums=$("#tDate tr:first").children().size();
	//总共多少行,包括空行
	var rows=$("#tDate").children().size();
	//存储每行实际数据(砍头去尾)
	
	//保存遍历每行的数据值
	var allDate=new Array();
	//非空行数
	var realLength=0;
	//取得所有的数据已数组的形式保存到allDate中,取得的数据与上面ajax传输过来的内容一样
	for(var i=0;i<rows;i=i+1){
		var trDate=new Array(tdNums-2);
		for(var j=1;j<tdNums-1;j=j+1){
			//去掉第一行:序号和最后一行:操作。
			trDate[j-1]=$("#tDate tr:eq("+i+") td:eq("+j+")").html();
		}
		//为空行则不添加,判断标准,第一行,也就是num字段为空,因为num为主键,不能为空,所以以后的应用就是判断主键列是否为空
		if($("#tDate tr:eq("+i+") td:eq(1)").html()!=null && $("#tDate tr:eq("+i+") td:eq(1)").html()!=""){
			//替换点击要排序的列与第一列的数据
			swap(trDate,0,index);
			//保存替换后的数据
			allDate[i]=trDate;
			realLength=realLength+1;
		}
	}
	
	//排序
	allDate.sort();
	
	var FinalDate=new Array(realLength);
	//把排序后的数组中的每行数据中已对换的数据对换回来。
	for(var i=0;i<realLength;i=i+1){
		var getTrDate=allDate[i];
		swap(getTrDate,index,0);
		FinalDate[i]=getTrDate;
	}
	//为del函数要传递的参数,使删除完后跳回原页
	var page=$("#pageNum").val();
	$("#tDate tr").remove();
	//表的第一列显示行号
    var lineNum=1;
    //表的第一列显示背景色为标题栏颜色
    var lineCSS=0;
     	
    for(var i in FinalDate){
     	var obj=FinalDate[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<tdNums-2;t=t+1){
     		outPut+="<td>"+obj[t]+"</td>";
     	}
     	//定义操作,此处可能对函数的兼容性有破坏性
     	outPut+="<td><div align=center><a href=# onclick=openWin('../"+who+".do?command=updateDetail&num="+obj[0]+"','updateReport',"+w+","+h+");>查看</a>"
     		+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href=# onclick=openWin('../"+who+".do?command=updateInput&num="+obj[0]+"','update"+who+"',"+w+","+h+");>修改</a>"
			+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href=# onclick=del('../"+who+".do?command=del"+who+"&num="+obj[0]+"',"+page+");>删除</a></div></td></tr>";

     	$("#tDate").append(outPut);
     		
     	//首列标题色
     	$("tbody tr td:eq("+lineCSS+")").css("background","#E8ECE8").css("padding","0px").css("text-align","center");
     	//行数自曾
     	lineNum=lineNum+1;
     	//跳到下一行的首列
     	lineCSS=lineCSS+tdNums;
     }
     	
     var keepOn=realLength;
     if(keepOn<rows){
     	for(var i=0;i<rows-keepOn;i=i+1){
     		//存储每行的信息
     		var outPut="";
     		//隔行换色
     		if(lineNum%2==0)
     			outPut+="<tr class=alt><td>"+lineNum+"</td>";
     		else
     			outPut+="<tr><td>"+lineNum+"</td>";
     		for(var t=0;t<tdNums-1;t=t+1)
     			outPut+="<td></td>";
     		outPut+="</tr>";
     		$("#tDate").append(outPut);
     		$("tbody tr td:eq("+lineCSS+")").css("background","#E8ECE8").css("padding","0px").css("text-align","center");
     		//行数自曾
     		lineNum=lineNum+1;
     		//跳到下一行的首列
     		lineCSS=lineCSS+tdNums;
     	}
     }
     	
     var preClickIndex=-1;
    $("#tDate tr:odd").mouseover(function(){
		$(this).removeClass("alt");
		if(!$(this).hasClass("beClick"))
			$(this).addClass("over");
	}).mouseout(function(){
		$(this).removeClass("over");
		if(!$(this).hasClass("beClick"))
			$(this).addClass("alt");
	});
	
	$("#tDate tr:even").mouseover(function(){
		if(!$(this).hasClass("beClick"))
			$(this).addClass("over");
	}).mouseout(function(){
		$(this).removeClass("over");
	});
		
	$("#tDate > tr").click(function(){
		if(preClickIndex!=-1){
			$("#tDate > tr:eq("+preClickIndex+")").removeClass("beClick");
			if(preClickIndex%2==1)
				$("#tDate > tr:eq("+preClickIndex+")").addClass("alt");
		}
		$(this).addClass("beClick");
		//index()方法,返回当前子元素所在位置
		preClickIndex=$( "#tDate tr" ).index($(this)[0]);
	});
	trDate=null;
	allDate=null;
	FinalDate=null;
	return ;
}

function swap(arr,i,j){
	var temp="";
	temp=arr[i];
	arr[i]=arr[j];
	arr[j]=temp;
}
?
  相关解决方案