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

在ng-grid中，有两个用于排序的箭头图标，但默认情况下不会在每个列标题中显示所有箭头。
我知道设置sortInfo，但我不想在ng-grid首次初始化时进行排序。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', 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-电网首先被初始化，而不会触发排序：

来源

2015-12-14 tama

你能提供一些代码吗？ ... – katmanco

我不认为ng-grid有能力显示两个箭头。它显示一个，然后如果你点击它，它会改变相反的方向。 –

@Michelem你有任何其他想法如何实现这样的事情？我的观点是我需要向用户显示列头是否可排序 – tama

我已经解决了它。

我从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，因为当你同时显示箭齐发的原始风格被打破。

来源

2015-12-17 04:59:18 tama

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

回答

相关问题