2

私は何を間違っていますか？私がやりたいことは、API からデータを取得して画面に表示することだけです。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Kendo UI Test</title>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <script src="js/jquery.min.js"> </script>
        <script src="js/kendo.web.min.js"> </script>
    </head>
    <body>
        <div id="grid"></div>

        <script type="text/javascript">
            $(document).ready(function()
            {
                var retrievedData = new kendo.data.dataSource({
                    transport: {
                        read: {
                            url: "http://puppygifs.tumblr.com/api/read/json",
                            dataType: "json"
                        }
                    }
                });

                $("#grid").kendoGrid({
                    dataSource: retrievedData,
                    pageSize: 10
                });
            });

        </script>
    </body>
</html>

この部分でエラーが発生します。

var retrievedData = new kendo.data.dataSource({
                    transport: {
                        read: {
                            url: "http://puppygifs.tumblr.com/api/read/json",
                            dataType: "json"
                        }
                    }
                });

編集：

次のようなオブジェクトからデータを取得するには、コードをどのように変更すればよいでしょうか。

[
{
<NotificationNode>k__BackingField: {
isDirty: false,
isRecordAdded: false,
isRecordDeleted: false,
<CaseStatus>k__BackingField: null,
<CaseName>k__BackingField: null,
<CaseType>k__BackingField: null,
<CaseStage>k__BackingField: null,
<CaseNotificationId>k__BackingField: 0,
<CaseId>k__BackingField: 0,
<Comments>k__BackingField: null,
<WarningDays>k__BackingField: 0,
<NotificationDate>k__BackingField: "0001-01-01T00:00:00",
<LetterUrl>k__BackingField: null,
<NotificationId>k__BackingField: 0,
<NotificationDescription>k__BackingField: null,
<NotificationCount>k__BackingField: 1889,
<ParamValue1>k__BackingField: null,
<ParamValue2>k__BackingField: null,
<ParamValue3>k__BackingField: null,
<ParamValue4>k__BackingField: null,
<ParamValue5>k__BackingField: null,
<NotificationStatus>k__BackingField: 0,
<Checked>k__BackingField: false,
notificationTypeId: 1,
notificationType: "Add/Edit Gross Earnings",
actionPageName: null,
param1: null,
param2: null,
param3: null,
param4: null,
param5: null,
dateEntered: "0001-01-01T00:00:00",
whoEntered: 0,
dateChanged: "0001-01-01T00:00:00",
whoChanged: 0
},
<Notifications>k__BackingField: [ ],
<IsExpanded>k__BackingField: false
},
4

1 に答える 1

1

dataSource オプションにタイプミスがありますDataSource。読んでいるデータは別のオリジンからのものなので、 as として使用jsonpしdataTypeます。

提供されたサービスは、グリッドに表示するデータのみを読み取り、列に表示するデータをバインドする必要がある複雑なデータ セットを返します。

schemaパラメータを使用してこれを行うことができcolumnsます。

コード：

  $(document).ready(function () {
      var retrievedData = new kendo.data.DataSource({
          transport: {
              read: {
                  url: "http://puppygifs.tumblr.com/api/read/json",
                  dataType: "jsonp"
              }
          },
          schema: {
              data: "posts"
          }
      });
      $("#grid").kendoGrid({
          dataSource: retrievedData,
          columns: [{
              field: "id",
              title: "ID",
              width: 150
          }, {
              field: "url",
              title: "URL",
              width: 150
          }]
      });
  });

作業デモ:jsフィドル

于 2013-07-25T17:45:56.437 に答える