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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 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 中使用随机数的三个步骤
2006/10/09 PHP
php Try Catch异常测试
2009/03/01 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
php经典趣味算法实例代码
2020/01/21 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
js document.write()使用介绍
2014/02/21 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
keras 多gpu并行运行案例
2020/06/10 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
UNIX文件名称有什么规定
2013/03/25 面试题
小学红领巾中秋节广播稿
2014/01/13 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
应届生求职信
2014/05/31 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
预备党员群众意见
2015/06/01 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript