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插件制作简单示例说明
Feb 03 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 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
用cookies来跟踪识别用户
2006/10/09 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
javascript void(0)的妙用
2009/10/21 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
Python类属性的延迟计算
2016/10/22 Python
Python守护线程用法实例
2017/06/23 Python
python删除服务器文件代码示例
2018/02/09 Python
python实现批量文件重命名
2019/10/31 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
python mysql中in参数化说明
2020/06/05 Python
python实现xml转json文件的示例代码
2020/12/30 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
大学毕业生个人自荐信范文
2014/01/08 职场文书
党风廉政承诺书
2014/03/27 职场文书
初三学生评语大全
2014/04/24 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
文体活动总结
2015/02/04 职场文书