Question

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

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

- 已编辑 -

对于那些请求一些代码的人：我的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参数为我们提供了有关标题栏的信息，包括排序方向从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为每个列标题显示两个箭头排序图标

1 个答案: