为Kendo Grid UI设置groupHeaderTemplate

我现在正在与kendo Grid UI一起使用PHP。我在Grid中有一个列来列出我的DB中的'Stage'名称（一个表'stage_name'的字段名称）。我可以通过在列中设置“stage_name”作为字段来实现，但是我必须根据“stage_id”（表的主键）对Stage Name进行排序。所以我改写为下面的代码：为Kendo Grid UI设置groupHeaderTemplate

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 &了这一切。现在，我的问题是，在对列进行分组时，stage_id显示为列标题（可以在图像attached中看到）。我必须通过显示相应的舞台名称来解决这个问题。你们中的任何一个人都可以帮助我解决这个问题。期待你有价值的想法。

感谢您提前。

来源

2016-12-14 Sinto

如果我正确理解您的方案，您在网格中使用外键列，并且想要显示与该外键ID相对应的名称，并且还希望使用该外键进行分组。要做到这一点，使用列值属性的最佳方式，除了具有文本和值属性的对象数组，Kendo gird将根据该列的值自动选择该行的文本。

这里是一个工作演示。

<!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>

来源

2016-12-14 11:19:34

泰的帮助，我会考虑这与更新你的。 – Sinto

这是一个有帮助的工作，但你能帮我多做一件事。按照您的建议进行操作时，我无法显示groupHeaderTemplate。你知道如何设置，如上面的代码所示。 – Sinto

对于使用groupHeaderTemplate，您可以使用自定义函数将您的值映射到相应的文本。检查我更新的答案 –

为Kendo Grid UI设置groupHeaderTemplate

回答

相关问题