最近在項目中遇到一個問題，它的需求是：
利用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值（下篇博客來介紹）