1

我对Dojo(1.7)很陌生,对AMD加载程序和全球哲学感到非常兴奋,然后以为我红了几十个文档并google了很多,我的大脑开始烧烤,我仍然无法理解并执行一些操作:我想显示任何JSON 类型的 dijit.Tree,就像 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 变量,children L1 是 root 变量,等等......并且在 json 变量类型(字符串、数字、对象、数组)上,我还将显示一个相应的图标
  • 不必一次性解析整个 json 并对其进行格式化,例如首先显示根节点,然后格式良好的子节点使用 getChildren 方法,例如,它是在 expando 上逐步完成的(就像一个懒惰的加载)。我已经用 javascript 制作了自己的 Trees 类,更灵活的方法是我给构造函数提供了一个 dataRoot、一个 renderItem(dataItem, domItem) 和一个 getChildren(dataItem),这样我就可以执行并返回我想要的所有内容,只有 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();
    }
});
4

2 回答 2

5

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

在此处输入图像描述

您可以在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,但我将在返回欧洲后将代码放在那里并在此处发布链接。

于 2012-06-19T06:51:14.067 回答
1

尝试这样的事情:

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

通常也避免覆盖树函数,您可以扩展它们,但要小心。如果你想控制台.log,那么宁愿连接到他们......

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

于 2012-06-13T08:00:05.877 回答