jquery监控数据是否发生改变

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

接下来看看解决办法:

1 ///<reference path="jquery-1.3.2-vsdoc2.js" />
2  (function($) {
3 var pageDataChange = false //默认标识页面数据未发生改变
4 /*监控页面数据是否发生变化*/
5 $.fn.MonitorDataChange = function(options) {
6 var tagName = new Array('Input', 'Select', 'Textarea');
7 var ctrlIds = [];
8
9 var deafult = {
10 arrTags: tagName, //需监控控件的tagName属性数组
11 arrCtrls: ctrlIds //不监控的控件ID
12 };
13 var ops = $.extend(deafult, options);
14
15 for (var i = 0; i < ops.arrTags.length; i++) {
16 $(ops.arrTags[i]).each(function() {
17 if (ops.arrCtrls.length == 0) {
18 $(this).bind('change', function() {
19 pageDataChange = true;
20 });
21 }
22 else {
23 var flag = false;
24 for (var j = 0; j < ops.arrCtrls.length; j++) {
25 if ($(this).attr('id') == ops.arrCtrls[j]) {
26 flag = true;
27 break;
28 }
29 }
30 if (!flag) {
31 $(this).bind('change', function() {
32 pageDataChange = true;
33 });
34 }
35 }
36 });
37 }
38 return this;
39 };
40 /*返回页面数据是否发生变化*/
41 $.fn.getValue = function() {
42 return pageDataChange;
43 };
44 })(jQuery);

posted on 2011-04-11 13:03  jomhy  阅读(4965)  评论(25编辑  收藏  举报

导航