Question

我正在使用Kendo UI Grid。这是我的代码：

<body>
<div id="myGrid"></div>

<script type="text/javascript">
$(function(){
    var rows =  [
    {name: "name001", id: "001", group: "G1"},
    {name: "name002", id: "002", group: "G1"},
    {name: "name003", id: "003", group: "G2"},
    {name: "name004", id: "004", group: "G2"},
    ];

    var myDataSource =
        new kendo.data.DataSource({
            data: rows,
            pageSize: 3,
        });

    myDataSource.read();
    $("#myGrid").kendoGrid({
        dataSource: myDataSource,
        columns: [
            {field:"name", title:"The Name"},
            {field:"id", title:"The Id"},
            {field:"group"},
            {command:["edit", "destroy"]}
            ],
        scrollable: false,
        pageable: true,
        sortable: true,
        groupable: true,
        filterable: true,
        editable: "inline"
    });

});
</Script>
</body>

但编辑不起作用。在浏览器中打开此网格为我提供了一个网格，看起来像预期的编辑和删除按钮。我可以使用“删除”按钮删除行。但是单击“编辑”会将行更改为编辑模式（单元格中包含输入字段），但更改值并按“更新”按钮不会执行任何操作。该行保持编辑模式，“更新”按钮不会切换回“编辑”。你能告诉我缺少什么吗？我是否必须以某种方式配置我的数据源？

Answer 1

是的，您错过了配置Grid的dataSource以了解如何更新记录。我假设您只想在本地（在客户端上）编辑记录 - 而不是将它们发送到服务器。要实际关闭网格并应用更改，您可以使用网格的保存事件和刷新方法。

以下是您的案例jsbin。

如果您想将这些更改保存到服务器，我建议您从demos开始。

Kendo UI Grid，可编辑模式不适用于本地数据

1 个答案: