Question

我现在正在使用带有PHP的kendo Grid UI。我在Grid中有一列用于列出我的DB中的“Stage”名称（表'stage_name'的字段名称）。我能够通过在列中将“stage_name”设置为字段来实现，但我必须根据“stage_id”（表的主键）对Stage Name进行排序。所以我重写了如下代码：

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

提前感谢你。

Answer 1

如果我正确理解您的方案，您在网格中使用外键列，并且您希望显示与该外键ID对应的名称，并且您还希望使用该外键进行分组。为了这样做使用列的值属性的最佳方法，除了具有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 Grid UI设置groupHeaderTemplate

1 个答案: