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

发布时间：2020-12-17 16:56:07 所属栏目：安全来源：网络整理

导读：在ng-grid中,有两个用于排序的箭头图标,但默认情况下它并未显示每个列标题中的所有箭头. 我知道如何设置sortInfo,但我不想在ng-grid首次初始化时进行排序. 如何在不触发排序的情况下为每个列标题显示两个箭头？ –Edited– 对于那些请求一些代码：我的gridO

在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,因为当您同时显示两个箭头时,原始样式会被破坏.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!