kendoGrid选中行信息

最新推荐文章于 2020-04-03 00:09:48 发布

转载最新推荐文章于 2020-04-03 00:09:48 发布 · 4.9k 阅读

第三方控件相关同时被 2 个专栏收录

37 篇文章

订阅专栏

Kendo UI

12 篇文章

订阅专栏

本文介绍如何使用 KendoGrid 进行数据绑定及行数据的选择与获取。通过 JavaScript 代码实现 KendoGrid 的初始化配置，包括设置数据源、列定义及数据格式化，并演示了如何在用户双击选中某一行时获取该行的具体数据。

$("#rowSelection").kendoGrid({
    dataSource: {
        data: orders
    },
    selectable: "row",
    columns: [
        {
            field: "ShipCountry",
            title: "Ship Country",
            width: 300
        },
        {
            field: "Freight",
            width: 300
        },
        {
            field: "OrderDate",
            title: "Order Date",
            format: "{0:dd/MM/yyyy}"
        }
    ]
});

Javascript 代码如下：

var grid = $("#grid").data("kendoGrid");
var dataRows = grid.items();
// 获取行号
var rowIndex = dataRows.index(grid.select());
// 获取行对象
var data = grid.dataItem(grid.select());

////行双击事件及行数据的取得
//前提 Grid的selectable: "row",

    $("#gridID").on("dblclick", "tr.k-state-selected", function () {
        var grid = $("#grid").data("kendoGrid");
        var data = grid.dataItem(grid.select());
        $("#txt1").val(data.get("ProductID"));
        $("#txt2").val(data.get("ProductName"));
        $("#txt3").val(data.get("UnitsInStock"));
    });