我正在尝试获取一个json数据渲染道场树。
你可以看到我在做什么 http://jsfiddle.net/F53Ge/38/
require(["dojo/parser","dojo/json","dojo/store/Memory","dijit/tree/ObjectStoreModel","dijit/Tree", "dojo/window"], function (parser,json,Memory,ObjectStoreModel,Tree,win) {
var data = [{"id":"root","team":[{"teamId":1,"teamname":"JMK_TEST_1","parentteamId":0,"associatedList":[{"type":"9117","number":"1011D1P"}]},{"teamId":174,"teamName":"JJG_PARENT_3","parentteamId":0,"associatedList":[{"type":"8205","number":"062072T"}]},{"teamId":172,"teamName":"JJG_PARENT_1","parentteamId":0,"subteamsList":[{"teamId":175,"teamName":"JJG_Subteam_1","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]},{"teamId":176,"teamName":"JJG_Subteam_2","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]}],"associatedList":[{"type":"7945","number":"KQZGTNC"}]},{"teamId":221,"teamName":"JJG_Parent_4","parentteamId":0,"subteamsList":[{"teamId":222,"teamName":"JJG_Subteam_4_1","parentteamId":221,"associatedList":[{"type":"9117","number":"10E7683"},{"type":"9119","number":"514DDB2"},{"type":"8233","number":"102FE9P"},{"type":"7978","number":"KDGYKLL"},{"type":"7978","number":"99A9880"}]}]},{"teamId":106,"teamName":"JMK_TEST","parentteamId":0,"subteamsList":[{"teamId":107,"teamName":"JMK_TEST1","parentteamId":106,"subteamsList":[{"teamId":173,"teamName":"JJG_PARENT_2","parentteamId":107,"subteamsList":[{"teamId":178,"teamName":"JJG_Subteam_2_1","parentteamId":173,"associatedList":[{"type":"9117","number":"10E7683"}]}],"associatedList":[{"type":"7945","number":"KQZGTNC"}]}]}]}]}];
var store = new Memory({
data: data,
getChildren: function(object){
return object.team || [];
}
});
var model = new ObjectStoreModel({
store: store,
query: { id:'root' },
mayHaveChildren: function (item) {
return "subteamsList" in item;
}
});
var tree = new Tree({
model: model,
showRoot: false,
autoExpand: true,
persist: false,
onClick: function (item, treeNode, e) {
selectednodeid = this.selectedNode;
win.scrollIntoView(selectednodeid);
alert(selectednodeid);
}
},"oopt_list");
tree.startup();
});
首先,我没有看到子节点,也不知道如何传递标签,因为它显示列表未定义。
任何帮助,不胜感激。
也让我知道我是否应该使用森林模型。基本上,我正在尝试在树上显示json数据,并想知道用户单击了哪个节点,以便我可以基于此执行一些操作。
问候大黄蜂
要定义哪个属性应该用作标签,您需要在模型上定义"labelAttr"。
您看不到子节点的原因是,您存储的 idProperty 缺少存储。(或者您在根项"id"上具有不同的 id 属性,而在其他项"teamId"上具有不同的 id 属性)。
使用 ObjectStoreModel 而不是 ForestModel 是正确的。您正在使用内存存储,它是新道场/商店 API 的实现。(ForestModel 只能与较旧的 dojo/data API 一起使用)
在此处查看更新的示例http://jsfiddle.net/F53Ge/42/
require(["dojo/parser","dojo/json","dojo/store/Memory","dijit/tree/ObjectStoreModel","dijit/ Tree", "dojo/window"], function (parser,json,Memory,ObjectStoreModel,Tree,win) {
var data = [{"teamId":"root","subteamsList":[{"teamId":1,"teamName":"JMK_TEST_1","parentteamId":0,"associatedList":[{"type":"9117","number":"1011D1P"}]},{"teamId":174,"teamName":"JJG_PARENT_3","parentteamId":0,"associatedList":[{"type":"8205","number":"062072T"}]},{"teamId":172,"teamName":"JJG_PARENT_1","parentteamId":0,"subteamsList":[{"teamId":175,"teamName":"JJG_Subteam_1","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]},{"teamId":176,"teamName":"JJG_Subteam_2","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]}],"associatedList":[{"type":"7945","number":"KQZGTNC"}]},{"teamId":221,"teamName":"JJG_Parent_4","parentteamId":0,"subteamsList":[{"teamId":222,"teamName":"JJG_Subteam_4_1","parentteamId":221,"associatedList":[{"type":"9117","number":"10E7683"},{"type":"9119","number":"514DDB2"},{"type":"8233","number":"102FE9P"},{"type":"7978","number":"KDGYKLL"},{"type":"7978","number":"99A9880"}]}]},{"teamId":106,"teamName":"JMK_TEST","parentteamId":0,"subteamsList":[{"teamId":107,"teamName":"JMK_TEST1","parentteamId":106,"subteamsList":[{"teamId":173,"teamName":"JJG_PARENT_2","parentteamId":107,"subteamsList":[{"teamId":178,"teamName":"JJG_Subteam_2_1","parentteamId":173,"associatedList":[{"type":"9117","number":"10E7683"}]}],"associatedList": [{"type":"7945","number":"KQZGTNC"}]}]}]}]}];
var store = new Memory({
data: data,
idProperty:"teamId",
getChildren: function(object){
return object.subteamsList || [];
}
});
var model = new ObjectStoreModel({
store: store,
query: { teamId:'root' },
mayHaveChildren: function (item) {
console.log("may",item)
return "subteamsList" in item;
},labelAttr :"teamName"
});
var tree = new Tree({
model: model,
showRoot: false,
autoExpand: true,
persist: false,
onClick: function (item, treeNode, e) {
selectednodeid = this.selectedNode;
win.scrollIntoView(selectednodeid);
alert(selectednodeid);
}
},"oopt_list");
tree.startup();
});