我正在尝试按照本教程将kendo UI datagrid绑定到我的azure后端移动服务表(SASA)。 http://ignaciofuentes.com/archive/2014/01/20/zumo-kendo/ 但不幸的是,由于某些原因,它无法正常工作。我已经尝试将移动服务javascript sdk从1.0.0更新到1.1.5仍然没有运气。
这是我的代码..任何人都可以指出我做错了什么..服务正在返回正确的JSON ..
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/everlive">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var client = new WindowsAzure.MobileServiceClient("MY SERVICE URL", "MY API KEY");
var table = client.getTable("sasa");
var dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
table.includeTotalCount() //necessary for grid to paginate
.read()
.done(options.success);
},
update: function (options) {
table.update(options.data)
.done(options.success);
},
create: function (options) {
var item = options.data;
delete item.id; //ZUMO doesnt allow you to set your own ID. It gets auto generated.
table.insert(item)
.done(options.success);
},
destroy: function (options) {
table.del(options.data)
.done(options.success);
}
},
pageSize: 10,
schema: {
total: "totalCount",
model: {
id: "id",
fields: {
id: { type: "number" },
name: { type: "string" },
developer: { type: "string" },
}
}
}});
$("#grid").kendoGrid({
pageable: true,
dataSource: dataSource,
columns: [
"name",
"developer", {
command: [{
name: "edit",
text: "Edit"
}, {
name: "destroy",
text: "Delete"
}]
}],
toolbar: [{
name: "create"
}],
editable: "inline"
});
});
</script>
</div>
</body>
</html>
答案 0 :(得分:0)
在测试中我使用kendo数据源和windows azure移动服务做了一段时间,我的dataSource CRUD方法有点不同。
create: function(options) {
delete options.data.id;
client.getTable("Customer").insert(options.data).done(function(data) {
options.success(data);
});
},
read: function(options) {
client.getTable("Customer").read().done(function(data) {
options.success(data);
});
},
update: function(options) {
client.getTable("Customer").update(options.data).done(function(data) {
options.success(data);
});
},
destroy: function(options) {
client.getTable("Customer").del(options.data).done(function(data) {
options.success(data);
});
}
它运作正常。也许尝试将.done(options.success);
更改为
.done(function(data) {
options.success(data);
});
看看它是否有效?
- 编辑我重建了我用来测试的MobileService并挖出了代码,它仍能正常工作。以下是jsbin http://jsbin.com/jirexo/2/edit
的示例