我有一个本地javascript列表,我已使用DataSource绑定到Kendo网格(内联编辑)。当我使用网格添加一行时,视觉上一切正常但我无法弄清楚如何更新基本的javascript列表。我需要此功能,因为列表实际上是在多个位置更新的更大Javascript对象的一部分。完成所有更改后,将使用ajax将整个对象发送到服务器。
以下是一些演示该问题的简单代码(也可以在JSBin上找到)。只需添加一个项目,然后单击“获取阵列大小”即可看到阵列的大小没有增加。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="MyGrid"></div>
<a id="LengthButton">Get Array Size</a>
<script>
$("#LengthButton").kendoButton({
click: function (e) {
alert(dataList.length);
}
});
var dataList = [
{ id: 1, Comment: "Comment 1" },
{ id: 2, Comment: "Comment 2" },
{ id: 3, Comment: "Comment 3" }
];
var dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
options.success(dataList);
},
create: function (options) {
var data = options.data;
data.id = dataSource.data()[dataSource.data().length - 1].id + 1;
options.success([data]);
}
},
data: dataList,
schema: {
model: {
id: "id",
fields: {
id: { type: "number", editable: false, nullable: true },
Comment: { type: "string" }
}
}
}
});
$("#MyGrid").kendoGrid({
toolbar: ["create"],
columns: [
{ command: "edit" },
{
title: "Comment",
field: "Comment"
}
],
editable: { mode: "inline" },
dataSource: dataSource
});
</script>
</body>
</html>
我和Telerik一直在来回,但仍然没有把它整理好,所以我希望有人能指出我正确的方向。
提前致谢, 杰森
答案 0 :(得分:2)
您从dataList
创建数据源的事实并不意味着当您更新dataSource
然后更新dataList
时,这只是DataSource
的初始内容}。在创建或更新记录后,您应该使用dataSource
或将dataSource
的内容复制到dataList
。
您可以将按钮处理程序更改为:
$("#LengthButton").kendoButton({
click: function (e) {
alert(dataSource.data().length);
}
});
如果您想将DataSource的内容复制回dataList
,那么您可以这样做:
transport: {
read: function(options) {
options.success(dataList);
},
create: function(options) {
var data = options.data;
data.id = -dataSource.data()[dataSource.data().length - 1].id + 1;
options.success([data]);
// Copy data back to dataList
dataList = dataSource.data().slice();
},
update: function (options) {
var data = options.data;
options.success([data]);
// Copy data back to dataList
dataList = dataSource.data().slice();
}