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判断checkbox是否选中的小例子
Dec 02 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
Swiper实现导航栏滚动效果
Oct 16 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实现即时输出、实时输出内容方法
2015/05/27 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
中止javascript执行的方法
2014/02/14 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
在Django中限制已登录用户的访问的方法
2015/07/23 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
python打开windows应用程序的实例
2019/06/28 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
企业指导教师评语
2014/04/28 职场文书
竞聘上岗演讲
2014/05/19 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
初中作文评语
2014/12/25 职场文书
个人售房合同协议书
2016/03/21 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书