用Json实现DoJo增强型Grid

时间:2011-07-28 15:26:34

标签: spring dojo spring-roo dojox.grid

我一直在尝试用Json实现DoJo增强型网格,到目前为止我还没有成功。

这是我到目前为止所做的事情;

 <?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>

如您所见,我通过DOJO的AJAX调用获取Json String。然而,网格正在生成,它没有填充数据。网格中只出现两个复选框...

我有什么不对的吗?

2 个答案:

答案 0 :(得分:1)

我从未使用过EnhancedGrid,但对于常规网格,我通过声明性地创建存储,将其ID附加到网格(通过HTML中的store = ...属性),然后当我想刷新时这样做带有新商店信息的网格,名为:

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

答案 1 :(得分:1)

发现网格没有加载数据的问题。

实际上我需要将数据作为Json String处理。

下面的

是有效代码的副本:

<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>