JS 技术总结

刷新页面：

第1,2点适用于增删改的时候刷新列表，第3是开新窗口查询的时候获得查询后的列表

1.window.opener.location.reload();

新打开的窗口用这种方式定位到父窗口，

 2.parent.frameRightUp.location .reload();

适用于框架集的frame的结构。

 3.

/**
 *returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用
 *window.showModalDialog函数打开一个IE的模式窗口(模式窗口知道吧,就是打开后不能操作父窗口,只能等模式窗口关闭时才能操作)时,用于返回窗口的值
 */
 function Query(){
  window.returnValue = getParams();
  window.close();
 }
 //回车键提交
 function keyPressEvent(){
  if(event.keyCode==13){
   Query();
  }
 }
 /**
  * 得到查询参数,
  */
 function getParams(){
  var urlParams='';
  var all = $(':input');
  for(var i = 0; i < all.length; i++){
   var jqueryObj = $(all[i]);
   urlParams = urlParams + '&' + jqueryObj.attr('name') + '=' + jqueryObj.val();
  }
  return urlParams;
 }

 

打开新窗口查询的时候，可以根据form里的设置属性target直接加入跳转到要刷新的frame。

target可以指向本jsp页面frame的框架，也可以指向父窗口的框架集的frame。这样查询后就会刷新target指定的frame名。

form中taget的用法也可以自己去百度。

function queryPrice(){
  var url =encodeURI( "<%=path%>/aaa/bbb!ccc.action?id=<%=id>&type=query&query_type=${query_type}");
  document.forms['priceQuery'].action=url;
  document.forms['priceQuery'].submit();
  window.setTimeout("window.close()", 100);
 }
 <form  id="priceQuery" action="" method="post" name="priceQuery" target="rightFrame">
        <input type="text" name="old_order_number" id="old_order_number"  class="textfield-100"/></td>
        <input type="text" name="staff_name" id="staff_name"   class="textfield-100"/></td>
 </form>

 

提交请求时显示等待：

 

1.jquery调用ajax请求发起的事件，成功后需要定位到另一个链接，这时可能出现效应等待时间过长的问题，如果页面一点提示信息都 没有就会错误的以为请求不成功，所以要加一些显示等待的提示信息。其实这个jquery已经帮我们实现了，只要引入jquery.loadmask.css和jquery.loadmask.js插件，就可以成功。mask方法就是loadmask.js里面的方法。这种在网上搜索很多的。当时解决这个问题时因为jquery调用ajax请求，所以加上了beforeSend这个属性来调用。

$.ajax({
		    url     : encodeURI(url),	          // 处理中文乱码。
		    type    : "POST",                     // 请求的方式:"POST" 或者 "GET"
		    dataType: "jsonp",                    // 数据返回的格式     
		    data	: "parameter1=a&parameter2=b",          
		    async	: false,                  // 数据返回的格式
		    beforeSend: function(XMLHttpRequest){
     			//ShowLoading();
     			mask($(document.body),"Please wait…",false);
 		    },
	            success : function(data){
                    if(data.length>0){
                	if(data[0].id=="success"){
                		parent.frameRightUp.location .reload();
                	}
                    }         
	            },
	           error   :errorCallBaxk //错误回调函数，自己定义的
 });

2.form表单提交时显示等待，可以在提交url前调用mark方法即可。

function save(obj){
	mask($(document.body),"fucking,Please wait…",false);						
	var url = "<s:url value='/abc/actionCls!actionName.action'/>?typeValue="+obj;
	$("form").get(0).action = url;	//设置表单的url
	$("form").get(0).submit();
}

 

3.子父checkbox的联动选择

function goSelect(id){
        var arr = id.split("_");  
        var superid = arr[0] + "_"+ arr[0];
        if(arr[0] != arr[1]){  
            //如果点击子类复选框，则父类的复选框处于选中状态  
            if($("#"+id)[0].checked){  
                //组织父类id  
                $("#"   + superid).attr("checked","checked");  
            }else{  
                var flag = false;  
                //过滤选择1，checkbox2，以arr[0]开头，3，不以arr[0]结尾的checkbox  
                var $child = $("input[type = checkbox][id ^="+arr[0]+" ]:not([id $="+arr[0]+"])");  
                $child.each(function(index,DomEle){
                    if(this.checked){  
                        flag = true;  
                        return; 
                    }  
                });    
                if(!flag){  
                    $("#"+superid).attr("checked",null);  
                }  
            }  
        }else if(arr[0] == arr[1]){//点击父选框，则子选框全选中
            if($("#"+id)[0].checked){
                $("input[type = checkbox][id ^="+arr[0]+"]").attr("checked","checked");               
            }else{  
                    $("input[type = checkbox][id ^="+arr[0]+"]").attr("checked",null);  
            }  
        }  
}

4.jquery bind函数用法。

//直接在bind里面写
$("input[name='CUST_ID_1']").bind("click", function(){
   alert( $(this).text() );
 }); 
 //自己写的外部函数不可以加参数传递，只能调用名字
$("input[name='CUST_ID_1']").bind("blur",checkAndInit);

function checkAndInit(obj){
	var objName =obj.name;
	if(objName=="INVOICE_NO"){
		checkIntegerNum(obj);
	}
	if(objName !=""){
		ajaxSAPCustNO();
	}	
}

 5.JQ节点遍历方法小结

function check(){

	var ctg_curency="";
	var cte_curency="";
	var cta_curency="";
	var flag=true;
	var $bill_party = $("select[name='bill_party']");
	var g=0,e=0,a=0;
	
	$bill_party.each(function(index,DomEle){//遍历bill_party节点
        var org_id=this.value;
        var $curency=$(this).parent().parent().find("select[name='currency_cross_price']");
        var curency=$curency.val();
        $curency.removeClass("warning");
        if(org_id=="121129000128"){ //亚太 
        	if(g==0){
        		ctg_curency=curency+"";
        	}
        	g=g+1;
          	if(ctg_curency.indexOf(curency)<0){
        		$curency.focus();
        		$curency.addClass("warning");
        		flag = false;
        		alert("xxxxxxxx");
                return false;// 返回false才会退出循环!  
        	}
        }else if(org_id=="121129000127"){//欧洲
        	if(e==0){
        		cte_curency=curency+"";
        	}
        	e=e+1;
        	if(cte_curency.indexOf(curency)<0){
        		$curency.focus();
        		$curency.addClass("warning");
        		flag = false; 
        		alert("ffffffff");
                return false;
        	}        
        }
	});	
	return flag;
}

以上check方法是工作getel的时候写的，主要是总结JQ遍历节点，要注意的是return false才会退出循环，return；是不会退出的。这个在JQ文档里面就有解释，所以有时候碰到问题，看一下官方文档是最正确的选择，百度，谷歌都不管用。。