如何在 Kendo UI 网格上执行服务器端过滤

Question

我正在尝试为 Kendo UI 网格（仅限客户端）实施服务器端过滤。我不确定如何传递在过滤器框中输入的过滤器运算符和值。我能够实现服务器分页，并希望过滤与服务器分页一起工作，即显示第 2 页，共 5 个过滤行项目。我看到了一些将请求绑定到 "DataSourceRequest" 对象的示例，但我们没有服务器端 Kendo UI 的许可证，只能使用客户端更改来实现它。

这是我的 jQuery 代码：

var page = 1;
var pageSize = 5;
var title = "test";

var selectWork = function (e) {
    alert("selected");
};

$("#selectWorkGrid").empty();
$("#selectWorkGrid").kendoGrid({
    dataSource:
    {
        transport: {
            read: {
                url: "http://example.com/" + "work/SearchWorkJ?worktitle=" + title,
                dataType: "json",
                contentType: "application/json",
                data: {
                    page: page,
                    pageSize: pageSize
                }
            },
            serverFiltering: true,                    
            parameterMap: function (data, type) {
                if (type == "read") {
                    return {
                        page: data.page,
                        pageSize: data.pageSize
                    }
                }
            }
        },
        schema: {
            model: {
                id: "workId",
                fields: {
                    workId: { type: "number" },
                    workTitle: { type: "string" },
                    writers: { type: "string" },
                    durationInMmSs: { type: "string" }
                }
            },
            data: "data",
            total: "total"
        },
        pageSize: pageSize,
        serverPaging: true,
        serverFiltering: true
    },
    sortable: true,
    resizable: true,
    columnMenu: false,
    filterable: {
        mode: "row",
        extra: false,
        operators: {
            string: {
                startswith: "Starts with",
                eq: "Is equal to",
                neq: "Is not equal to"
            }
        }
    },
    noRecords: {
        template: "No results available."
    },
    pageable: {
        numeric: false,
        refresh: true,
        buttonCount: 15
    },
    scrollable: false,
    columns: [
        {
            field: "workTitle",
            title: "Title",
            template: "#=workTitle#"
        },
        {
            field: "writers",
            title: "Writers",
            filterable: false,
            template: "${writers == null ? '':writers}",
            width: 300
        },
        {
            field: "durationInMmSs",
            title: "Duration",
            filterable: false,
            headerAttributes: { style: "text-align:right;" },
            attributes: { style: "text-align:right;" },
            width: 80
        },
        { command: { text: "Select", click: selectWork }, title: "", width: 60 }
    ]
});

控制器操作返回 json:

public ContentResult SearchWorkJ(string workTitle, int page = 0, int pageSize = 0)
{
    var worksJson = "";
    var works = WorkService.SearchWork(workTitle, page, pageSize);
    if (works != null)
    {
        // Set total to upto current record + 1 so that next button works in kendo
        int totalCount = page * pageSize + 1;
        var sortedWorks = new List<WorkViewModel>();
        sortedWorks.AddRange(works.Select(w => new WorkViewModel
        {
            WorkId = w.WorkId,
            WorkTitle = w.WorkTitle,
            Writers = w.Writers,
            DurationInMmSs = w.Duration
        }).OrderBy(w => w.WorkTitle));
        worksJson = JsonConvert.SerializeObject(new { total = totalCount, data = sortedWorks });
    }
    return new ContentResult { Content = worksJson, ContentType = "application/json" };
}

Answer 1

如果你看这个

https://dojo.telerik.com/EhUNUwOr

<div id="my-grid"></div>
  <script>
    $('#my-grid').kendoGrid({
        dataSource: {
            serverFiltering: true,
          serverSorting: true,
          serverPaging: true,
          pageSize: 5,
          transport: {
            read: function(options) {

              $.ajax({
                url: '/yourapi',
                contentType: 'application/json',
                dataType: 'json',
                type: 'POST',
                data: JSON.stringify(options.data),
                success: function(result) {
                    options.success(result); 
                }
              })

            }
          },
          schema: {
            id: 'Id',
            data: 'Data',
            total: 'Total',
            errors: 'Errors',
            fields: [
              { field: 'Id', type: 'number' },
              { field: 'FirstName', type: 'string' },
              { field: 'LastName', type: 'string' }
            ]
          },
          filter: {
            filters: [{ field: 'FirstName', operator: 'eq', value: 'David' }] 
          }
        },
    });
  </script>

这将发送

{"take":5,"skip":0,"page":1,"pageSize":5,"filter":{"filters":[{"field":"FirstName","operator":"eq","value":"David"}]}}

到您的服务器/api

现在，如果您有共享此结构的模型，您可以按以下格式回复

{
   "Data" : <your array of models>,
   "Total" : the number of models that fits your filter regardless of the filter, this helps kendo grid knowing how many pages there is for the pager.,
   "Errors" : is mostely used for create and update so just return null
}

从这里开始，这是对上述答案的奖励。

我注意到您正在使用 CSharp，因此您有两个选项可以应用从 Queryable 创建动态查询。

使用我开源的库 https://github.com/PoweredSoft/DynamicLinq 在 Nuget https://www.nuget.org/packages/PoweredSoft.DynamicLinq/

上可用

您可以在 git 集线器上查看示例。您必须调整代码，但它应该可以帮助您入门。

https://github.com/PoweredSoft/DynamicLinq#how-it-can-be-used-in-a-web-api

[HttpGet][Route("FindClients")]
public IHttpActionResult FindClients(string filterField = null, string filterValue = null, 
string sortProperty = "Id", int? page = null, int pageSize = 50)
{
    var ctx = new MyDbContext();
    var query = ctx.Clients.AsQueryable();

    if (!string.IsNullOrEmpty(filterField) && !string.IsNullOrEmpty(filterValue))
    query = query.Query(t => t.Contains(filterField, filterValue)).OrderBy(sortProperty);

    //  count.
    var clientCount = query.Count();
    int? pages = null;

    if (page.HasValue && pageSize > 0)
    {
    if (clientCount == 0)
        pages = 0;
    else
        pages = clientCount / pageSize + (clientCount % pageSize != 0 ? 1 : 0);
    }

    if (page.HasValue)
    query = query.Skip((page.Value-1) * pageSize).Take(pageSize);

    var clients = query.ToList();

    return Ok(new
    {
    total = clientCount,
    pages = pages,
    data = clients
    });
}

另一种方法是使用

https://weblogs.asp.net/scottgu/dynamic-linq-part-1-using-the-linq-dynamic-query-library

如何在 Kendo UI 网格上执行服务器端过滤

How to perform server side filtering on Kendo UI Grid

asp.net-mvc

asp.net-ajax

kendo-ui

kendo-grid