判断信息是否发生变化决定是否需要保存

最新推荐文章于 2022-05-08 17:00:54 发布
最新推荐文章于 2022-05-08 17:00:54 发布
阅读量228 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000008773640
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="main">
    <div class="baseInfo">
        <div class="form-item"  data-belong="baseInfo" data-type="input" id="text1">
            <div class="form-item-caption">text1:</div>
            <div class="form-item-control">
                <input type="text" value="text1"/>
            </div>
        </div>
        <div class="form-item"  data-belong="baseInfo" data-type="select" id="select1">
            <div class="form-item-caption">select1:</div>
            <div class="form-item-control">
                <select name="">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
        </div>
    </div>

    <div class="otherInfo">
        <div class="form-item" data-belong="otherInfo" data-type="input" id="text2">
            <div class="form-item-caption">text2:</div>
            <div class="form-item-control">
                <input type="text" value="text2"/>
            </div>
        </div>
        <div class="form-item" data-belong="otherInfo" data-type="input" id="text3">
            <div class="form-item-caption">text3:</div>
            <div class="form-item-control">
                <input type="text" value="text3"/>
            </div>
        </div>
        <div class="form-item"  data-belong="otherInfo" data-type="select" id="select2">
            <div class="form-item-caption">select2:</div>
            <div class="form-item-control">
                <select name="">
                    <option value="1">1</option>
                    <option value="2" selected>2</option>
                    <option value="3">3</option>
                </select>
            </div>
        </div>
    </div>
</div>
<button id="submitBtn">提交</button>
<script src="js/jquery.min.js"></script>
<script>
    var globalOldFormItemObjSet =  {
        baseInfo: [],
        otherInfo: []
    };
    $('#submitBtn').click(function(){
        if(!isFormChange(globalOldFormItemObjSet, getFormItemObjList())) {
            alert('没有发生变化');
        } else {
            alert('发生变化了');
        }
        globalOldFormItemObjSet = getFormItemObjList();
    })
    function getFormItemObjList() {
        var formItemObjSet = {
            baseInfo: [],
            otherInfo: []
        };
        var formItemObj = $('.main').find('.form-item');
        formItemObj.each(function(index, item) {
            var formItemObj = getFormItemObj(item);
            var Key = $(item).attr('data-belong');
            formItemObjSet[Key].push(formItemObj);
        });
        return formItemObjSet;
    }
    function getFormItemObj(formItem) {
        var item = $(formItem);
        var control = item.find('.form-item-control');
        var caption = item.find('.form-item-caption');
        var type = item.attr('data-type');
        var id = item.attr('id');
        var text= '';
        switch (type) {
            case 'input':
            {
                text = control.find('input').val().trim();
                break;
            }
            case 'select':
            {
                text = control.find('select').val();
                break;
            }
        }
        return {
            id: id,
            type: type,
            text: text
        };
    }
    function isEqualObj(a,b){
        var aProps = Object.getOwnPropertyNames(a);
        var bProps = Object.getOwnPropertyNames(b);
        if(aProps.length !== bProps.length){
            return false;
        }
        for(var i=0;i<aProps.length;i++){
            if(a[aProps[i]] != b[aProps[i]]) {
                return false;
            }
        }
        return true;
    }
    function isFormChange(oldFormItemObjSet,newFormItemObjSet) {
        var array = Object.keys(newFormItemObjSet);
//        console.log(array); // ["baseInfo", "otherInfo"]
        for(var i=0;i<array.length;i++) {
            var keyArray = array[i];
            var newKeyArray = newFormItemObjSet[keyArray];
            // console.log(newKeyArray); [{},{}]
            for(var j=0;j<newKeyArray.length;j++){
//                console.log(newKeyArray[j]);
               //  console.log(keyArray); // baseInfo
               //  console.log(oldFormItemObjSet[keyArray]) []
                if((oldFormItemObjSet[keyArray].length == 0 && array.length != 0) || (oldFormItemObjSet[keyArray].length != 0 && array.length == 0)) {
                    return true;
                } else {
                    var isSame = isEqualObj(newKeyArray[j], oldFormItemObjSet[keyArray][j]);
                    if (!isSame) {
                       return true;
                    }
                }
            }
        }
        return false;
    }
