在ng-grid中,有两个用于排序的箭头图标,但默认情况下它并未显示每个列标题中的所有箭头.
我知道如何设置sortInfo,但我不想在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时实现这样的事情(参见两个箭头),而不触发排序:
解决方法
我已经解决了.
我从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,因为当您同时显示两个箭头时,原始样式会被破坏.