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

我需要在Angular-Kendo网格中实现服务器端分页.我无法从Angular方面清楚地了解如何做到这一点.

有人可以帮忙吗？

使用最新版本的Kendo UI (in Beta right now),还有另一种方法可以实现服务器端分页,使用Angular提供的$http.post方法和Kendo Grid读取功能.

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

<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完成大部分繁重的工作.

原文链接：https://www.f2er.com/angularjs/140446.html

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

猜你在找的Angularjs相关文章