如何使用剑道网格进行服务器分组？预期的 json 格式是什么？答案

【问题标题】：How to do server grouping using kendo grid ? What is the expected json format?如何使用剑道网格进行服务器分组？预期的 json 格式是什么？
【发布时间】：2017-03-02 08:23:27
【问题描述】：

我正在尝试在网格中使用服务器分组。

我不确定“schema.groups”和“schema.data”之间的区别。我知道当数据未分组时我应该使用 shema.data，当数据分组时我应该使用 schema.groups。我尝试提供一个非常简单的示例，使用对 data.json 文件的 ajax 请求来模拟服务器响应。只需将 testGrouping.html 和 data.json 文件放在任何 http 服务器的根目录中即可重现我的问题。

当我运行给定的代码时，我没有错误，但网格仍然是空的。我希望网格显示 1 组 5 行，没有任何聚合。

您能帮忙找出给定样本中的问题吗？

感谢您的帮助。

这是我正在使用的 html 页面（testGrouping.html）：

<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js">    </script>
</head>
<body>

    <div id="example">
        <div id="grid"></div>
        <script>
            $(document).ready(function() {
                $("#grid").kendoGrid({
                    dataSource: {
                        transport: {
                            read: {
                                url: "data.json?x=1",
                                cache:false,
                                type: 'GET',
                                dataType: 'json',
                                contentType: "application/json"
                            },
                        },
                        error: function(e) {
                          console.log(e.errors); // displays "Invalid query"
                        },
                        schema:{
                          // "data":"titi",
                          "groups":"groups",
                          "total": "total",
                          "model": {
                            "fields": [
                              {
                                "field": "m2"
                              },
                              {
                                "field": "m"
                              },                                  
                            ]
                          }
                        },
                        pageSize: 7
                    },
                    sortable: true,
                    scrollable: false,                        
                    pageable: true,
                    serverPaging: true,
                    serverAggregates: true,
                    serverFiltering: true,
                    serverGrouping: true,
                    serverSorting: true,
                    columns: [
                      {
                        "field": "m2",
                        "title": "Group odd / even"
                      },
                      {
                        "field": "m",
                        "title": "Month"
                      }
                    ]
                });
            });
        </script>
    </div>

以及这里用来模拟服务器响应的数据（data.json）：

{
"total":1,
"groups":
 [ {
  "aggregates": [],
  "value": "rrr",
  "hasSubgroups": false,
  "field": "m2",      
  "items": [
    {
      "m2": "rrr",
      "m": 1
    },
    {
      "m2": "rrr",
      "m": 1
    },
    {
      "m2": "rrr",
      "m": 1
    },
    {
      "m2": "rrr",
      "m": 1
    },
    {
      "m2": "rrr",
      "m": 1
    }
  ],
  "aggregates": {}
}]
}

【问题讨论】：

您还在寻找答案吗？
我也在寻找答案。

标签： json kendo-grid kendo-datasource

【解决方案1】：

我已经为此奋斗了几天，但最终使用https://docs.telerik.com/kendo-ui/knowledge-base/grid-format-of-the-response-with-server-grouping 和https://docs.telerik.com/kendo-ui/framework/datasource/basic-usage#server-grouping 供参考

将数据源的 schema.groups 属性设置为返回包含组的响应属性的函数

schema: {
   groups: function (e) {
      return e.Groups;
   }
}

从您的服务器返回以下格式

Groups = [
   {
      field: "GroupField",
      value: "Group1",
      items: [],
      aggregates: {},
      hasSubgroup: false
   },
   {
      field: "GroupField",
      value: "Group2",
      items: [],
      aggregates: {},
      hasSubgroup: false
   }
]

【讨论】：