從JSON

Question

我發現了一個空網格此代碼kendoui格：

<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觀看劍道UI電網使用的例子。在接下來你必須閱讀kendo ui docs。 對於這個例子，它需要爲存儲數據的dataSource定義字段。只需在運輸後添加架構聲明...並擴展運輸參數：

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