</script>
</body>
</html>
weixin_34342905
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
visio二次开发--判断文档是否已发生变化(变化就加星号*)
09-05
【Visio二次开发--判断文档是否已发生变化(变化就加星号*)】 在Visio二次开发过程中，有时候我们需要实现一个常见的功能，即检测Visio文档是否已经发生变化。这个功能通常体现在文件名旁边显示一个星号"*"，表示...
基于jquery的监控数据是否发生改变
12-02
这个方法简单地返回`pageDataChange`的值，可以用于判断是否需要提示用户保存数据或决定是否执行保存操作。 以下是如何使用这些方法的例子： ```javascript $(document).ready(function() { // 监控所有Input、...
判断字段是否被更新，新旧数据写入Audit Log表中
weixin_34409357的博客
01-18 150
客户要求，要对一个敏感数据表进行Audit跟踪。如果记录被更新时，要把旧新保存起来，是谁更改了记录，什么时候更新的等相关信息。还有一个主要问题就是客户不确定具体要跟踪那个字段，希望自己决定。 Insus.NET解决这个问题，只有创建另外一个表，将存储用户决定要跟踪的表，以及这个表中需要跟踪的字段。 还要创建另外一个表[Audit]，就是存储跟踪记录的表： Audit SET ANSI...
OAF_开发系列03_实现OAF如何在保存前判断数据是否存在变更（案例）
weixin_33935505的博客
06-23 136
2014-06-26 Created By BaoXinjian 一、摘要 在OAF的开发中，可能有这样的需求，在选择保存按钮时，如果存在改动的数据，则提交事务，保存到数据库中； 如果不存在改动的数据，就提示用户当前没有数据可更改； 解决时需要判断页面中所使用的视图对象是否发生过改动，存在多种方法   1. 调用OADBTransaction.isDirty()方法 此方法用...
页面数据关闭，或刷新，或链接到其他页面提示有否保存数据
yueyuehe的专栏
10-14 1513
问题：在我开发过程中遇到的需求，当用户在修改或新增某些数据时可能会忘记保存就关闭页面或者链接到其他页面去，如果没有提示那么幸幸苦苦的填的数据就会丢失 解决办法： window.onbeforeunload  这个事件 onbeforeunload 事件是在即将离开此页面之前触发（包括刷新，关闭页面，跳转到其他页面），会弹出提示框是否离开此页面， 基本用法         window.
判断图纸是否已经保存过
jingxuan84的专栏
07-02 801
DBMOD=0时表示图纸已没保存，没有更新。 否则biaoshi
javascript 删除前提示是否保存
builderwfy的专栏
11-27 660
删除
VB.NET 写的判断文件是否改变的源码
12-24
在VB.NET编程环境中，开发人员经常需要检测文件是否发生改变，以便实时跟踪文件的状态或更新。这个场景在很多应用中都很常见，例如数据保存、文件同步或者程序配置的动态加载等。标题提到的"VB.NET 写的判断文件是否...
提升区县图书馆管理员素质做好信息时代服务读者工作.pdf
10-10
随着互联网的普及和信息技术的发展，图书馆的角色正从传统的文献存储转变为信息服务中心，管理员的角色也相应地发生了变化。 【当前区县图书馆管理员素质的现状及问题】 1. **专业知识不足**：在数字环境下，管理...
Informatica缓慢变化维
10-19
在Informatica中，可以通过Update组件结合特定的条件判断来实现，例如使用Iif函数检查字段是否发生变化，如果变化则标记为更新，否则拒绝更新。 2. 第二种方式：保留完整的历史记录（Keep a Full History of ...
JSON架包以及JobStatus任务状态数据库状态修改
Grace_1203的博客
11-09 709
（1）转载：”https://blog.csdn.net/qice675563721/article/details/74000124 用这个api有时候会报错,基本上是因为包没引入完, 引入这几个包后基本上没什么问题, 但是对于JSONObject.fromObject 和SONObject.toBean的使用为: String strTmp = "{\"errmsg\":\"...
JQ判断用户当前页面是否为未保存离开
Abel_JiaWei的博客
03-25 826
$(function() { $("#myform :input").change(function(){ $("#myform").data("changed",true); }); }); $("ul li").click(function () { if($("#myform").data("changed")){ window.onb...
随记：判断是否更新字段
崔显龙的博客
07-12 1202
问题背景： 在封装通用的数据库操作类时，对于“增、删、查”的编码没有太大问题，但是对于“改（更新）”，却出现了一个问题。 在首次存储一条记录时，可以将目标对象的所有字段值原样存入即可，有值则存值，为null则存null。 但在更新的时候，对于为null的字段，如何区分是“不更新该字段”，还是“将该字段更新为null”？ 当然，可以先进行一次读取操作，然后在修改DTO对象的字段值，最终完全覆...
比较数据更新前后，有哪些字段发生了变化
qq_37700773的博客
05-08 1350
比较数据更新前后，有哪些字段发生了变化前言一、核心判断逻辑二、测试示例总结 前言 最近工作上遇到的日志需求：用户进行修改数据时，需要记录用户修改了哪些字段，修改前，修改后的值分别是什么。 一、核心判断逻辑 判断空的逻辑，可以根据业务调整。 private static List<String> getFiledName(Object o1, Object o2) throws Exception { List<String> result = new Ar
C# 窗口编辑后如何检测是否需要保存
gc_2299的博客
11-12 1312
问题：编辑器中有两处可以保存用户当前的操作：1）点击保存按钮；2）关闭窗口时，提示用户是否需要保存。原来的做法是根据Undo栈中是否有内容来判断是否需要保存内容，但是如果先点击保存按钮，用户没有其它动作，再关闭窗口时依然根据Undo栈进行判断就会重复保存（因为点击保存按钮不会清空Undo栈）。 解决方法1：如果编辑内容数据结构比较简单，可以在打开编辑窗口时创建两份编辑内容数据，一份（简称A）用于编
js判断页面值是否被改变
weixin_33890499的博客
10-17 1267
2019独角兽企业重金招聘Python工程师标准>>> ...
ckeditor5 监听内容的变化
飞天代码的博客
12-12 5352
目前要找ckeditor5的相关资料真的非常少，如果是国内的资料就更少了，感觉自己都成了第一个吃螃蟹的人了。 大家都知道ck4里面监听内容变化 ckeditor.on(‘change’,function(){ console.log(“内容变化了”); }) 到ckeditor5以后这样写不行了，着急啊抓狂啊，看着官网哪些英文资料抓狂，都没个例子，折腾了大半天最后才找到相应api。 edito...
使用vue写一个策略判断
最新发布
08-05
### 回答1： 好的，我会尽力用中文来帮助您。 写一个策略判断，首先你需要确定这个策略判断的目的是什么。你可能想要使用 Vue 实现某些业务逻辑，或者根据用户的输入或某些条件来做出决策。 假设你想要根据用户的输入，使用 Vue 来决定是否显示一条消息。你可以这样做： 1. 在 Vue 的 data 属性中定义一个变量，用来存储用户的输入。 2. 在 Vue 的 methods 属性中定义一个方法，用来处理用户的输入。 3. 在你的 HTML 中使用 Vue 指令来渲染一条消息，并根据你在 data 中定义的变量的值来决定是否显示这条消息。 下面是一个简单的例子，它使用了 Vue 的 v-if 指令来决定是否显示一条消息： ``` <template> <div> <input v-model="inputValue"> <button v-on:click="checkInput">检查输入</button> <p v-if="showMessage">输入正确！</p> </div> </template> <script> export default { data() { return { inputValue: '', showMessage: false } }, methods: { checkInput() { if (this.inputValue === 'hello') { this.showMessage = true } else { this.showMessage = false } } } } </script> ``` 在这个例子中，我们定义了一个 data 属性，它包含了两个变量：`inputValue` 和 `show ### 回答2： 使用Vue写一个策略判断的过程可以分为以下几个步骤： 1. 创建Vue实例：首先，在Vue的主文件中创建一个Vue实例，通过new Vue()来实例化一个Vue对象。 2. 定义数据：在Vue实例中，通过data属性来定义需要使用的数据。例如，可以定义一个名为strategy的数据项，用来存储策略判断的结果。 3. 编写策略判断方法：在Vue实例中，可以使用methods属性来定义策略判断的方法。可以根据具体的策略要求，编写相应的判断逻辑。例如，可以编写一个名为checkStrategy的方法，来进行策略判断，并将结果保存在strategy数据项中。 4. 页面绑定与渲染：在Vue实例中，可以将数据与页面元素进行绑定。通过v-bind指令可以将数据绑定到页面元素上，通过{{}}插值表达式可以将数据渲染到页面中。 5. 触发策略判断：可以通过按钮点击、输入框输入等方式来触发策略判断方法，根据具体的业务需求来确定触发方式。 6. 监听数据变化：在Vue实例中，可以通过watch属性来监听数据的变化。例如，可以监听strategy数据项的变化，当数据发生改变时，执行相应的操作。 通过以上步骤，我们就可以使用Vue来实现一个策略判断的功能。这样，就能够根据具体的策略要求，灵活地进行判断，并将判断结果渲染到页面中，实现策略判断的功能。 ### 回答3： 使用Vue编写一个策略判断，可以采用以下步骤： 1. 首先，在Vue的模板中创建一个选择器，用于选择策略的条件。例如，可以使用一个下拉菜单或者复选框。 ``` <template> <div> <select v-model="selectedStrategy"> <option v-for="strategy in strategies" :key="strategy">{{ strategy }}</option> </select> <!-- 用于显示策略判断结果的部分 --> <div v-if="selectedStrategy === 'strategy1'">策略1的判断结果</div> <div v-if="selectedStrategy === 'strategy2'">策略2的判断结果</div> <div v-if="selectedStrategy === 'strategy3'">策略3的判断结果</div> <!-- 策略判断结果的代码可以根据具体需求进行更改 --> </div> </template> ``` 2. 在Vue的脚本部分，定义选项和策略判断的结果。 ``` <script> export default { data() { return { strategies: ['strategy1', 'strategy2', 'strategy3'], // 策略的选项 selectedStrategy: '' // 选中的策略 }; } }; </script> ``` 3. 策略判断的结果通过使用Vue的条件渲染来显示在页面上。根据选择的策略，使用`v-if`指令来判断并显示策略的判断结果。 以上就是使用Vue编写一个策略判断的简单流程，根据具体的策略和需求，你可以根据这个基础框架进行扩展和修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值