我现在正在与php的kendo网格UI合作。我有一个在网格中的列，可以列出我的数据库（表'stage_name'的字段名称'）中的"舞台"名称。我可以通过将" stage_name"设置为列中的字段来做到这一点，但是我必须根据" stage_id"（表的主要键）对阶段名称进行排序。因此，我将代码重写如下：
var grid = $("#stageGrid").kendoGrid({
columns: [{
field: "stage_id", // stage_name
title: "Stage",
template: "#=stage_name#",
aggregates: ["count"],
groupHeaderTemplate: "Stage : #=(value != null)? value : 'Empty' # (Count: #=count#)",
width: 150
}]
});
我能够列出舞台名称，相对于stage_id＆amp;所有这些。现在，我的问题是，在对列进行分组时，stage_id的显示为列标题（您可以在附加的图像中看到）。我必须通过显示相应的阶段名称来解决这个问题。你们中的任何一个人都能对此有一个好主意来帮助我。期望您有价值的想法。
预先感谢您。
如果我正确理解您的方案，则使用网格中的外键列，并且您想显示与该外键ID相对应的名称，并且您也想通过使用该外国来分组钥匙。为此，使用列的值属性的最佳方法除了具有文本和值属性的对象数组之外，Kendo Gird将自动在该列的值上选择该行基础的文本。
有关更多信息，您可以检查此链接
http://demos.telerik.com/kendo-ui/grid/foreignkeycolumn
这是一个工作的演示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var positionValues = [{
"text": "Project Manager",
"value": 1
}, {
"text": "Sales Manager",
"value": 2
}, {
"text": "Engineer",
"value": 3
}];
$("#grid").kendoGrid({
columns: [{
field: "name",
title: "Name"
}, {
field: "age",
title: "Age"
}, {
field: "positionId",
title: "Position",
values: positionValues
}],
dataSource: {
data: [{
name: "Jane Doe",
age: 30,
positionId: "2"
}, {
name: "John Doe",
age: 34,
positionId: "1"
}, {
name: "Sam Degree",
age: 40,
positionId: "1"
}, {
name: "Salina Kile",
age: 51,
positionId: "2"
}, {
name: "Johney Doe",
age: 24,
positionId: "3"
}, {
name: "Matt Prior",
age: 23,
positionId: "3"
}, {
name: "Michael Jackson",
age: 37,
positionId: "2"
}, ],
group: {
field: "positionId",
aggregates: [{
field: "age",
aggregate: "count"
}]
}
}
});
</script>
</body>
</html>我希望它会有所帮助。
编辑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var positionValues = [{
"text": "Project Manager",
"value": 1
}, {
"text": "Sales Manager",
"value": 2
}, {
"text": "Engineer",
"value": 3
}];
function showPos(value) {
position = positionValues.find(function(el){
return el.value == value;
});
return (position) ? position.text : "";
}
$("#grid").kendoGrid({
columns: [{
field: "name",
title: "Name"
}, {
field: "age",
title: "Age"
}, {
field: "positionId",
title: "Position",
values: positionValues,
groupHeaderTemplate: "Custom Template: #= showPos(value) #"
}],
dataSource: {
data: [{
name: "Jane Doe",
age: 30,
positionId: "2"
}, {
name: "John Doe",
age: 34,
positionId: "1"
}, {
name: "Sam Degree",
age: 40,
positionId: "1"
}, {
name: "Salina Kile",
age: 51,
positionId: "2"
}, {
name: "Johney Doe",
age: 24,
positionId: "3"
}, {
name: "Matt Prior",
age: 23,
positionId: "3"
}, {
name: "Michael Jackson",
age: 37,
positionId: "2"
}, ],
group: {
field: "positionId",
aggregates: [{
field: "age",
aggregate: "count"
}]
}
}
});
</script>
</body>
</html>