shu*_*pta 4 kendo-ui kendo-grid
我有一个 Kendo UI Grid，它包含四列：
Highlight MAC Time Message
该Highlight列可以包含值“是”或“否”，并且该列是隐藏的。
如果值为 yes，我需要创建一个行模板，该模板将突出显示（更改颜色或其他内容）该行。
请尝试使用以下代码片段。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<style>
.change-background {
background-color: red;
}
</style>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
var ds = new kendo.data.DataSource({
data: [{
Highlight: "Yes",
MAC: "111",
Time: "aaa",
Message: "a1"
}, {
Highlight: "No",
MAC: "222",
Time: "bbb",
Message: "b2"
}]
});
$("#grid").kendoGrid({
dataSource: ds,
dataBound: onDataBound,
columns: [
{ hidden: true, field: "Highlight" },
{ field: "MAC" },
{ field: "Time" },
{ field: "Message" }
],
});
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.data();
$.each(data, function (i, row) {
if (row.Highlight == "Yes") {
var element = $('tr[data-uid="' + row.uid + '"] ');
$(element).addClass("change-background");
}
});
}
</script>
</body>
</html>
如果有任何问题，请告诉我。