模式对话框辛酸往事

最新推荐文章于 2024-01-28 19:00:46 发布

原创最新推荐文章于 2024-01-28 19:00:46 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Bean #软件测试 #Struts #CSS #JSP

javaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用模式对话框的实际项目案例，详细展示了如何通过JavaScript创建模式对话框并与父页面进行交互，包括刷新父页面、数据验证及国际化实现。

昨天好友老J问我有没有运用过模式对话框，我突然想起来我们一年前曾经做过的一个项目里，客户要求用模式对话框，

这个让我一开始很头大的问题，由于我们小组成员都是刚毕业的学生，三男一女，那时候每天晚上基本都是1点睡觉

早上6点半起床7点就工作了，大冬天的，就这样持续了二个多月，当时是一腔热血，目前两个同学转测试了，女生到一个软件培训机构教书去了。

父页面在head标签里一定要加下面这句，当模式对话框提交关闭的时候，父页面需要刷新避免从新打开新页面

<base target="_self">

下面的js代码是父页面用来创建一个模式对话框

//------------------用于添加------------------------	
	function newwindows() {
			var k=window.showModalDialog("crm/production/productionAddIframe.jsp",window, "dialogHeight:350px;dialogWidth:650px;center:yes;status:no;resizable:no;");
			if (k == 1) {
				window.location.href="./getProductionsByPage.shtml"
			}
		
	}

这里的window.location.href指的当然就是父页面了

当K=1是将使父页面从新从新获取连接，相当于刷新了父页面

下面是模式对话框的添加数据后的保存按钮，当时美工都没，css不是很熟就直接放标签里面了，图片都是自己切的，这里也实现了国际化用的是struts标签的<bean:message key='production.save' />

提交也是在js的=checkname(1)里面，并将1传给了K值通知父窗口发生变化

<html:button onclick="checkname(1)" styleClass="Button" property="previousStep"  style="background-image: url(../../imgs/botton.gif)">
						<bean:message key='production.save' />
					</html:button>

//-------------提交时用于验证------------	
	function checkname(refresh){
		var reg=/[\\\/\<\>\?\:\"\*\;]/;
		var code = document.form.pcode.value;
		var name = document.form.pname.value;
		var type = document.form.ptype.value;
		var comt = document.form.pcomt.value;
		if(reg.test(code)||reg.test(name)||reg.test(type)){
			alert(message["character"]);
			return false;
		}
		if(trim(name)==""){
			alert(message["nameNotNull"]);
			return false;
		}else{   
			var pcode = trim(code);
			var pname = trim(name);
			var ptype = trim(type);
			var pcomt = trim(comt);
			if(pcode.length > 50){
				alert(message["codeLength"]);
				return false;
			}
			if(ptype.length>50){
				alert(message["typeLength"]);
				return false;
			}
			if(pname.length>50){
				alert(message["nameLength"]);
				return false;
			}
			document.form.pname.value=pname;
			document.form.pcode.value=pcode;
			document.form.ptype.value=ptype;
			document.form.submit();
			window.close();
		}
		
		window.returnValue = refresh;
	}

最后的一句window.returnValue = refresh;与父窗口的通讯，window.close();是关闭了模式对话框

上面的这里连js都实现了国际化

	alert(message["nameNotNull"]);

//----------------去除文本框中字符串的所有空格--------
	function trim(str){	  
		var t = str.replace(/(^\s*)|(\s*$)/g,"");
		var str = t.replace(/\s/g,"")
		return str;
	}

下面是回车键保存模式对话框

//-----------用于响应键盘事件-------------
 function KeyDown(){
     if(event.keyCode==13) {        
        check1() 
  
         var b= document.getElementById("res");
         
         if( b.innerHTML!=""){
          return false;
          }
       	checkname(1);
      
         }
	}

下面模式对话框里的<div id="res" align="left"></div>与上面代码的var b= document.getElementById("res");
是用来做异步判断添加的名称是否重复

<html:text styleId="pname" onblur="check()" name="productionBean" property="production.prdname" size="70" maxlength="70"></html:text>
					<div id="res" align="left"></div>

这个项目是绩效软件给移动公司做的，要求相当的BT，很多地方非常的人性化，相当的不错