Question

我为kendo-ui网格添加了onchange事件。

因为我试图获取该特定行的ID值。我添加了一个图像列作为网格中的第一列。我想要的是当点击图像时，我想打开一个图像网址。

所以，基本上我想要的是当我点击该行时，我想获得点击的行索引，并且我想获得该行中单击的单元格索引。

因此，基于单击的行，如果不是第一个单击的单元格，我想显示警告。如果我点击了第一个单元格，我想打开图像。

我如何获得此索引。

我在kendo-ui网格中设置了selectable：row

请帮我解决这个问题。

Answer 1

请尝试使用以下代码段。

function onDataBound(e) {
    var grid = $("#Grid").data("kendoGrid");
    $(grid.tbody).on("click", "td", function (e) {
        var row = $(this).closest("tr");
        var rowIdx = $("tr", grid.tbody).index(row);
        var colIdx = $("td", row).index(this);
        alert(rowIdx + '-' + colIdx);
    });
}

$(document).ready(function () {
    $("#Grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
                dataType: "jsonp"
            },
            schema: {
                model: {
                    fields: {
                        OrderID: { type: "number" },
                        Freight: { type: "number" },
                        ShipName: { type: "string" },
                        OrderDate: { type: "date" },
                        ShipCity: { type: "string" }
                    }
                }
            },
            pageSize: 10,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        dataBound: onDataBound,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: [{
            field: "OrderID",
            filterable: false
        },
                        "Freight",
                        {
                            field: "OrderDate",
                            title: "Order Date",
                            width: 120,
                            format: "{0:MM/dd/yyyy}"
                        }, {
                            field: "ShipName",
                            title: "Ship Name",
                            width: 260
                        }, {
                            field: "ShipCity",
                            title: "Ship City",
                            width: 150
                        }
                    ]
    });
});


<div id="Grid"></div>

Answer 2

如果您只需知道表中的行和列索引，则可以执行以下操作：

$(grid.tbody).on("click", "td", function(e) {
    var row = $(this).closest("tr");
    var rowIdx = $("tr", grid.tbody).index(row);
    var colIdx = $("td", row).index(this);
    console.log("row:", rowIdx, "cell:", colIdx);
});

我设置click处理程序以点击网格的单元格。
然后我使用jQuery <tr>找到该单元所属的行（closest。
接下来使用jQuery index来查找表中该行的索引。
在行内查找单元格索引时也一样。

但也许有更简单的方法可以检测用户是否点击图像，或者在图像中设置一些CSS类，然后检查点击的单元格是否具有该类，...

编辑如果您还要检索item处理程序中的原始click。添加

var item = grid.dataItem(row);

从那里，您可以获得id或任何其他字段进行验证。

此处示例：http://jsfiddle.net/OnaBai/MuDX7/

Answer 3

由于问题已得到解答，因此Kendo已经介绍了frozen columns，所以我认为应该对该功能进行一些更新。

当您有一个冻结列时，网格将创建新的标题/内容表来管理冻结列。如果你冻结一个列，它会将链接到此列的项目从常规网格的tbody / thead移动到lockedContent / lockedHeader（相反的情况也是如此）。

如果使用接受的答案获得索引，您将获得tbody中单元格的索引（如果单元格被冻结，则为-1）。真正的问题是你想对列索引做什么？如果您确实需要索引号，则可能需要根据需要通过添加lockedContent中的列数来调整值。但是，如果您的最终目标是获取网格的列对象，则可以使用th元素完成此操作：

var row = cell.closest("tr");

var body;
var header;

if (cell.closest(grid.lockedContent).length) {
  body = grid.lockedContent;
  header = grid.lockedContent;
} else {
  body = grid.tbody;
  header = grid.thead;
}

var rowIndex = $("tr", body).index(row);
var columnIndex = $("td", row).index(cell);
var columnField = header.find("th").eq(columnIndex).attr("data-field");

var column;

$.each(grid.columns, function () {

  if (this.field === columnField) {
    column = this;
    return false;
  }

});

免责声明：只是为了增加一定程度的复杂性，您还应该考虑到剑道还引入了multiple column header功能，可能会使我上面的代码无效。

Answer 4

对于单元格索引，kendo网格有一个方法cellIndex(cell)

var cell = $("#grid td:eq(1)");
console.log(grid.cellIndex(cell));

如何获取行单击kendo网格的行索引和单元格索引

4 个答案: