Causesvalidation In Datagrid
在我们对Datagrid进行编辑的时候，我们可能要对用户输入的数据进行验证，以确保数据的正确性、完整性。要解决这个问题有很多不同的方法，如：我们可以运用VS.NET当中的验证控件，如： RequiredFieldValidator 。这样我们便需要 DataGrid中的 Update 按钮引发验证来检验用户输入的数据是否为空。Update 按钮包含一个CausesValidation 属性。
Public Property CausesValidation() As Boolean
成员属于: System.Web.UI.WebControls.LinkButton
获取或设置一个值，该值指示在单击 System.Web.UI.WebControls.LinkButton 控件时是否执行验证。
我们可以利用这个属性来自由控制一个webcontrol是否引发验证。
DataGrid ItemDataBound 事件：
If (e.Item.ItemType = ListItemType.EditItem) Then
setUpdateCommandCausesValidation(e.Item, True)
Private Function setUpdateCommandCausesValidation(ByVal item As DataGridItem, ByVal valor As Boolean) As String
If (item.HasControls()) Then
For Each celula As Control In item.Controls
For Each possibleButton As Control In celula.Controls
If (possibleButton.GetType().Name.Equals(&DataGridLinkButton&)) Then
Dim lbt As LinkButton = CType(possibleButton, LinkButton)
If (lbt.Text.Equals(getUpdateColumnText())) Then
lbt.CausesValidation = valor
End Function
Private Function getUpdateColumnText() As String
Dim text As String = &&
For Each coluna As DataGridColumn In DataGrid1.Columns
If (coluna.GetType().Name.Equals(&EditCommandColumn&)) Then
Dim colunaEdit As EditCommandColumn = CType(coluna, EditCommandColumn)
text = colunaEdit.UpdateText
Return text
End Function
??????????实例：SSH结合Easyui实现Datagrid的新增和验证功能 . - 推酷
实例：SSH结合Easyui实现Datagrid的新增和验证功能 .
&&&&&& 在我前面一篇博客
&分页的基础上，新增了添加功能和添加过程中的Ajax与Validate的验证功能。其他的功能在后面的博客写来，如果对您有帮助，敬请关注。
&&&&&& 先看一下实现的效果：
&&&&& （1）点击添加学生信息按键后跳出对话框，其中的学生主键和姓名不能为空，而且学生主键不能和数据库中已有的重复。
（2）当输入已有的学生信息的时候，提示已被使用
（3）当操作人员不顾提示，强行提交的时候。系统拒绝提交，并且跳出提示框。
（4）当操作人员正常操作，提交后会自动刷新，在表格中按照从小到大的顺序排列出来。
具体实现步骤：
1、依然是使用SSH框架，数据库表没有新增，所以整体的结果基本不变。将原来的index.jsp中的JavaScript部分划分到index.js中。
2、web.xm、
applicationContext.xml、
Student.java
Student.hbm.xml
、连接数据库的
applicationContext_db.xml
、Spring依赖注入的
applicationContext_bean.xml这些配置文件
和上篇博客一模一样，保持不变
。SSH的耦合度的优势在慢慢突显。
3、在StudentService.java中编写接口，新增操作的方法一定要以save开头，因为在applicationContext_db.xml配置中已经限定，或者你去该applicationContext_db.xml的配置
package com.
import java.util.L
import com.model.S
public interface StudentService {
public List getStudentList(String page,String rows) throws E//根据第几页获取，每页几行获取数据
public int getStudentTotal() throws E//统计一共有多少数据
public void saveStudent(Student student)throws E//新增学生信息
public String queryBy_unique(String table,String field ,String parameter) throws E//验证唯一性
4、在StudentServiceImpl.java的类中编写接口的实现类，验证方法queryBy_unique传入三个参数：表名，字段名，字段对应的参数。所以可以做成通用的验证方法，而不是针对某张表的某个字段的验证。
package com.serviceI
import java.util.L
import org.hibernate.Q
import org.hibernate.SessionF
import com.model.S
import com.service.StudentS
public class StudentServiceImpl implements StudentService {
private SessionFactory sessionF
// 根据第几页获取，每页几行获取数据
public List getStudentList(String page, String rows) {
//当为缺省值的时候进行赋值
int currentpage = Integer.parseInt((page == null || page == &0&) ? &1&: page);//第几页
int pagesize = Integer.parseInt((rows == null || rows == &0&) ? &10&: rows);//每页多少行
//查询学生信息，顺便按学号进行排序
List list = this.sessionFactory.getCurrentSession().createQuery(&from Student
order by studentid&)
.setFirstResult((currentpage - 1) * pagesize).setMaxResults(pagesize).list();
//setFirstResult 是设置开始查找处。setFirstResult的值 (当前页面-1)X每页条数
//设置每页最多显示的条数
setMaxResults每页的条数了
// 统计一共有多少数据
public int getStudentTotal() throws Exception {
return this.sessionFactory.getCurrentSession().find(&from Student&).size();
// 新增学生信息
public void saveStudent(Student student) throws Exception {
this.sessionFactory.getCurrentSession().save(student);
//判断是否具有唯一性
public String queryBy_unique(String table,String field ,String parameter) throws Exception {
System.out.println(&===============验证唯一性=========&);
String s=&select * from &+table +& t where t.&+field+&='&+parameter+&'&;
System.out.println(&SQL语句：&+s);
Query query = this.sessionFactory.getCurrentSession().createSQLQuery(s);
int n=query.list().size();
if(n==0)//如果集合的数量为0，说明没有重复，具有唯一性
return &1&;//返回值为1，代表具有唯一性
return &0&;//返回值为0，代表已经有了，重复了
public SessionFactory getSessionFactory() {
return sessionF
public void setSessionFactory(SessionFactory sessionFactory) {
this.sessionFactory = sessionF
5、在控制层StudentAction.java中编写：
package com.
import java.io.PrintW
import java.util.L
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import net.sf.json.JSONO
import org.apache.log4j.L
import org.apache.struts2.ServletActionC
import com.model.S
import com.service.StudentS
public class StudentAction {
static Logger log = Logger.getLogger(StudentAction.class);
private JSONObject jsonO
private S// 每页显示的记录数
private S// 当前第几页
private StudentService student_//String依赖注入
private S//学生
private S//参数
private S//表名
private S//字段
//查询出所有学生信息
public String allInfo() throws Exception {
(&查询出所有学生信息&); //引用到log4j你应该加入
log4j的配置文件，不然用System.out.println();来替换
List list = student_services.getStudentList(page, rows);//传入参数页码和行数，获取当前页的数据
this.toBeJson(list,student_services.getStudentTotal());//调用自己写的toBeJson方法转化为JSon格式
//新增学生信息
public String add() throws Exception{
(&新增学生信息&);
student_services.saveStudent(student);
//查询唯一性
public String verify() throws Exception{
(&ACTION验证唯一性&);
String s = student_services.queryBy_unique(table,field ,parameter);
(&结果：& + s);
//将验证的结果返回JSP页面，s为1代表没有重复，为0代表有重复
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType(&text/charset=utf-8&);
PrintWriter out = response.getWriter();
out.print(s);
out.flush();
out.close();
//转化为Json格式
public void toBeJson(List list,int total) throws Exception{
HttpServletResponse response = ServletActionContext.getResponse();
HttpServletRequest request = ServletActionContext.getRequest();
JSONObject jobj = new JSONObject();//new一个JSON
jobj.accumulate(&total&,total );//total代表一共有多少数据
jobj.accumulate(&rows&, list);//row是代表显示的页的数据
response.setCharacterEncoding(&utf-8&);//指定为utf-8
response.getWriter().write(jobj.toString());//转化为JSOn格式
(jobj.toString());
public StudentService getStudent_services() {
return student_
public void setStudent_services(StudentService student_services) {
this.student_services = student_
public void setJsonObj(JSONObject jsonObj) {
this.jsonObj = jsonO
public void setRows(String rows) {
this.rows =
public void setPage(String page) {
this.page =
public void setStudent(Student student) {
this.student =
public Student getStudent() {
public void setParameter(String parameter) {
this.parameter =
public void setTable(String table) {
this.table =
public void setField(String field) {
this.field =
6、改进Struts.xml配置，完整的action名称是student加上控制层对应的方法名
&?xml version=&1.0& encoding=&UTF-8&?&
&!DOCTYPE struts PUBLIC
&-//Apache Software Foundation//DTD Struts Configuration 2.0//EN&
&http://struts.apache.org/dtds/struts-2.0.dtd&&
&package name=&Easyui& extends=&json-default&&
&!-- 学生信息 --&
&action name=&student*& class=&student_action& method=&{1}&&
&result type=&json&& &/result&
&/package&
7、编写index.jsp页面，将原先的JS代表分离到index.js中
&%@ page language=&java& pageEncoding=&utf-8& isELIgnored=&false&%&
String path = request.getContextPath();
&%@ taglib prefix=&s& uri=&/struts-tags&%&
&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&Easyui&/title&
&!-- 引入Jquery --&
&script type=&text/javascript& src=&&%=path%&/js/easyui/jquery-1.8.0.min.js& charset=&utf-8&&&/script&
&!-- 引入Jquery_easyui --&
&script type=&text/javascript& src=&&%=path%&/js/easyui/jquery.easyui.min.js& charset=&utf-8&&&/script&
&!-- 引入easyUi国际化--中文 --&
&script type=&text/javascript& src=&&%=path%&/js/easyui/locale/easyui-lang-zh_CN.js& charset=&utf-8&&&/script&
&!-- 引入easyUi默认的CSS格式--蓝色 --&
&link rel=&stylesheet& type=&text/css& href=&&%=path%&/js/easyui/themes/default/easyui.css& /&
&!-- 引入easyUi小图标 --&
&link rel=&stylesheet& type=&text/css& href=&&%=path%&/js/easyui/themes/icon.css& /&
&!-- 引入对应的JS，切记一定要放在Jquery.js和Jquery_Easyui.js后面，因为里面需要调用他们，建议放在最后面 --&
&script type=&text/javascript& src=&&%=path%&/index.js& charset=&utf-8&&&/script&
&b&easyui的DataGrid实例&/b&
&table id=&mydatagrid&&
&th data-options=&field:'studentid',width:100,align:'center'&&学生学号&/th&
&th data-options=&field:'name',width:100,align:'center'&&姓名&/th&
&th data-options=&field:'gender',width:100,align:'center'&&性别&/th&
&th data-options=&field:'age',width:100,align:'center'&&年龄&/th&
&!-- 显示添加按钮的Div --&
&div id=&easyui_toolbar& style=&padding: 2px 0px 2px 15 height: auto&&
&a href=&#& id=&easyui_add& class=&easyui-linkbutton& iconCls=&icon-add& plain=&true&&添加学生信息&/a&
&!-- 添加学生信息的表单
&div id=&addDlg& class=&easyui-dialog& style=&width: 580 height: 350 padding: 10px 20px& closed=&true& buttons=&#addDlgBtn&&
&form id=&addForm& method=&post&&
&td&学生主键&/td&
&input name=&student.studentid& id=&studentid& class=&easyui-validatebox& required=&true& missingMessage=&学生主键不能为空&&
&!-- 存放提示重复信息的div --&
&div id=&xianshi1& style=&float: left&&&/div&
&div style=&float: left&&&&/div&
&div id=&xianshi2& style=&font-size: 14 color: #FF0000; float: left&&&/div&
&td&姓名&/td&
&input name=&student.name& id=&name& class=&easyui-validatebox& required=&true& missingMessage=&姓名不能为空&&
&td&性别&/td&
&!-- 使用Easyui中的combobox --&
&select class=&easyui-combobox& style=&width: 155& name=&student.gender& id=&gender& data-options=&panelHeight:'auto'&&
&option value=&男&&男&/option&
&option value=&女&&女&/option&
&td&年龄&/td&
&input name=&student.age& id=&age& class=&easyui-validatebox&&
&!-- 保存学生信息的按钮，被Jquery设置，当没被调用的时候不显示
&div id=&addDlgBtn&&
&a href=&#& id=&addSaveBooktimecode& class=&easyui-linkbutton& iconCls=&icon-ok& onclick=&add_ok()&&确认&/a&
&a href=&#& class=&easyui-linkbutton& iconCls=&icon-cancel& onclick=&javascript:$('#addDlg').dialog('close')&&取消&/a&
8、编写index.jsp页面对应的JS
var isClickOk=//判断的变量
$(function() {
//datagrid设置参数
$('#mydatagrid').datagrid({
title : 'datagrid实例',
iconCls : 'icon-ok',
width : 600,
pageSize : 5,//默认选择的分页是每页5行数据
pageList : [ 5, 10, 15, 20 ],//可以选择的分页集合
nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取
striped : true,//设置为true将交替显示行背景。
collapsible : true,//显示可折叠按钮
toolbar:&#easyui_toolbar&,//在添加 增添、删除、修改操作的按钮要用到这个
url:'studentallInfo.action',//url调用Action方法
loadMsg : '数据装载中......',
singleSelect:true,//为true时只能选择单行
fitColumns:true,//允许表格自动缩放，以适应父容器
sortName : 'studentid',//当数据表格初始化时以哪一列来排序
sortOrder : 'asc',//定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。
remoteSort : false,
frozenColumns : [ [ {
field : 'ck',
checkbox : true
pagination : true,//分页
rownumbers : true//行数
//当点击添加学生信息的时候触发
$(&#easyui_add&).click(function() {
$(&#xianshi1&).empty();//清除上次出现的图标1
$(&#xianshi2&).empty();//清除上次出现的图标2
$('#addDlg').dialog('open').dialog('setTitle', '添加学生信息');//打开对话框
$('#addForm').form('clear');
//当光标移开焦点的时候进行重复验证
$(&#studentid&).blur(function(){
jQuery.ajax({
//使用Ajax异步验证主键是否重复
type : &post&,
url : &studentverify.action?table=Student&field=studentid&meter=&+$('#studentid').val(),
dataType:'json',
success : function(s){
if($('#studentid').val()==&&){//当为主键为空的时候什么都不显示，因为Easyui的Validate里面已经自动方法限制
else if( s == &1& )//当返回值为1，表示在数据库中没有找到重复的主键
isClickOk=
$(&#xianshi1&).empty();
var txt1=&&img src=&+&'imgs/agree_ok.gif'&+&/&&;//引入打勾图标的路径
$(&#xianshi1&).append(txt1);//在id为xianshi1里面加载打勾图标
$(&#xianshi2&).empty();
$(&#xianshi2&).append(&未被使用&);//在di为xianshi2中加载“未被使用”这四个字
$(&#xianshi1&).empty();
isClickOk=
var txt1=&&img src=&+&'imgs/agree_no.gif'&+&/&&//引入打叉图标的路径
$(&#xianshi1&).append(txt1);//在id为xianshi1里面加载打叉图标
$(&#xianshi2&).empty();
$(&#xianshi2&).append(&已被使用&);//在id为xianshi2里面加载“已被使用”四个字
//添加信息点击保存的时候触发此函数
function add_ok(){
$.messager.defaults={ok:&确定&,cancel:&取消&};
$.messager.confirm('Confirm', '您确定增加?', function(r){//使用确定，取消的选择框
$('#addForm').form('submit',{//引入Easyui的Form
url:&studentadd.action&,//URL指向添加的Action
onSubmit: function(){
if(isClickOk==false){//当主键重复的时候先前就已经被设置为false，如果为false就不提交，显示提示框信息不能重复
$.messager.alert('操作提示', '主键不能重复！','error');
else if($('#addForm').form('validate')){//判断Easyui的Validate如果都没错误就同意提交
$.messager.alert('操作提示', '添加信息成功！','info');
}else{//如果Easyui的Validate的验证有一个不完整就不提交
$.messager.alert('操作提示', '信息填写不完整！','error');
$('#mydatagrid').datagrid({url:'studentallInfo.action'});//实现Datagrid重新刷新效果
$('#addDlg').dialog('close');//关闭对话框
9、启动程序，输入
10、建议您先阅读这篇博客
，因为有很多配置在里面，这里就省去没写出来。验证学生主键是否重复，打勾、打叉的图标我传到我的资源上去，有需要请自行下载。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致1357人阅读
&?xml version="1.0" encoding="utf-8"?&&mx:Application xmlns:mx="" layout="absolute" creationComplete="init()"&&mx:Script&&&![CDATA[&&import mx.collections.ArrayC&&import mx.utils.StringU&&import mx.controls.TextI&&import mx.events.DataGridEventR&&import mx.events.DataGridE&&&&[Bindable]&&private var list:ArrayCollection = new ArrayCollection();&&//初始化方法&&private function init():void{&&&for(var i:int = 0;i & 10;i++){&&&&var o:O&&&&if(i%2 ==0)&&&&&o = {num:i,notNull:"非空的第"+i+"行内容",any:"任意的第"+i+"行内容"};&&&&else&&&&&o = {num:i,notNull:"非空的第"+i+"行内容",any:i};&&&&list.addItem(o);&&&}&&}&&//验证的操作方法&&private function validateItem(event:DataGridEvent):void{&&&//如果没有更新数据则直接返回&&&if (event.reason == DataGridEventReason.CANCELLED){&&&&& &&&&&& }& &&&&& var input:TextInput = TextInput(_Grid.itemEditorInstance);&&&&& var newData:String= TextInput(event.currentTarget.itemEditorInstance).&&&&& //如果商品查询的输入则验证非空&&&&& if(event.dataField == "notNull" && StringUtil.trim(newData).length&=0){&&&&& &event.preventDefault();&&&&&&&&& input.errorString="不能为空！";&&&&& }&&&&& //如果是数量则验证必须为数字&&&&& if(event.dataField == "num" && isNaN(Number(StringUtil.trim(newData)))){&&&&& &&event.preventDefault();&&&&&&&&& input.errorString="数字必须为数字！";&&&&&&&&&&&&&& }&&}&]]&&/mx:Script&&&mx:DataGrid id="_Grid" y="0" width="100%" x="0" height="100%" itemEditEnd="validateItem(event)" dataProvider="{list}" textAlign="center" editable="true" fontSize="12"&&&&mx:columns&&&&&mx:DataGridColumn headerText="数字" dataField="num"/&&&&&mx:DataGridColumn headerText="非空" dataField="notNull"/&&&&&mx:DataGridColumn headerText="任意" dataField="any"/&&&&/mx:columns&&&/mx:DataGrid&&/mx:Application&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：528254次
积分：6197
积分：6197
排名：第2887名
原创：103篇
转载：59篇
评论：131条
(1)(1)(2)(3)(1)(1)(2)(2)(1)(4)(13)(1)(1)(9)(2)(4)(1)(3)(4)(5)(2)(1)(6)(10)(15)(2)(5)(8)(1)(12)(4)(4)(1)(5)(5)(4)(2)(5)(3)(6)(1)EasyUI DataGrid 编辑数据
添邮箱验证 Input 邮箱验证 - Web前端当前位置:& &&&EasyUI DataGrid 编辑数据
添邮箱验证 Input 邮箱EasyUI DataGrid 编辑数据
添邮箱验证 Input 邮箱验证&&网友分享于：&&浏览：0次EasyUI DataGrid 编辑数据
加邮箱验证 Input 邮箱验证
&th data-options="field:'email_mail',width:465,editor:'validatebox', editor:{type:'validatebox',options:{required:true,validType:'email'}}"&邮箱&/th&
columns:[[
{field:'no',title:'编号',width:50,editor:'numberbox'},
{field:'name',title:'名称',width:60,editor:'text'},
{field:'addr',title:'地址',width:100,editor:'text'},
{field:'email',title:'电子邮件',width:100,
type:'validatebox',
validType:'email'
{field:'birthday',title:'生日',width:80,editor:'datebox'},
{field:'action',title:'操作',width:70,align:'center',
formatter:function(value,row,index){
if (row.editing){
var s = '&a href="#" onclick="saverow('+index+')"&保存&/a& ';
var c = '&a href="#" onclick="cancelrow('+index+')"&取消&/a&';
return s+c;
var e = '&a href="#" onclick="editrow('+index+')"&编辑&/a& ';
var d = '&a href="#" onclick="deleterow('+index+')"&删除&/a&';
return e+d;
validType:'email' 为邮箱验证
required:true 为必输项
&input class="easyui-validatebox" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /&&br /&
$(function () {
//设置text需要验证
$('input[type=text]').validatebox();
&input type="text" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /&
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有}