在项目中使用AngularJS+UI-Grid

一、效果图
   

二、简单的需求

1. 使用UI-Grid来显示表格
2. 使用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']
    };

});

四、总结

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