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

来源：互联网发布：udp端口号是多少编辑：程序博客网时间：2024/05/22 00:40

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

附上上一篇博客的链接：http://blog.csdn.net/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"    }  ]}

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

正序：

倒序：

这里是需要传到服务器的数据:

至于对某一行进行增删改查操作的话，请参考我的自定义指令（edit和delete）

0 0