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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
javascript编写简易计算器
May 06 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
Javascript模拟实现new原理解析
Mar 03 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面向对象多态性实现方法简单示例
2017/09/27 PHP
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
详解JS预解析原理
2020/06/16 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
详解python while 函数及while和for的区别
2018/09/07 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
用python读取xlsx文件
2020/12/17 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
大学生四个方面的自我评价
2013/09/19 职场文书
2014年度安全工作总结
2014/12/04 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
java解析XML详解
2021/07/09 Java/Android
使用python创建股票的时间序列可视化分析
2022/03/03 Python
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS