Kendo UI Grid点击行获取主键实现方案咨询

我来帮你搞定这个问题！针对Kendo UI Grid点击行获取主键的需求，这里有几种亲测有效的实现方法，结合你的代码给你具体示例：

方法一：利用Grid的change事件（推荐，自带行选中状态） #

如果你的Grid需要保留行选中的视觉反馈，这种方法最适合。只需要在Grid配置中开启行选择并绑定change事件即可：

function FondsGrid() { 
    var sharedDataSource = new kendo.data.DataSource({ 
        transport: { 
            read: { 
                url: "http://localhost:...........", 
                dataType: "json" 
            } 
        }, 
        pageSize: 20 
    }); 

    var accountGrid = $("#grid-fonds").kendoGrid({
        dataSource: sharedDataSource,
        selectable: "row", // 确保行可被选中（默认已开启，可按需调整为multiple等）
        change: function(e) {
            // 获取当前选中的行元素
            var selectedRow = this.select();
            // 通过行元素获取对应的数据对象
            var dataItem = this.dataItem(selectedRow);
            // 替换成你实际的主键字段名（比如Id、FondsId等）
            var primaryKey = dataItem.Id;
            
            console.log("选中行的主键：", primaryKey);
            // 在这里将primaryKey传入你的其他业务逻辑即可
        },
        // 你的其他Grid配置（比如columns、pageable等）
    }).data("kendoGrid");
}

方法二：直接绑定行的点击事件（无选中状态需求时用） #

如果不需要行选中的视觉效果，直接给每行绑定点击事件即可，推荐用以下两种方式：

方式A：通过dataBound事件绑定（适配分页/刷新场景） #

function FondsGrid() { 
    var sharedDataSource = new kendo.data.DataSource({ 
        transport: { 
            read: { 
                url: "http://localhost:...........", 
                dataType: "json" 
            } 
        }, 
        pageSize: 20 
    }); 

    var accountGrid = $("#grid-fonds").kendoGrid({
        dataSource: sharedDataSource,
        dataBound: function() {
            // 给Grid的每行绑定点击事件，分页或数据刷新后自动重新绑定
            this.tbody.find("tr").on("click", function() {
                // 获取当前点击行对应的数据对象
                var dataItem = accountGrid.dataItem(this);
                // 替换成你的主键字段名
                var primaryKey = dataItem.Id;
                
                console.log("点击行的主键：", primaryKey);
                // 执行你的业务逻辑
            });
        },
        // 其他Grid配置
    }).data("kendoGrid");
}

方式B：事件委托（更高效，一次绑定永久生效） #

function FondsGrid() { 
    var sharedDataSource = new kendo.data.DataSource({ 
        transport: { 
            read: { 
                url: "http://localhost:...........", 
                dataType: "json" 
            } 
        }, 
        pageSize: 20 
    }); 

    var accountGrid = $("#grid-fonds").kendoGrid({
        dataSource: sharedDataSource,
        // 其他Grid配置
    }).data("kendoGrid");

    // 用事件委托绑定点击事件，分页/刷新后无需重新绑定
    $("#grid-fonds").on("click", "tbody tr", function() {
        var dataItem = accountGrid.dataItem(this);
        var primaryKey = dataItem.Id;
        
        console.log("点击行的主键：", primaryKey);
        // 处理你的业务逻辑
    });
}

注意事项 #

• 确保你的数据源返回的JSON数据中包含主键字段（比如Id），替换代码中对应的字段名即可；
• 如果使用change事件，要保证selectable配置正确，比如需要多选可以设置为"multiple, row"；
• 测试时可以先通过console.log(dataItem)打印整个数据对象，确认主键字段是否正确。

内容的提问来源于stack exchange，提问作者Haytham