ui-grid - How to pin a ROW to the top

问题

I'm using the angularjs ui-grid and I have a "total" row that I want to pin to the top of the grid no matter what is the current sorting.

How can I accomplish that?

回答1:

I think this is what you are looking for : Row Pinning

Essentially add another hidden column, something like this:

{
 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
}

Row entities which have pinned = true rise to the top, even when other sorting are applied.

回答2:

DISCLAIMER: I know it's not exactly answers the question, but this is how I solved it for now until I'll have a better solution:

Create an other grid above the main grid :

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

with definitions:

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

and then bind the columns of the main grid to the total grid (for width and other adjustments):

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

回答3:

I think you should use something like this

$scope.gridOptions.data.unshift({label:value}); unshift adds it to the top

回答4:

Edit 2 / Actual Solution: The way I finally settled this issue was by using custom header cell templates. I essentially create a second header row by adding a div at the bottom of what was previously my header. Here's a simple version:

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

I store my totals on the controller's $scope and can access them in that div with grid.appScope.totals[whateverThisColumnIs]. This way I can still update them dynamically, but they don't get mixed into a sort function like my previous 'solution' was aiming for.

Edit 1 / Dead-end 'solution': Just ran into a problem with my solution, if your table is long (you have to scroll to get to bottom rows), the totals row will scroll out of view. Going to leave this 'solution' here so no one else makes the same mistake!

I had this same issue but with a twist. Since I was going to need to change the default sorting algorithms for many of the columns anyway, I set my algorithm up to skip the first element in the sort. You can use the sortingAlgorithm property on any columndef that would be part of a sortable column. This is really only a solution if you have only a few sortable columns though. It becomes unmaintainable for huge tables.

回答5:

I couldn't find any built-in feature for ui-grid to keep a specific row at the top of the grid when sorting is applied. But this could be done using sortingAlgorithm parameter in the columnDefs( please refer to http://ui-grid.info/docs/#!/tutorial/Tutorial:%20102%20Sorting).

I have written an algorithm which keeps the row('total' is the particular cell value in the row) at the top of the grid without applying a sorting.

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;
                    }
                }
            }

来源：https://stackoverflow.com/questions/27687724/ui-grid-how-to-pin-a-row-to-the-top