使用fancytree以树格式显示json数据的键名？答案

【问题标题】：To display name of the keys of json data in tree format using fancytree?使用fancytree以树格式显示json数据的键名？
【发布时间】：2015-03-07 17:46:20
【问题描述】：

我正在使用带有 json 数据的 Fancytree jquery 插件来以树格式显示数据。问题是，我想将键名而不是值显示为我的树节点。例如，

[{
    "title": "Sample json",
    "expanded": true,
    "folder": true,
    "children": [{
        "title": "dev",
        "folder": true
    }, {
        "title": "etc",
        "folder": true,
        "children": [{
            "title": "cups"
        }, {
            "title": "httpd"
        }, {
            "title": "init.d"
        }]
    }

在这里，我想将“title”显示为我的树节点，而不是“Sample json”值。我该怎么做？

任何帮助将不胜感激。提前致谢！

【问题讨论】：

你真的想显示一个有 6 个节点的树，所有节点都以“title”作为标题吗？
@mar10，是的。如，我想将键名显示为 fancytree 的节点而不是值。
我不明白这一点，但由于关键总是'title'，你可以简单地为每个节点传递 {"title": "title", ...}
@mar10，实际上我想将 XML 转换为 JSON，然后以树格式显示键而不是值。仅当节点展开时才应显示该值，否则根本不显示也可以。
@mar10，生成的 JSON 是否必须采用具有上述特定键的特定格式？

标签： jquery fancytree

【解决方案1】：

如果json对象的初始格式不能改变，你有以下选择之一：

// option 1
$('#tree1').fancytree({
source: [{
    "title": "Sample json",
    "expanded": true,
    "folder": true,
    "children": [{
        "title": "dev",
        "folder": true
    }, {
        "title": "etc",
        "folder": true,
        "children": [{
            "title": "cups"
        }, {
            "title": "httpd"
        }, {
            "title": "init.d"
        }]
    }]
}],
renderNode: function (event, data) {
    var node = data.node;
    node.tooltip = node.title;
    node.setTitle('title');
}
});

// option 2
$('#tree2').fancytree({
source: {
    url: 'data.json'
},
postProcess: function (event, data) {
    var response = data.response;

    function changeTitle(nodeData) {
        nodeData.tooltip = nodeData.title;
        nodeData.title = 'title';
        for (var i in nodeData.children) {
            var subNodeData = nodeData.children[i];
            changeTitle(subNodeData);
        }
    }

    for (var i in response) {
        var nodeData = response[i];
        changeTitle(nodeData);
    }
}
});

【讨论】：