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

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.
• 接下来使用jQuery index查找表中该行的索引.
• 为查找行内的单元格索引执行相同操作.

但也许有更简单的方法可以检测用户是否点击了图像,或者在图像中设置了一些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;
  }

});

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