如何使用 javascript 引用剑道网格中的特定单元格？答案

【问题标题】：How do I reference a specific cell in kendo grid with javascript?如何使用 javascript 引用剑道网格中的特定单元格？
【发布时间】：2015-09-04 08:38:03
【问题描述】：

现在我有一个 2 行 6 列的剑道网格。我需要一些逻辑来突出显示特定的单元格，但我不知道如何引用单元格。我使用了这个例子，但我不知道作为 id 传递什么。

myHub.client.highlightRow = function (id) {
    var data = $("#MyGrid").data("kendoGrid").dataSource.data();
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        if (dataItem.id == id) {
            //alert(dataItem.uid);
            $("#MyGrid").data("kendoGrid").tbody.find("tr[data-uid=" + dataItem.uid + "]").effect("highlight", { color: "#f35800" }, 3000);
        }
    }
};

这是我的网格示例。

function loadGaugeTable(siteId, dashboardId, endDate, planType) {
    var today = new Date();
    var metricTitle = "Metric, as of " + monthNames[today.getMonth()] + " " + today.getDate();
    var containerSize = $("#gaugeMetricTableContainer").width();
    var apiPath = "/" + getAppPath() + "/Analytics/api/DashboardApi/getAllMetricTDData" + "?siteId=" + siteId +
                                                                                    "&dashboardId=" + dashboardId +
                                                                                    "&endDate=" + escape(endDate) +
                                                                                    "&planType=" + planType

    $("#gaugeMetricTable").kendoGrid({

        attributes: {
            "class": "table-cell",
            style: "font-size: 10px"
        },
        height: 250,
        selectable: "row",
        scrollable: true,
        sortable: true,
        filterable: true,
        columns: [
            { field: "MetricName", title: metricTitle, width: containerSize / 4 + "px" },
            { field: "DailyActual", title: "Daily Actual", format: decimalPrecisionFormat },
            { field: "DailyTarget", title: "Daily Target", format: decimalPrecisionFormat },
            { field: "MTDActual", title: "MTD Actual", format: decimalPrecisionFormat },
            { field: "MTDTarget", title: "MTD Target", format: decimalPrecisionFormat },
            { field: "YTDActual", title: "YTD Actual", format: decimalPrecisionFormat },
            { field: "YTDTarget", title: "YTD Target", format: decimalPrecisionFormat }

        ],
        dataSource: {
            transport: {
                read: {
                    dataType: "json", url: apiPath
                }
            }
        },

    });
}

我将如何引用第 1 行第 2 列。

var data = $("#gaugeMetricTable").data("kendoGrid").dataSource.data();
data[0];

返回该行的数据，但我无法使用 data[0].columns[1] 引用该列。

【问题讨论】：

你对页面中的网格有一些标记吗？
感谢您的回复我刚刚更新了初始帖子
一种方法是使用行或单元格模板：dojo.telerik.com/@ezanker/ugIFo
@ezanker 感谢您的建议，它应该可以工作，但是有没有办法指定一个没有 html 并且只在 javascript 中的单元格。我没有像 html 那样格式化我的表格，因此很难更改所有表格。我只是使用一个 div 标签，让 kendo 处理其余的。
我不知道你想要什么：按行和列索引获取单元格的 html 元素还是什么？告诉我你有什么数据，你想得到什么。

标签： javascript kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

在 kendoGrid 中，每个数据都由对象数组表示，其中一个数组元素是一行。 Kendo 将 uid 属性添加到数组中的所有数据对象。所以一个数据对象看起来像：

var dataItem = {
    MetricName: "some-val",
    DailyActual: "some-val",
    DailyTarget: "some-val",
    MTDActual: "some-val",
    MTDTarget: "some-val",
    YTDActual: "some-val",
    YTDTarget: "some-val",
    uid: "uid-val"
};

现在要获取此数据行，您可以简单地使用：

var grid = $("#gaugeMetricTable").data("kendoGrid");
var row = grid.find("tr[data-uid=" + dataItem.uid + "]");

接下来要按索引获取此单元格之一，您可以编写：

var cellIndex_1 = 5;
var cell_1 = row.find("td:eq(" + cellIndex_1 + ")");

要通过属性名称获取一个单元格，您必须首先知道它的索引，例如如果您想获取与 MTDActual 属性对应的单元格：

var cellName = "MTDActual";
var cellIndex_2 = grid.element.find("th[data-field = '" + cellName + "']").index();
var cell_2 = row.find("td:eq(" + cellIndex_2 + ")");

编辑：

此代码可用于常规网格和锁定列的网格：

var cellName = "MTDActual";
var grid = $("#gaugeMetricTable").data("kendoGrid");

var headerCells = grid.element.find("th");
var cellIndex = headerCells.index(grid.element.find("th[data-field = '" + cellName + "']"));

var rowCells = grid.element.find("tr[data-uid=" + dataItem.uid + "] td");
var cell = $(rowCells[cellIndex]);

剑道道场示例：https://dojo.telerik.com/oDUpuTAw

【讨论】：

这正是我想要的。我在查找 .find 的文档时遇到了麻烦。非常感谢！
这个答案非常有用谢谢@Jaroslaw
@Jaroslaw，我知道现在问已经太晚了，你能告诉我如何获取冻结列的单元格引用吗？
@AdershM 对于冻结列，它有点复杂。如果您确定要查找的列是冻结或非冻结部分，则可以使用下面的代码，只需在每个选择器的开头添加 .k-grid-content-locked 或 .k-grid-content （+ td/ 之前的空格tr/th) 在查找函数中。如果你真的需要通用函数，我可以尝试编写它。
@JarosławKończak 感谢您提供信息。我也尝试过，但是当锁定的列可以被解锁和重新排列时就会出现问题。在那里，我们无法确定它是 .k-grid-content-locked 还是 .k-grid-content。希望你能帮忙..

【解决方案2】：

这对我有用：

function onChange(arg) {
       var cell = this.select();
       var cellIndex = cell[0].cellIndex;
       var column = this.columns[0];
       ...

第 0 列单元格的 de 值，例如，从所选行开始，位于：

var mydata = dataItem[column.field];

快乐编码 KendoGrid。

【讨论】：

【解决方案3】：

您可以按照以下步骤申请尝试：

首先，获取要按名称将 CSS 应用于特定列的特定行。在我的要求中，使用具有特定列类名称的行的 UID 找到了行。

var grid = $("#grid").data("kendoGrid");

var row = grid.dataSource.getByUid("your-row-uid");

最后，通过类名获取所选行特定的单元格值。

$(row).find("td.className").css("background-color", "lightblue");

【讨论】：