最近在项目中遇到一个问题，它的需求是：
利用DWZ的主从表结构批量添加课程信息，需要在触发课程代码文本框的离开事件时验证： 1、是否选择学院。 2、数据库里是否已存在该课程代码。 3、多条数据添加时，界面是否有重复的课程代码。
第一步→给每行的课程代码文本框添加onblur离开事件。
主从表代码如下：
1 <table class="list nowrap itemDetail" addButton="添加课程" width="100%" 2 id="parentTable"> 3 <thead> 4 <tr> 5 <th type="code" name="courseList[#index#].code" size="5" 6 fieldClass="required " fieldAttrs="{maxlength:2}">课程代码</th> 7 <th type="text" name="courseList[#index#].name" size="20" 8 defaultVal="" fieldClass="required">课程名称</th> 9 <th type="enum" name="courseList[#index#].courseType.id" 10 size="20" fieldClass="required" 11 enumUrl="${contextPath }/course/showCourseType.do">课程类型</th> 12 <th type="text" name="courseList[#index#].remark" defaultVal="" 13 size="30" fieldClass="required ">备注</th> 14 <th type="del" width="30">操作</th> 15 </tr> 16 </thead> 17 <tbody> 18 </tbody> 19 </table> 20
主从表效果如下：
一开始尝试在
里面直接添加onblur="customFun(this)"，但是失败了，结果离开事件只显示在了表头“课程代码”上面。所以，必要时，我们需要修改js，当点击“添加课程”的时候，肯定会添加一行html。所以，将onblur加到对应的html里才是正解。于是追踪到对应的js为：
1 function tdHtml(field) { 2 var html = '', suffix = ''; 3 if (field.name.endsWith("[#index#]")) 4 suffix = "[#index#]"; 5 else if (field.name.endsWith("[]")) 6 suffix = "[]"; 7 var suffixFrag = suffix ? ' suffix="' + suffix + '" ' 8 : ''; 9 var attrFrag = ''; 10 if (field.fieldAttrs) { 11 var attrs = DWZ.jsonEval(field.fieldAttrs); 12 for ( var key in attrs) { 13 attrFrag += key + '="' + attrs[key] + '"'; 14 } 15 } 16 switch (field.type) { 17 case 'del': 18 html = '<a href="javascript:void(0)" class="btnDel ' 19 + field.fieldClass + '">删除</a>'; 20 break; 21 case 'lookup': 22 var suggestFrag = ''; 23 if (field.suggestFields) { 24 suggestFrag = 'autocomplete="off" lookupGroup="' 25 + field.lookupGroup 26 + '"' 27 + suffixFrag 28 + ' suggestUrl="' 29 + field.suggestUrl 30 + '" suggestFields="' 31 + field.suggestFields 32 + '"' 33 + ' postField="' 34 + field.postField 35 + '"'; 36 } 37 html = '<input type="hidden" name="' 38 + field.lookupGroup + '.' + field.lookupPk 39 + suffix + '"/>' 40 + '<input type="text" name="' + field.name 41 + '"' + suggestFrag + ' lookupPk="' 42 + field.lookupPk + '" size="' + field.size 43 + '" class="' + field.fieldClass + '"/>' 44 + '<a class="btnLook" href="' 45 + field.lookupUrl + '" lookupGroup="' 46 + field.lookupGroup + '" ' + suggestFrag 47 + ' lookupPk="' + field.lookupPk 48 + '" title="查找带回">查找带回</a>'; 49 break; 50 case 'attach': 51 html = '<input type="hidden" name="' 52 + field.lookupGroup 53 + '.' 54 + field.lookupPk 55 + suffix 56 + '"/>' 57 + '<input type="text" name="' 58 + field.name 59 + '" size="' 60 + field.size 61 + '" readonly="readonly" class="' 62 + field.fieldClass 63 + '"/>' 64 + '<a class="btnAttach" href="' 65 + field.lookupUrl 66 + '" lookupGroup="' 67 + field.lookupGroup 68 + '" ' 69 + suggestFrag 70 + ' lookupPk="' 71 + field.lookupPk 72 + '" width="560" height="300" title="查找带回">查找带回</a>'; 73 break; 74 case 'enum': 75 $.ajax({ 76 type : "POST", 77 dataType : "html", 78 async : false, 79 url : field.enumUrl, 80 data : { 81 inputName : field.name 82 }, 83 success : function(response) { 84 html = response; 85 } 86 }); 87 break; 88 case 'date': 89 html = '<input type="text" name="' 90 + field.name 91 + '" value="' 92 + field.defaultVal 93 + '" class="date ' 94 + field.fieldClass 95 + '" dateFmt="' 96 + field.patternDate 97 + '" size="' 98 + field.size 99 + '"/>' 100 + '<a class="inputDateButton" href="javascript:void(0)">选择</a>'; 101 break; 102 case 'code': 103 html = '<input type="text" onblur="customFun(this)" name="' 104 + field.name 105 + '" value="' 106 + field.defaultVal 107 + '" size="' 108 + field.size 109 + '" class="' 110 + field.fieldClass + '" ' + attrFrag + '/>'; 111 break; 112 113 114 default: 115 html = '<input type="text" name="' 116 + field.name 117 + '" value="' 118 + field.defaultVal 119 + '" size="' 120 + field.size 121 + '" class="' 122 + field.fieldClass + '" ' + attrFrag + '/>'; 123 break; 124 }
所以，如果(<th type="text" > ) type="text"则会添加一行以下的代码，所以我们将onblur事件添加在下面的<input>标签里就可以实现了。
1 html = '<input type="text" name="' 2 + field.name 3 + '" value="' 4 + field.defaultVal 5 + '" size="' 6 + field.size 7 + '" class="' 8 + field.fieldClass + '" ' + attrFrag + '/>'; 9 break;
为了不影响之前的代码实现，所以我加了一个条件为code的判断如下：onblur事件已经成加入了。
case 'code': html = '<input type="text" onblur="customFun(this)" name="' + field.name + '" value="' + field.defaultVal + '" size="' + field.size + '" class="' + field.fieldClass + '" ' + attrFrag + '/>'; break;
测试一下吧，onblur事件已经成功添加了！
第二步→判断是否选择学院。
学院下拉框id="collegeName"：
1 <div class="unit"> 2 <label>所属学院名称：</label> <select class="combox" name="collegeId" 3 id="collegeName"> 4 <option id="all" value="">--请选择学院--</option> 5 <c:forEach var="item" items="${colleges}"> 6 <option id="${item.institutionId}" value="${item.institutionId}">${item.institutionCode}${item.institutionName}</option> 7 </c:forEach> 8 </select> 9 </div>
Js判断如下：
1 <script defer type="text/javascript"> 2 3 4 //code离开判断学院是否选择，判断数据库是否存在，判断界面是否 5 function customFun(code) { 6 //1、测试code列离开事件是否成功 7 //alert("我的离开事件，第一次弹窗！"); 8 //alertMsg.warn('我的离开事件，第一次弹窗！！'); 9 //——————success—————————— 10 //2、判断是否选择学院 11 var selectObj = document.getElementById("collegeName"); 12 var activeIndex = selectObj.options[selectObj.selectedIndex].value; 13 if (activeIndex == ""){ 14 alertMsg.warn('请先选择学院！'); 15 selectObj.focus(); 16 return false; 17 } 18 //——————success—————————— 19 20 } 21</script>
第三步→Ajax异步判断是否数据库里已存在此课程代码
js代码（DRP实例）：
1 //3、判断数据库里是否存在此code使用Ajax 2 if (code.value.length != 0) { 3 var xmlHttp = null; 4 //表示当前浏览器不是ie,如ns,firefox 5 if(window.XMLHttpRequest) { 6 xmlHttp = new XMLHttpRequest(); 7 } else if (window.ActiveXObject) { 8 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 9 } 10 var url = "${contextPath }/course/validateCourseCodeAction.action?collegeId=" +selectObj.value + "&courseCode="+code.value+"&time=" + new Date().getTime(); 11 12 //设置请求方式为GET，设置请求的URL，设置为异步提交 13 xmlHttp.open("GET", url, true); 14 15 //将方法地址复制给onreadystatechange属性 16 //类似于电话号码 17 xmlHttp.onreadystatechange=function() { 18 //Ajax引擎状态为成功 19 if (xmlHttp.readyState == 4) { 20 //HTTP协议状态为成功 21 if (xmlHttp.status == 200) { 22 if (xmlHttp.responseText != "") { 23 24 alertMsg.warn( "数据库里已存在该课程代码，请勿重复添加"); 25 }26 27 28 }else { 29 alertMsg.warn("请求失败，错误码=" + xmlHttp.status); 30 31 } 32 } 33 }; 34 35 //将设置信息发送到Ajax引擎 36 xmlHttp.send(null); 37 }
validateCourseCodeAction.action对应的方法：
1 /** 2 * @MethodName : validateCourseCode 3 * @Description : 表单唯一性验证 4 * @param courseCode 5 * @return 6 */ 7 public void validateCourseCode() { 8 System.out.println("巨亚红测试collegeId=" + collegeId); 9 String collegeId=request.getParameter("collegeId"); 10 // 根据学院ID获得学院Code 11 String code = courseService.getCollegeById(collegeId).getInstitutionCode(); 12 // 获得课程Code 13 String courseCode = request.getParameter("courseCode"); 14 // 设置课程code=学院code+课程code 15 StringBuffer codeBuffer = new StringBuffer(); 16 codeBuffer.append(code); 17 codeBuffer.append(courseCode); 18 19 List<Course> courses = courseService.getCourseByCode(codeBuffer.toString()); 20 if (courses.size() > 0) { 21 outMsg(AjaxObject.newOk("数据库里已存在该课程代码，请勿重复添加!").setNavTabId("courseListview").toString()); 22 23 } 24 25 }
实现效果如下：
第四步→判断界面唯一性，获取各行code值（下篇博客来介绍）