Сетка додзё, вложенная json - PullRequest
1 голос
/ 05 августа 2011

Я хотел бы иметь сетку додзё, которая соединяется с URL-адресом сервера, который выводит следующий json: {идентификатор: элементы "id": [{id: "1", имя: "Джон", университет: {имя: "XXX", адрес: "YYY"}}].

В основном у меня есть вложенный json.Я хотел бы представить название университета и адрес университета в виде отдельных столбцов в сетке.

Я попытался использовать объект dojox.grid.DataGrid и создать макет Gird, но не знаю, как ссылаться на вложенныйelments и университет. имя и университет. адрес, кажется, не работает.Я использую 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();
});

Спасибо, Кристиан

Ответы [ 2 ]

3 голосов
/ 05 августа 2011

Какой магазин вы используете? Взгляните на документацию 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});
            });
        })
    });
}
2 голосов
/ 21 августа 2012

se форматер:

    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 
           }]];
...