Question

我目前正在尝试我的项目上的kendo网格虚拟化/无限滚动，但我无法使其正常工作（它确实有效但行为不正确）。

我遇到的问题是对后端服务的请求，尤其是参数地图页面和跳过这里的行为很奇怪就是这个场景

假设我的数据库有50个数据，正确的行为是

首次加载将是page = 1，跳过0，pageSize = 20，take = 20
第二次加载将是page = 2，skip = 20，pageSize = 20，take = 20
第三次加载将是page = 3，skip = 40，pageSize = 20，take = 20

相反它是

首次加载将是page = 1，跳过0，pageSize = 20，take = 20
第二次加载将是page = 1，跳过0，pageSize = 20，take = 20
第三次加载将是page = 2，skip = 20，pageSize = 20，take = 20

它没有加载剩余的10个数据，之前在我应用限制要求之前它从第1页跳到3是更奇怪的

我已经研究了kendo doc's here.

我试图使高度一致
我将服务器分页设置为false
我将pageSize设置为视图上可见数据的3倍以上，最多为6个数据，所以我将其设置为pageSize = 20

但无济于事

这是我自定义的数据源代码

var dataSource = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                var ajaxParam = {
                    url: Const.url,
                    dataType: "json",
                    data: customParameterMap(dataSource),
                    cache: false,
                    success: function (result) {
                        options.success(result);
                    },
                    error: function (result) {
                        options.error(result);
                    }
                };
                invokeSecuredRESTRequest(loadUserLogin().userName, ajaxParam);
            }
        },
        schema: {
            model: _model,
            parse: function (response) {
                var parser = dataSource.parser;

                if (typeof parser === "function") {
                    var newResponse = parser(response);

                    return newResponse;
                } else {
                    return response;
                }
            },
            data: "data",
            total: "total"
        },
        error: function(e) {
            var msg = e.xhr.responseText;
            alert(msg);
        },
        requestEnd: function(){
            if (gridTarget) {
                kendo.ui.progress(gridTarget, false);
            }
        },
        serverFiltering: true,
        serverSorting: true,
        serverPaging: false,
        pageSize: 20
    });
    dataSource.setGridTarget = function(target){
        gridTarget = target;
        kendo.ui.progress(gridTarget, true);
    };
    dataSource.showProgress = function(isShowProgress) {
        if (gridTarget) {
            kendo.ui.progress(gridTarget, isShowProgress);
        }
    };
    return dataSource;
};

这是我的html和网格模板

<div id="scr-inbox-01-list"
     data-role="grid"
     data-columns="[{ 'field': 'fullName', 'width': 270, headerAttributes: {style: 'display: none'}}]"
     data-row-template="grid-template"
     data-auto-bind="false"
     data-selectable="trueSelectable"
     data-scrollable="{ virtual: true }"
     data-bind="source: dataSource, events: { change: onChange, dataBound: onDataBound}"
     style="min-height: 998px; height: 998px; box-sizing: border-box;overflow: hidden;list-style: none;padding-left: 0; margin-top:0px; margin-bottom: 0px;">
</div>
<script type="text/x-kendo-template" id="grid-template">
<tr style="height:50px">
   <td>
      <div> #: firstName #</div>
      <div> #: lastName #</div>
   </td>
</tr>
</script>

编辑：我正在添加我的customParameterMap

var customMrParameterMap = function (param, anotherParam) {
var params = {
    take: param.take(),
    skip: param.skip(),
    page: param.page(),
    pageSize: param.pageSize(),
    sort: kendo.stringify(param._sort),
    filter: kendo.stringify(param._filter),
    group: param._group,
    aggregate: param._aggregate
};
var _anotherParam = anotherParam || null;
return param.options.serverPaging || param.options.serverFiltering || param.options.serverSorting ? params : _anotherParam;
};

如果有人知道可能导致这种情况发生的原因，请告诉我？

Answer 1

我最终发现我的自定义参数映射以及我使用data: customParameterMap(dataSource)传递过滤器，页面，获取，跳过和排序的方式以某种方式打破了无休止的滚动行为（我很难确切地知道为什么）。而只是直接传递read函数。

transport: {
   dataType: "json",
       read: function(options) {
          param = {};
          param.page = options.data.page;
          param.take = options.data.take;
          param.skip = options.data.skip;
          param.pageSize = options.data.pageSize;
          if(options.data.sort) param.sort = JSON.stringify(options.data.sort);
          if(options.data.filter) param.filter =  JSON.stringify(options.data.filter);
          var success = function(result){
              options.success(result);
          }
          var error = function(result){
              options.error(result);
          }
          var url = Const.Url;
                Rest.get(url,param,success,error);
      }
}

Kendo Grid Infinite Scrolling没有请求正确的ParameterMap（页面，跳过）？

1 个答案: