kendo-ui - 如何获取行单击剑道网格的行索引和单元格索引

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处理程序以单击网格的单元格。
• <tr>然后我使用 jQuery 找到该单元格属于哪一行 ( ) closest。
• 接下来使用 jQueryindex在表中查找该行的索引。
• 对行内的单元格索引执行相同的操作。

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

编辑如果您还想item在click处理程序中检索原始文件。添加

var item = grid.dataItem(row);

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

这里的例子：http: //jsfiddle.net/OnaBai/MuDX7/

Answer 3

自从问题得到解答后， Kendo 就引入了冻结列，因此我认为它值得进行一些更新来处理该功能。

当您有一个冻结列时，网格将创建新的标题/内容表来管理冻结列。如果冻结列，它会将链接到该列的项目从常规网格的 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;
  }

});

免责声明：只是为了增加一定程度的复杂性，您还应该考虑到 kendo 还引入了多列标题功能，这可能会使我上面的代码无效。

Answer 4

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

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