angularjs – Angular-Kendo网格 – 服务器端分页

这是一个使用MVC 5控制器作为从数据源获取的数据的端点的示例.它通过将页面和pageSize发送到控制器来模拟服务器分页,如果需要,您也可以发送take和skip,并随意处理它.

HTML标记

<div ng-controller="MyCtrl">
    <kendo-grid k-options="mainGridOptions"></kendo-grid>
</div>

JavaScript的

function MyCtrl($scope,$http) {
    $scope.mainGridOptions = {
        dataSource: {
            schema: {
                data: "Data",total: "Total"
            },transport: {
                read: function (e) {//You can get the current page,pageSize etc off `e`.
                    var requestData = {
                        page: e.data.page,pageSize: e.data.pageSize,type: "hello"
                    };
                    console.log(e);
                    $http({ method: 'POST',url: 'Home/DataSourceResult',data: requestData }).
                    success(function (data,status,headers,config) {
                        e.success(data);
                        //console.log(data.Data);
                    }).
                    error(function (data,config) {
                        alert('something went wrong');
                        console.log(status);
                    });
                }
            },pageSize: 1,serverPaging: true,serverSorting: true
        },selectable: "row",pageable: true,sortable: true,groupable: true
    }
}

您可以在read：function(e){}声明中获取当前pageSize,page,take,skip以及更多关于参数e的内容.

由于post值引用read函数中的参数,因此每次在网格上更新页面时它们都会更新.这是您每次网格进行更改时可用于更新帖子值的内容.网格然后重新绑定自己.

Home / DataSourceResult控制器

[HttpPost]
    public ActionResult DataSourceResult(int page,string type,int pageSize)
    {
        ResponseData resultData = new ResponseData();
        string tempData = "";
        if (page == 1)
        {
            tempData = "[{"NAME": "Example Name 1","DESCRIPTION": "Example Description 1"},{"NAME": "Example Name 2","DESCRIPTION": null}]";
        }
        else if (page == 2)
        {
            tempData = "[{"NAME": "Example Name 3","DESCRIPTION": "Example Description 3"},{"NAME": "Example Name 4","DESCRIPTION": "Example Description 4"}]";
        }
        resultData.Data = tempData;
        resultData.Total = "4";
        string json = JsonConvert.SerializeObject(resultData);
        json = json.Replace(@"","");
        json = json.Replace(""[{","[{");
        json = json.Replace("}]"","}]");
        return Content(json,"application/json");
    }

非常基本,但正是我需要的,也可以帮助你.这使用了原生的Angular http.get功能,同时仍然允许Kendo Grid完成大部分繁重的工作.