Реализация улучшенной сетки DoJo с помощью Json

Question

Я пытался внедрить DoJo Enhanced Grid с Json и пока не добился успеха.

Это то, что я сделал до сих пор;

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <div xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:util="urn:jsptagdir:/WEB-INF/tags/util" xmlns:spring="http://www.springframework.org/tags" version="2.0">
<jsp:output omit-xml-declaration="yes"/>
<spring:url value="/students/listdata" var="mydatasource"/>

<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dojox.grid.EnhancedGrid");
    dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
    dojo.require("dijit.form.Button");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.addOnLoad(function() {
        dojo.parser.parse();
        loadGrid(dataGrid);
    });

    function loadGrid(dataGrid) {
        dojo.xhrGet({
            url: "${mydatasource}",
            load: function(data, ioArgs) {
                dataGrid.setStore(
                        new dojo.data.ItemFileReadStore(
                            {data: {items : data}})
                );
            },
            error: function(error) {
                console.log("loading of grid data failed. Exception...", error);
            }
        });
    }
</script>
<util:panel id="titlePane" title="Course List">
    <div id="addButton" dojoType="dijit.form.Button">
        Add
    </div>
    <div id="deleteButton" dojoType="dijit.form.Button">
        Delete
    </div>

    <div id="grid" jsId="dataGrid" dojoType="dojox.grid.EnhancedGrid"
        structure ="[
                        { field: 'id', name: 'ID', width: '55px' },
                        { field: 'firstName', name: 'First Name', width: '230px' },
                        { field: 'lastName', name: 'Last Name', width: '50px' },
                        { field: 'gender', name: 'Gender', width: '145px'}
                    ]"
        autoWidth="true"
        autoHeight="true"
        plugins="{indirectSelection: true}"
        selectionMode="single">
    </div>
</util:panel>

Как видите, я получаю строку Json через вызов AJAX от DOJO. Сетка генерирует, однако, она не заполняется данными. Только два флажка появляются в сетке ...

Есть что-то, что я делаю неправильно?

Answer 1

обнаружил проблему с сеткой, не загружающей данные.

На самом деле мне нужно было обрабатывать данные как строку Json.

ниже - копия работающего кода:

<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dojox.grid.EnhancedGrid");
    dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
    dojo.require("dijit.form.Button");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.addOnLoad(function() {
        dojo.parser.parse();
        loadGrid(dataGrid);
    });

    function loadGrid(dataGrid) {
        dojo.xhrGet({
            url: "${mydatasource}",
            handleAs: "json", 
            load: function(data, ioArgs) {
                dataGrid.setStore(
                        new dojo.data.ItemFileReadStore(
                            {data: {items : data}})
                );
            },
            error: function(error) {
                console.log("loading of grid data failed. Exception...", error);
            }
        });
    }         
</script>

Answer 2

Я никогда не использовал EnhancedGrid, но для обычной сетки я сделал это, декларативно создав хранилище, прикрепив его идентификатор к сетке (через атрибут store = ... в HTML), а затем, когда мне захотелось обновить сетка с информацией о новом магазине, называется:

grid.setStore(...,null,null);