Question

我是Dojo（1.7）的新手，我对AMD装载机和全球哲学感到非常兴奋，然后认为我已经发了很多文档并且搜索了很多东西，我的大脑开始烧烤，我仍然无法理解和执行某些事情：我想显示一个dijit.Tree of 任何类型的JSON，是的，就像一个JSON编辑器，因为我还使用持久性JSON文件来存储少量数据（不仅仅是对于GET /.../传输）。这是我的期望：

示例JSON：{"infos":{"address":"my address","phone":"my phone"},"insurance":{"forks":[14,53,123],"prices":[5,8,"3%"]}}
显示任何JSON的不同变量：root child是 root json变量，子L1是根变量等...而在json变量类型（String，Number，Object，Array）上我也会显示相应的图标
不必解析整个json并在一个大时间内对其进行格式化，想要首先显示根节点，然后以良好格式化的子节点为例进行getChildren方法，因此它在expando上逐步完成（像一个懒惰的负载）。我已经使用javascript创建了自己的Trees类，更灵活的方式是我给构造函数一个dataRoot，一个renderItem（dataItem，domItem）和一个getChildren（dataItem），所以我可以执行并返回我想要的所有内容，仅限Tree只在需要时执行渲染，Tree不知道数据结构也没有修改它，但我不确定为什么dijit.Tree需要一种如此限制的构建方式......

这是我的最后一次尝试，它可能完全不是正确的方式，（也许我必须继承）但据我所知，我需要使用3个类（dojo存储，树模型和树小部件），但是首先看来模型无法获得根节点，请检查我的不同代码注释。那么，请问有没有耐心的人可以给我一个简单的例子，有一些明确的解释（是的，我有点要求），至少是构造函数选项的正确必要变量列表，我需要开始显示我的一个很好的树视图json文件，有很多我完全迷失了，非常感谢！

...
// before there is the AMD part that load the needed things
Xhr.get({ url:'data/file.json', handleAs:'json',
    load: function(data){
        console.log('xhr.loaded : ', data);// got my javascript object from the json string
        var store = new ItemFileReadStore({// is it the right store I need ??
            // or the Memory store ?
            // assuming later I'll need to save the data changes 
            rootId : 'root',// 
            rootLabel : 'Archive',// useless ? isn't it the model responsability ?
            data : {id:'root', items:[data]}// trying to give a root node well formatted
        });
        var model = new TreeStoreModel({
            store : store,
            getChildren : function(obj){
                // firstly here it seems the root is not found
                // I got a 'error loading root' error
                // what is missing in my instanciations ??
                // what is exactyly the type of the 1st arg : a store ?
                console.log('getChildren : ', this.get(obj.id));
            },
            mayHaveChildren : function(){
                console.log('mayHaveChildren ', arguments);
                return true;
            }
        });
        var tree = new Tree({
            model: model
        }, domId);
        tree.startup();
    }
});

Answer 1

我的解决方案基于受Connecting a Store to a Tree启发的dojo/store/Memory：

enter image description here

您可以在http://egoworx.com/找到现场演示，或从dropbox下载完整的来源。

现在代码。首先dojo/store/Memory：

var data =  {"infos":{"address":"my address","phone":"my phone", "gift": false, "now": new Date()},"insurance":{"forks":[14,53,123],"prices":[5,8,"3%"]}};

var store = new Memory({

  data: data,

  mayHaveChildren: function(object) {
    var type = this.getType(object);
    return (type == "Object" || type == "Array");
  },

  getChildren: function(object, onComplete, onError) {
    var item = this.getData(object);
    var type = this.getType(object);
    var children = [];

    switch(type) {
      case "Array":
        children = item;
        break;
      case "Object":
        for (i in item) {
          children.push({label: i, data: item[i]});
        }
        break;
    }
    onComplete(children);
  },

  getRoot: function(onItem, onError) {
    onItem(this.data);
  },

  getLabel: function(object) {
    var label = object.label || object + "";
    var type = this.getType(object);

    switch(type) {
      case "Number":
      case "String":
      case "Boolean":
      case "Date":
        var data = this.getData(object);
        if (data != label) {
          label += ": " + this.getData(object);
        }
    }

    return label;
  },

  getData: function(object) {
    if (object && (object.data || object.data === false) && object.label) {
      return object.data;
    }
    return object;
  },

  getType: function(object) {
    var item = this.getData(object);
    if (lang.isObject(item)) {
      if (lang.isArray(item)) return "Array";
      if (lang.isFunction(item)) return "Function";
      if (item instanceof Date) return "Date";
      return "Object";
    }

    if (lang.isString(item)) return "String";
    if (item === true || item === false) return "Boolean";
    return "Number";
  },

  getIconClass: function(object, opened) {
    return this.getType(object);
  }    
});

请注意我在您的数据中添加了布尔和日期类型。

dijit/Tree基于此商店：

var tree = new Tree({
    model: store,
    persist: false,
    showRoot: false,
    getIconClass: function(object, opened) {
      if (lang.isFunction(this.model.getIconClass)) {
        return this.model.getIconClass(object, opened);
      }
      return (!item || this.model.mayHaveChildren(item)) ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf";
    }
  }, "placeholder");

tree.startup();

最后是一个显示数据类型图标的样式表：

.dijitTreeIcon {
  width: 16px;
  height: 16px;  
}

.Object {
  background-image: url(http://dojotoolkit.org/api/css/icons/16x16/object.png);
}

.Array {
  background-image: url(http://dojotoolkit.org/api/css/icons/16x16/array.png);
}

.Date {
  background-image: url(http://dojotoolkit.org/api/css/icons/16x16/date.png);
}

.Boolean {
  background-image: url(http://dojotoolkit.org/api/css/icons/16x16/boolean.png);
}

.String {
  background-image: url(http://dojotoolkit.org/api/css/icons/16x16/string.png);
}

.Number {
  background-image: url(http://dojotoolkit.org/api/css/icons/16x16/number.png);
}

由于我目前在中国，因此我无法访问jsFiddle，但我会在返回欧洲时将代码放在上面并在此处发布链接。

Answer 2

尝试这样的事情：

store = new dojo.data.ItemFileWriteStore({
                url : "",
                data: {
                    identifier: "id",
                    label   : "label",
                    items   : [{
                        id      : "root",
                        label   : "root",
                        type    : "root",
                        children: [data]
                    }]
                }
            });

一般情况下，一般都要避免覆盖树函数，你可能会扩展它们，但是很明显。如果你想要console.log，那么请连接到它们......

ItemFileReadStore是一个只读存储，因此不是您想要“保存修改”的存储。您可以尝试使用ItemFileWriteStore或JsonRest等。

Dojo Tree：从* unformatted * json到预期格式的桥接

2 个答案: