首页 文章

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

提问于
浏览
15

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

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

所以,基本上我想要的是,当我单击该行时,我想获得单击的行索引,并且我还希望获得该行中单击的单元格索引 .

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

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

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

请帮帮我 .

4 回答

  • 0

    请尝试使用以下代码段 .

    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>
    
  • 17

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

    $(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类,然后检查点击的单元格是否具有该类,...

    EDIT 如果另外要在 click 处理程序中检索原始 item . 加

    var item = grid.dataItem(row);
    

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

    示例:http://jsfiddle.net/OnaBai/MuDX7/

  • 5

    自从这个问题得到解答以来,剑道已经引入了frozen columns所以我认为应该对该功能进行一些更新 .

    当您有一个冻结列时,网格将创建新的 Headers /内容表来管理冻结列 . 如果冻结一列,它会将链接到此列的项目从常规网格的tbody / thead移动到lockedContent / lockedHeader(反之亦然) .

    如果您使用接受的答案获得索引,那么您可以使用 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;
      }
    
    });
    

    Disclaimer :只是为了增加一定程度的复杂性,你还应该考虑到剑道还引入了一个multiple column header功能,可能会使我上面的代码无效 .

  • 25

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

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

相关问题