来自json的剑道ui网格答案

【问题标题】：kendoui grid from json来自json的剑道ui网格
【发布时间】：2012-12-08 15:38:57
【问题描述】：

我得到这个代码的空网格：

<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"}, ...

【问题讨论】：

标签： json datagrid kendo-ui

【解决方案1】：

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

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

【讨论】：