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 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
php-fpm中max_children的配置
2019/03/15 PHP
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
Express.JS使用详解
2014/07/17 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
Python的多态性实例分析
2015/07/07 Python
python中列表和元组的区别
2017/12/18 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
指针和引用有什么区别
2013/01/13 面试题
爱心捐款倡议书
2014/04/14 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
高中政治教师教学反思
2016/02/23 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
python神经网络ResNet50模型
2022/05/06 Python