jquery - 如何使用 ODATA 和传输 URL 使用 Kendo UI Grid 在线列出项目

问题描述

Kendo UI 网格支持 OData。SharePoint Online 也支持 OData V3。我能够正确配置它以按照以下代码读取数据。

但是我有超过 5k 条记录的列表，并且 SP Online 的阈值限制为 5k。

所以我想配置服务器分页/过滤/排序，我尝试了下面的方法。

在这里它正确呈现前 500 个项目，但下一个按钮单击不适用于动态 url。在 requestEnd 它提供了下一个要执行的查询，但是如何将其与寻呼机更改事件一起工作。

任何帮助将不胜感激！

我尝试使用 Javascript/angularjs 触发多个 API，并首先使用所有项目准备局部变量，然后分配给网格。它的工作，但性能很差。所以期待动态的方法。

var kdatasource = new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: {
                    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('ListTitleWithMoreThan5K')/items" //$scope.NextQuery,
                    dataType: "json",
                    contentType: "application/json",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Accept", "application/json; odata=verbose")
                }
            }
        },
        sort: { field: "ID" , dir: "desc"}, 
        requestEnd: function(e) {
            console.log(e);
            var response = e.response;
            var type = e.type;
            console.log(type); // displays "read"
            if(response)
            {
                //console.log(e.response.d.__next);
                $scope.NextQuery = e.response.d.__next; //getting next query in response. SP Online have 'SkipToken' not 'skip' for listitems. 
                console.log($scope.NextQuery);
            }
        },
        schema: {
            data: function (data) {
                return data.d && data.d.results ? data.d.results : [data.d];
            },
            total: function (data) {
                return 3000;//we can take care this with separate itemcount query
            },
            model: {
                fields: {
                    "ID": { type: "number" },
                    "Title": { type: "string" }
                }
            },
            errors: function (response) {
                console.error(response);
                return response.error;
            }
        },
        page:1,
        pageSize: 500, // this will become "$top" in query
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
});

$("#grid").kendoGrid({
    dataSource: kdatasource,
    columns: [{
                    field: "ID",
                    title: "ID",
                    width: 240
                },{
                    field: "Title",
                    title: "Title",
                    width: 240
                }],
    height: 550,
    groupable: false,
    sortable: true,
    filterable: true,
    pageable: {
        refresh: false,
        //pageSize: 10,
        pageSizes: [100, 200, 500, 1000],                   
        buttonCount: 5,
        change:function(e)
        {
             console.log("grid pager clicked!");
             console.log(e);
             //how to rebind grid for 2, 3, page number click?
        }
    } ,
    dataBound: function(e) {
        //console.log(e); // This is calling!
        //console.log("dataBound");
    }
});

分页/筛选/排序必须与使用 REST API 查询的 SharePoint 一起使用

标签： jqueryodatasharepoint-onlinekendo-ui-grid

从您的代码中，我看到您正在使用 SharePoint REST api 从 5k 列表中读取所有项目，我建议您使用具有一些过滤器的 CAML 获取项目。

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('ListTitleWithMoreThan5K')/items"

https://sharepoint.stackexchange.com/questions/208020/make-caml-query-with-in-rest-api-call

jquery - 如何使用 ODATA 和传输 URL 使用 Kendo UI Grid 在线列出项目

问题描述

解决方案

推荐阅读