-2

このコードの空のグリッドを取得しています:

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

1 に答える 1

1

最初のGrid-Binding to remote dataで kendo ui グリッドの使用例を見ることができます。次にkendo ui docsを読む必要があります。この例では、データが保存されている dataSource のフィールドを定義する必要があります。transport の後にスキーマ宣言を追加し、transport パラメータを拡張するだけです。 

  GridDataSource = new kendo.data.DataSource({
    transport: {
      read: {
         url: crudServiceBaseUrl, 
         dataType: "json"
      }
    },
    schema:{
        data: "rows"
    }
  });
于 2012-12-11T18:59:12.257 に答える