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

我已经为剑道ui网格添加了onchange事件

在这种情况下，我试图获取该特定行的ID值。我已经添加了一个图像列作为网格中的第一列。我想要的是，当点击图像时，我想打开一个图像url

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

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

我怎样才能得到这个索引

我在剑道ui网格中设置了可选：行

---

请在这方面帮助我。

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

$(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

  查找该单元格所属的行（
  ）

• 接下来使用jQuery

  index

  查找表中该行的索引
• 在行内查找单元格索引时也要执行相同的操作

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

编辑如果您还想检索

处理程序中的原始
项目
，请单击

处理程序。加

var item = grid.dataItem(row);

从那里，您可以获得

id

或任何其他字段进行验证

---

此处示例：

请尝试使用下面的代码段

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>

函数onDataBound（e）{
var grid=$（“#grid”）.data（“kendoGrid”）；
$（grid.tbody）.on（“单击”，“td”，函数（e）{
var行=$（此）.tr；
var rowIdx=$（“tr”，grid.tbody）.index（行）；
var colIdx=$（“td”，行）。索引（此）；
警报（rowIdx+'-'+colIdx）；
});
}
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：{
类型：“odata”，
运输：{
阅读：“http://demos.kendoui.com/service/Northwind.svc/Orders",
数据类型：“jsonp”
},
模式：{
型号：{
字段：{
OrderID:{type:“number”}，
运费：{type:“number”}，
船名：{type:“string”}，
OrderDate:{type:“date”}，
ShipCity:{type:“string”}
}
}
},
页面大小：10，
对,，
是的，
服务器排序：true
},
数据绑定：onDataBound，
可过滤：正确，
可排序：是的，
pageable:对，
栏目：[{
字段：“订单ID”，
可过滤：false
},
“运费”，
{
字段：“订单日期”，
标题：“订单日期”，
宽度：120，
格式：“{0:MM/dd/yyyy}”
}, {
字段：“ShipName”，
标题：“船名”，
宽度：260
}, {
字段：“ShipCity”，
标题：“船舶城”，
宽度：150
}
]
});
});

自从问题被回答后，剑道就被引入了，所以我认为它值得一点更新来处理这个特性

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

});

---

<强>免责声明< /强>：为了增加复杂度，您还应该考虑到KiDO还引入了一个可能使我的代码无效的特性。

< >对于单元格索引，KEDO网格有一个方法

---

谢谢你的回复。我如何将事件附加到网格，实际上我想要onchange事件中的单元格索引和行索引的值，因为在该方法中有进一步的逻辑。当我查看行索引和列索引的值时，我总是得到-1值您所说的

onchange

是什么意思？你是说Kendo UI Grid change event（）？@OneBai：我想我想获取当前单元格父元素行（tr元素）的索引。该行已在

$（This.closest（“tr”）

中获得。仅仅调用

index（）

还不够吗？@Lucian，好吧，我知道了！是的，就足够了。为什么需要：

var rowIdx=$（“tr”，grid.tbody）.index（row）？直接在行上调用
index（）
是不够的，比如：
var rowIdx=row.index（）
？
var cell = $("#grid td:eq(1)");
console.log(grid.cellIndex(cell));