KendoUI网格服务器绑定示例

时间:2017-04-20 20:49:42

标签: kendo-grid

我已经成功设置了几个KendoUI网格,但我无法使用服务器端分页来工作。

我修改了我的休息服务,所以我将返回一个总值(现在硬编码)。

我还修改了我的javascript源代码。 [见下文]。

通常我只是得到一个空白屏幕。

非常感谢任何帮助。

脚本:

$(document).ready(function(){

        // Setup Rest Service
        var loc = ( location.href );
        var url = loc.substring( 0, loc.lastIndexOf( "/" ) ) + "/xpRest.xsp/test/";


        dataSource = new kendo.data.DataSource({
            pageSize: 20,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,            transport : {
                read : {
                    url : url + "READ",
                    dataType : "json"
                },
                type : "READ"
            },
            schema : {
                    total: "total",
                    model : {
                    id : "unid",
                    fields   : {
                        unid : {
                            type : "string",    
                            nullable : false
                        },  
                            tckNbr : {
                            type : "string",
                            editable : false
                        },
                            tckSts : {
                            type : "string",
                            editable : false
                        }
                }
            }
        }
        });

            grid = $("#grid-databound-dataItem").kendoGrid({    
            dataSource : dataSource,
            height: 550,
            filterable: true,
            sortable: true,
            pageable: true,         
            columns : [         
                       {field : "tckNbr", title : "Number", type: "string"},
                       {field : "tckSts", title : "Status", type: "string"}
                       ]
            }).data("kendoGrid");
        });  

JSON Feed:

[  
  {
      "total":100,
        "data":
        [         
          {
              "tckNbr":"3031",
              "tckSts":"1 Not Assigned",
              "unid":"0014DA9095BF6D638625810700597A36",
              "tckReqs":"Bryan S Schmiedeler",
              "tckNts":
              [
                "Bryan DeBaun"
              ],
              "tckBUs":
              [
                "NAP\/IFI"
              ],
              "tckApps":"GTM",
              "tckType":"Issue",
              "tckPriority":"Medium"
          },          
          {
              "tckNbr":"3031",
              "tckSts":"1 Not Assigned",
              "unid":"00598976D88226D2862581070059AD25",
              "tckReqs":"Bryan S Schmiedeler",
              "tckNts":
              [
                "Bryan DeBaun"
              ],
              "tckBUs":
              [
                "NAP\/IFI"
              ],
              "tckApps":"GTM",
              "tckType":"Issue",
              "tckPriority":"Medium"
          }        
        ]
    }
]

1 个答案:

答案 0 :(得分:1)

更正您的JSON提要,您需要返回对象而不是数组:

{
   "total": 10,
   "data": []
}

之后说明什么是数据以及模式中的总数:

schema : {
           total: "total",
           data: "data",
              .
              .
         }

注意:如果您模拟数据(例如总数:100,数据 - >尺寸为2),您的paginatio将由total参数而非数据本身创建。您将看到5个页面具有相同的数据(没关系)。