Question

基本上，以下是Web服务返回的数据示例：

{
   "d":
   [
      {
         "__type":"MyDataItem:#MyProject.SomeSpace.Data",
         "Format":"msw12",
         "Id":"0900d60b8712e4ea",
         "LastModifiedBy":"",
         "LastModifiedDate":null,
         "Name":"Jeff's tax document",
         "Size":12727
      },
      {
         "__type":"MyDataItem:#MyProject.SomeSpace.Data",
         "Format":"pdf",
         "Id":"0900d60b8714b1d8",
         "LastModifiedBy":"",
         "LastModifiedDate":null,
         "Name":"Bob's Test File",
         "Size":11911784
      }
   ]
}

这是我的Kendo Grid代码。它加载，调用服务，但后来出错：

<div id="example" class="k-content">
   <div id="grid"></div>
   <script type="text/javascript">
      $(document).ready(function () {

          $("#grid").kendoGrid({
              dataSource: {
                  type: "odata",
                  transport: {
                      read: "http://localhost:4567/Services/MYSERVICE.svc/GetListing",
                      dataType: "json"
                  },
                  schema: {
                      data: "d"
                  },
                  pageSize: 10,
                  serverPaging: true,
                  serverSorting: true
              },

              scrollable: {
                  virtual: true
              },
              height: 250,
              selectable: "row",
              columns: [{
                  field: "d.Name",
                  title: "Name"
              }, {
                  field: "d.LastModifiedDate",
                  title: "Last Modified"
              }, {
                  field: "d.Size",
                  title: "File Sized",
              }, {
                  field: "d.LastModifiedBy",
                  title: "Last Modified By"
              }]
          });
      })

   </script>
</div>

我在Chrome中看到的错误是：未捕获的SyntaxError：意外的令牌：

但是，该错误是对引用的json数据的引用，它全部在一行上，所以它无法帮助我找到它。

我注意到从服务返回的数据在根节点的开头有一个“d”。我在网上看到的json数据的其他例子要简单得多，并且没有这个根节点。如果需要，我们可能能够更新服务以不同方式返回数据。我只是想知道如何编辑我的剑道代码以将这些东西放在网格上。我想，我可以研究和调整它。

我需要“d”吗？列声明中的引用？我想我可能错了。

感谢您的帮助！

Answer 1

是 - 删除“d。”在列定义中。从documentation开始，例如：

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.telerik.com/kendo-ui/service/twitter/search",
      dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
      data: { q: "html5" } // search for tweets that contain "html5"
    }
  },
  schema: {
    data: "results" // twitter's response is { "results": [ /* results */ ] }
  }
});
dataSource.fetch(function(){
  var data = this.data();
  console.log(data.length);
});
</script>

数据：“结果”只是告诉kendo数组包含在对象结果中。列定义不应包含results.Column1，results.Column2，只是Column1，Column2等...

columns: [{
                  field: "Name",
                  title: "Name"
              }, {
                  field: "LastModifiedDate",
                  title: "Last Modified"
              }, {
                  field: "Size",
                  title: "File Sized",
              }, {
                  field: "LastModifiedBy",
                  title: "Last Modified By"
              }]

另外，我后来遇到的另一个问题是在进行服务器端分页时计数错误。这是因为我错过了“总”元素。 “total”元素应返回TOTAL元素数（不仅仅是返回的元素数 - 如果您正在进行服务器端分页）。

来自documentation

如果未指定schema.total，则返回的Array的长度 schema.data将被使用。 如果是，则必须设置schema.total选项 serverPaging选项设置为true 。

示例

<script> var dataSource = new kendo.data.DataSource({ transport: { /* transport configuration */ } serverGrouping: true, schema: { total: "total" // total is returned in the "total" field of the response } }); </script>

现在一起

<div id="example" class="k-content"> <div id="grid"></div> <script type="text/javascript"> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: { transport: { read: { url: "http://localhost:4567/Services/MYSERVICE.svc/GetListing", dataType: "json" } }, schema: { data: "d", total: "totalCount" }, pageSize: 10, serverPaging: true, serverSorting: true }, scrollable: { virtual: true }, height: 250, selectable: "row", columns: [{ field: "Name", title: "Name" }, { field: "LastModifiedDate", title: "Last Modified" }, { field: "Size", title: "File Sized", }, { field: "LastModifiedBy", title: "Last Modified By" }] }); }) </script> </div>

您应该返回什么

{ "d": [ { "__type":"MyDataItem:#MyProject.SomeSpace.Data", "Format":"msw12", "Id":"0900d60b8712e4ea", "LastModifiedBy":"", "LastModifiedDate":null, "Name":"Jeff's tax document", "Size":12727 }, { "__type":"MyDataItem:#MyProject.SomeSpace.Data", "Format":"pdf", "Id":"0900d60b8714b1d8", "LastModifiedBy":"", "LastModifiedDate":null, "Name":"Bob's Test File", "Size":11911784 }, /* ..... 8 other items if you are doing 10 per page ... */ ], "totalCount": 534 }

修改很好的抓住Atanas，我错过了jsonp部分。我已更新此代码，并稍微修改了您的代码以添加serverPaging。注意：服务器分页实际上不起作用，因为您没有后端逻辑来处理分页，但添加了“count”元素。应该让你开始。

http://trykendoui.telerik.com/uNIX

Answer 2

我看到一些问题。您已指定＆＃39; odata＆＃39;但是您的服务似乎不是OData的终点。然后，您已将dataType设置为传输选项，但它不是transport.read的选项。最后，您需要从列的字段名称中删除d。

以下是固定配置的外观：

    $("#grid").kendoGrid({
          dataSource: {
              transport: {
                read: {
                  url: "http://localhost:4567/Services/MYSERVICE.svc/GetListing",
                  dataType: "json"
                }
              },
              schema: {
                  data: "d"
              },
              pageSize: 10
          },
          scrollable: {
              virtual: true
          },
          height: 250,
          selectable: "row",
          columns: [{
              field: "Name",
              title: "Name"
          }, {
              field: "LastModifiedDate",
              title: "Last Modified"
          }, {
              field: "Size",
              title: "File Sized",
          }, {
              field: "LastModifiedBy",
              title: "Last Modified By"
          }]
      });

现场演示：http://trykendoui.telerik.com/@korchev/IGah

Kendo Grid未绑定到我的WCF服务

2 个答案: