在剑道网格中，我可以使用函数动态设置列属性吗? [英] In a kendo grid, can I set column attributes dynamically with a function?
问题描述
我在这里有一些代码，我试图根据数据项的值设置单元格的背景颜色:http://dojo.telerik.com/@solidus-flux/eHaMu
I've got some code here where I am trying to set a background color of a cell based on the value of the data item: http://dojo.telerik.com/@solidus-flux/eHaMu
<!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>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
title: "Name",
attributes: function(e) {
return {
"class": "table-cell",
style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
};
}
//attributes: {
//"class": "table-cell",
//style: "text-align: right; font-size: 14px"
//}
} ],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
</script>
</body>
</html>
我意识到我可以使用模板来做到这一点，但这需要一个额外的 html 元素，因为您无法更改 td 本身的标记.如果支持，我想使用一个函数来返回属性.
I realize I could do this with a template, but that would require an extra html element, since you can't change the markup of the td itself. I'd like to use a function to return attributes if that is supported.
推荐答案
你说你不想使用模板，但我认为你在谈论列模板.
You said you don't want to use templates, but I think you were talking about column templates.
您可以使用行模板更改 td 本身的标记:
You can change the markup of the td itself by using a row template:
<script id="template" type="text/x-kendo-template">
<tr data-uid="#= uid #">
# this.columns.forEach(function(col) {
var val = data[col.field],
css,
style = ''
cClasses = '';
if (typeof col.attributes === 'function') {
css = col.attributes(data);
cClasses = css["class"];
style = css.style
}
#
<td class='#= cClasses #' style='#= style #'>
#= data[col.field] #
</td>
# }) #
</tr>
</script>
为了使循环正常工作，您需要将模板绑定到网格:
For the loop to work, you need to bind your template to the grid though:
var grid = $("#grid").kendoGrid({
columns: [{
field: "name",
title: "Name",
attributes: function (e) {
return {
"class": "table-cell",
style: e.name == "Jane Doe" ?
"background-color: red" : "background-color: green"
};
}
}, {
field: "title",
title: "Title"
}],
dataSource: [{name: "Jane Doe", title: "Dr. Dr."},
{name: "John Doe", title: "Senior Citizen"}]
}).data("kendoGrid");
var template = kendo.template($("#template").html()).bind(grid);
grid.setOptions({
rowTemplate: template
});
(演示)
或者，您也可以创建这样的属性:
As an alternative, you could also create attributes like this:
{
field: "name",
title: "Name",
attributes: {
"class": "# if(data.name === 'Jane Doe') { # red # } else { # green # } #"
}
},
这样做的好处是不使用行模板，但您必须对逻辑使用模板语法.
This would have the advantage of not using the row template, but you'd have to use the template syntax for the logic.
(演示)
这篇关于在剑道网格中，我可以使用函数动态设置列属性吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
