如何捕获内联编辑kendo ui网格的保存行事件，并根据每个单元格更改保存更改

Question

我有一个内联可编辑的剑道网格我已经绑定了可编辑的网格表格 链接http://jsfiddle.net/alexyu/A2J9e/ 我需要在单元格更改后保存数据，这意味着在编辑单元格后，当我移动另一个单元格时，它会自动将数据保存到数据库中 我已经找到了一些解决方案，但没有找到合适的解决方案。任何人都可以帮我吗???

这是我的内联可编辑网格代码

 <div id="grid"></div>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>


    <script>
        $(document).ready(function () {

            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            // the remote service url
                            url: '@Url.Action("GetData","Agent")',

                            // the request type
                            type: "get",

                            // the data type of the returned result
                            dataType: "json"
                        }
                    },

                    schema: {
                        model: {
                            fields: {
                                OrderID: {
                                    type: "string"
                                },

                                ADRPONumber: {
                                    type: "string"
                                },

                                Hauler: {
                                    type: "string"
                                },

                                CustomerCharges: {
                                    type: "string"
                                },
                                CustomerPaid: {
                                    type: "string"
                                },
                                HaulerCharges: {
                                    type: "string"
                                },
                                GrossProfit: {
                                    type: "string"
                                },

                                ExpectedCommission: {
                                    type: "string"
                                },
                                TotalPaidToAgent: {
                                    type:"string"
                                }
                            }
                        }
                    },


                    //serverFiltering: true,
                    //serverSorting: true

                    serverPaging: false
                },
                height: 430,
                filterable: true,
                sortable: true,
                pageable: true,
                navigatable: true,
                editable: "incell",
                columns: [{
                    field: "OrderID",
                    filterable: false

                },

                    {
                        field: "Hauler",
                        filterable: true,

                    },

                    {
                        field: "ADRPONumber",
                        title: "PO",
                        filterable: true,

                    },

                    {
                        field: "CustomerCharges",
                        title: "Charges",
                        filterable: true
                    },
                    {
                        field: "CustomerPaid",
                        title: "Received",

                        filterable: true
                    },
                    {
                        field: "HaulerCharges",
                        title: "Hauler Charges",
                        filterable: true
                    },
                    {
                        field: "GrossProfit",
                        title: "Gross Profit",
                        filterable: true
                    },
                    {
                        field: "ExpectedCommission",
                        title: "Commission",
                        filterable: true
                    },
                    {
                        field: "TotalPaidToAgent",
                        title: "Agent Paid",
                        filterable: true
                    }

                ]
            });

            var grid = $("#grid").data("kendoGrid");
            grid.table.bind("keypress", function (e) {
                debugger

                if (e.which !== 0 && e.charCode !== 0 && !e.ctrlKey && !e.metaKey && !e.altKey) {

                    debugger
                    //get currently navigated cell, this id follows user's navigation
                    var activeCell = $("#grid_active_cell");

                    //don't do anything if already editing cell
                    if (activeCell.hasClass("k-edit-cell")) return;

                    grid.editCell(activeCell);
                    var input = activeCell.find("input");

                    //number datatype editor loses key press character when entering edit
                    if (input.last().attr('data-type') === 'number') {
                        input.val(String.fromCharCode(e.keyCode | e.charCode));
                    } else {
                        input.val("");
                    }
                }
            });

            //Kendo "Enter" key input is captured through this binding
            $("#grid table").on("keydown", "tr", function (e) {

                var code = (e.keyCode ? e.keyCode : e.which);

                debugger

                if (code == 13) { //If key is ENTER
                    //find index of the td element
                    var a = $(e.target).val();
                    var tdIndex = $(e.target).closest('td').index();

                    //get the next row's cell
                    var nextRow = $(e.target).closest('tr').next();
                    var nextRowCell = $(nextRow).find('td:eq(' + tdIndex + ')');

                    //focus the next cell on a different context
                    setTimeout(function () {
                        var grid = $("#grid").data("kendoGrid");
                        grid.current(nextRowCell);
                    }, 0);
                }
            });
        });







    </script>

请帮我怎么做???

我已经得到了这样的细胞更换事件，但是如何获取数据以及如何在细胞更换事件中将这些数据保存到数据库中

$("body").on("blur", "table tr.k-grid-edit-row input", function () {
        debugger

       /////

    });

Answer 1

您是否尝试将autoSync属性设置为true？如果这样做，它应该通过调用同步方法自动保存任何更改的数据项。

<script>
var dataSource = new kendo.data.DataSource({
  autoSync: true,
  transport: {
    read:  {
      url: "https://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    update: {
      url: "https://demos.telerik.com/kendo-ui/service/products/update",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.fetch(function() {
  var product = dataSource.at(0);
  product.set("UnitPrice", 20); // auto-syncs and makes request to https://demos.telerik.com/kendo-ui/service/products/update
});
</script>

您可以在此处查看示例和文档：

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/autosync

希望这有帮助。