為Kendo Grid UI設置groupHeaderTemplate
[英]Setting a groupHeaderTemplate for Kendo Grid UI
問題描述
我現在正在使用PHP的kendo Grid UI。 我在Grid中有一列可以列出數據庫中的“階段”名稱（表“ 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
}]
});
我能夠列出stageName的名稱，關於stage_id等的排序名稱。 現在，我的問題是，在對列進行分組時，stage_id會顯示為列標題（您可以在所附的圖像中看到）。 我必須通過顯示相應的舞台名稱來解決此問題。 你們當中有誰能對我有所幫助？ 期待您的寶貴想法。
預先感謝您。
1 個解決方案
解決方案1
2 已采納 2016-12-14 11:19:34
如果我正確理解了您的情況，那么您正在網格中使用外鍵列，並且想要顯示與該外鍵ID對應的名稱，並且還希望使用該外鍵進行分組。 這樣做是使用列的values屬性的最佳方法，除了具有text和value屬性的對象數組之外，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>
Kendo UI填充網格
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.