javascript 如何捕捉剑道网格单元格失焦事件？

how to catch kendo grid cell out of focus event?

提问by Badhon Jain

In my kendo grid, I want to put some value in a cell & then after leaving the cell, based on the value of that cell, I need to put some other value on the adjascent cell. How can I do that?

在我的剑道网格中，我想在单元格中放置一些值，然后在离开单元格后，根据该单元格的值，我需要在相邻单元格上放置一些其他值。我怎样才能做到这一点？

I have studied the following jsfiddle, the problem is its triggering the event everytime I'm getting out of any cell, but I need to fire the event for only one column's cell.

我研究了以下 jsfiddle，问题是每次我离开任何单元格时它都会触发事件，但我只需要为一列的单元格触发事件。

http://jsfiddle.net/latenightcoder/6ZNqN/1/

http://jsfiddle.net/latenightcoder/6ZNqN/1/

here is my grid:

这是我的网格：

//To Define Columns for Yearly Holiday Kendo Grid
        var YearlyHolidayGrid = $("#YearlyHolidayGrid").kendoGrid({
            dataSource: YearlyHolidayDataSource,
            pageable: true,
            editable: true,
            edit: function (e) {
                var input = e.container.find(".k-input");
                var value = input.val();
                input.keyup(function () {
                    value = input.val();
                });
                input.blur(function () {
                    //$("#log").html(input.attr('name') + " blurred : " + value);
                    //var a = new Date();
                    //a = value;
                    //var day = a.getDay();
                    //alert(day);
                    alert(value);
                });
            },
            selectable: "row",
            navigatable: true,
            filterable: true,
            sortable: true,
            height: 200,
            columns: [
                  { field: "HLDY_SLNO", title: "SL", width: "50px" },
                  { field: "HLDY_DATE", title: "Date", width: "100px" },
                  { field: "HLDY_DAY", title: "Day", width: "100px" },
                  { field: "HLDY_NAME", title: "Holiday Name", width: "100px" },
                  { field: "HLDY_TYPE", title: "Holiday Type", width: "100px" },
                  { field: "HLDY_STATUS", title: "Holiday Status", width: "100px", editor: YearlyHolidayStatus },
                  { field: "HLDY_DFIN_TYPE", title: "Defined as", width: "100px", editor: YearlyHolidayDefinedAs },
                  { field: "HLDY_REM", title: "Remarks", width: "100px" },
                  { command: [{ name: "DeltedRow", text: "Delete"}], title: "Delete", width: 100 }
            ]
            //change: function () {
            //    var row = this.select();
            //    var id = row.data("id");

            //  //  $("#log")
            //  //      .html("selected row with id= " + id + " \
            //  //, for ShipName = " + dataSource.get(id).get("ShipName"));
            //}
        });

Plz help.

请帮忙。

采纳答案by OnaBai

You should change the selectorwhen you define the blurevent handler to choose only the column that you want.

您应该selector在定义blur事件处理程序时更改以仅选择所需的列。

In the JSFiddle that you say that you have studied, it is originally defined as:

在你说学过的JSFiddle中，最初是这样定义的：

edit: function(e) {
    var input = e.container.find(".k-input");
    var value = input.val();
    input.keyup(function(){
        value = input.val();
    });
    input.blur(function(){
        $("#log").html(input.attr('name') + " blurred : " + value);
    });
},

You should define it as:

您应该将其定义为：

edit: function(e) {
    var input = e.container.find(".k-input");
    var value = input.val();
    input.keyup(function(){
        value = input.val();
    });
    $("[name='ShipName']", e.container).blur(function(){
        var input = $(this);
        $("#log").html(input.attr('name') + " blurred : " + value);
    });
},

Where I use as selector [name='ShipName']i.e. set bluronly for an HTML inputwith the attribute nameequals ShipName.

我用作选择器的地方，[name='ShipName']即blur只为具有equalsinput属性的 HTML设置。nameShipName

If you play now with the modified version (here) you will see that only displays in the log the value when the column is ShipName.

如果您现在使用修改后的版本（此处），您将看到仅在日志中显示列是 时的值ShipName。

EDIT:If you need to get all the items in your model so you can change another column, you might use dataItem. The steps are:

编辑：如果您需要获取模型中的所有项目以便更改另一列，您可以使用dataItem. 步骤是：

// Find the row being edited:
var row = $(this).closest("tr");

// Get the item using `dataItem`:
var item = grid.dataItem(row);

The modified Fiddle to display the ShipCity when ShipName is blurred here: http://jsfiddle.net/OnaBai/6ZNqN/116/

修改后的 Fiddle 在 ShipName 模糊时显示 ShipCity：http: //jsfiddle.net/OnaBai/6ZNqN/116/

回答by Reny Mathew

function onCellEdit(e) {
    try {
        $('.text-box.single-line').change(function () {
            hasUnSavedChange = true;
        });
    }
    catch (err) {
        error_handler(err);
    }
}