Question

我使用的是angularjs ui-grid，我有一个＆＃34;总计＆＃34;无论当前的排序是什么，我想将其固定到网格顶部的行。

我该如何实现？

Answer 1

我认为这正是您所寻找的：Row Pinning

基本上添加另一个隐藏列，如下所示：

{
 field: 'pinned',
 visible: false, 
 sort: {direction: uiGridConstants.ASC, priority: 0}, //use uiGridConstants.DESC for pinning to the bottom
 suppressRemoveSort: true, 
 sortDirectionCycle: [uiGridConstants.ASC]  //use uiGridConstants.DESC for pinning to the bottom
}

即使应用了其他排序，pinned = true的行实体也会上升到顶部。

Answer 2

免责声明：我知道这并没有完全回答这个问题，但这是我现在解决的问题，直到我找到更好的解决方案：

在主网格上方创建一个其他网格：

<div style="height:30px" ui-grid="totalGridOptions"></div>
<div ui-grid="gridOptions" class="grid"></div>

有定义：

$scope.totalGridOptions = {showHeader:false,enableHorizontalScrollbar:false};

然后将主网格的列绑定到总网格（用于宽度和其他调整）：

$scope.$watch('gridOptions', function (newVal) {
    $scope.totalGridOptions.columnDefs = newVal.columnDefs;
}, true);

Answer 3

我认为你应该使用这样的东西

$ scope.gridOptions.data.unshift（{标号：值}）; unshift将它添加到顶部

Answer 4

编辑2 /实际解决方案：我最终解决此问题的方法是使用自定义标题单元格模板。我基本上通过在我之前的标题的底部添加div来创建第二个标题行。这是一个简单的版本：

<div class="super-special-header>
  <div class="header-display-name">{{col.displayName}}</div>
  <div class="totals-row">{{grid.appScope.totals[col.field]}}</div>
</div>

我将我的总计存储在控制器的$ scope上，并且可以使用grid.appScope.totals [whateverThisColumnIs]在该div中访问它们。通过这种方式，我仍然可以动态更新它们，但它们并没有像我之前的解决方案那样混合到排序函数中。瞄准了。

编辑1 /死胡同解决方案＆＃39; ：如果你的表很长（你必须滚动到最底行），我的解决方案遇到了问题，总行将滚出视图。要离开这个解决方案＆＃39;这里没有其他人犯同样的错误！

我有同样的问题，但有一个转折。由于我还需要更改许多列的默认排序算法，因此我将算法设置为跳过排序中的第一个元素。您可以在任何可作为可排序列的一部分的columndef上使用sortingAlgorithm属性。如果您只有几个可排序的列，这实际上只是一个解决方案。对于巨大的桌子来说，它变得不可维护。

Answer 5

我找不到ui-grid的任何内置功能，无法在应用排序时将特定行保留在网格顶部。但这可以通过使用columnDefs（请参阅http://ui-grid.info/docs/#!/tutorial/Tutorial:%20102%20Sorting）中的sortingAlgorithm参数来完成。

我编写了一种算法，该算法将行（“ total”是该行中的特定单元格值）保持在网格顶部，而无需进行排序。

var sortingAlgorithm = function (a, b, rowA, rowB, direction) {
               if (direction == 'total') {
                    if (a == 'total') {
                        return 0;
                    }
                    return (a < b) ? -1 : 1;
                } else {
                    if (a == 'total') {
                        return 0;
                    }
                    if (b == 'total') {
                        return 1;
                    }
                }
            }

ui-grid - 如何将ROW固定到顶部

5 个答案: