是否有一個事件可以在用戶編輯時捕獲行數據中的更改？

我想要類似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

是否有一個事件可以在用戶編輯時捕獲行數據中的更改？

回答

相關問題