基于jquery的监控数据是否发生改变

 更新时间:2011年04月11日 20:46:54   作者:  
在实际开发中经常会遇到数据没发生改变是,由于用户不小心点击保存,这样导致数据库的日志增大;还有数据填写好后,忘了添加保存直接关闭页面离开。
这样之前的功夫又白费了。解决这些问题的办法就是:监控页面数据是否发生变化。如果发生变化,提示用户保存。如果数据未发生变化。当我们点击保存时,也不需要提交到数据库。
接下来看看解决办法:
复制代码 代码如下:

///<reference path="jquery-1.3.2-vsdoc2.js" />
(function($) {
var pageDataChange = false //默认标识页面数据未发生改变
/*监控页面数据是否发生变化*/
$.fn.MonitorDataChange = function(options) {
var tagName = new Array('Input', 'Select', 'Textarea');
var ctrlIds = [];

var deafult = {
arrTags: tagName, //需监控控件的tagName属性数组
arrCtrls: ctrlIds //不监控的控件ID
};
var ops = $.extend(deafult, options);

for (var i = 0; i < ops.arrTags.length; i++) {
$(ops.arrTags[i]).each(function() {
if (ops.arrCtrls.length == 0) {
$(this).bind('change', function() {
pageDataChange = true;
});
}
else {
var flag = false;
for (var j = 0; j < ops.arrCtrls.length; j++) {
if ($(this).attr('id') == ops.arrCtrls[j]) {
flag = true;
break;
}
}
if (!flag) {
$(this).bind('change', function() {
pageDataChange = true;
});
}
}
});
}
return this;
};
/*返回页面数据是否发生变化*/
$.fn.getValue = function() {
return pageDataChange;
};
})(jQuery);

相关文章

  • AeroWindow 基于JQuery的弹出窗口插件

    AeroWindow 基于JQuery的弹出窗口插件

    AeroWindow是个Win7样式的弹出窗口,jQuery插件,效果很酷!而且还像windows的窗口一样可最大,最小化,随意拖动。
    2011-06-06
  • jquery validate 自定义验证方法介绍 日期验证

    jquery validate 自定义验证方法介绍 日期验证

    本篇文章主要是对jquery validate 自定义验证方法 日期验证进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 浅谈struts1 & jquery form 文件异步上传

    浅谈struts1 & jquery form 文件异步上传

    下面小编就为大家带来一篇浅谈struts1 & jquery form 文件异步上传。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 浅谈JQ中mouseover和mouseenter的区别

    浅谈JQ中mouseover和mouseenter的区别

    下面小编就为大家带来一篇浅谈JQ中mouseover和mouseenter的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。
    2016-09-09
  • 用JQuery在网页中实现分隔条功能的代码

    用JQuery在网页中实现分隔条功能的代码

    在C/S系统中有专门的分隔条控件,很方便实现,但在Asp.net中却没有。本文介绍了一种使用JQuery技术实现分隔条的功能
    2012-08-08
  • jQuery 遍历map()方法详解

    jQuery 遍历map()方法详解

    大家都知道map()方法主要用来遍历操作数组和对象,这篇文章将给大家详细介绍关于jQuery遍历map()方法的内容,文章给出了详细的示例代码,对大家的理解和学习很有帮助,有需要的朋友们下面来一起学习学习吧。
    2016-11-11
  • 利用jquery去掉时光轴头尾部线条的方法实例

    利用jquery去掉时光轴头尾部线条的方法实例

    这篇文章主要给大家介绍了利用jquery实现去掉时光轴头尾部线条的方法,文中给出了详细的实例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • jqGrid中文文档之选项设置

    jqGrid中文文档之选项设置

    jqGrid提供了大量的选项设置,开发者可以通过设置选项对应值来控制jqGrid,比如表格的宽度、高度、数据类型以及列名称等等都是通过选项设置来完成的
    2015-12-12
  • jQuery最佳实践完整篇

    jQuery最佳实践完整篇

    那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery"。今天的文章则是更进一步,讲解"如何用好jQuery"。
    2011-08-08
  • 精通Javascript+jQuery 视频教程 在线观看

    精通Javascript+jQuery 视频教程 在线观看

    前沿视频出的《精通Javascript+jQuery》视频教程,挺不错的,值得看看。
    2009-08-08

最新评论