即使定义了页面大小,Kendo Grid也会显示所有记录

Question

我是kendo UI的新手,我正在尝试使用Webapi实现Kendo网格,下面的分页不会产生任何影响.API

  public IList<Customer> GetCustomers(int take, int skip)
        {
            this.Customers = FillData.Customers;
            this.Orders = FillData.Orders;
            return Customers.Skip(skip).Take(take).ToList();
        }

和javascript

 $(document).ready(function () {
            var element = $("#grid").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: "/api/GridData/GetCustomers",
                        dataType: "json" 
                    },
                    pageSize: 6,
                    serverPaging: true,
                },
                height: 600,
                sortable: true,
                pageable: true,
                //detailInit: detailInit,
                //dataBound: function () {
                //    this.expandRow(this.tbody.find("tr.k-master-row").first());
                //},
                columns: [
                    {
                        field: "FirstName",
                        title: "First Name",
                        width: "110px"
                    },
                    {
                        field: "LastName",
                        title: "Last Name",
                        width: "110px"
                    },
                    {
                        field: "Country",
                        width: "110px"
                    },
                    {
                        field: "City",
                        width: "110px"
                    },
                    {
                        field: "Title"
                    }
                ]
            });
        });

Odata服务telerik也提供了相同的功能.

Answer 1

好吧,几个月前我写了一篇博客文章 - Kendo UI Grid - 服务器端分页,过滤和排序.这应该可以解决您的查询.该帖子的主要重点是向WebAPI发送正确的参数.我已经展示了一个示例网格和数据源代码以及发送到WebAPI的请求和响应对象.如果您需要任何解释,请告诉我.

编辑:在此处发布所有内容,因为仅链接不受欢迎.

网格

下面是一个Kendo UI Grid声明,我们将为其实现服务器端操作.

$("#sampleGrid").kendoGrid({
    columns: [
        { field: "ID", title: "ID", width: 50 },
        { field: "Label", title: "Label", template: "<span class='k-link bold' title='${Description}'>${Label}</span>" },
        { field: "Description", title: "Description" }
    ],
    dataBound: function () { this.element.find('tbody tr:first').addClass('k-state-selected') },
    pageable: {
        refresh: true,
        pageSizes: [10, 15, 20, 25]
    },
    resizable: true,
    reorderable: true,
    filterable: true,
    groupable: true,
    selectable: true,
    sortable: true
});

数据源

下面的DataSource发送一个对服务器方法的调用,该地址保存在svcSampleUrl中并在"transport"属性中分配给它.无需单独进行ajax调用来获取数据源的数据,

将serverPaging,serverFiltering和serverSorting设置为true可使Kendo UI Grid DataSource在用户触发以下任何一个事件时发送服务器调用; 更改页面,更改过滤器以及更改列的排序.

var sampleDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: svcSampleUrl,
            contentType: "application/json; charset=utf-8",
            type: "POST",
            dataType: "json"
        },
        parameterMap: function (options) {
            model.Take = options.take;
            model.Skip = options.skip;
            model.Sort = options.sort;
            model.Filter = options.filter;
            return kendo.stringify(model);
        }
    },
    schema: {
        data: "sampleDTOList",
        //  another way to accept the response if some particular values need processing
        //data: function (response) {
        //  //some implementation with the response values
        //  return response.WorklistDTOList;
        //},
        total: "totalItems",
        model: {
            fields: {
                ID: { type: "number" },
                Label: { type: "string" },
                Description: { type: "string" }
            }
        }
    },
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true,
    pageSize: 10,
});

参数map属性允许我们将一组默认参数和我们的自定义参数一起发送回服务器.默认参数包括分别对应于页面大小,要跳过的记录数量,排序条件和过滤条件数组的"take","skip","sort"和"filter".由于可能还需要发送其他参数,因此在具有其他值的模型中设置默认参数值.Kendo.stringify应用于模型并作为完整的请求对象返回.

数据和总计

DataSource架构包含两个属性; "数据"和"总数".其中每个都是响应对象中我们期望结果的属性名称.我已将"sampleDTOList"分配给"data"属性,因为我的响应对象将包含该名称下的记录列表.同样,我已将"totalItems"指定为"total"属性."total"属性接受所有记录的计数的数值,而不管当前页面上返回的数量.这样,DataSource就知道实际有多少记录以及要显示多少页面.

注意:此处未探索该模型,仅作为可以使用的任何模型的占位符引用.

请求

Request对象包含确切的属性,作为DataSource设置为发送到服务器的默认和自定义参数.

public class FilterDTO
{
    public int Take { get; set; }
    public int Skip { get; set; }
    public List<SortCriteria> Sort { get; set; }
    public List<FilterCriteria> Filter { get; set; }

    public string ID { get; set; }
}

public class SortCriteria
{
    public string field { get; set; }
    public string dir { get; set; }
}

public class FilterCriteria
{
    public string field { get; set; }
    public string operator { get; set; }
    public string value { get; set; }
}

服务器端

这是我们接收调用的地方,其中包含操作数据所需的所有参数.这是一个简单的方法,可以使用筛选结果的所有参数调用数据库存储过程.然后,存储过程应根据给定页面大小,要跳过的记录数量,排序条件,过滤条件数组以及我已由调用请求中包含的模型发送的任何其他过滤器参数返回数据集.页码虽然需要根据我们的信息计算.

[HttpPost]
[ActionName("GetItems")]
public SampleResponse GetItems(FilterDTO filterDTO)
{
    //Calling a different layer for the read operation based in the parameter values
    return BusinessLayer.GetItems(filterDTO);
}

页码

由于我们从应用程序的客户端收到"take"和"skip",因此根据给出的信息可以轻松计算所需的分页数.当我们知道要跳过的页面大小和记录数量时,我们可以通过应用以下规则获取页码:

pageNo = (skip + take) / take

响应

Response对象包含DataSource所需的两个属性,如前所述; 一个用于"数据",一个用于模式的"总"属性.

public class SampleResponse : BaseResponse
{
    private List<SampleItems> SampleDTOList;
    public List<SampleItems> sampleDTOList
    {
        get { return SampleDTOList; }
        set { SampleDTOList = value; }
    }
    public int totalItems { get; set; }
}