如何获取UI-Grid无限滚动模式下当前屏幕显示的行数据？

核心思路 #

UI-Grid本身就会自动跟踪当前渲染到屏幕上的行范围，我们可以通过它提供的原生API拿到这个范围，再从处理后的数据集里提取对应的数据即可，完全不用自己去计算屏幕尺寸和行高这些复杂因素~

具体实现步骤 #

• 第一步：获取当前可见行的渲染范围
  UI-Grid的gridApi.core.getRenderedRange()方法能直接返回当前屏幕显示行的索引范围，返回的对象包含两个关键属性：

  • topRow：当前可见区域第一行的索引（从0开始计数）
  • bottomRow：当前可见区域最后一行的索引

• 第二步：提取对应行的数据
  这里要区分两种场景：

  1. 如果你的grid没有过滤、排序或分组逻辑，直接从原始数据源gridOptions.data中截取对应索引的行就行；
  2. 如果有过滤、排序等操作，gridOptions.data是原始未处理的数据，此时得用gridApi.grid.rows——这是经过过滤排序后的行对象集合，每个行对象的entity属性就是对应的原始业务数据。

代码示例 #

下面是适配了过滤/排序场景的完整代码（假设你已经在grid初始化时保存了gridApi）：

function openEditModalWithVisibleRows() {
    // 获取当前可见行的渲染范围
    var renderedRange = $scope.gridApi.core.getRenderedRange();
    var startIdx = renderedRange.topRow;
    var endIdx = renderedRange.bottomRow;

    // 拿到经过过滤排序后的行对象集合
    var processedRows = $scope.gridApi.grid.rows;

    // 截取并提取原始业务数据
    var visibleRowData = processedRows.slice(startIdx, endIdx + 1).map(row => row.entity);

    // 将数据传入模态窗口（替换成你自己的模态窗口打开逻辑）
    $uibModal.open({
        templateUrl: 'your-edit-modal.html',
        controller: 'EditModalController',
        resolve: {
            visibleRows: function() {
                return visibleRowData;
            }
        }
    });
}

注意事项 #

• 这个方法完全适配屏幕尺寸变化，因为getRenderedRange()会实时根据当前grid的可视区域更新索引范围；
• 如果是你自己实现的自定义无限滚动逻辑（而非UI-Grid自带的），可能需要监听grid的滚动事件结合行高计算可见行，但自带的无限滚动用上面的方法就足够了；
• 确保在调用getRenderedRange()时，grid已经完成渲染（比如放在按钮点击事件里，或者grid的gridApi.core.renderingComplete事件回调中）。

内容的提问来源于stack exchange，提问作者Nimchip