SmartGwt - 从 JSON 加载网格数据答案

【问题标题】：SmartGwt - Load Grid Data From JSONSmartGwt - 从 JSON 加载网格数据
【发布时间】：2010-10-07 20:40:43
【问题描述】：

我正在尝试开始使用 SmartGwt。我正在使用 XJSONDatasource 对 SmartClient 上具有 JSON 数据的示例页面进行跨域调用。但是，当我运行代码时，会出现一个弹出窗口，上面写着“正在查找符合您的条件的记录......”这永远不会消失，并且不会加载数据。我正在使用 SmartGwt 的免费版本（我的公司已经说过这是我们将使用的）。希望我只是遗漏了一些明显的东西。

    DataSource dataSource = new XJSONDataSource();
    dataSource.setDataTransport(RPCTransport.SCRIPTINCLUDE);
    dataSource.setDataFormat(DSDataFormat.JSON);

    dataSource.setDataURL("http://www.smartclient.com/smartgwt/showcase/data/dataIntegration/json/contactsData.js");
    DataSourceTextField nameField = new DataSourceTextField("name", "name");

    nameField.setValueXPath("name");

    dataSource.setFields(nameField);

    ListGrid grid = new ListGrid();
    grid.setDataSource(dataSource);
    grid.setWidth100();
    grid.setHeight(100);
    grid.setAutoFetchData(true);
    grid.draw();

【问题讨论】：

你也应该用 X-JSON 标记这个问题

标签： smartgwt

【解决方案1】：

我从这里的文档中看到：http://www.smartclient.com/smartgwt/javadoc/com/smartgwt/client/data/XJSONDataSource.html

注意，如教程中所示以上，服务器负责不仅写出数据，而且也是一个 JavaScript 函数调用告诉客户响应有到达的。客户传递的名称作为“回调”调用的函数网址参数。

但是您在 www.smartclient.com/smartgwt/showcase/data/dataIntegration/json/contactsData.js 链接的页面的代码中没有这样的回调

【讨论】：

【解决方案2】：

当您的 smartGWT 数据源调用此 URL 时：

http://www.smartclient.com/smartgwt/showcase/data/dataIntegration/json/contactsData.js

（如果您的数据源正在调用 Java 应用程序，请转到此答案的底部）

您的数据源将发出的请求将包含一个名为 callback 的 GET 参数，如下所示：

callback=isc.Comm._scriptIncludeReply_0

脚本 contactsData.js 将需要捕获此 GET 参数。

contactsData.js 需要包含一个库来从 URL 中检索参数：

javascript检索参数函数：

function getParameter ( queryString, parameterName ) {
   // Add "=" to the parameter name (i.e. parameterName=value)
   var parameterName = parameterName + "=";
   if ( queryString.length > 0 ) {
      // Find the beginning of the string
      begin = queryString.indexOf ( parameterName );
      // If the parameter name is not found, skip it, otherwise return the value
      if ( begin != -1 ) {
         // Add the length (integer) to the beginning
         begin += parameterName.length;
         // Multiple parameters are separated by the "&" sign
         end = queryString.indexOf ( "&" , begin );
      if ( end == -1 ) {
         end = queryString.length
      }

jQuery 检索参数函数

http://ajaxcssblog.com/jquery/url-read-request-variables/

获取回调参数的值后，您将使用 JSON 作为参数在响应正文中写入函数名称，如下所示：

isc.Comm._scriptIncludeReply_0({"item": [ {"id": "1","name": "Monkey"}, 
{"id": "2","name": "Tree"}, 
{"id": "3","name": "Banana"} ] })

因此 javascript 代码将如下所示：

Response.Write(getParameter(URLrequestFromDatasourceString,"callback") + " ( " + JSON + " )" );

JAVA

如果您的 smartGWT 数据源调用 Java 应用 URL：

http://www.smartclient.com/getJson.htm

您的 Java 控制器会做同样的事情，但要容易得多

String callbackString = request.getParameter("callback");

response.setContentType("text/X-JSON");
response.getWriter().write( callbackString + " ( " + JSONstring + " ) " );
response.setStatus(HttpServletResponse.SC_OK);

Also, here is a link to a blog post on the issue

【讨论】：