Question

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

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

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

例如，如果我选择＆＃34; a＆＃34;在第一个选择中，我应该只看到＆＃34; aa，ab，ac＆＃34;在第二个选择。如果我选择＆＃34; ac＆＃34;在第二个中，我应该只看到＆＃34; aca，acb，acc＆＃34;。

请注意，有些情况下没有＆＃34;第三级＆＃34;。在这种情况下，应隐藏第三个选择（如果它太难管理，则为空，）。

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

现在提出问题：

1）我如何使用Dojo制作类似的东西？如果它是Vanilla 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>

Answer 1

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

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/

复杂的JSON结构+ Dojo选择

1 个答案: