kendoGrid 通Click事件获取行列(Cell)信息

原文出处: https://stackoverflow.com/questions/17343371/how-to-get-row-index-and-cell-index-of-row-click-kendo-grid

示例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>

示例2:
演示  :  http://jsfiddle.net/OnaBai/MuDX7/
html
<div id="grid"></div>
js
var grid = $("#grid").kendoGrid({
    dataSource: {
        data    : createRandomData(300),
        pageSize: 10,
        schema  : {
            id   : "Id",
            model: {
                fields: {
                    Id       : { type: 'number' },
                    FirstName: { type: 'string' },
                    LastName : { type: 'string' }
                }
            }
        }
    },
    selectable: true,
    editable  : false,
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        { template: "<img style='width:16px' src='http://www.onabai.es/images/digits/1.png'", width: 90},
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 90, title: "Last Name" }
    ]
}).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);
    var item = grid.dataItem(row);
    var id = item.Id;
    alert("row:" + rowIdx + " col:" + colIdx + " id:" + id + "\nitem:" + JSON.stringify(item, null, 4));
});





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值