Question

我为这段代码得到一个空网格：

<div id="grid"></div>
 <script>

$(document).ready(function () {

  var crudServiceBaseUrl = '/api/notes/';

  GridDataSource = new kendo.data.DataSource({
    transport: {
      read: crudServiceBaseUrl,
    },
  });

  $("#grid").kendoGrid({
    dataSource: GridDataSource.rows,
    navigatable: true,
    pageable: true,
    height: 300,
    toolbar: ["create", "save", "cancel"],
    columns: [
      { field: "id", title: "ID", width: 150 },
      { field: "name", title: "Book", width: 150 },
      { field: "author", title: "Author", width: 100 },
      { command: "destroy", title: "&nbsp;", width: 110 }
    ],
    editable: true
  });
});
 </script>
</div>

JSON就像：

{"total": 6, "rows": [{"id": "AA", "name": "Foo", "author": "Bar"}, ...

Answer 1

您可以在Grid - Binding to remote data开始观看kendo ui网格使用示例。接下来你必须阅读kendo ui docs。对于此示例，需要为存储数据的dataSource定义字段。只需在传输后添加模式声明...并扩展传输参数：

  GridDataSource = new kendo.data.DataSource({
    transport: {
      read: {
         url: crudServiceBaseUrl, 
         dataType: "json"
      }
    },
    schema:{
        data: "rows"
    }
  });

来自json的kendoui网格

1 个答案: