javascript - json数据结构相互转换怎么操作?
高洛峰
高洛峰 2017-04-11 10:48:47
[JavaScript讨论组]
/*isleaf为true时表示叶子节点即文件,false时表示文件夹*/
var data1=[{
            "tid": "1",
            "isleaf": false,
            "text": "产品1",
            "children": [{
                "tid": "1-1",
                "isleaf": false,
                "text": "产品模拟",
                "children": [{
                    "tid": "1-1-1",
                    "isleaf": false,
                    "text": "产品模拟"
                }, {
                    "tid": "1-1-2",
                    "isleaf": true,
                    "text": "产品模拟"
                }]
            }, {
                "tid": "1-2",
                "isleaf": true,
                "text": "产品模拟"
            }]
        },{
            "tid": "2",
            "isleaf": false,
            "text": "产品2",
            "children": [{
                "tid": "2-1",
                "isleaf": false,
                "text": "产品模拟",
                "children": [{
                    "tid": "2-1-1",
                    "isleaf": true,
                    "text": "产品模拟"
                }, {
                    "tid": "2-1-2",
                    "isleaf": true,
                    "text": "产品模拟"
                }]
            }, {
                "tid": "2-2",
                "isleaf": true,
                "text": "产品模拟"
            }]
        }]
var data2= [
            {"tid": "1", "isleaf": false, "text": "产品1"},
            {"tid": "2", "isleaf": false, "text": "产品2"},

            {"tid": "1-1", "pid": "1", "isleaf": false, "text": "产品模拟"},
            {"tid": "1-2", "pid": "1", "isleaf": true, "text": "产品模拟"},
            {"tid": "2-1", "pid": "2", "isleaf": false, "text": "产品模拟"},
            {"tid": "2-2", "pid": "2", "isleaf": true, "text": "产品模拟"},

            {"tid": "1-1-1", "pid": "1-1", "isleaf": false, "text": "产品模拟"},
            {"tid": "1-1-2", "pid": "1-1", "isleaf": true, "text": "产品模拟"},
            {"tid": "2-1-1", "pid": "2-1", "isleaf": true, "text": "产品模拟"},
            {"tid": "2-1-2", "pid": "2-1", "isleaf": true, "text": "产品模拟"},
        ];

在做一个树形插件功能(类似文件管理系统用户可增删改查),用户对dom进行操作时要对应到相应数据做增删改查,比如新建文件是直接增加一层数据传递给后台,删除直接就删除相应dom对应的tid那一层的数据再渲染dom;
初次拿到数据时是第一种格式然后渲染出dom,但很多时候,要把第一种格式转换成第二种,怎么写两个方法实现两种格式数据互相转换。
还有这种强交互的树形文件管理数据层应该怎么设计??有哪些要注意的??(比如删除一层数据后所有数据要重新便利一边赋新的id吗??)谢谢谢谢!!!

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(3)
迷茫
function createTree(data, arr, tid) {
    arr = arr || [];
    data.reduce(function(prev, item) {
        tid ? prev.push({
            tid: item.tid,
            isleaf: item.isleaf,
            pid: tid,
            text: item.text
        }) : prev.push({
            tid: item.tid,
            isleaf: item.isleaf,
            text: item.text
        });
        item.children ? createTree(item.children, arr, item.tid) : '';
        return prev
    }, arr)
    return arr
}

console.log(JSON.stringify(createTree(data1, [])))
    
console.log(JSON.stringify(createTree(data1)))
[{"tid":"1","isleaf":false,"text":"产品1"},{"tid":"1-1","isleaf":false,"pid":"1","text":"产品模拟"},{"tid":"1-1-1","isleaf":false,"pid":"1-1","text":"产品模拟"},{"tid":"1-1-2","isleaf":true,"pid":"1-1","text":"产品模拟"},{"tid":"1-2","isleaf":true,"pid":"1","text":"产品模拟"},{"tid":"2","isleaf":false,"text":"产品2"},{"tid":"2-1","isleaf":false,"pid":"2","text":"产品模拟"},{"tid":"2-1-1","isleaf":true,"pid":"2-1","text":"产品模拟"},{"tid":"2-1-2","isleaf":true,"pid":"2-1","text":"产品模拟"},{"tid":"2-2","isleaf":true,"pid":"2","text":"产品模拟"}]
怪我咯

1、用树形插件的话就删除后服务端再重新遍历吧

2、操作DOM就隐藏掉数据,插件好像没有操作的方法吧,比如ZTree...

PHP中文网

本质就是一颗树的层次遍历

那就遍历拿到的json,一层一层遍历下去,每次遍历后,把根的除了children属性的所有属性组织好push进一个数组,然后再遍历子树

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号