Javascript 在剑道网格中，我可以使用函数动态设置列属性吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28784081/
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
In a kendo grid, can I set column attributes dynamically with a function?
提问by Chris
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
我在这里有一些代码，我试图根据数据项的值设置单元格的背景颜色：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>
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.
我意识到我可以用模板来做到这一点，但这需要一个额外的 html 元素，因为你不能改变 td 本身的标记。如果支持，我想使用一个函数来返回属性。
回答by Lars H?ppner
You said you don't want to use templates, but I think you were talking about column templates.
你说你不想使用模板，但我认为你在谈论列模板。
You can change the markup of the td itself by using a row template:
您可以使用行模板更改 td 本身的标记：
<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
});
(demo)
（演示）
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.
这将具有不使用行模板的优点，但您必须对逻辑使用模板语法。
(demo)
（演示）
回答by Jayesh Goyani
Please try with the below code snippet.
请尝试使用以下代码片段。
<!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>
.greenBG {
background-color:green;
}
.redBG {
background-color:red;
}
</style>
</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"
};
}
}],
dataSource: [{ name: "Jane Doe" }, { name: "John Doe" }],
dataBound: function () {
dataView = this.dataSource.view();
for (var i = 0; i < dataView.length; i++) {
if (dataView[i].name === "Jane Doe") {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("greenBG");
}
else {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("redBG");
}
}
}
});
</script>
</body>
</html>
回答by Nishchit Dhanani
In angular kendo callback e not work
在角度剑道回调中不起作用
Use this
用这个
attributes: {
"ng-confirm-message": "{{this.dataItem.is_active ? \'Are you sure deactive ?\' : \'Are you sure active ?\'}}",
"confirmed-click": "vm.inlineSubmit(this.dataItem.toJSON() ,true)"
}
回答by MohammadSoori
For Kendo-JQuery.
对于 Kendo-JQuery。
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
field: "name",
headerAttributes: {
"class": "table-header-cell",
style: "text-align: right; font-size: 14px"
}
}]
});
</script>
And this Kendo-MVC
而这个 Kendo-MVC
.Columns(columns =>
{
columns.Bound(c => c.ActiveReason).Title("ActiveReason").HeaderHtmlAttributes(new { @class = "table-header-cell" });
})
回答by Eduardo Chávez
Some years later but ... the attributes function is not working at all for me, is not even hit, seems pretty but not working (Why is needed a manual class toggle if a functions is provided to do the work? something seems weird).
几年后，但是......属性功能对我来说根本不起作用，甚至没有被击中，看起来很漂亮但不起作用（如果提供了一个功能来完成这项工作，为什么需要手动类切换？有些事情似乎很奇怪） .
I make editable cells based on other fields values but also I needed to change the styles
我根据其他字段值制作可编辑单元格，但我也需要更改样式
1) Add the validation on field that you want to inject the css class,
1）在要注入css类的字段上添加验证，
//Your other fields configuration
field:"dependentField",
attributes:
{
"class": "# if(data.ImportantField!==true) { # nonEditableCellStyle # } else { # editableCellStyle # }# ",
}
//Your other fields configuration
2) Bind the grid change event and check if some important field has changes, if is the field that controls the style of other cells just call the refresh method
2) 绑定grid change事件，检查一些重要的字段是否有变化，如果是控制其他单元格样式的字段就调用refresh方法
var _kendoGrid = $('#myGrid').data("kendoGrid");
_kendoGrid.dataSource.bind("change", function (e) {
if (e.action === "itemchange") {
if (e.field === "ImportantField") {
_kendoGrid.refresh();
}
}
});
The refresh method will render your grid again, that means your functions weather is a template or an attribute function ( and again, that does not work at all for me) will run and apply the correct sytles, or classes in this case.
refresh 方法将再次呈现您的网格，这意味着您的函数 weather 是一个模板或属性函数（同样，这对我来说根本不起作用）将运行并在这种情况下应用正确的样式或类。
