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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JS验证不重复验证码
Feb 10 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
详解javascript中的Error对象
Apr 25 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
python实现简单的文字识别
2018/11/27 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
婚礼司仪主持词
2014/03/14 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
员工工作表现评语
2014/04/26 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
python中mongodb包操作数据库
2022/04/19 Python