Kendo UI - JSON 响应 - 使用带有服务器分组和服务器聚合的远程数据源的网格

Posted 2023-05-07

【中文标题】Kendo UI - JSON 响应 - 使用带有服务器分组和服务器聚合的远程数据源的网格

【英文标题】：Kendo UI - JSON Response for - Grid using Remote Data Source W/Server Grouping & Server Aggregates

【发布时间】：2016-05-02 13:57:56

【问题描述】：

我有一个项目，我在其中使用 KendoUI Grid，使用服务器而不是本地获取数据。

我不确定我的服务器应该提供什么 JSON 响应才能使分组工作。我的目标是当用户将一列拖到分组标题时，我知道要返回什么样的 JSON 响应，以便 GRID 按该列和可能添加到该标题的任何其他列进行分组。

鉴于上图，我如何创建一个 JSON 响应来实现它（因此它显示了它应该分组的内容）？ 我知道我必须自己在服务器上执行此操作，但不确定 JSON 需要如何格式化。此外，如果我想在创建组时在组旁边显示一个“计数”字段，以便我知道每个组中有多少项目（我认为这是汇总？）

我当前的网格代码如下所示：

<div id="grid" style="height:100%;"></div>
<script>
    $(window).on("resize", function() 
      kendo.resize($("#grid"));
    );

    var crudServiceBaseUrl = "/api",
    dataSource = new kendo.data.DataSource(
        transport: 
            read:  
                url: crudServiceBaseUrl + "/companies",
                dataType: "json",
                type: "POST"
            ,
            update: 
                url: crudServiceBaseUrl + "/companies/update",
                dataType: "json",
                type: "POST"
            ,
            destroy: 
                url: crudServiceBaseUrl + "/companies/destroy",
                dataType: "json",
                type: "POST"
            ,
            create: 
                url: crudServiceBaseUrl + "/companies/create",
                dataType: "json",
                type: "POST"
            ,
            parameterMap: function(options, operation) 
                if (operation !== "read" && options.models) 
                    return models: kendo.stringify(options.models);
                
            
        ,
        error: function (e) 
            /* the e event argument will represent the following object:
            
                errorThrown: "custom error",
                errors: ["foo", "bar"]
                sender: ... the Kendo UI DataSource instance ...
                status: "customerror"
                xhr: null
            
            */
            //alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
            console.log("Errors: " + e.errors.join("; "));
        ,
        autoSync: false,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        serverGrouping: true,
        serverAggregates: true,
        pageSize: 20,
        columnResizeHandleWidth: 6,
        schema: 
            total: "itemCount",
            data: "items",
            groups: "groups",
            aggregates: "aggregates",
            group: 
                field: "phone", aggregates: [ field: "phone", aggregate: "count" ]
            ,
            model: 
                id: "id",
                fields: 
                    id:  editable: false, nullable: true ,
                    name:  validation:  required: true  ,
                    phone:  
                        type: "string",
                        validation:  
                            required: true,
                            phonerule: function(e)
                                if (e.is("[data-phonerule-msg]"))
                                
                                    var input  = e.data('kendoMaskedTextBox');
                                    //If we reached the end of input then it will return -1 which means true, validation passed
                                    //Otherwise it won't === -1 and return false meaning all the characters were not entered.
                                    return input.value().indexOf(input.options.promptChar) === -1;
                                
                                return true; //return true for anything else that is not data-phonerule-msg
                             
                         
                    ,
                    email:  type: "string", validation:  required: true, email:true  
                
            
        
    );

    $("#grid").kendoGrid(
        dataSource: dataSource,
        groupable: true,
        sortable: 
            mode: "multiple",
            allowUnsort: true
        ,
        selectable: "multiple cell",
        allowCopy:true,
        toolbar: ["create","excel"],
        excel: 
            fileName: "Kendo UI Grid Export.xlsx",
            //Below is only used as fallback for old browsers without support
            proxyURL: "//demos.telerik.com/kendo-ui/service/export",
            filterable: true
        ,
        pageable: 
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        ,
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        editable: "popup",
        mobile: true,
        columns: [
             
                field: "name",
                title: "Company Name",
                aggregates: ["count"],
                groupFooterTemplate: "Count: #=count#"
            ,
             
                field: "phone",
                title: "Phone",
                editor: function(container, options)
                    //pattern="[(][0-9]3[)] [0-9]3-[0-9]4"
                    var input = $('<input type="tel" data-phonerule-msg="Invalid Phone Number!" class="k-textbox"  required />');
                    input.attr("name", options.field);
                    input.kendoMaskedTextBox(
                        mask: "[phone]"
                    );
                    input.appendTo(container);
                ,
                aggregates: ["count"],
                groupFooterTemplate: "Count: #=count#"
            ,
             
                field: "email",
                title: "Email",
                editor: function(container, options)
                    var input = $('<input type="email" data-email-msg="Invalid email!" class="k-textbox" required/>');
                    input.attr("name", options.field);
                    input.appendTo(container);
                ,
                aggregates: ["count"],
                groupFooterTemplate: "Count: #=count#"
            ,
             
                command: ["edit", "destroy"],
                title: "Operations",
                width: "240px"
            
        ],
    );
