Angularjs 前端数据用orderBy排序,单表头和多表头处理,单表头不默认排序

xiaoxiao2021-02-28  140

  orderBy这个功能其实是内置的过滤器,他可以在html和js代码中使用

    html:{{ orderBy_expression | orderBy : expression : reverse}}

    js    :$filter('orderBy')(array, expression, reverse)

    在这里我们只看html标签的运用,可以看出来他需要传入三个值

      1.orderBy_expression :你需要排序的数组

      2.expression :你需要根据哪个条件排序

      3.reverse :正序还是倒序(boolean)

下面是单个表头:

<table class="table table-bordered table-striped table-hover"> <thead> <tr> <th class="m-th" ng-repeat="service in servicesTitle" ng-click="toggle_sort(service.name,'services')"> {{service.value}} <i class="position-rg" ng-class="{'fa fa-sort-desc sort_bg':isSortUp(service.name,'services'),'fa fa-sort-asc sort_bg':isSortDown(service.name,'services')}"></i> <i class="fa fa-sort position-rg" aria-hidden="true"></i> </th> </tr> </thead> <tbody ng-show="services.filteredList.length == 0"> <tr> <td colspan="1">没有查询到任何数据</td> </tr> </tbody> <tbody> <tr ng-click="getServiceNodesList(info)" ng-class="statusStyle(info)" ng-repeat="info in services.filteredList | filter:search.serviceName | ownOrderBy:services.sort:services.reverse | pagination:services.pageNo:services.pageSize"> <td>{{info}}</td> </tr> </tbody> </table> 下面是多个表头:

<table class="table table-bordered table-striped table-hover"> <thead> <tr> <th>选中</th> <th ng-repeat="node in nodesTitle" class="m-th" ng-click="toggle_sort(node.name,'nodes')"> {{node.value}} <i class="position-rg" ng-class="{'fa fa-sort-desc sort_bg':isSortUp(node.name,'nodes'),'fa fa-sort-asc sort_bg':isSortDown(node.name,'nodes')}"></i> <i class="fa fa-sort position-rg" aria-hidden="true"></i> </th> </tr> </thead> <tbody ng-show="nodes.filteredList.length == 0"> <tr> <td colspan="4">没有查询到任何数据</td> </tr> </tbody> <tbody> <tr ng-repeat="info in nodes.filteredList | filter:search.nodeName | orderBy:nodes.sort:nodes.reverse | pagination:nodes.pageNo:nodes.pageSize"> <td><input type="checkbox" id="nodeNameCheck{{info.nodeName}}" ng-click="selectNode(info);" ng-model="info.checked"></input> </td> <td>{{info.nodeName}}</td> <td>{{info.nodeIp}}</td> <td>{{info.fluidSpeedSize}}</td> </tr> </tbody> </table> js中表头定义:

$scope.servicesTitle = [{ "name": 'service', "value": '服务列表' } ]; $scope.nodesTitle = [{ "name": 'nodeName', "value": '节点名称' }, { "name": 'nodeIp', "value": '节点IP' }, { "name": 'fluidSpeedSize', "value": '流控参数值' } ]; js中排序变量定义:

$scope.services = { sort: undefined, //用来排序的字段 reverse: false, //用于排序升序降序 filteredList: []//条件过滤后的结果 }; $scope.nodes = { sort: undefined, //用来排序的字段 reverse: false, //用于排序升序降序 filteredList: []//条件过滤后的结果 };

js中ng-click排序方法,和排序图标显示

$scope.toggle_sort = function (filedName, name) { if ($scope[name].sort === filedName) { $scope[name].reverse = !$scope[name].reverse; } else { $scope[name].sort = filedName; $scope[name].reverse = false; } } //用于显示指示器 $scope.isSortUp = function (filedName, name) { return $scope[name].sort === filedName && !$scope[name].reverse; } $scope.isSortDown = function (filedName, name) { return $scope[name].sort === filedName && $scope[name].reverse; } 自己写的ownOrderBy过滤器

'use strict'; angular.module("adminApp") .filter('ownOrderBy',['$filter',function($filter){ return function(inputArray,sort,reverse){ if(sort === undefined){ return inputArray; } else { if(reverse === false){ var temp = $filter('orderBy')(inputArray, undefined, reverse); }else{ var temp = $filter('orderBy')(inputArray, sort, reverse); } return temp; } } }]);

解释:

        之所以要在单表头的时候,自己写一个过滤器,是因为angularjs内置的orderBy在单表头的时候默认给我升序排序了,而他的排序又只是在视图层面更新,不会更新我的scope域中的数据,可是我需要获取第一行的值,使那一行高亮,并传给另一个服务,获取相关联的其他数据。

        尝试了半天,把排序字段初始值设置为undefined和null,他都会给我排序,所以干脆自己写一个过滤器。

        判断一下,初始的时候,如果排序字段是undefined,则返回原数组即可,否则,用angular自带的orderBy。后面因为reverse===false升序的时候,它又没有升序,把排序字段变为undefined的时候,他就默认升序了。所以才又针对reverse做了一次判断。

        个人觉得可能是单表头的原因,因为多个表头的时候,就没有这种问题,多个表头的时候,初始排序字段为undefined,他就不知道要按哪个排序,就没有排序。

        如果有人知道原因,欢迎不吝赐教,万分感激。

转载请注明原文地址: https://www.6miu.com/read-27328.html

最新回复(0)