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

Question

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

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

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

这是我的网格：

//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"));
            //}
        });

请帮忙。

Answer 1

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

在你说你学过的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);
    });
},

您应该将其定义为：

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);
    });
},

我使用的选择器即仅针对具有equals属性的HTML[name='ShipName']设置。blurinputnameShipName

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

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

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

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

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