现在我有一个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];
返回行的数据但我不能用数据[0] .columns [1]引用该列。
答案 0 :(得分:7)
在kendoGrid中,每个数据由一个对象数组表示,其中一个数组元素是一行。 Kendo将uid属性添加到数组中的所有dataObjects。所以一个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"
};
现在要获取此数据行,您只需使用:
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]);
Kendo DOJO示例:https://dojo.telerik.com/oDUpuTAw
答案 1 :(得分:0)
这对我有用:
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。
答案 2 :(得分:0)
您可以按照以下步骤尝试应用:
首先,获得一个特定的行,您要从中将CSS按名称应用于特定的列。在我的要求中,找到了使用具有特定列类名称的行的UID的行。
var grid = $("#grid").data("kendoGrid");
var row = grid.dataSource.getByUid("your-row-uid");
最后,通过其类名称获取所选行特定的单元格值。
$(row).find("td.className").css("background-color", "lightblue");