Dojo网格嵌套json [英] Dojo grid nested json

问题描述

我想要一个连接到一个服务器url的dojo网格，它输出以下json：
{identifier：id
items：[{id：1，name： John，大学：{name：XXX，地址：YYY}}]。

I'd like to have a dojo grid which connects to a server url which outputs the following json : {identifier : "id" items : [ { id: "1", name: "John", university : { name: "XXX", address: "YYY" } }].

基本上我有一个嵌套的json。我想表示大学名称和大学地址作为网格中的单独列。

Basically I have a nested json. I would like to represent the university name and University address as separate columns in the grid.

我尝试使用dojox.grid.DataGrid对象并创建一个网格布局，但是不知道如何引用嵌套的elments和university.name和university.address似乎没有工作。
我正在使用dojo 1.6.1。

I tried using the dojox.grid.DataGrid object and creating a gird layout, but do not know how to refer to the nested elments and university.name and university.address don't seem to work. I am using dojo 1.6.1.

有人有任何指针吗？

这是我使用的js代码：

This is the js code I use :

    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();
});

谢谢，
Cristian

Thanks, Cristian

推荐答案

你使用什么样的商店？看看dojo.data.ItemFileReadStore文档，有一个例子，你的情况如下：
http://dojotoolkit.org/reference-guide/dojo/data/ItemFileReadStore.html#item-structure

What kind of store are you using? Have a look at the dojo.data.ItemFileReadStore documentation, there is an example with a situation like yours: http://dojotoolkit.org/reference-guide/dojo/data/ItemFileReadStore.html#item-structure

这将帮助您通过单次调用方法fetch获取所有项目。如果由于某些原因，由于不同的json结构不起作用，您可以继续使用ItemFileReadStore，并创建一个循环遍历json中所有对象的函数，并使用loadItem方法逐个添加项（它不漂亮，但它的作品）：

This would help you fetching all the items with a single call to the method "fetch". If for some reasons it doesn't work due to the different json structure, you can continue using ItemFileReadStore , and create a function that loops over all the objects in your json and uses the loadItem method for adding items one by one in this way (it's not beautiful but it works):

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});
            });
        })
    });
}

这篇关于Dojo网格嵌套json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！