</script>

我当前通过 Symfony 3.0 生成演示 javascript 的代码如下。

DefaultController.php

/**
     * @Route("/api/companies", name="api_companies_read")
     */
public function apiCompaniesReadAction(Request $request)
    
        $data["itemCount"] = "7";

        // $tdata["field"] = "";
//      $tdata["value"] = "";
//      $tdata["items"] = "hey";
//      $data["groups"][] = $tdata;

        $tdata["id"]    = "1";
        $tdata["name"] = "Joe";
        $tdata["phone"] = "[phone]";
        $tdata["email"] = "[e-mail]";

        $data["items"][] = $tdata;

        $tdata["id"]    = "2";
        $tdata["name"] = "Rachel";
        $tdata["phone"] = "[phone]";
        $tdata["email"] = "[e-mail]";

        $data["items"][] = $tdata;

        $tdata["id"]    = "3";
        $tdata["name"] = "John";
        $tdata["phone"] = "[phone]";
        $tdata["email"] = "[e-mail]";

        $data["items"][] = $tdata;

        $tdata["id"]    = "4";
        $tdata["name"] = "Richard";
        $tdata["phone"] = "[phone]";
        $tdata["email"] = "[e-mail]";

        $data["items"][] = $tdata;

        $tdata["id"]    = "5";
        $tdata["name"] = "Sister";
        $tdata["phone"] = "[phone]";
        $tdata["email"] = "[e-mail]";

        $data["items"][] = $tdata;

        $tdata["id"]    = "6";
        $tdata["name"] = "Brother";
        $tdata["phone"] = "[phone]";
        $tdata["email"] = "[e-mail]";

        $data["items"][] = $tdata;

        $tdata["id"]    = "7";
        $tdata["name"] = "Sibling";
        $tdata["phone"] = "[phone]";
        $tdata["email"] = "[e-mail]";

        $data["items"][] = $tdata;

//      schema: 
//          total: "total",
//          model: 
//              id: "CompanyID",
//              fields: 
//                  CompanyID:  editable: false, nullable: true ,
//                  Name:  validation:  required: true  ,
//                  Phone:  type: "string" ,
//                  Email:  type: "string" 
//              
//          
//      

        // replace this example code with whatever you need
        return new JsonResponse($data);

    

它创建的当前 JSON 如下所示。

JSON

"itemCount":"7","items":["id":"1","name":"Joe","phone":"[phone]","email":"[e-mail]","id":"2","name":"Rachel","phone":"[phone]","email":"[e-mail]","id":"3","name":"John","phone":"[phone]","email":"[e-mail]","id":"4","name":"Richard","phone":"[phone]","email":"[e-mail]","id":"5","name":"Sister","phone":"[phone]","email":"[e-mail]","id":"6","name":"Brother","phone":"[phone]","email":"[e-mail]","id":"7","name":"Sibling","phone":"[phone]","email":"[e-mail]"]

我发现一篇文章 here 看起来很接近我想要的，只是很难理解。 This 也可能有帮助。

我创建了JSFiddle 可以玩，只需要提供有效数据。

更新

我让服务器分页工作！第一个主要变化是数据源的传输，您必须更改 parameterMap 以发送 json，以便您可以访问它试图告诉您的服务器进行更改的内容。

dataSource = new kendo.data.DataSource(
        transport: 
            read:  
                url: crudServiceBaseUrl + "/companies",
                dataType: "json",
                type: "POST"
            ,
            update: 
                url: crudServiceBaseUrl + "/companies/update",
                dataType: "json",
                type: "POST"
            ,
            destroy: 
                url: crudServiceBaseUrl + "/companies/destroy",
                dataType: "json",
                type: "POST"
            ,
            create: 
                url: crudServiceBaseUrl + "/companies/create",
                dataType: "json",
                type: "POST"
            ,
            parameterMap: function(options, operation) 
                return kendo.stringify(options);
            
        ,

我的数据源如上所示，但您可以根据自己的需要进行调整。接下来是我的php文件。

PHP /公司

/**
     * @Route("/api/companies", name="api_companies_read")
     */
    public function apiCompaniesReadAction(Request $request)
    

        $request_body = file_get_contents('php://input');
        $json = json_decode($request_body);

        //Based on the JSON Payload response adjust the search in the database
        if($json)
            $page       = $json->page;
            $pageSize   = $json->pageSize;
            $skip       = $json->skip;
            $take       = $json->take;
        else
            $page = 1;
            $pageSize = 20;
            $skip = 1;
            $take = 1;
        

        $repository = $this->getDoctrine()->getRepository('AppBundle:Company');

        /*
        findBy(
            array        $criteria,
            array        $orderBy  = null, 
            integer|null $limit    = null,
            integer|null $offset   = null
        )
        */

        $company_total = $repository->findAll();
        $company_records = $repository->findBy(array(),array(),$pageSize,($page-1)*$pageSize);

        $data["total"] = count($company_total);

        foreach($company_records as $company)
            $temp["id"]     = $company->getId();
            $temp["name"]   = $company->getName();
            $temp["phone"]  = $company->getPhone();
            $temp["email"]  = $company->getEmail();
            $data["data"][] = $temp;
        

        //converts data to JSON
        return new JsonResponse($data);

    

请记住，上面是一个 Symfony 3.0 php 实现，使用注解来设置路由。该代码中的重要部分是。

$request_body = file_get_contents('php://input');
        $json = json_decode($request_body);

        //Based on the JSON Payload response adjust the search in the database
        if($json)
            $page       = $json->page;
            $pageSize   = $json->pageSize;
            $skip       = $json->skip;
            $take       = $json->take;
        else
            $page = 1;
            $pageSize = 20;
            $skip = 1;
            $take = 1;
        

file_get_contents('php://input'); 获取 KendoUI 控件发回的 javascript 对象。

更新 #3 让服务器排序正常工作！

以下是使用 Symfony 3.0 和 Doctrine 进行服务器排序的示例实现！

PHP

/**
     * @Route("/api/companies", name="api_companies_read")
     */
    public function apiCompaniesReadAction(Request $request)
    
        $request_body = file_get_contents('php://input');
        $json = json_decode($request_body);

        //print_r($json);

        //default parameters in case of error.
        $page = 1;
        $pageSize = 20;
        $skip = 1;
        $take = 1;
        $sort = array();

        //Based on the JSON Payload response adjust the search in the database
        if(isset($json))
            $page       = $json->page;
            $pageSize   = $json->pageSize;
            $skip       = $json->skip;
            $take       = $json->take;

            if(isset($json->sort))
                //"sort":["field":"name","dir":"asc"]:

                foreach($json->sort as $sortObj)
                    $sort[$sortObj->field] = $sortObj->dir;
                
            

        

        $repository = $this->getDoctrine()->getRepository('AppBundle:Company');

        /*
        findBy(
            array        $criteria,
            array        $orderBy  = null, 
            integer|null $limit    = null,
            integer|null $offset   = null
        )
        */

        $company_total = $repository->findAll();
        $company_records = $repository->findBy(array(),$sort,$pageSize,($page-1)*$pageSize);

        $data["total"] = count($company_total);

        foreach($company_records as $company)
            $temp["id"]     = $company->getId();
            $temp["name"]   = $company->getName();
            $temp["phone"]  = $company->getPhone();
            $temp["email"]  = $company->getEmail();
            $data["data"][] = $temp;
        

        //converts data to JSON
        return new JsonResponse($data);

    

【问题讨论】：

有人有什么想法吗？

【参考方案1】：

第一个链接是正确的。我必须将数据从网格导出为 pdf 和 excel，以遵守网格分组。我终于弄清楚了语义。网格具有列和数据对象，您可以通过网格调用获得它们。数据对象保存分组信息。这里是处理操作。

简而言之，您必须递归地迭代数据对象才能确定分组。对于数据中的每个元素，您需要检查 data[x].value 是否存在。如果它存在，那么它是一个带有子数据的组对象。如果它不存在，那么您使用普通的 data[row][column].field 来获取子数据。这里的技巧是为每个 dat[0].value 有数据的点调用一个递归函数，最后在展开时处理 data[row][column]。

下面是一个 js 函数，您可以使用它来检查 Grid 的 json dta。我会在您的网格中添加一两个组，并查看应用/不应用分组的数据之间的差异，这应该是您需要添加到数据中的内容....我认为您几乎将数据添加为 data=[ [],[]]除非是组，否则就是data=[value='groupName',[],[]]。

function showData(gridName) 
        var grid = $('#' + gridName).data('kendoGrid');
        var data = grid.dataSource.data().toJSON();
        console.log(data);
    

【讨论】：

这很复杂，我的特定项目使用 php，但我可以尝试翻译，不幸的是，我不是 c# 专家，所以很难弄清楚那里发生了什么。我想我仍然对 JSON 响应的样子感到困惑，您能否提供代码生成的示例？

感谢您尝试解决这个问题，这非常复杂。

对不起，我以为你在读数据。我添加了一个 js 函数来检查分组时数据的样子。这是无证的，可能会改变，我会谨慎行事。

只是好奇，应用分组时 php 包装器不应该返回所需的格式吗？

Yes & No，我调查了它，但对如何使用 PHP Wrappers 来做到这一点感到非常困惑。我有点困惑的原因是因为我认为包装器依赖于他们自己的模型定义，但我的模型是在学说中定义的。不过，我会使用您制作的那个功能，这肯定会帮助我更好地理解格式。如果可能的话，我会再次研究 PHP 包装器，看看我是否能找到一种方法让它与 Doctrine Entities 一起工作。