DWZ主从表界面唯一性验证（自写js）（一）

　　最近在项目中遇到一个问题，它的需求是：

利用DWZ的主从表结构批量添加课程信息，需要在触发课程代码文本框的离开事件时验证：
1、是否选择学院。
2、数据库里是否已存在该课程代码。
3、多条数据添加时，界面是否有重复的课程代码。

　　第一步→给每行的课程代码文本框添加onblur离开事件。

　　主从表代码如下：

　　

                 <table class="list nowrap  itemDetail" addButton="添加课程" width="100%"
                     id="parentTable">
                     <thead>
                         <tr>
                             <th type="code" name="courseList[#index#].code" size="5"
                                 fieldClass="required " fieldAttrs="{maxlength:2}">课程代码</th>
                             <th type="text" name="courseList[#index#].name" size="20"
                                 defaultVal="" fieldClass="required">课程名称</th>
                             <th type="enum" name="courseList[#index#].courseType.id"
                                 size="20" fieldClass="required"
                                 enumUrl="${contextPath }/course/showCourseType.do">课程类型</th>
                             <th type="text" name="courseList[#index#].remark" defaultVal=""
                                 size="30" fieldClass="required ">备注</th>
                             <th type="del" width="30">操作</th>
                         </tr>
                     </thead>
                     <tbody>
                     </tbody>
                 </table>
             

　　主从表效果如下：

　　

　　一开始尝试在里面直接添加onblur="customFun(this)"，但是失败了，结果离开事件只显示在了表头“课程代码”上面。所以，必要时，我们需要修改js，当点击“添加课程”的时候，肯定会添加一行html。所以，将onblur加到对应的html里才是正解。于是追踪到对应的js为：

　

 function tdHtml(field) {
                         var html = '', suffix = '';
                         if (field.name.endsWith("[#index#]"))
                             suffix = "[#index#]";
                         else if (field.name.endsWith("[]"))
                             suffix = "[]";
                         var suffixFrag = suffix ? ' suffix="' + suffix + '" '
                                 : '';
                         var attrFrag = '';
                         if (field.fieldAttrs) {
                             var attrs = DWZ.jsonEval(field.fieldAttrs);
                             for ( var key in attrs) {
                                 attrFrag += key + '="' + attrs[key] + '"';
                             }
                         }
                         switch (field.type) {
                         case 'del':
                             html = '<a href="javascript:void(0)" class="btnDel '
                                     + field.fieldClass + '">删除</a>';
                             break;
                         case 'lookup':
                             var suggestFrag = '';
                             if (field.suggestFields) {
                                 suggestFrag = 'autocomplete="off" lookupGroup="'
                                         + field.lookupGroup
                                         + '"'
                                         + suffixFrag
                                         + ' suggestUrl="'
                                         + field.suggestUrl
                                         + '" suggestFields="'
                                         + field.suggestFields
                                         + '"'
                                         + ' postField="'
                                         + field.postField
                                         + '"';
                             }
                             html = '<input type="hidden" name="'
                                     + field.lookupGroup + '.' + field.lookupPk
                                     + suffix + '"/>'
                                     + '<input type="text" name="' + field.name
                                     + '"' + suggestFrag + ' lookupPk="'
                                     + field.lookupPk + '" size="' + field.size
                                     + '" class="' + field.fieldClass + '"/>'
                                     + '<a class="btnLook" href="'
                                     + field.lookupUrl + '" lookupGroup="'
                                     + field.lookupGroup + '" ' + suggestFrag
                                     + ' lookupPk="' + field.lookupPk
                                     + '" title="查找带回">查找带回</a>';
                             break;
                         case 'attach':
                             html = '<input type="hidden" name="'
                                     + field.lookupGroup
                                     + '.'
                                     + field.lookupPk
                                     + suffix
                                     + '"/>'
                                     + '<input type="text" name="'
                                     + field.name
                                     + '" size="'
                                     + field.size
                                     + '" readonly="readonly" class="'
                                     + field.fieldClass
                                     + '"/>'
                                     + '<a class="btnAttach" href="'
                                     + field.lookupUrl
                                     + '" lookupGroup="'
                                     + field.lookupGroup
                                     + '" '
                                     + suggestFrag
                                     + ' lookupPk="'
                                     + field.lookupPk
                                     + '" width="560" height="300" title="查找带回">查找带回</a>';
                             break;
                         case 'enum':
                             $.ajax({
                                 type : "POST",
                                 dataType : "html",
                                 async : false,
                                 url : field.enumUrl,
                                 data : {
                                     inputName : field.name
                                 },
                                 success : function(response) {
                                     html = response;
                                 }
                             });
                             break;
                         case 'date':
                             html = '<input type="text" name="'
                                     + field.name
                                     + '" value="'
                                     + field.defaultVal
                                     + '" class="date '
                                     + field.fieldClass
                                     + '" dateFmt="'
                                     + field.patternDate
                                     + '" size="'
                                     + field.size
                                     + '"/>'
                                     + '<a class="inputDateButton" href="javascript:void(0)">选择</a>';
                             break;
                         case 'code':
                             html = '<input type="text" onblur="customFun(this)" name="'
                                 + field.name
                                 + '" value="'
                                 + field.defaultVal
                                 + '" size="'
                                 + field.size
                                 + '" class="'
                                 + field.fieldClass + '" ' + attrFrag + '/>';
                             break;
 
                         default:
                             html = '<input type="text"  name="'
                                     + field.name
                                     + '" value="'
                                     + field.defaultVal
                                     + '" size="'
                                     + field.size
                                     + '" class="'
                                     + field.fieldClass + '" ' + attrFrag + '/>';
                             break;
                         }

　　所以，如果(<th type="text" > ) type="text"则会添加一行以下的代码，所以我们将onblur事件添加在下面的<input>标签里就可以实现了。

 html = '<input type="text"  name="'
                                     + field.name
                                     + '" value="'
                                     + field.defaultVal
                                     + '" size="'
                                     + field.size
                                     + '" class="'
                                     + field.fieldClass + '" ' + attrFrag + '/>';
                             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"：

　　

                 <div class="unit">
                     <label>所属学院名称：</label> <select class="combox" name="collegeId"
                         id="collegeName">
                         <option id="all" value="">--请选择学院--</option>
                         <c:forEach var="item" items="${colleges}">
                             <option id="${item.institutionId}" value="${item.institutionId}">${item.institutionCode}${item.institutionName}</option>
                         </c:forEach>
                     </select>
                 </div>

　　Js判断如下：

 <script defer type="text/javascript">
 
  //code离开判断学院是否选择，判断数据库是否存在，判断界面是否
   function customFun(code) {
     //1、测试code列离开事件是否成功
      //alert("我的离开事件，第一次弹窗！");
      //alertMsg.warn('我的离开事件，第一次弹窗！！');
     //——————success——————————
     //2、判断是否选择学院
      var selectObj = document.getElementById("collegeName");
      var activeIndex = selectObj.options[selectObj.selectedIndex].value;
      if (activeIndex == ""){
          alertMsg.warn('请先选择学院！');
          selectObj.focus();
          return false;
      }
    //——————success——————————
 
   }
</script> 

　　　第三步→Ajax异步判断是否数据库里已存在此课程代码

　　js代码（DRP实例）：

　　

    //3、判断数据库里是否存在此code使用Ajax
    if (code.value.length != 0) {
             var xmlHttp = null;
             //表示当前浏览器不是ie,如ns,firefox
             if(window.XMLHttpRequest) {
                 xmlHttp = new XMLHttpRequest();
             } else if (window.ActiveXObject) {
                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
             }
             var url = "${contextPath }/course/validateCourseCodeAction.action?collegeId=" +selectObj.value + "&courseCode="+code.value+"&time=" + new Date().getTime();
 
             //设置请求方式为GET，设置请求的URL，设置为异步提交
             xmlHttp.open("GET", url, true);
 
             //将方法地址复制给onreadystatechange属性
             //类似于电话号码
             xmlHttp.onreadystatechange=function() {
                 //Ajax引擎状态为成功
                 if (xmlHttp.readyState == 4) {
                     //HTTP协议状态为成功
                     if (xmlHttp.status == 200) {
                         if (xmlHttp.responseText != "") {
 
                              alertMsg.warn( "数据库里已存在该课程代码，请勿重复添加");
                         }                             
 
                     }else {
                          alertMsg.warn("请求失败，错误码=" + xmlHttp.status);
 
                     }
                 }
             };
 
             //将设置信息发送到Ajax引擎
             xmlHttp.send(null);
         }

　　validateCourseCodeAction.action对应的方法：

　　

     /**
      * @MethodName : validateCourseCode
      * @Description : 表单唯一性验证
      * @param courseCode
      * @return
      */
     public void validateCourseCode() {
         System.out.println("巨亚红测试collegeId=" + collegeId);
         String  collegeId=request.getParameter("collegeId");
         // 根据学院ID获得学院Code
         String code = courseService.getCollegeById(collegeId).getInstitutionCode();
         // 获得课程Code
         String courseCode = request.getParameter("courseCode");
         // 设置课程code=学院code+课程code
         StringBuffer codeBuffer = new StringBuffer();
         codeBuffer.append(code);
         codeBuffer.append(courseCode);
 
         List<Course> courses = courseService.getCourseByCode(codeBuffer.toString());
         if (courses.size() > 0) {
         outMsg(AjaxObject.newOk("数据库里已存在该课程代码，请勿重复添加!").setNavTabId("courseListview").toString());
 
         }
 
     }

　　实现效果如下：

　　

　　　第四步→判断界面唯一性，获取各行code值（下篇博客来介绍）