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

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

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

–Edited–

对于那些请求一些代码:
我的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',{field: 'status',displayName: 'Status'},{field: '',cellTemplate: '<a ng-click="details(row)" class="btn btn-link" id="{{row.entity._id}}">Details</a>'}
        ]
    };

我想在首次初始化ng-grid时实现这样的事情(参见两个箭头),而不触发排序:

I want to achieve like this when the ng-grid first initialized. And without triggering the sort

解决方法

我已经解决了.

我从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 params为我们提供了有关标题列的信息,包括排序方向.
从ng-grid源代码中,显示箭头由sortDirection变量控制.在col params中,我们可以获取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,因为当您同时显示两个箭头时,原始样式会被破坏.

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...