Json 剑道网格未绑定到我的WCF服务

基本上，以下是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
      }
   ]
}

这是我的剑道格网代码。它加载、调用服务，但随后出现错误：

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

$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：{
类型：“odata”，
运输：{
阅读：“http://localhost:4567/Services/MYSERVICE.svc/GetListing",
数据类型：“json”
},
模式：{
数据：“d”
},
页面大小：10，
对,，
服务器排序：true
},
可滚动：{
虚拟的：真的
},
身高：250，
可选：“行”，
栏目：[{
字段：“d.Name”，
标题：“姓名”
}, {
字段：“d.LastModifiedDate”，
标题：“上次修改”
}, {
字段：“d.Size”，
标题：“文件大小”，
}, {
字段：“d.LastModifiedBy”，
标题：“上次修改人”
}]
});
})

我在Chrome中看到的错误是： 未捕获的语法错误：意外标记：

但是，这个错误是针对返回的json数据的，并且都在一行中，所以它不能帮助我找到它

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

我需要列声明中的“d”引用吗？我想我可能把那部分搞错了

谢谢你的帮助

是-删除列定义中的“d.”。下面是一个示例：

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

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

从

如果未指定schema.total，则返回的数组的长度 将使用schema.data如果 服务器分页选项设置为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>

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

---

我看到一些问题。您已指定“odata”，但您的服务似乎不是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"
          }]
      });

还有一个现场演示：
您是否尝试过删除
d.
？嗨，Jac。谢谢你的回复！“总计数”。。。您的意思是服务需要将其作为流末尾的最后一条信息返回，正如您的示例所示？同样值得注意。我仍然收到同样的错误。由于我现在无法更改WCF服务以恢复“totalCount”，所以我决定取消分页，看看这是否可行。因此，我从您的示例中取出pageSize、serverPaging、serverSorting和totalCount，它仍然给了我：未捕获的语法错误：意外标记：请看编辑，Atanas是对的，我遗漏了其他内容
<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
}

    $("#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"
          }]
      });