是否有一个事件可以在用户编辑时捕获行数据中的更改？

我想要类似AngularJS 'watch' function的东西。当用户编辑一行时，我想发起一个事件。 In this example当用户点击一行时会捕获此事件，但我想要一个只有当用户更改数据时才能捕获的事件。是否有一个事件可以在用户编辑时捕获行数据中的更改？

来源

2016-09-14 GomuGomuNoRocket

在网格的edit事件中，获取对已编辑数据项（e.model）和bind至其change事件的引用。

edit: function(e) { 
    e.model.bind("change", function(j) { 
     // ... 
    }); 
}

UPDATE

在要更新的网格中的数据项或其他内容，附加keyup处理程序所需的文本框或编辑控件的情况下，然后触发change，使模型更新。或者，使用模型本身的change事件修改页面上的其他值或内容。

 $(document).ready(function() { 
 
      var dataSource = new kendo.data.DataSource({ 
 
      pageSize: 20, 
 
      data: products, 
 
      schema: { 
 
       model: { 
 
       id: "ProductID", 
 
       fields: { 
 
        ProductID: { editable: false, nullable: true }, 
 
        ProductName: { validation: { required: true } }, 
 
        UnitsInStock: { type: "number", validation: { required: true } } 
 
       } 
 
       } 
 
      } 
 
      }); 
 

 
      $("#grid").kendoGrid({ 
 
      dataSource: dataSource, 
 
      pageable: true, 
 
      height: 550, 
 
      toolbar: ["create"], 
 
      columns: [ 
 
       { field: "ProductName", title: "Product Name" }, 
 
       { field: "UnitsInStock", title: "Units in Stock" }, 
 
       { title: "Product Name readonly", template: "<span id='Product#= ProductID#'>#= ProductName #</span>" }, 
 
       { command: "edit", title: " ", width: "150px" }], 
 
      editable: "inline", 
 
      edit: function(e) { 
 
       var model = e.model; 
 

 
       var input = e.container.find("[name=ProductName]"); 
 

 
       input.keyup(function(){ 
 
       input.trigger("change"); 
 
       }); 
 

 
       model.bind("change", function(j){ 
 
       if (j.field == "ProductName") { 
 
        model.set("UnitsInStock", model.get("UnitsInStock") + 1); 
 
        $("#Product" + model.get("ProductID")).html(model.get("ProductName")); 
 
       } 
 
       }); 
 
      } 
 
      }); 
 
     }); 
 

 
     function readOnlyEditor(container, options) { 
 
      container.html(options.model.get(options.field)); 
 
     }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"/> 
 
    <title>Kendo UI Snippet</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css"/> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css"/> 
 

 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> 
 
    </head> 
 
    <body> 
 

 
    <script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script> 
 

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

 
    </body> 
 
</html>

来源

2016-09-15 18:50:31 dimodi

我不认为这是我想要的。请参阅此数据值更新示例（http://demos.telerik.com/kendo-ui/mvvm/elements）。没有用户点击任何其他文字模型立即更新。我想在我的kendo网格中的可编辑模式下的这种行为 – GomuGomuNoRocket

我不知道我明白“没有用户点击任何地方”的意思。模型状态最初是由'kendo.bind（）'调用的结果构造的。之后，只有在触发'input'或'select'的'change'事件时，模型状态才会改变。网格编辑表单中的行为类似。 – dimodi

该示例显示了两个输入。首先，您更改模型，但是以实际形式显示，除非另一个事件触发，否则不会看到任何更改。第二个输入具有不同的行为，您可以立即看到模型中的更改。在可编辑模式下的网格具有类似第一个输入的行为，我想改变它，并像第二个输入一样行动 – GomuGomuNoRocket

是否有一个事件可以在用户编辑时捕获行数据中的更改？

回答

相关问题