Question

我想使用脚本实现服务器端排序和服务器端过滤，但我没有得到它如何执行，我在互联网上搜索很多，但无法找到任何相关的东西。

这是我的View，其中包含kendo css和脚本文件：

<link href="~/css/kendo.common-material.min.css" rel="stylesheet" />
    <link href="~/css/kendo.rtl.min.css" rel="stylesheet" />
    <link href="~/css/kendo.material.min.css" rel="stylesheet" />
    <div class="table-responsive" ng-controller="GridDemoCtrl">
                <kendo-grid options="mainGridOptions">
                </kendo-grid>
            </div>
   <!-- jQuery -->
    <script src="~/vendor/jquery/jquery.min.js"></script>

    <!-- Angular -->
    <script src="~/vendor/angular/angular.js"></script>
 <script src="~/js/kendo.all.min.js.js"></script>

我的剧本：

app.controller('GridDemoCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.mainGridOptions = {
        dataSource: {
            transport: {
                read: {
                    url: "../Holiday/GetListofHolidays",
                    type: "POST"
                }
            },
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors"
            },
            error: function (e) {
                display_kendoui_grid_error(e);
                this.cancelChanges();
            },
            pageSize: 10,
            serverPaging: true,
            serverFiltering: true
           // serverSorting: true
        },
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: [10, 20, 30]
        },
        filterable: {
            extra: false,
            operators: {
                string: {
                    startswith: "Starts with",
                    eq: "Is equal to",
                    neq: "Is not equal to"
                }
            }
        },
        columns: [
            {
                field: "HolidayName",
                title: "Holiday Name"
            },
            {
                field: "HolidayDate",
                title: "Holiday Date",
                type: "date",
                format: "{0:MM/dd/yyyy}"
                //filterable: {
                //    ui: "datetimepicker"
                //}
            },
     {
         field: "HolidayDiscription",
         title: "Holiday Description"
     }
        ]
    };
}]);

我的控制器和服务器端配置：

[HttpPost]
        public ActionResult GetListofHolidays(DataSourceRequest command)
        {
           var holidayList = _holidayService.GetAllHolidays(command.Page - 1, command.PageSize,null);
           var gridModel = new DataSourceResult
           {
               Data = holidayList.Select(x =>
               {
                   var holidayModel = new HolidayModel();
                   holidayModel.HolidayName = x.HolidayDiscription;
                   holidayModel.HolidayDate = x.HolidayDate;
                   holidayModel.HolidayDiscription = x.HolidayDiscription;
                   return holidayModel;
               }),
               Total = holidayList.TotalCount,
           };
           return Json(gridModel);
        }

public  class DataSourceRequest
    {
        public int Page { get; set; }

        public int PageSize { get; set; }

        public DataSourceRequest()
        {
            this.Page = 1;
            this.PageSize = 10;
        }
    }

public class DataSourceResult
    {
        public object ExtraData { get; set; }

        public IEnumerable Data { get; set; }

        public object Errors { get; set; }

        public int Total { get; set; }
    }

Answer 1

首先像这样声明dataSource。

var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                 url: "../Holiday/GetListofHolidays",
                type: "POST",
                dataType: "json",
                data: {
                    PageSize : dataSource.pageSize()
                    Page: dataSource.page()
                }
            }
        },
        schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors"
                }
    });

在数据中我添加了两个参数 PageSize 和 Page 。您可以从服务器端获取此值。其实我是Java开发人员。在Java中，我可以使用字符串 currentPage = request.getParameter（“Page”）; 和字符串 recordsPerPage = request.getParameter（“Page”）;

在服务器端执行一些逻辑以获取记录。

如何用脚本在kendo网格中实现服务器端排序和过滤？

1 个答案: