Question

我有一个使用ui.grid和无限滚动模块的angularjs应用程序。我正在使用documentation中描述的整行过滤，如下所示：

function MyController($scope){
    var that = this;

    var getData = function(){
        //logic left out for brevity
    };
    var onRegisterApi = function(gridApi){
        gridApi.grid.registerRowsProcessor(function (rows) {
            return that.filterRowProcessor.apply(that, [rows]);
        }, 200);

        gridApi.infiniteScroll.on.needLoadMoreData($scope, getData);
    };

    this.options["onRegisterApi"] = onRegisterApi;
}

//...code excluded for brevity...

MyController.prototype.filterRowProcessor = function(renderableRows){
    renderableRows.forEach(function(row) {
        if (this.selectedMap[row.entity["Id"]]) {
            row.visible = false;                
        }
    });
    return renderableRows;
}

想法是过滤掉属于特定集合的Id的行;它按设计工作。我的问题是，当我获得我的第一页数据时，过滤器行处理器会从我的滚动条消失的可见性中删除足够的行。这反过来导致无限滚动api永远不会引发“needLoadMoreData”事件。

这是未知的领域，还是有办法解决这个问题？如果它更容易做到另一种方式，我也愿意不通过该机制进行过滤。

更新（2016年8月1日）

我找到了一个我不太喜欢的作品。基本上我有一个已知的页面大小，如果进入网格的数据小于该页面大小，并且我的回调为“查询结束”返回false，我会自动发出下一页查询。我希望通过grid api找到一个解决方案，但是现在这将有效。

if(this.itemsSource.data.length < constants.PAGE_SIZE && !continuation.endOfQuery){
    //call get data again
}

Answer 1

在考虑了一段时间后，我决定采用以下方法作为我的解决方案。如果以不同的方式做事更有意义，我仍然愿意接受建议。我决定计算可见总行数的高度，而不是依赖于一段数据（与网格的视口相比）。

//this method get called from the callback from needsMoreData
//hasMoreData is the same boolean flag sent in to dataLoaded
var shouldRetrieveMore = function (gridApi, hasMoreData){
    if (!hasMoreData) {
        return false;
    }

    var totalCountOfRows = gridApi.grid.getVisibleRowCount();
    if (totalCountOfRows === 0) {
        return true;
    }

    var height = gridApi.grid.getViewportHeight();
    var heightOfRow = gridApi.grid.getVisibleRows()[0].$$height;

    return ((heightOfRow * totalCountOfRows) <= height);
}

该解决方案的另一个附录可能是对所有行的$$高度求和，但我决定反对它，因为在我的使用中它们总是相同的高度。

具有行处理器过滤功能的ui-grid无限滚动

1 个答案: