angular的表格排序、分页和一些基本操作

最新推荐文章于 2025-01-07 09:22:39 发布

原创最新推荐文章于 2025-01-07 09:22:39 发布 · 7.3k 阅读

2 ·

CC 4.0 BY-SA版权

angular 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Angular项目中如何实现表格数据的排序、分页功能，并分享了相关插件的使用链接。同时，提到了自定义指令用于表格中的行编辑和删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文用到的插件和上一篇文章基本一样

附上上一篇博客的链接：http://blog.youkuaiyun.com/lsq_401/article/details/52681725

此文用到的分页插件，附上链接：https://www.miaoyueyue.com/archives/813.html

PS:再此感谢这位朋友提供的分页插件。

老规矩先上项目目录结构：

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script type="text/javascript" src="../lib/angular.min.js"></script>
    <script type="text/javascript" src="../js/list3.js"></script>
    <script type="text/javascript" src="../lib/tm.pagination.js"></script>
    <style>
        .page-list .pagination {float:left;}
        .page-list .pagination span {cursor: pointer;}
        .page-list .pagination .separate span{cursor: default; border-top:none;border-bottom:none;}
        .page-list .pagination .separate span:hover {background: none;}
        .page-list .page-total {float:left; margin: 25px 20px;}
        .page-list .page-total input, .page-list .page-total select{height: 26px; border: 1px solid #ddd;}
        .page-list .page-total input {width: 40px; padding-left:3px;}
        .page-list .page-total select {width: 50px;}
    </style>
</head>
<body ng-app="myApp" ng-controller="listController">
<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th ng-repeat="headerInfo in headerInfos track by $index " ng-click=" toggleSort($index)">{{ headerInfo.name }}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="employee in employees | orderBy: order">
            <td>{{ employee.id }}</td>
            <td>{{ employee.name }}</td>
            <td>{{ employee.phone }}</td>
            <td><edit ng-Model="employee" ng-show="showEdit"><a>Edit</a></edit>
                <update ng-Model="employee" ng-show="!showEdit"><a>Update</a></update>
                <cancel ng-Model="employee" ng-show="!showEdit"> | <a>Cencel</a></cancel>
                | <delete ng-Model="employee"><a>Delete</a></delete>
            </td>
        </tr>
    </tbody>
</table>
<tm-pagination conf="paginationConf"></tm-pagination>
</body>
</html>

JS代码如下

var app = angular.module('myApp',['tm.pagination'])
    app.controller('listController',['$scope', 'BusinessService', function ($scope, BusinessService){
        $scope.headerInfos = [{'name':'序号','col':'id'},{'name':'姓名','col':'name'},{'name':'手机号','col':'phone'},{'name':'操作'}];
        $scope.showEdit = true;
        $scope.order = 'id';
        var GetAllEmployee = function () {
            var orderBy = '';
            var sort = '';
            if ($scope.order.indexOf('-') == '0'){
                orderBy = $scope.order.replace('-','');
                sort = 'desc';
            }else {
                orderBy = $scope.order;
                sort = 'asc';
            }
            var postData = {
                orderBy:orderBy,
                sort:sort,
                pageIndex: $scope.paginationConf.currentPage,
                pageSize: $scope.paginationConf.itemsPerPage
            }
            BusinessService.list(postData).success(function (response) {
                $scope.paginationConf.totalItems = response.count;
                $scope.employees = response.items;
            });
        };
        //列排序，由于angular可以根据列名前加不加'-'来判断是正序还是倒序，故排序实现如下
        //order(0:asc,1:desc)
        $scope.toggleSort = function (index) {
            console.info(index);
            var obj = $scope.headerInfos[index];
            $scope.order = obj.col;
            console.info(obj.col);
            if(obj.col.indexOf('-') == '0'){
                obj.col = obj.col.replace('-','');
            }else {
                obj.col = '-'+ obj.col;
            }
            GetAllEmployee();
        }

        //配置分页基本参数
        $scope.paginationConf = {
            currentPage: 1,
            itemsPerPage: 6
        };
        /***************************************************************
         当页码和页面记录数发生变化时监控后台查询
         如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。
         ***************************************************************/
        $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
    }])

    //业务类
    app.factory('BusinessService', ['$http', function ($http) {
        var list = function (postData) {
            return $http.post('../json/test.json', postData);
        }

        return {
            list: function (postData) {
                return list(postData);
            }
        }

    }]);
    app.directive("edit", function(){
        return{
            restrict: 'AE',
            require: 'ngModel',
            scope:false,
            link: function(scope,element){
                //获取传过来的对象
                // console.info(scope.employee);
                element.bind("click",function(e){
                    alert("I am clicked for editing");
                });
            }
        }
    })
    app.directive("delete", function(){
        return{
            restrict: 'AE',
            require: 'ngModel',
            scope:false,
            link: function(scope,element){
                //获取传过来的对象
                // console.info(scope.employee);
                element.bind("click",function(e){
                    alert("I am clicked for delete");
                });
            }
        }
    })

test.json数据如下：

{
  "count": "13",
  "items": [
    {
      "id": 101,
      "name": "John",
      "phone": "555-1276"
    },
    {
      "id": 102,
      "name": "Mary",
      "phone": "800-1233"
    },
    {
      "id": 103,
      "name": "Mike",
      "phone": "555-4321"
    },
    {
      "id": 104,
      "name": "Adam",
      "phone": "555-5678"
    },
    {
      "id": 105,
      "name": "Julie",
      "phone": "555-8765"
    },
    {
      "id": 106,
      "name": "Juliette",
      "phone": "555-5678"
    }
  ]
}

例如根据名称字段进行排序

正序：