如何使用kendo网格进行服务器分组?什么是预期的json格式?

问题描述 投票:2回答:1

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

我不确定“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个回答
0
投票

我已经和它斗争了几天但是我最终使用https://docs.telerik.com/kendo-ui/knowledge-base/grid-format-of-the-response-with-server-groupinghttps://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
   }
]
© www.soinside.com 2019 - 2024. All rights reserved.