Ng-grid Show a two-arrow sort icon for each column in a column

There are two arrow icons in the ng grid for sorting, but by default all arrows in each column heading are not displayed.
I know about installation sortInfo, but I don't want to sort when the ng grid is initialized first.

How can I show two arrows for each column heading without triggering sorting?

- Edited -

For those who request some code: Mine gridOptionsare standard.
I don't know what other code should I provide you.

$scope.gridOptions = {
        data: 'myData',
        enablePaging: true,
        showFooter: true,
        totalServerItems: 'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        multiSelect: false,
        enableHighlighting: true,
        sortInfo: { fields: [], columns: [], directions: [] },
        columnDefs: [
            {field: 'name', displayName: 'Company'},
            {field: 'meta.orders', displayName: 'Orders'},
            {field: 'meta.expenses', displayName: 'Expenses', cellFilter: 'currency: \'IDR \''},
            {field: 'meta.commissions', displayName: 'Commisions', cellFilter: 'currency: \'IDR \''},
            {field: 'status', displayName: 'Status'},
            {field: '', cellTemplate: '<a ng-click="details(row)" class="btn btn-link" id="{{row.entity._id}}">Details</a>'}
        ]
    };

I want to achieve something similar (see two arrows) when the ng-grid is first initialized without causing sorting:

I want to achieve this when the ng grid is initialized first.  And without starting sorting

+4
source share
1

.

ng-grid docs.

var customHeaderCellTemplate = '<div ng-click="col.sort()" ng-class="{ ngSorted: !noSortVisible }">'+
'<span class="ngHeaderText">{{col.displayName}}</span>'+
'<div class="ngSortButtonDown" ng-show="showSortUp(col)"></div>'+
'<div class="ngSortButtonUp" ng-show="showSortDown(col)"></div>'+
'</div>'+
'<div ng-show="col.allowResize" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';

ng-show="showSortUp(col)" ng-show="showSortDown(col)".

scope showSortUp(col) showSortDown(col) .
col , .
ng-grid sortDirection. col sortDirection, .

$scope.showSortUp = function(col) {
    if(col.sortDirection == 'asc') {
        return true;
    } else if(col.sortDirection == 'desc') {
        return false;
    } else {
        return true;
    }
}


$scope.showSortDown = function(col) {
    if(col.sortDirection == 'desc') {
        return true;
    } else if(col.sortDirection == 'asc') {
        return false;
    } else {
        return true;
    }
}

, .ngSortButtonUp .ngSortButtonDown css, , .

+1

Source: https://habr.com/ru/post/1619818/


All Articles