ng-grid 为每列显示两个箭头排序图标 Header

Question

在ng-grid中，有两个用于排序的箭头图标，但默认情况下并不是每列都显示所有箭头header。
我知道设置 sortInfo，但我不想在 ng-grid 首次初始化时进行排序。

如何在不触发排序的情况下为每一列 header 显示两个箭头？

--已编辑--

对于那些请求一些代码的人：我的gridOptions是标准的。
我不知道我应该向您提供什么其他代码。

$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>'}
        ]
    };

我想在 ng-grid 首次初始化时实现类似的东西（看到两个箭头出现），而不触发排序：

Answer 1

我已经解决了

我从 ng-grid template 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)" 中用我的自定义范围修改了它。

然后我将 showSortUp(col) 和 showSortDown(col) 作用域函数放入我的控制器中。
col 参数为我们提供了有关 header 列的信息，包括排序方向。
在 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，因为当您同时显示两个箭头时，原始样式被破坏了。

ng-grid 为每列显示两个箭头排序图标 Header

ng-grid Show Two Arrow Sorting Icon for Every Column Header

angularjs

ng-grid