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调用XML制作连动下拉列表框
Jun 25 Javascript
网页设计常用的一些技巧
Dec 22 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
移动端js图片查看器
Nov 17 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
基于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
wordpress之wp-settings.php
2007/08/17 PHP
深入解析php之apc
2013/05/15 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
对Python信号处理模块signal详解
2019/01/09 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
python读写csv文件的方法
2019/08/13 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
python 伯努利分布详解
2020/02/25 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
绘画设计学生的个人自我评价
2013/09/20 职场文书
工厂车间标语
2014/06/19 职场文书
体育教师求职信
2014/06/30 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python