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

Question

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

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

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

所以根据点击的行，如果它不是第一个点击的单元格，我想显示警报。如果我点击第一个单元格，我想打开图像。

我怎样才能得到这个索引。

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

请帮帮我。

Answer 1

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

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

Answer 2

自从问题得到解答后，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;
  }

});

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

Answer 3

请尝试以下代码 sn-p。

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 4

如果您只需要知道表中的行和列索引，您可以这样做：

$(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 closest 找到该单元格属于哪一行 (<tr>)。
• 接下来使用 jQuery index 在表中查找该行的索引。
• 在行内查找单元格索引时执行相同操作。

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

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

var item = grid.dataItem(row);

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

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