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值（下篇博客来介绍）
DWZ主从表界面唯一性验证（自写js）（一）的更多相关文章
- DWZ主从表界面唯一性验证（自写js）（二）
上篇介绍了自写js判断的前三项,本篇博客介绍第四步,关于触发课程代码文本框的离开事件后,判断一整列的课程代码之间是否有重复的值. 此问题可以提取为判断一个数组里是否有重复值,重复值是什么. 第四步→判 ...
- DWZ主从表界面唯一性验证（后台验证）（三）
之前的博客介绍了前台自写js来验证主动表的唯一性,除了前台的验证,我也学习了后台的一些判断. 再次介绍一下背景需求: 利用DWZ的主从表结构批量添加课程信息,在提交表单后,触发Action事件 1.是 ...
- 代码生成工具Database2Sharp中增加视图的代码生成以及主从表界面生成功能
在代码生成工具的各种功能规划中,我们一向以客户的需求作为驱动,因此也会根据需要增加一些特殊的功能或者处理.在实际的开发中,虽然我们一般以具体的表进行具体业务开发,但是有些客户提出有时候视图开发也是很常 ...
- Winform界面中主从表编辑界面的快速处理
在Winform开发中,我们往往除了常规的单表信息录入外,有时候设计到多个主从表的数据显示.编辑等界面,单表的信息一般就是控件和对象实体一一对应,然后调用API保存即可,主从表就需要另外特殊处理,本随 ...
- Laravel 更新数据时在表单请求验证中排除自己，检查指定字段唯一性
原文地址:https://moell.cn/article/24 不错的laravel网站 需求场景 修改用户信息时,在表单请求验证中排除当前邮箱所在的记录行,并检查邮箱的唯一性. Laravel版本 ...
- Winform开发框架之单据窗体生成(主从表，流水单号)
源码地址:https://github.com/GarsonZhang/GZFramework.ShareDemo 前言 1.在开始本节前请先重置代码为 chapter-03-start 懒人地址:h ...
- Asp.Net MVC +EntityFramework主从表新增编辑操作的实现(删除操作怎么实现？)
Asp.Net MVC +EntityFramework主从表新增编辑操作的实现 对于MVC中同时对主从表的表单操作在网上现有的解决很少,而这样的操作在做业务系统中是经常为遇到的.我在网上搜索了很久都 ...
- DataSnap ClientdataSet 三层中主从表的操作
非原创 摘自:http://hi.baidu.com/yagzh2000/blog/item/fc69df2cb9845de78b139946.html三层中主从表的操作(删除.新增.修改)一定要在 ...
- HTML5表单及其验证
随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...
随机推荐
- 2. KNN和KdTree算法实现
1. K近邻算法(KNN) 2. KNN和KdTree算法实现 1. 前言 KNN一直是一个机器学习入门需要接触的第一个算法,它有着简单,易懂,可操作性强的一些特点.今天我久带领大家先看看sklear ...
- 【转】如何使用visual studio将你的程序打包成安装包
原文地址:https://www.cnblogs.com/SolarWings/p/6132310.html 很久很久以前,我一直有一个梦想,那就是做出一个自己的游戏,这个游戏很像模像样,除了拥有一个 ...
- 【微信小程序】使用setTimeout制作定时器的思路
setTimeout(func, time)可以使得每隔time毫秒就执行一次func函数,常用来做计时器/时钟. 下面是在微信小程序中的使用思路,只截取了关键部分代码. var timer; // ...
- [strace]跟踪进程的系统调用
转自:https://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316692.html 简介 strace常用来跟踪进程执行时的系统调用和所接收的信号 ...
- Java并发编程：Lock和Synchronized <转>
在上一篇文章中我们讲到了如何使用关键字synchronized来实现同步访问.本文我们继续来探讨这个问题,从Java 5之后,在java.util.concurrent.locks包下提供了另外一种方 ...
- Class类文件结构
平台无关性 Java是与平台无关的语言,这得益于Java源代码编译后生成的存储字节码的文件,即Class文件,以及Java虚拟机的实现.不仅使用Java编译器可以把Java代码编译成存储字节码的Cla ...
- 常用css3技巧
H5移动前端开发常用高能css3汇总 1.禁止a标签点击高亮,这些都是非官方属性,但实用性超强 html,body{ -webkit-touch-callout: none; //禁止或显示系 ...
- R语言常用基础知识（入门）
data.frame 动态确定列名称 var <- "mpg" #Doesn't work mtcars$var #These both work, but note tha ...
- Android 扩大view点击范围
Android4.0设计规定的有效可触摸的UI元素标准是48dp,转化为一个物理尺寸约为9毫米.7~10毫米,这是一个用户手指能准确并且舒适触摸的区域. 如下图所示,你的UI元素可能小于48dp,图标 ...
- Axiom3D:Ogre地形组件代码解析
大致流程. 这里简单介绍下,Axiom中采用的Ogre的地形组件的一些概念与如何生成地形. 先说下大致流程,然后大家再往下看.(只说如何生成地形与LOD,除高度纹理图外别的纹理暂时不管.) 1.生成T ...