如何捕捉剑道网格单元格失焦事件? [英] how to catch kendo grid cell out of focus event?

问题描述

在我的剑道网格中，我想在单元格中放置一些值 &然后在离开单元格后，根据该单元格的值，我需要在相邻单元格上放置一些其他值.我该怎么做?

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?

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

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.

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

请帮忙.

推荐答案

您应该在定义 blur 事件处理程序时更改 selector 以仅选择您想要的列想要.

You should change the selector when you define the blur event handler to choose only the column that you want.

在你说学过的JSFiddle中，原来是这样定义的:

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

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

我用作选择器的地方 [name='ShipName'] 即仅为具有属性 的 HTML input 设置 blurname 等于 ShipName.

Where I use as selector [name='ShipName'] i.e. set blur only for an HTML input with the attribute name equals ShipName.

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

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.

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

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

// 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/

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

这篇关于如何捕捉剑道网格单元格失焦事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！