排序筛选

作者: YT_Zou | 来源:发表于2017-07-11 15:23 被阅读0次

不为人知的排序和筛选的高级用法
排序和筛选
2018-09-03
第4单元管理数据
vue elementUI 实现el-table 表头筛选，表头
四、Openpyxl工作表对象的属性和方法-2（筛选和排序）
Excel 2016 For Mac 数据透视表基础应用四
不只是升降的排序和筛选
举个栗子！Tableau 技巧（213）：筛选结果保持数据整体排
不为人知的排序和筛选的高级用法

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/angular.min.js"></script>
    <style>
        body {
            font-size: 12px;
        }

        li {
            list-style: none;
            margin: 5px 0;
        }

        ul {
            width: 500px;
            margin: 0;
            padding: 0;
        }

        span {
            display: inline-block;
            width: 80px;
            text-align: center;
        }

        .bold {
            font-weight: bold;
        }

        .odd {
            color: #0026ff;
        }

        .even {
            color: #ff0000;
        }

        .focus {
            color: #ddcdc2;
        }
    </style>
</head>
<body>
<div ng-controller="ctrl1">
    <!--<span>{{8.88 | currency}}</span>-->
    <div>
        <input type="text" ng-model="key" placeholder="请输入关键字">
    </div>
    <ul>
        <li ng-class="'bold'">
            <span>id</span>
            <span ng-click="title='name';desc=!desc">姓名</span>
            <span ng-click="title='sex';desc=!desc">性别</span>
            <span ng-click="title='age';desc=!desc">年龄</span>
            <span ng-click="title='score';desc=!desc">分数</span>
        </li>
        <!--<li ng-repeat="stu in data | orderBy: '-score'| limitTo:3" ng-class-odd="'odd'" ng-class-even="'even'"-->
        <!--ng-class="{'focus':$index==focus}" ng-click="click($index)">-->

        <!--<li ng-repeat="stu in data | filter:findScore" ng-class-odd="'odd'" ng-class-even="'even'"-->
        <!--ng-class="{'focus':$index==focus}" ng-click="click($index)">-->

        <!--<li ng-repeat="stu in data | young:0" ng-class-odd="'odd'" ng-class-even="'even'"-->
            <!--ng-class="{'focus':$index==focus}" ng-click="click($index)">-->

        <li ng-repeat="stu in data | filter:{name:key}| orderBy:title:desc" ng-class-odd="'odd'" ng-class-even="'even'"
            ng-class="{'focus':$index==focus}" ng-click="click($index)">
            <span>{{$index+1}}</span>
            <span>{{stu.name}}</span>
            <span>{{stu.sex}}</span>
            <span>{{stu.age}}</span>
            <span>{{stu.score}}</span>
        </li>
    </ul>
</div>
</body>
<script>
    var exg = angular.module('app', []);
    exg.controller('ctrl1', function ($scope) {
        $scope.data = [
            {name: '小明', sex: '男', age: '20', score: '78'},
            {name: '小云', sex: '男', age: '21', score: '85'},
            {name: '小蓝', sex: '女', age: '19', score: '76'},
            {name: '小维', sex: '女', age: '18', score: '92'},
            {name: '小达', sex: '男', age: '20', score: '80'}
        ];
        $scope.click = function (i) {
            $scope.focus = i;
        };
        $scope.findScore = function (e) {
            return e.score > 82 && e.score < 95;
        };
        $scope.title='name';
        $scope.desc = 1;
        $scope.key = "";
    });
    exg.filter('young', function () {
        return function (e, type) {
            var _out = [];
            var _sex = type ? "男" : "女";
            for (var i = 0; i < e.length; i++) {
                if (e[i].age < 20 && e[i].age > 18 && e[i].sex == _sex) {
                    _out.push(e[i]);
                }
            }
            return _out;
        }
    })
</script>
</html>