点击Kendo MVC Grid行内图片图标如何获取当前行数据

实现方案 #

你可以通过两种方式在点击事件中获取Kendo Grid当前行数据，推荐用第一种更简单： #

方案1：直接在模板渲染时传递当前行数据

因为DisplayImage方法已经接收了当前行的完整数据对象，直接把这个对象作为参数传给点击事件即可：

1. 修改DisplayImage方法的模板拼接逻辑：

function DisplayImage(product) {
    if (product.IsHistory == "Yes") {
        // 序列化行数据作为参数传递，处理单引号转义避免解析错误
        const rowDataStr = JSON.stringify(product).replace(/'/g, "'");
        var html = `${product.HoursYTD}<img src='/Images/${product.IsHistory}.png' height='22' width='22' onclick='myHandler(event, ${rowDataStr})'>`;
    } else {
        var html = `<div>${product.HoursYTD}</div>`;
    }
    return html;
}

2. 改造myHandler接收行数据，发起请求获取历史记录：

function myHandler(e, rowData) {
    // 直接提取你需要的参数，替换为你实际的字段名即可
    const params = {
        resourceName: rowData.ResourceName, // 资源名称字段
        dept: rowData.Department, // 部门字段
        project: rowData.Project, // 项目字段
        costDesc: rowData.CostDesc // 费用描述字段
    };

    // 发请求到后端Action查询历史数据
    $.post("/你的Controller名/GetHistoryData", params, function (historyData) {
        // 初始化模态框内的Kendo Grid绑定historyData，再打开弹窗即可
    })
}

方案2：通过DOM层级查找行元素再取数据

如果不想传递整个数据对象，也可以通过点击的图标元素向上查找Grid行，再调用Grid的dataItem方法获取行数据：

function myHandler(e) {
    // 替换为你实际的Grid元素选择器
    const grid = $("#yourGridId").data("kendoGrid");
    // 找到点击图标所属的Grid行
    const targetRow = $(e.target).closest("tr");
    // 获取行对应的数据对象
    const rowData = grid.dataItem(targetRow);

    // 后续提取参数、发请求的逻辑和方案1一致
}

注意事项 #

• 代码中的字段名、Controller名、Action名、Grid元素ID请替换为你项目中的实际值
• 如果你用.NET MVC的Url.Action生成请求路径，该代码需要写在cshtml视图文件中，不能放在独立的js文件里

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