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

How do I reference a specific cell in kendo grid with javascript?

提问by Curious Cat

Right now I have a kendo grid with 2 rows and 6 columns. I need some logic to highlight a specific cell but I don't know how to reference a cell. I used this example but I don't know what to pass in as the id.

现在我有一个 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);
        }
    }
};

Here is a sample of my grid.

这是我的网格示例。

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
                }
            }
        },

    });
}

How would I go about referencing say row 1, column 2.

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

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

Returns the data for the row but I can't reference the column with data[0].columns[1].

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

回答by Jaros?aw Kończak

In kendoGrid each data is represented by array of objects in which one array element is one row. Kendo adds uid property to all dataObjects in array. So one dataObject looks like:

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

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"
};

Now to get this data row you can simply use:

现在要获取此数据行，您只需使用：

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

Next to get one of this cell by index you can write:

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

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

To get one cell by property name you have to know it's index first, e.g. if you want to get cell corresponding to MTDActualproperty:

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

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

EDIT:

编辑：

This code can be used for both regular grid and grid with locked columns:

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

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]);

Kendo DOJO example: https://dojo.telerik.com/oDUpuTAw

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

回答by user3220499

This worked for me:

这对我有用：

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

An de Value of the cell at column 0, for example, from the selected row is at:

例如，来自所选行的第 0 列单元格的 de Value 位于：

var mydata = dataItem[column.field];

Happy Coding KendoGrid.

快乐编码 KendoGrid。

回答by Pratik M. Kansara

You can apply try using the following steps:

您可以使用以下步骤申请试用：

First, get a specific row from which you want apply CSS to specific column by name. In my requirement found row using row's UID with specific column class name.

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

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

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

And at last, get your selected row specific cell value by its class name.

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

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