对比json数据的差异来实现页面上树形数据统一提交

最新推荐文章于 2024-05-15 10:05:36 发布
最新推荐文章于 2024-05-15 10:05:36 发布
阅读量291 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/robinspada/article/details/114985051
版权

WEB开发时，页面上的数据输入通常有下面几种类型，从简单到复杂依次有

表单数据输入：一维结构

表格数据输入：二维结构

树状数据输入：三维以上的结构

表单数据最简单，表格数据比较麻烦，树状数据比较复杂。

提交方式有2种，单个提交和统一提交，树状数据统一提交则是最复杂的一种，因为你必须记录用户增删改的数据，这些数据有层级关系和时间关系。

比如说下面的树状数据

父1

  L子1

    L孙1

  L子2

父2

  L子3

画面操作：

1.在子1下面添加孙2

2.在子2下面添加孙3

3.删除子2

变换成后台数据库的操作只有下面2步，因为孙3在子2下面，子2删除后孙3的添加就无效了。

1.在子1下面添加孙2

2.删除子2

记录用户增删改的数据，分析其中的层级关系和时间关系，才能得到正确的修改数据库指令。

这个非常麻烦，换个思路，我们只需要把修改前后的数据做成json进行对比，就能得到正确的修改数据库指令。

每条数据需要一个ID来标记，新增的ID可以使用UUID或者自己设置一个不重复的番号。在对比中就能发现哪些数据有增删改，最后形成修改数据库指令。

这样做的好处就是不用在输入的过程中记录各种标记和状态，这个非常容易出错，对比json的差异简单可靠性高。

下面是我的实现代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
test



</body>
<script>


var source1=[
    {
        "CLIENT_CD": "pm",
        "COMMENT": [
            {
                "ID":"pm36",
                "CONFIRM_ITEM": "注释",
                "FILE": [
                    {
                        "FILE_ID":"pm36_1599614744",
                        "FILE_SRC": "deleted file pm36_1599614744"
                    },
                ]
            },
            {
                "ID":"pm361",
                "CONFIRM_ITEM": "注释",
                "FILE": [
                    {
                        "FILE_ID":"pm361_1599614744",
                        "FILE_SRC": "file pm36_15996147441"
                    },
                ]
            }
        ]
    },
    {
        "CLIENT_CD": "mbt",
        "COMMENT": [
            {
                "ID":"mbt136",
                "CONFIRM_ITEM": "注释",
                "FILE": [
                    {
                        "FILE_ID":"mbt136_1599614744",
                        "FILE_SRC": "deleted file mbt136_1599614744"
                    },
                ]
            }
        ]
    },
    {
        "CLIENT_CD": "obk",
    }
];
var source2=[
    {
        "CLIENT_CD": "pm",
        "COMMENT": [
            {
                "ID":"pm36",
                "CONFIRM_ITEM": "！注释",
                "FILE": [
                    {
                        "FILE_ID":"new_pm36_x1599614744",
                        "FILE_SRC": "inserted file new_pm36_x1599614744"
                    },
                ]
            },
            {
                "ID":"pm361",
                "CONFIRM_ITEM": "注释",
                "FILE": [
                    {
                        "FILE_ID":"pm361_1599614744",
                        "FILE_SRC": "file pm36_15996147441"
                    },
                ]
            }
        ]
    },
    {
        "CLIENT_CD": "mbt",
        "COMMENT": [
            {
                "ID":"mbt136",
                "CONFIRM_ITEM": "注释",
                "FILE": [
                    {
                        "FILE_ID":"new_mbt136_ZZ1599614744",
                        "FILE_SRC": "inserted file new_mbt136_ZZ1599614744"
                    },
                ]
            },
            {
                "ID":"mbt236",
                "CONFIRM_ITEM": "追加注释",
                "FILE": [
                    {
                        "FILE_ID":"new_mbt236_1599614744",
                        "FILE_SRC": "追加文件"
                    },
                ]
            }
        ]
    },
    {
        "CLIENT_CD": "obk",
    }
];
//获取文件的变更
function getFileChanged(list1,list2,result){
    //获取删除的文件
    for (var i in list1.FILE) {
        var file=findObjectById(list2.FILE,"FILE_ID",list1.FILE[i].FILE_ID);

        if(file==undefined){
            var obj={};
            obj.MODE="file_delete";
            obj.FILE_ID=list1.FILE[i].FILE_ID;
            result.push(obj);
        }
    }
    //获取追加的文件
    for (var i in list2.FILE) {
        var file=findObjectById(list1.FILE,"FILE_ID",list2.FILE[i].FILE_ID);

        if(file==undefined){
            var obj={};
            obj.MODE="file_insert";
            obj.ID=list2.ID;
            obj.FILE_SRC=list2.FILE[i].FILE_SRC;
            result.push(obj);
        }
    }
}
function findObjectById(list,id,value){
    if(list.find)
        return list.find(obj=>obj[id]==value);

    //ie 不支持find方法，用循环查找
    for (var i in list) {
        if(list[i][id]==value) return list[i];
    }
    return undefined;
}
//获取注释的变更
function getCommentChanged(clientCd,list1,list2,result){
    //获取修改或者删除的注释
    for (var i in list1) {
        var comment=findObjectById(list2,"ID",list1[i].ID);

        if(comment!=undefined){
            if(list1[i].CONFIRM_ITEM!=comment.CONFIRM_ITEM){
                var obj={};
                obj.MODE="update";
                obj.ID=list1[i].ID;
                obj.CONFIRM_ITEM=comment.CONFIRM_ITEM;
                result.push(obj);
            }

            getFileChanged(list1[i],comment,result);


        }else{
            var obj={};
            obj.MODE="delete";
            obj.ID=list1[i].ID;
            result.push(obj);
        }
    }
    //获取追加的注释
    for (var i in list2) {
        var comment=findObjectById(list1,"ID",list2[i].ID);

        if(comment==undefined){
            var obj={};
            obj.MODE="insert";
            obj.CLIENT_CD=clientCd;
            obj.CONFIRM_ITEM=list2[i].CONFIRM_ITEM;
            result.push(obj);

            var files={}
            for (var j in list2[i].FILE) {
                var obj={};
                obj.MODE="file_insert";
                obj.FILE_SRC=list2[i].FILE[j].FILE_SRC;
                result.push(obj);
            }
        }
    }
}
function getChanged(source1,source2){
    var result=[];
    for (var i in source1) {
        getCommentChanged(source1[i].CLIENT_CD,source1[i].COMMENT,source2[i].COMMENT,result);
    }

    return result;
}
var result=getChanged(source1,source2);
console.debug(JSON.stringify(result, null, "    "));
alert("ok");
</script>

</html>

下面是输出结果数组，MODE是数据的操作指令，发送到后台后遍历这个数组就能形成SQL来修改数据库。对于二维表格也可以用同样的思路来实现，而且更简单。

json_diff2.html:206 [
    {
        "MODE": "update",
        "ID": "pm36",
        "CONFIRM_ITEM": "！注释"
    },
    {
        "MODE": "file_delete",
        "FILE_ID": "pm36_1599614744"
    },
    {
        "MODE": "file_insert",
        "ID": "pm36",
        "FILE_SRC": "inserted file new_pm36_x1599614744"
    },
    {
        "MODE": "file_delete",
        "FILE_ID": "mbt136_1599614744"
    },
    {
        "MODE": "file_insert",
        "ID": "mbt136",
        "FILE_SRC": "inserted file new_mbt136_ZZ1599614744"
    },
    {
        "MODE": "insert",
        "CLIENT_CD": "mbt",
        "CONFIRM_ITEM": "追加注释"
    },
    {
        "MODE": "file_insert",
        "FILE_SRC": "追加文件"
    }
]

 

 

 

robinspada
关注
专栏目录
【硬刚大数据之面试篇】2021年从零到大数据专家面试篇之Hive篇
微信搜：import_bigdata，大数据领域硬核原创作者
08-12 1464
欢迎关注博客主页：https://blog.csdn.net/u013411339 欢迎点赞、收藏、留言 ，欢迎留言交流！本文由【王知无】原创，首发于 CSDN博客！本文首发CSDN论坛，未经过官方和本人允许，严禁转载！ 本文是对《【硬刚大数据之学习路线篇】2021年从零到大数据专家的学习指南(全面升级版)》的面试部分补充。 硬刚大数据系列文章链接： 2021年从零到大数据专家的学习指南(全面升级版) 2021年从零到大数据专家面试篇之Hadoop/HDFS/Yarn篇 2.
大数据运维存档（8）数仓构建与Hive实现常识整理、生产中调优
Big_data_implicit_
12-27 4676
目录 一、数仓基础 1、数仓基本介绍 1.1、数仓基本概念 1.2、数仓的定义 1.2.1、面向主题 1.2.2、集成性 1.2.3、稳定性 1.2.4、时变性 1.3、数据仓库与数据库的区别 1.4、构建数仓常用手段 1.5、数仓分层 1.5.1、数仓分层描述 1.5.2、为什么要进行数仓分层 1.6、获取数据 1.7、同步策略 2、数据仓库建模 2.1、范式建模法（Third Normal Form 3NF） 2.2、维度建模法 2.2.1、维度表 2.2.2、事
前端json对比工具心得
qq_38885990的博客
08-16 939
json对比 文本对比工具
json-diff:一个用于前端展示的json对比库，提供丰富的对比操作
05-18
json-diff 比较两个json对象的差异，并获得出色的差异视图 例子
两个json对比差异，并输出差异结果
chenwq726的博客
05-20 7724
package com.cwq.demo02; import java.lang.reflect.ParameterizedType; import java.lang.reflect.Type; import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; import java.util.List; import java.util.Map; import java.util.Set; import c
git比较不同提交间的差别。
szuhuanggang的博客
03-30 481
在相应的github的项目url后面加上compare可以比较不同提交间的差别。 例子：https://github.com/appwhy/hg-xv6-with-vi/compare 然后在下图中填入对应的版本号，进行比较。 注：如果没差别，可能是版本号填反了。一般是后面那个更新 而版本号在下图看：点击commits 这些就是版本号： ...
Python数据分析-可视化“大佬”之Seaborn
Cecilia
09-25 557
——如果有想关注Java开发相关的内容，可以转我的博客 详细观看—— Seaborn 既然有了matplotlib,那为啥还需要seaborn呢？其实seaborn是在matplotlib基础上进行封装，Seaborn就是让困难的东西更加简单。用Matplotlib最大的困难是其默认的各种参数，而Seaborn则完全避免了这一问题。seaborn是针对统计绘图的，一般来说，seaborn能满足数...
各个JSON技术的比较
weixin_34210740的博客
09-30 1512
JSON技术的调研报告一 、各个JSON技术的简介和优劣1.json-libjson-lib最开始的也是应用最广泛的json解析工具，json-lib 不好的地方确实是依赖于很多第三方包，包括commons-beanutils.jar，commons-collections-3.2.jar，commons-lang-2.6.jar，commons-logging-1.1.1.jar，ezmorph...
数据库选型粗略对比，欢迎补充！！！
qq_39904855的博客
07-22 3498
MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发，目前属于Oracle公司。MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。MySQL是开源的，目前隶属于Oracle旗下产品。MySQL支持大型的数据库。可以处理拥有上千万条记录的大型数据库。MySQL使用标准的SQL数据语言形式。MySQL可以运行于多个系统上，并且支持多种语言。...
大数据技术之_19_Spark学习_07_Spark 性能调优 + 数据倾斜调优 + 运行资源调优 + 程序开发调优 + Shuffle 调优 + GC 调优 + Spark 企业应用案例
黑泽君
05-04 2037
大数据技术之_19_Spark学习_07_Spark 性能调优 + 数据倾斜调优 + 运行资源调优 + 程序开发调优 + Shuffle 调优 + GC 调优 + Spark 企业应用案例
json比对js插件
03-23
JSON 对比工具,优秀的JSON对比工具,自动格式化，对比JSON不同处，高亮显示，代码经过优化
深入React源码揭开渲染更新流程的面纱
It_kc的博客
10-04 544
render会调用方法中，如果是第一次渲染，会先初始化FiberRoot，其为应用的起点。同时生成根节点的Fiber实例。这里=Fiber;=FiberRoot。调用会计算出此次更新的过期时间。并生成任务对象update，将其插入Fiber中的更新队列，然后调用触发任务调度会更新以该Fiber节点为根节点的整棵Fiber树的过期时间。然后调用进行调度中会绑定任务与具体执行函数。然后交由Scheduler处理。
JsonEquals - JSON 差异比较工具的使用
liumangtutu2919的博客
12-23 944
JsonEquals - JSON 差异比较工具的使用
比较两个JSON之间的差异
最新发布
mingyonghu的博客
05-15 2870
网上找到的比较JSON工具类，比较两个JSON对象之间的差异，并将差异字段按照原JSON对象的树状结构展现出来，方便对数据进行对比。对原有方法进行了部分优化。
两个JSON对比
qq_31817993的博客
10-28 2458
需求：两个Json对比 目前有两个json 类型的数据，{"1":"A","2":"B","3":"C","4":"D"} 和 {"1":"X","2":"Y","3":"Z","5":"Q"} * 对比出来的结构需要有{"1":{"old":"A","new":"X"},"2":{"old":"B","new":"Y"},"3":{"old":"C","new":"Z"},"4":{"old":"D","new":""},"5":{"old":"","new":"Q"}} class BO{.
JSON数据的差异对比工具（Java版）
Java知音
08-23 3731
背景之前有类似接口diff对比，数据对比的测试需求，涉及到json格式的数据对比，调研了几个大神们分享的代码，选了一个最符合自己需求的研究了下。说明这个对比方法，支持JsonObject和JsonArray类型的数据对比，支持：深度的对比：list变化（个数、内容）、层级结构变化字段的对比：新增、修改、删除数据可察觉，能找到对应的旧数据支持特定字段忽略对比输出的对比结果格式为：源码分为JsonCo...
树形结构数据的提交
yuhui666666的博客
07-18 300
树形结构数据提交问题 （1）标记，关联工作在jsp中进行 基于树形结构提交数据的复杂关联问题一个控件的name,value无法包含所有关联信息，自身信息，故用隐藏域， 由于隐藏域是统统提交，所以用隐藏域value作为key，能获取被选中值的就是被选中了， 所以组织隐藏域和选择框数据的时候按照key-value-key-value（中间的key-value相同） 所有看有没有被选中的关...
Js对比常用JSON数据差异
obj_null的博客
11-22 3387
对比json数据前后的差异，找到新增的数据，删除的数据
【前端笔试】实现两个json对象的比较
前端之路
09-16 6826
便利蜂前端笔试题~ 让实现一个function，比较两个json格式的数据是否一致， 我是用for of 去遍历，回来试了才知道for of 是不能遍历的对象的，应该用for in 的，反正官方是这么说的：The for...of statement creates a loop iterating over iterable objects (including Array, Map, Set
C#实现高效树形结构数据构建与查找
总结，构建和查找C#中的树形结构数据需要理解数据的层级关系，定义合适的实体模型，并利用递归或层次遍历的方法来处理数据。同时，关注性能优化，如分页加载、数据缓存和查询优化，以提升用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值