Jquery判断form表单数据是否变化


Posted in Javascript onMarch 30, 2016

本文实例为大家分享了Jquery判断form表单数据是否变化的三大步骤,供大家参考,具体内容如下

1、思路为:修改时点击一行datagrid,并进行页面跳转数据绑定,在提交form时,序列号form表单,并重新获取datagrid选中的行数据,进行数据比较。</span> 

/** 
 * 判断form内属性值是否被修改 
 * 
 * @param jsonForm 对应修改的form序列化后的json数据 
 * @param row 对应datagrid选中的数据源 
 * 
 * @Return true 存在修改项 
 *     false 不存在修改项 
 */ 
isModified:function(jsonForm,row){ 
  for(key in jsonForm){ 
    //form中存在,但数据源datagrid中不存在 
    if(row[key] == undefined){ 
      continue; 
    } 
    //form中""或null,但数据源datagrid中为null或""时,不进行比较 
    if(!((jsonForm[key] == null || jsonForm[key] == '') && (row[key] == null || row[key] == ''))){ 
      //如果值不同,则返回true 
      if(jsonForm[key] != row[key]) 
        return true; 
    } 
  } 
  return false; 
}

2、获取变化的值前后变化信息,由于项目需要记录值变更记录,并保存column中英文信息,如下:

/** 
   * 获取form被修改信息 
   * 
   * @param jsonForm 对应修改的form序列化后的json数据 
   * @param row 对应datagrid选中的数据源 
   * @param columnJSModel 为表单form中name属性中英对照js,需在update.jsp中引用此js文件 
   * 
   * @Return json 数据如:[{"updateColumn":"loanRatio","updateColName":"额比例","updateContent":"由11变更为100.00"}, 
   *     {"updateColumn":"loanQuotaTypeName","updateColName":"比例形式","updateContent":"由 卡 变更为 实物"}] 
   * 
   */ 
  getModifiedField:function(jsonForm,row,columnJSModel){ 
    var modifiedArry = []; 
    var jsonArrStr = ''; 
    for(key in jsonForm){ 
      //form中存在,但数据源datagrid中不存在 
      if(row[key] == undefined){ 
        continue; 
      } 
      //form中""或null,但数据源datagrid中为null或""时,不进行比较 
      if(!((jsonForm[key] == null || jsonForm[key] == '') && (row[key] == null || row[key] == ''))){ 
        //如果值不同,则返回true 
        if(jsonForm[key] != row[key]){ 
          var jsonObj = {}; 
           
          jsonObj.updateColumn = key; 
          jsonObj.updateColName = columnJSModel[key]; 
          jsonObj.updateContent = '由'+ row[key] + '变更为' + jsonForm[key]; 
           
          modifiedArry[modifiedArry.length] = jsonObj; 
        } 
      } 
    } 
    jsonArrStr = JSON.stringify(modifiedArry); 
    //console.log(jsonArrStr); 
    return jsonArrStr; 
  }

3、其中的columnJSModel为中英对照JS实体,ratio、qutaTypeName分别对应form中的name属性名,如下:

var policyColumn = { 
     
    ratio : '比例', 
    quotaTypeName : '比例形式' 
     
};

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
react-navigation之动态修改title的内容
Sep 26 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 #Javascript
javascript实现数字倒计时特效
Mar 30 #Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 #Javascript
网页中JS函数自动执行常用三种方法
Mar 30 #Javascript
Jquery轮播效果实现过程解析
Mar 30 #Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 #Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 #Javascript
You might like
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
微信小程序表单弹窗实例
2018/07/19 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
Python sys.argv用法实例
2015/05/28 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python使用爬虫猜密码
2016/02/19 Python
numpy基础教程之np.linalg
2019/02/12 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
机电一体化毕业生求职信
2013/11/02 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
办公室文员自荐书
2014/02/03 职场文书
艺术节主持词
2014/04/02 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
工程技术员岗位职责
2015/04/11 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
Win2008系统搭建DHCP服务器
2022/06/25 Servers