jQuery 如何更改剑道网格行颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21528151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change Kendo Grid row colours
提问by AhmetMelihBa?bu?
I want to design my Kendo Grid with colours in each row. If there is an alarm in the database these rows must be red, otherwise they must be green.
我想用每行的颜色设计我的剑道网格。如果数据库中有警报，这些行必须是红色的，否则它们必须是绿色的。
Here is my code:
这是我的代码：
public JsonResult Getdata()
{
var reports = db.ActivityLog.OrderBy(c => c.dateTime).ToList();
var collection = reports.Select(x => new
{
username = x.uName,
location = x.locName,
devices = x.devName,
alarm = x.alarm
});
return Json(collection, JsonRequestBehavior.AllowGet);
}
My view:
我的看法：
function handleDataFromServer() {
$("#grid").data("kendoGrid").dataSource.read();
}
window.setInterval("handleDataFromServer()", 10000);
$(document).ready(function () {
$("#grid").kendoGrid({
sortable: true,
pageable: {
input: true,
numeric: false
},
selectable: "multiple",
dataSource: {
transport: {
read: "/Home/Getdata",
type: "json"
}
},
columns: [
{ field: "username", width: "80px" },
{ field: "location", width: "80px" },
{ field: "devices", width: "80px" },
{ field: "alarm", width: "80px" }]
});
});
采纳答案by BlackHymanetMack
You could use a RowTemplate, and in that RowTemplate evaluate a css class for the given row based on whatever condition you provide. The css class could then have the stylings appropriate for that row. For example, "no-alarm", or "with-alarm" could be placed on 'td' and set a background color.
您可以使用 RowTemplate，并在该 RowTemplate 中根据您提供的任何条件评估给定行的 css 类。然后 css 类可以具有适合该行的样式。例如，可以将“no-alarm”或“with-alarm”放在 'td' 上并设置背景颜色。
http://demos.telerik.com/kendo-ui/web/grid/rowtemplate.html
http://demos.telerik.com/kendo-ui/web/grid/rowtemplate.html
Example
例子
You can evaluate your data item in the row template and cleanly output the given class. In this example (available in the jsfiddle link below) a user has a name and age...if the age is <= 30, they get the 'underthirty' class (really it should be thirtyorunder class).
您可以评估行模板中的数据项并干净地输出给定的类。在这个例子中（在下面的 jsfiddle 链接中可用）一个用户有一个名字和年龄......如果年龄 <= 30，他们得到 'underthirty' 类（实际上应该是三十岁以下的类）。
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td class='#= age <= 30 ? "underthirty" : "overthirty"#'>
<strong>#= name #</strong>
</td>
<td>
#= age #
</td>
</tr>
</script>
回答by AhmetMelihBa?bu?
I solved by adding this function in the kendo grid function.
我通过在kendo grid函数中添加这个函数来解决。
columns: [
{ field: "username", width: "80px" },
{ field: "location", width: "80px" },
{ field: "devices", width: "80px" },
{ field: "alarm", width: "80px" }],
dataBound: function () {
dataView = this.dataSource.view();
for (var i = 0; i < dataView.length; i++) {
if (dataView[i].alarmID!=null) {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("alarm"); //alarm's in my style and we call uid for each row
}
else if (dataView[i].message!=null) {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("reason");
}
}
}
});
回答by Domenico Zinzi
You can also use the dataBound of kendoGrid
也可以使用kendoGrid的dataBound
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/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/2014.3.1411/js/kendo.all.min.js"></script>
<style>
.red {
background-color: red
}
.green {
background-color: green
}
</style>
</head>
<body>
<div id="grid"></div>
<script>
var grid = $("#grid").kendoGrid({
columns: [
{
field: "name",
title: "Name",
},
{
field: "title",
title: "Title"
}
],
dataSource: [ { name: "Jane Doe", title: "Dr. Dr." }, { name: "John Doe", title: "Senior Citizen" }],
dataBound: function(e) {
var items = this._data;
var tableRows = $(this.table).find("tr");
tableRows.each(function(index) {
var row = $(this);
var Item = items[index];
if (Item.name !== "Jane Doe") {
row.addClass("green");
}else{
row.addClass("red");
}
});
}
}).data("kendoGrid");
</script>
</body>
</html>
