javascript - Kendo Grid C# - 再次选择当前页面而不刷新数据源

Question

我一直在努力解决这个问题，我想做的是:

我有一个从服务器获取数据的数据源，当我转到服务器时，我得到项目列表，然后我必须搜索我必须选择的项目(该项目可以在任何页面中)，之后我有项目和项目所在的页面(假设每个页面有30个项目)，然后我调用LINQ表达式跳过所需的数据量并取30。最后我将这个列表返回给客户端。

当数据到达客户端时，我需要“自动选择”所选项目并更改页面以将用户定位在所选项目所在的正确页面中。我在客户端再次拥有新页面、跳过、选择的值和所有内容。

在不调用新的刷新并再次访问服务器的情况下将页面更改为 kendo 网格数据源，你对我有什么建议？

这是数据源的样子:

return new kendo.data.DataSource({
        serverPaging: true,
        transport: {
            read: {
                url: URLController.Current().getURL('MyURL'),
                contentType: 'application/json',
                accepts: 'application/json',
                type: 'POST'
            },
            parameterMap: function(data, type) {
                if (data) {
                    return JSON.stringify(
                    {
                        data: jsonData,
                        pageSize: data.pageSize,
                        skip: data.skip,
                        take: data.take
                    });
                }
            }
        },
        schema: {
            data: function (data) {
                var dropDownData = JSON.parse(data);
                gridElement.attr('data-model', JSON.stringify({ data: data }));

                return dropDownData.Data;
            },
            total: function (data) {
                var dropDownData = JSON.parse(data);
                return dropDownData.total;
            },
            model: {
                id: 'ID'
            }
        },
        pageable: true,
        pageSize: 30,
        error: function(e) {
            alert('Error ' + e);
        }
    });

当网格数据有界时，我必须将页面更改为当前页码，然后选择当前项目。

grid.one('dataBound', function (e) {
            var currentGridElement = this.element;
            var currentModel = currentGridElement.attr('data-model');
            var currentJsonData = parseDropDownDataJSONString(currentModel).data;
            var gridDataSource = this.dataSource;
            var selection = gridDataSource.get(currentJsonData.selectedValue);
            if (selection != undefined) {
                var row = currentGridElement.find('tbody>tr[data-uid=' + selection.uid + ']');
                if (row != undefined) {
                    currentGridElement.attr('data-closeByChange', false);
                    gridDataSource.page(currentJsonData.pageNumber);
                    this.select(row);
                    dexonDropDownGrid.combobox().text(selection.DISPLAY);
                }
            }
            var aaaa = 0;
        });

这就是我的数据绑定(bind)事件监听器的样子，当我尝试设置页面时它会再次调用服务器并且我有更多的延迟来加载正确的数据。

有什么办法可以解决吗？

谢谢

Answer 1

有同样的问题。

我是如何解决这个问题的(不是有史以来最好的解决方案，但它有效):

var forcedPageChange = false;
var cachedResult;

var dataSource = new kendo.data.DataSource({
    transport: {
        read: function (options) {
            if (forcedPageChange) { // prevent data request after manual page change
                forcedPageChange = false;
                options.success(cachedResult);
                cachedResult = null;
                return;
            }

            gridDataProvider.getData() // promise of data
                    .then(function (result) {
                        // check if current page number was changed
                        if ($scope.gridConfig.dataSource.page() !== result.pageNumber ||
                                $scope.gridConfig.dataSource.pageSize() !== result.rowsPerPage) {
                            cachedResult = _.clone(result);
                            forcedPageChange = true;
                            options.page = result.pageNumber;
                            options.pageSize = result.rowsPerPage;
                            $scope.gridConfig.dataSource.query(options);
                        }

                        options.success(result);
                    }, function () {
                        options.error();
                    });
        }
    },
    schema: {
        data: function (response) {
            return response.items;
        },
        total: function (response) {
            return response.totalCount;
        }
    },
    //...
    serverPaging: true,
    serverSorting: true,
    serverFiltering: true
});

我发现 dataSource.page(newPageNumber) 在这种情况下不起作用。它只是将页码降为 1。

这个解决方案有效，但我仍然有一个错误，在 dataSource.query(options) 之后缺少排序图标...