使用 Json 实现 DoJo 增强网格答案

【问题标题】：Implementing DoJo enhanced Grid with Json使用 Json 实现 DoJo 增强网格
【发布时间】：2011-07-28 15:26:34
【问题描述】：

我一直在尝试使用 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 字符串。然而，网格正在生成，它没有填充数据。网格中只出现了两个复选框...

我做错了什么吗？

【问题讨论】：

你是否包含了dataGrid所需的css？我似乎记得有一次忘记css时遇到过类似的问题
css 是一个问题...网格现在显示...但是网格中没有填充数据..关于为什么我的网格没有被填充的任何建议？

标签： spring dojo spring-roo dojox.grid

【解决方案1】：

我从未使用过 EnhancedGrid，但对于常规网格，我通过以声明方式创建存储，将其 ID 附加到网格（通过 HTML 中的 store=... 属性），然后当我想刷新带有新商店信息的网格，称为：

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

【讨论】：

【解决方案2】：

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

实际上我需要将数据作为 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>

【讨论】：