在项目中使用AngularJS+UI-Grid

来源：互联网发布：盟军苏军将领知乎编辑：程序博客网时间：2024/06/11 15:11
一、效果图

二、简单的需求

使用UI-Grid来显示表格
使用infiniteScroll来进行滚动加载，参考文档
三、前端JS

define([    '{angular}/angular'], function (angular) {    'use strict';    var clientList = angular.module('ClientList', ['ngResource','ui.grid','ui.grid.infiniteScroll']);    clientList.controller('ClientListCtrl', ['$scope', '$routeParams','$resource','$location', '$q', function ($scope, $routeParams,$resource,$location,$q) {               var Clients = $resource('rest/clients/:id',{            "id":'@id'        });        var Client = $resource('rest/clients',{},{            "update":{                method:'PUT'            }        });        var ClientsSearch=$resource('rest/clients/search');             // ------------Turn to create page-------------        $scope.createClient=function(){            $location.path("client/create");        };             // ------------Search client by name-------------        $scope.search=function(){            ClientsSearch.query({searchText : $scope.searchText}, function(data) {                $scope.girdData=data;            }, function(msg) {                            });                 };                     // ===============show the update modal dialog ==================       $scope.tempRowEntity;       var tempSelectedRowEntity = {};        $scope.goToUpdate=function(row){             $scope.tempRowEntity = {};                          tempSelectedRowEntity = row.entity;             angular.copy(tempSelectedRowEntity, $scope.tempRowEntity);                angular.element('#UpdateDialog').modal({                   backdrop: false               });                 };       // ------------Update the grid client -------------         $scope.updateClient=function(){           $scope.tempRowEntity.telephone.phoneNumber="+"+$scope.tempRowEntity.telephone.phoneCountryNumber+" "+$scope.tempRowEntity.telephone.number;           Client.update({},$scope.tempRowEntity,function(){               angular.copy($scope.tempRowEntity,tempSelectedRowEntity);           });                      angular.element('#UpdateDialog').modal('hide');          };                            // ============show the delete modal dialog==================       $scope.tempEntity;       var tempDeleteRowEntity={};       $scope.goToDelete=function(row){           $scope.tempEntity={};           tempDeleteRowEntity = row.entity;           angular.element('#warnDelete').modal({               backdrop: false           });                  };              //-----------delete the client--------------------------       $scope.deleteClient=function(){           Clients.remove({},{id:tempDeleteRowEntity.clientId.clientId},function(){               for(var i=0;i<$scope.girdData.length;i++){                 if($scope.girdData[i] === tempDeleteRowEntity){                     $scope.girdData.splice(i,1);                     break;                 }             }          });           angular.element('#warnDelete').modal('hide');       };                // ------------infinite scroll-------------        var currentPage = 1;        var pageSize = 20;        $scope.girdData = [];           Clients.query({            currentPage : currentPage,            pageSize : pageSize        }, function(data) {            if (data.length) {                currentPage++;                $scope.girdData = data;            }        });              $scope.getDataDown = function() {           var promise = $q.defer();           Clients.query({               currentPage : currentPage,               pageSize : pageSize           }, function(data) {               if(data.length){                   currentPage++;                   $scope.gridApi.infiniteScroll.saveScrollPercentage();                   $scope.girdData = $scope.girdData.concat(data);                   $scope.gridApi.infiniteScroll.dataLoaded(false, true).then(function() {                      promise.resolve();                   });               }           });           return promise.promise;         };               $scope.gridOptions = {            data : 'girdData',                        showGridFooter : true,            showColumnFooter : false,            enableFiltering : false,            infiniteScrollUp: false,            infiniteScrollDown: true,            columnDefs : [                  {                     field : 'clientId.clientId',                     displayName : 'Client Number'                  },                  {                     field : 'firstName',                     displayName : 'First Name'                 }, {                     field : 'lastName',                     displayName : 'Last Name'                 }, {                     field :  'telephone.phoneNumber',                     displayName : 'Telephone Number'                 } , {                     field : 'mail.address',                     displayName : 'Mail'                 },  {                     field : 'action',                     displayName : "Action",                     cellTemplate : '<div class="container-fluid"><div class="row cell-action-style"><div class="col-xs-3 text-center"><div class="div-click"  ng-click="grid.appScope.goToUpdate(row)"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></div></div><div class="col-xs-3 text-center" ><div class="div-click"  ng-click="grid.appScope.goToDelete(row)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></div></div><div></div></div></div>'                 }],                   onRegisterApi : function(gridApi) {                       gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.getDataDown);                       $scope.gridApi = gridApi;                   }        };             }]);        return {        angularModules: ['ClientList']    };});
四、总结

电话号码的拼接：区号+电话号码，在后台逻辑中加一个属性phoneNumber 来进行二者的组合。
滑动加载参考infiniteScroll,设置当前页和当前页显示的条目数。
删除记录时要遍历当前显示的条目数并splice(index，1)来修改数组即可。
1 0