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顯示每個列標題的兩個箭頭排序圖標

回答

相關問題