复杂的 JSON 结构 + 道场选择

Complex JSON structure + Dojo Selects

本文关键字：选择 结构 JSON 复杂      更新时间：2023-09-26

我有一个数据结构，我不知道如何正确管理它。我必须使用 Dojo，所以我选择了 JSON 来解决这个问题。我正在谈论的结构在这篇文章的底部。在阅读以下文本之前，请先检查一下。

问题：我必须有 3 个选择。第一个选择将包含"第一级"（a，b，c）。第二个将包含"第二级"（aa，ab，...）等等。

每个选择中的数据（第一个除外）应根据上一个选择中选择的内容而有所不同。

例如，如果我在第一个选择中选择"a"，我应该只在第二个选择中看到"aa，ab，ac"。然后，如果我在第二个中选择"ac"，我应该只看到"aca，acb，acc"。

请注意，在某些情况下没有"第三级"。在这种情况下，第三个选择应该被隐藏（或者如果它太难管理，就为空）。

现在参考。如果我在第一个选择中选择"d"，我应该只看到"aa，bc，ca"作为第二个选择的选项。然后，如果我在第二个选择中选择"cc"，我应该在第三个选择中看到"cca，ccb，ccc"。当然，这不应该是静态的。在我的示例中，如果"c -> cc"子树将更改，则"d -> cc"的内容也应更改。

现在来回答问题：

1） 如何使用 Dojo 制作类似的东西？如果是香草JS，那对我来说是显而易见的，但是我不知道如何使其与所有这些对象存储之类的东西一起工作。

2）如何使引用与这种结构一起工作？我可以让它在一个简单的 JSON 上工作，但是当它变得如此复杂时，我完全迷失了。

3） 如何呈现结构？作为单个 JSON？还是我应该把它分成几个部分？

提前感谢！

a
    aa
        aaa
        aab
    ab
        aba
    ac
        aca
        acb
        acc
b
    ba
    bb
    bc
        bca
c
    ca
        caa
        cab
    cb
        cba
        cbb
    cc
        cca
        ccb
        ccc
d
    <ref to aa subtree>
    <ref to bc subtree>
    <ref to ca subtree>

好吧，你可以把它表示为一个对象，例如：

var myData = {
    a: {
        aa: ['aaa', 'aab'],
        ab: ['aba'],
        ac: ['aca', 'acb', 'acc']
    },
    b: {
        ba: null,
        bb: null,
        bc: ['bca']
    },
    c: {
        ca: ['caa', 'cab'],
        cb: ['cba', 'cbb'],
        cc: ['cca', 'ccb', 'ccc']
    },
    d: {}
};
myData.d.aa = myData.a.aa;
myData.d.bc = myData.b.bc;
myData.d.ca = myData.c.ca;

但无论如何，实现也会非常复杂。首先，我建议编写一个函数，根据参数获取每个级别的标签。例如：

var getObjectData = function(object) {
    var data = [];
    for (var key in object) {
        if (object.hasOwnProperty(key)) {
            data.push({
                name: key,
                value: object[key]
            });
        }
    }
    return data;
};
var getData = function(obj) {
    var data = [];
    if (obj === undefined) {
        return getObjectData(myData);
    } else if (obj instanceof Array) {
        return obj.map(function(value) {
            return {
                name: value,
                value: null
            };
        });
    } else {
        return getObjectData(obj);
    }
    return data;
};

这将返回存储内应该可用的正确数据，其中包含标签（"a"，"b"，"c"，...）和下一级的对象结构。

然后你可以写这样的东西：

registry.byId("level1").setStore(new ObjectStore({
     objectStore: new Memory({
        data: getData(),
        idProperty: 'name'
    })
}));
var getNextLevel = function(value) {
    var data = getData(this.store.objectStore.get(value).value);
    if (this.nextLevel) {
        if (data.length > 0) {
            domStyle.set(registry.byId(this.nextLevel).domNode, "display", "inline-table");
            registry.byId(this.nextLevel).setStore(new ObjectStore({
                objectStore: new Memory({
                    data: data,
                    idProperty: 'name'
                })
            }));
        } else {
            domStyle.set(registry.byId(this.nextLevel).domNode, "display", "none");   
        }
    }
};
registry.byId("level1").on("change", getNextLevel);
registry.byId("level2").on("change", getNextLevel);

这将在值更改时检索数据（使用前面的函数），然后它将使用该数据填充下一级的存储。

不过，这还不是一个完整的解决方案。因为您仍然需要做一些初始化，但它可以让您了解如何处理这种情况。

示例：http://jsfiddle.net/ekoronra/

相关文章：