Question

我有一个本地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一直在来回，但仍然没有把它整理好，所以我希望有人能指出我正确的方向。

提前致谢，杰森

Answer 1

您从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();
    }

更新Kendo网格中绑定到本地数据的基础对象

1 个答案: