我想有一个dojo网格连接到一个服务器url输出以下json:{标识符:"id"项目:[{id:"1",名字:"约翰",大学:{名称:"XXX",地址:"多"}}]。
基本上我有一个嵌套json。我想在网格中将大学名称和大学地址分别表示为两列。
我尝试使用dojox.grid.DataGrid对象并创建网格布局,但不知道如何引用嵌套元素和university.name和university。地址好像不管用。我使用dojo 1.6.1.
有人有什么建议吗?
这是我使用的js代码:
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.addOnLoad(function(){
// our test data store for this example:
var jsonStore = new dojo.data.ItemFileReadStore({
url: '/MainDeployer/ajax/users/get.json'
});
var layoutUsers = [
[{
field: "name",
name: "Name",
width: 10
},
{
field: "university.name",
name: "University Name",
width: 10
},
{
field: "university.address",
name: "University Address",
width: 'auto'
}]];
// create a new grid:
var grid = new dojox.grid.DataGrid({
query: {},
store: jsonStore,
clientSort: true,
rowSelector: '20px',
structure: layoutUsers
},
document.createElement('div'));
dojo.byId("usersTable").appendChild(grid.domNode);
grid.startup();
});
谢谢,克里斯蒂安·
您使用的是哪种类型的商店?看看dojo.data.ItemFileReadStore文档,有一个类似你的情况的例子:http://dojotoolkit.org/reference-guide/dojo/data/ItemFileReadStore.html item-structure
这将帮助您通过调用"fetch"方法来获取所有项。如果由于某些原因它不工作,由于不同的json结构,你可以继续使用ItemFileReadStore,并创建一个函数,循环遍历json中的所有对象,并使用loadItem方法添加项目一个接一个以这种方式(它不漂亮,但它的工作):
var myData = {"items" : []};
var myStore = new dojo.data.ItemFileWriteStore({data: myData});
var myLayout = [{
field: 'name',
name: 'Name',
width: '200px'
},
{
field: 'universityName',
name: 'University Name',
width: '100px'
},
{
field: 'universityAddress',
name: 'University Address',
width: '60px'
}];
var myGrid;
dojo.addOnLoad(function(){
myGrid = new dojox.grid.DataGrid({
store: myStore,
structure: myLayout
}, document.createElement('div'));
dojo.byId("myGridContainer").appendChild(myGrid.domNode);
myGrid.startup();
dojo.xhrGet({
url: myURL,
handleAs: "json",
headers: {
"Content-Type": "application/json; charset=uft-8",
"Accept" : "application/json"
},
load: function(responseObject, ioArgs) {
myList = responseObject;
dojo.forEach(myList.items, function(element) {
myStore.newItem({"name": element.name,
"universityName": element.university.name,
"universityAddress": element.university.address});
});
})
});
}
var nameFormatter = function(value, rowIdx){
return value.name;
};
var addressFormatter = function(value, rowIdx){
return value.address;
};
var layoutUsers = [
[{
field: "name",
name: "Name",
width: 10
},
{
field: "university",
name: "University Name",
width: 10,
formatter: nameFormatter
},
{
field: "university",
name: "University Address",
width: 'auto',
formatter: addressFormatter
}]];