Angular可排序表格组件 - angular-sortable-table

Angular可排序表格组件 - angular-sortable-table
插件名称 angular-sortable-table
发布时间 2020年8月17日
插件作者 shagstrom

用于创建可排序表的简单AngularJS指令和过滤器。

# NPM
$ npm install @shagstrom/angular-sortable-table –save

# Bower
$ bower install angular-sortable-table

完整的例子:

指令,过滤器和服务记录在完整示例的下面。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Angular sortable table example</title>
        <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-sortable-table.js"></script>
        <style>
            th.sortable { cursor: pointer; }
            th.sortable:after { content: "\f0dc"; padding-left: 5px; font-family: FontAwesome; font-size: 12px; }
            th.sortable.asc:after { content: "\f0de"; }
            th.sortable.desc:after { content: "\f0dd"; }
        </style>
        <script>
            angular.module('angular-sortable-table-example', [ 'shagstrom.angular-sortable-table' ])
                .controller('MainCtrl', function ($scope) {
                    $scope.countryMappings = {
                        "GH": "Ghana",
                        "GQ": "Equatorial Guinea",
                        "GR": "Greece"
                    };
                    $scope.people = [
                        { name: "John", age: 34, countryCode: "GQ" },
                        { name: "Sahra", age: 36, countryCode: "GH" },
                        { name: "Desmond", age: 19, countryCode: "GR" },
                        { name: "Carole", age: 25, countryCode: "GH" },
                        { name: "Annie", age: 25, countryCode: "GQ" }
                    ];
                });
        </script>
    </head>
    <body ng-app="angular-sortable-table-example" ng-controller="MainCtrl">
        <h1>Angular sortable table example</h1>
        <table sortable-table="personSortObject" sortable-table-options="{ multipleColumns: true }">
            <thead>
                <tr>
                    <th sortable-column="name">Name</th>
                    <th sortable-column="age">Age</th>
                    <th sortable-column="countryCode:countryMappings[value]">Country</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="person in people | sortTable: personSortObject">
                    <td>{{person.name}}</td>
                    <td>{{person.age}}</td>
                    <td>{{countryMappings[person.countryCode]}}</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>