ngTbale假分页实现排序、搜索、导出CSV等功能

一. ngTable功能简化

　　使用ngTable经常有分页，排序，过滤等功能，实现诸多功能较为麻烦。为了方便开发过程，可以抽取一些table共同点写一个公有方法。

　　注意：

　　　　1. 由于很多特别的需求，可能表格不一定适用于自己的项目，部分地方需要自己调试到适合自己的项目。

　　　　2. 部分功能没有使用ngTable自带的功能，只因为PM需求与之不符合

　　代码如下：

　　1. ListTableEX代码：

 angular.module('newApp')
   .factory('ListTableEX', ['ngTableParams', 'getStorage', function (ngTableParams, getStorage) {
     var store = getStorage('localStorage');

     /**
      * 创建表格
      * @param options1
      * @param options2
      * @returns {ngTableParams|*}
      */
     function createListTable(options1, options2) {
       var listTable = new ngTableParams(options1, {
         counts: options2.counts,
         getData: function ($defer, params) {
           // 如果不需要强制刷新数据且有缓存数据，那么直接使用缓存数据
           // Note: 由于api可能返回空数据或者出错，因此不能通过判断
           // 缓存数组容量是否为0来判断有无缓存，而是通过判断该数组是否为
           // undefined
           if (!listTable.needForceReload && params.items) {
             // 复制items中的数据，以免shownItems的更改影响到items
             params.shownItems = [];
             for (var index in params.items) {
               params.shownItems.push(params.items[index]);
             }
             var itemsFilter = options2.itemsFilter;
             if (itemsFilter) {
               params.shownItems = itemsFilter(params.shownItems);
             }
             sortTable(listTable);
             listTable.calculatePages();
             var itemsCount = params.shownItems.length;
             var itemCountPerPage = listTable.count();
             var currentPage = listTable.page();
             params.total(itemsCount);
             $defer.resolve(subArray(params.shownItems, (currentPage - 1) * itemCountPerPage, itemCountPerPage));
             return;
           }
           listTable.needForceReload = false;
           var apiParams = {
             limit: 20000000,
             index: 1
           };
           options2.getData(apiParams).then(function (data) {
             listTable.resetSortParams();
             listTable.resetCheckboxes();
             var resData = data.data.data;
             var onDataResult = options2.onDataResult;
             if(onDataResult) {
               onDataResult(resData);
             }
             var items = resData.items;
             var dataPreprocessFunc = options2.dataPreprocessFunc;
             if (dataPreprocessFunc) {
               dataPreprocessFunc(items);
             }
             // 即使api没有返回数据，也应该设置缓存数组，否则会导致无限刷新
             params.items = items ? items : [];
             // 由于已经获取到了数据，那么重新reload一次，复用有缓存数据时的处理逻辑
             listTable.reload();
           }, function () {
           });
         }
       });
       listTable.tableName = options1.tableName;
       listTable.titles = options1.titles;
       listTable.needForceReload = false;
       listTable.getItemId = options2.getItemId;
       listTable.forceReload = function () {
         listTable.needForceReload = true;
         listTable.reload();
       }
       return listTable;
     };

     /**
      * 初始化排序功能
      * @param listTable
      */
     function initSort(listTable) {
       listTable.nextSortType = function () {
         return listTable.sortParams.type == 'asc' ? 'desc' : 'asc';
       };
       listTable.isColumnSorting = function (key) {
         return listTable.sortParams.key == key;
       };
       listTable.isColumnSortingByASC = function (key) {
         return listTable.isColumnSorting(key) && listTable.sortParams.type == 'asc';
       };
       listTable.isColumnSortingByDESC = function (key) {
         return listTable.isColumnSorting(key) && listTable.sortParams.type == 'desc';
       };
       listTable.resetSortParams = function () {
         listTable.sortParams = {key: '', type: ""};
       }
       listTable.resetSortParams();
     };

     /**
      * 初始化条目选择框
      * @param listTable
      * @param withCheckboxes
      * @returns {*}
      */
     function initCheckboxes(listTable, withCheckboxes) {
       if (withCheckboxes) {
         listTable.toggleCheckAll = function () {
           var checkedCount = listTable.checkedIds().length;
           if (checkedCount == listTable.shownItems.length) {
             listTable.deselectAll();
           } else {
             listTable.selectAll();
           }
         };
         listTable.selectAll = function () {
           listTable.resetCheckboxes();
           listTable.checkboxes.selectAll = true;
           for (var index in listTable.shownItems) {
             listTable.checkboxes.items[listTable.getItemId(listTable.shownItems[index])] = true;
           }
         };
         listTable.deselectAll = function () {
           listTable.resetCheckboxes();
           listTable.checkboxes.selectAll = false;
           for (var index in listTable.shownItems) {
             listTable.checkboxes.items[listTable.getItemId(listTable.shownItems[index])] = false;
           }
         };
         listTable.checkedIds = function () {
           var ids = [];
           for (var index in listTable.shownItems) {
             var id = listTable.getItemId(listTable.shownItems[index]);
             if (listTable.checkboxes.items[id]) {
               ids.push(id);
             }
           }
           listTable.checkboxes.selectAll = listTable.shownItems ? (listTable.shownItems.length == ids.length) : false;
           return ids;
         }
         listTable.resetCheckboxes = function () {
           listTable.checkboxes = {
             selectAll: false,
             items: {}
           };
         };
       } else {
         listTable.resetCheckboxes = function () {
         }
       }
       listTable.resetCheckboxes();
       return listTable;
     };

     /**
      * 初始话分页功能
      * @param listTable 表格
      * @private
      */
     function initPagination(listTable) {
       var STORAGE_PAGESIZE_KEY = getKeyForStoragePageSize(listTable);

       if (store.get(STORAGE_PAGESIZE_KEY)) {
         listTable.count(store.get(STORAGE_PAGESIZE_KEY)['value']);
       }
       listTable.editCount = listTable.count();

       listTable.prePage = function () {
         var page = listTable.page();
         if (page > 1) {
           listTable.page(page - 1);
         }
       };
       listTable.nextPage = function () {
         var page = listTable.page();
         if (page < Math.ceil(1.0 * listTable.total() / listTable.count())) {
           listTable.page(page + 1);
         }
       };
       listTable.calculatePages = function () {
         var itemsCount = listTable.shownItems.length;
         // 计算页导航条数据
         var itemCountPerPage = listTable.count();
         store.set(STORAGE_PAGESIZE_KEY, {
           'value': itemCountPerPage
         });
         var totalPage = Math.ceil(1.0 * itemsCount / itemCountPerPage);
         // 当前页最大为页面总数，最小为1
         var currentPage = Math.max(1, Math.min(listTable.page(), totalPage));
         listTable.page(currentPage);
         listTable.pages = calculateTablePages(currentPage, totalPage);
       }
     };

     function getKeyForStoragePageSize(listTable) {
       return 'list_table_page_size@' + listTable.tableName;
     };

     /**
      * 从原始数组中分割出一段连续的数组，该操作不会影响原始数组
      * @param array 原始数组
      * @param startIndex 分割起始位置
      * @param length 分割数量
      * @returns {Array} 分割结果
      */
     function subArray(array, startIndex, length) {
       var result = [];
       if (array && startIndex > -1 && length > 0) {
         var maxIndex = Math.min(startIndex + length, array.length);
         for (var i = startIndex; i < maxIndex; i++) {
           result.push(array[i]);
         }
       }
       return result;
     };

     /**
      * 对数据进行排序，该操作将直接操作传入的数组顺序
      * @param items 数据数组
      * @param key 数据对象的排序关键字
      * @param sortType 排序类型,'asc'或者'desc'
      */
     function sortItems(items, key, sortType) {
       if (!items || items.length < 1 || !key || key.length < 1) {
         return;
       }
       items.sort(
         function compareFunction(param1, param2) {
           var value1 = param1[key];
           var value2 = param2[key];
           if (typeof(value1) === 'number' && typeof(value2) === 'number') {
             return sortType * (value1 - value2);
           }
           return sortType * ((value1 + '').localeCompare(value2 + ''));
         }
       );
     };

     function calculateTablePages(currentPage, totalPage) {
       if (totalPage == 0) {
         return [];
       }
       var end = Math.min(9, totalPage);
       var pages = [currentPage];
       while (pages.length < end) {
         var pre = pages[0] - 1;
         var next = pages[pages.length - 1] + 1;
         if (pre >= 1) {
           pages.unshift(pre);
         }
         if (next <= totalPage) {
           pages.push(next);
         }
       }
       return pages;
     };

     function sortTable(listTable) {
       var sortParams = listTable.sorting();
       var sortKey;
       var sortType;
       for (var key in sortParams) {
         sortKey = key;
         sortType = sortParams[key];
       }
       if (!sortType || sortType.length < 1) {
         sortType = 'asc';
       }
       listTable.sortParams.key = sortKey;
       listTable.sortParams.type = sortType;
       if (sortKey && sortKey.length > 0) {
         sortItems(listTable.shownItems, sortKey, sortType == 'asc' ? 1 : -1);
       }
     };

     function init(options1, options2) {
       var listTable = createListTable(options1, options2);
       initSort(listTable);
       initCheckboxes(listTable, options1.withCheckboxes);
       initPagination(listTable);
       return listTable;
     };

     return {
       init: init,
     };
   }]);

　　2. ListTableEX分页代码：

 <div class="ng-cloak dahuo-pagination" ng-if="params.pages.length > 0">
   <div class="col-lg-6">
     <div class="dataTables_info" role="status" aria-live="polite">
       {{ params.count() * (params.page() - 1) + 1 }}~
       {{ params.count() * (params.page() - 1) + params.data.length }}条，共{{
       params.total() }}条记录
     </div>
   </div>
   <div class="col-lg-6 pagination2" style="margin-bottom: 40px">
     <div class="dataTables_paginate paging_simple_numbers">
       <ul class="pagination ng-table-pagination">
         <li><a href="" ng-click="params.prePage()">上一页</a></li>
         <li ng-repeat="page in params.pages"
             ng-class="{'active' : page == params.page()}">
           <a href="" ng-click="params.page(page)">{{ page }}</a>
         </li>
         <li><a href="" ng-click="params.nextPage()">下一页</a></li>
       </ul>
     </div>
     <div class="col-lg-3 pull-right">
       {{params.testOK}}
       <select class="select form-control" ng-model="params.editCount" ng-change="params.count(params.editCount)"
               style="padding: 6px; margin-top: 2px;min-width: 80px;margin-right: 10px"
               ng-options="size for size in params.settings().counts">
       </select>
     </div>
   </div>
 </div>

　　由于PM的需求变更较大，使用方法可能各不相同。

　　基本使用方法如下：

　　1. HTML

　　　　本表格是一个有checkBox的表格，具有编辑，新建，上线，下线等功能。

 <div>
   <div class="row">
     <div class="col-lg-12 portlets">
       <div class="panel">
         <div class="panel-content">
           <div class="row dahuo-table-toolbar">
             <div class="col-xs-6">
               <button type="button" class="btn btn-default" ng-click="activityupload()" ng-disabled="checkedCount() < 1">发布</button>
               <button type="button" class="btn btn-default" ng-click="activityoffline()" ng-disabled="checkedCount() < 1">下线</button>
               {{ checkedCount() }}个被选中
             </div>
             <div class="col-xs-6">
               <div class="pull-right">
                 <a href="#operation-activityadd">
                   <button type="button" class="btn btn-primary">+ 新建活动</button>
                 </a>
               </div>
             </div>
           </div>
           <div class="table-responsive">
             <table ng-table="activityTable" class="table trans-table table-hover text-left dahuo-table"
                      template-pagination="layouts/pagination_v2.html" width="100%">
               <thead>
                 <tr>
                   <th width="5%" class="dahuo-table-header-th text-center" header="'ng-table/headers/checkbox.html'">
                     <span class="list-checkbox">
                       <input type="checkbox" ng-model="activityTable.checkboxes.selectAll" ng-disabled="activityTable.items.length < 1" ng-click="activityTable.toggleCheckAll()"/>
                       <span></span>
                     </span>
                   </th>
                   <th width="{{title.width}}" ng-repeat="title in activityTable.titles" ng-class="{'sort': title.sortable}" ng-click="title.sortable ? activityTable.sorting(title.key, activityTable.nextSortType()) : 0">{{ title.name }}
                     <li class="fa pull-right" ng-if="title.sortable" ng-class="{'fa-sort-asc': activityTable.isColumnSortingByASC(title.key), 'fa-sort-desc': activityTable.isColumnSortingByDESC(title.key), 'fa-unsorted': !activityTable.isColumnSorting(title.key)}" aria-hidden="true" ng-style="{'color' : (!activityTable.isColumnSorting(title.key) ? '#c9c9c9' : '')}"></li>
                   </th>
                 </tr>
               </thead>
               <tbody>
                 <tr ng-repeat="item in $data">
                   <td class="text-center" header="'ng-table/headers/checkbox.html'">
                     <span class="list-checkbox">
                       <input type="checkbox" ng-model="activityTable.checkboxes.items[item.id]"/>
                       <span></span>
                     </span>
                   </td>
                   <td><a href="#operation-activityedit/{{item.id}}">{{自定义绑值}}</a></td>
                   <td>{{自定义绑值}}</td>
                   <td>{{自定义绑值}}</td>
                   <td>{{自定义绑值}}</td>
                   <td>{{自定义绑值}}</td>
                 </tr>
                 <tr style="height: 100px" ng-if="$data.length < 1">
                   <td colspan="6" class="text-center">暂时没有数据</td>
                 </tr>
               </tbody>
             </table>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

　　2. JS

　　字段解释：

　　　　（1）.tableName：table名称，用于缓存数据时使用的localStorage的key

　　　　（2）.titles：table表头控制项目，key是绑定数据的key，name是显示名称，sortable是否可排序

　　　　（3）.withCheckboxes：表格是否包含checkboxes的列

　　　　（4）.page：当前页

　　　　（5）.count：每页显示条目数量

　　　　（6）.sorting：默认排序的key和升降序

　　　　（7）.counts：每页显示条数数量更改项

　　　　（8）.getData：获取表格的数据，一般是发送API。这里有一个坑，后续会详细说明。

　　　　（9）.getItemId：对应checkBoxes的itemId，复制即可。

　　依赖项：

　　　　DS：API请求依赖

　　　　logger:提示信息依赖

 angular.module('newApp')
   .controller('ActivityListCtrl', ['$scope', 'ds.activity', 'logger', 'ListTableEX',
     function($scope, DS, logger, ListTableEX) {
       $scope.activityTable = new ListTableEX.init(
         {
           tableName:'operation.activity.activity.list',
           titles:[
             {key: '', name: "活动ID", sortable: true, width: '10%'},
             {key: '', name: "活动名称", sortable: true, width: '35%'},
             {key: '', name: "开始时间", sortable: true, width: '20%'},
             {key: '', name: "结束时间", sortable: true, width: '20%'},
             {key: '', name: "状态", sortable: true, width: '10%'},
           ],
           withCheckboxes: true,
           page: 1,
           count: 25,
           sorting: {'id': 'desc'},
         },
         {
           counts: [10, 25, 50, 100],
           getData: function(apiParams) {
             return DS.listActivity(apiParams);
           },
           getItemId: function(item) {
             return item.id;
           }
         }
       );

       $scope.checkedCount = function() {
         return $scope.activityTable.checkedIds().length;
       }

       $scope.activityupload = function() {
         var checkedIds = $scope.activityTable.checkedIds();
         if (checkedIds.length < 1) {
           logger.warning('请选择操作对象');
           return;
         }

         DS.activityUpload(checkedIds)
           .then(function() {
             $scope.activityTable.forceReload();
             logger.success('上线成功');
           }, function(error) {
             logger.error('上线失败');
           });
       };

       $scope.activityoffline = function() {
         var checkedIds = $scope.activityTable.checkedIds();
         if (checkedIds.length < 1) {
           logger.warning('请选择操作对象');
           return;
         }

         DS.activityOffline(checkedIds)
           .then(function() {
             $scope.activityTable.forceReload();
             logger.success('下线成功');
           }, function(error) {
             logger.error('下线失败');
           });
       };
     }
   ]);

二. 使用中注意的问题：

　　1. 需要自己更改适应服务端返回数据的处理代码：

　　　　对应代码段时listTableEX的“var resData = data.data.data”

　　2. 使用中可能Table数据不是来自于API:

　　　　需要使用如下代码：

 getData: function(apiParams) {
   return {then: function(callback){
     var data = {
       data:{
         data:{
           items: [],
         }
       }
     }
     callback(data);
   }}
 }

　　　　然后强行加载数据：

 $scope.ActivityTable.items = items;
 $scope.ActivityTable.page(1);
 $scope.ActivityTable.reload();

　　3. 可能数据来自API，但是触发时机不是Table new出来时：

　　　　New出来的代码更改如下：

 getData: function(apiParams) {
   if (满足API发送条件){
     var apiParams = {
         (自定义)
     };
     return DS.activityList(apiParams);
   }
   return {then: function(callback){
     var data = {
       data:{
         data:{
           items: [],
         }
       }
     }
     callback(data);
   }}
 }

　　　　然后发送API获取数据：

 $scope.ActivityTable.page(1)
 $scope.ActivityTable.forceReload();

三. 搜索，过滤，导出CSV插件

　　代码都有较长的注释，这里不做过多的介绍。

　　导出CSV依赖插件FileSaver.js。

angular.module('newApp')
  .factory('ListTableEXExtend', function (getStorage) {
    /*
    First method:
      ListTableEXExtend.searchFilter(Array, String, Boolean);
      Input:
        Array: ['a', 'b', 'c', 'aa', 'ab', 'cc']
        String: 'a'
        Boolean: true
      Output:
        Array: ['a', 'aa', 'ab']

    Second method:
      ListTableEXExtend.searchFilter(ObjectArray, String, Boolean, Array)
      Input:
        ObjectArray: [
          {id:111, name:'aaa', ex1:'sss', ex2: 'sss'},
          {id:222, name:'11aa', ex1:'sss', ex2: 'sss'},
          {id:333, name:'a1a1', ex1:'sss', ex2: 'sss'},
          {id:444, name:'bbbb', ex1:'sss', ex2: 'sss'}
        ]
        String: 1 or '1'
        Boolean: true
        Array: ['id', 'name']
      Output:
        ObjectArray: [
          {id:111, name:'aaa', ex1:'sss', ex2: 'sss'},
          {id:222, name:'11aa', ex1:'sss', ex2: 'sss'},
          {id:333, name:'a1a1', ex1:'sss', ex2: 'sss'}
        ]
      Others: return items

      Note: if has too much data, Please use method: delay reload Table
    */
    function searchFilter(items, keyword, isIgnoreUpper, regArr) {
      if (!items) {
        console.log("Items must be defined");
        return;
      }
      if (typeof(items) !== "object" || items.constructor !== Array) {
        console.log("Items must be a array");
        return items;
      }
      if (items.length === 0) {
        return items;
      }
      if (!keyword && keyword !== 0 && keyword !== '0') {
        return items;
      }
      /* Copy Items*/
      var newItems = items.concat();
      if (isIgnoreUpper){
        var keyword = keyword.toString().toLowerCase();
      }else {
        var keyword = keyword.toString();
      }
      if (!regArr) {
        var resultItem = [];
        for (var index in items) {
          try {
            if (isIgnoreUpper){
              var newItem = newItems[index].toString().toLowerCase();
            }else {
              var newItem = newItems[index].toString();
            }
          } catch (e) {
            console.log(e.name + ": " + e.message);
          }
          if (newItem.indexOf(keyword) !== -1) {
            resultItem.push(items[index]);
          }
        }
        return resultItem;
      }
      if (typeof(regArr) !== "object" || regArr.constructor !== Array) {
        console.log("regArr must be a array");
        return items;
      }
      if (regArr.length === 0) {
        return items;
      }
      var newRegArr = regArr.concat();
      for (var index in newRegArr) {
        try {
          newRegArr[index].toString();
        } catch (e) {
          console.log(e.name + ": " + e.message);
        }
      }
      var resultItem = [];
      for (var index in items) {
        try {
          var newItem = newItems[index];
          if (typeof(newItem) !== "object" || newItem.constructor !== Object) {
            console.log("Items must be a object array");
            return items;
          }
          for (var index2 in newRegArr) {
            if (!newItem[newRegArr[index2]] && newItem[newRegArr[index2]] !== 0 && newItem[newRegArr[index2]] !== '0') {
              continue;
            }
            if (isIgnoreUpper){
              var newItemToStr = newItem[newRegArr[index2]].toString().toLowerCase();
            }else {
              var newItemToStr = newItem[newRegArr[index2]].toString();
            }
            if (newItemToStr.indexOf(keyword) !== -1) {
              resultItem.push(items[index]);
              break;
            }
          }
        } catch (e) {
          console.log(e.name + ": " + e.message);
        }
      }
      return resultItem;
    }

    /*
      Method:
        ListTableEXExtend.selectFilter(ObjectArray, Key, Value)
        Input:
          ObjectArray: [
            {id:111, name:'aaa', product_id:'123', ex: 'sss'},
            {id:222, name:'11aa', product_id:'113', ex: 'sss'},
            {id:333, name:'a1a1', product_id:'123', ex: 'sss'},
            {id:444, name:'bbbb', product_id:'113', ex: 'sss'},
          ]
          Key: product_id
          Value: 123
        Output:
          ObjectArray: [
            {id:111, name:'aaa', product_id:'123', ex: 'sss'},
            {id:333, name:'a1a1', product_id:'123', ex: 'sss'}
          ]
        Others: return items
    */
    function selectFilter(items, key, value) {
      if (!items) {
        console.log("Items must be defined");
        return;
      }
      if (!key || !value) {
        console.log("Key, value must be defined");
        return items;
      }
      if (typeof(items) !== "object" || items.constructor !== Array) {
        console.log("Items must be a array");
        return items;
      }
      if (items.length === 0) {
        return items;
      }
      key = key.toString();
      var resultItem = []
      for (var index in items) {
        try {
          var item = items[index];
          if (typeof(item) !== "object" || item.constructor !== Object) {
            console.log("Items must be a object array");
            return items;
          }
          if (item[key] == undefined || item[key] == null || item[key] === '') {
            continue;
          }
          if (value === 'defined'){
            resultItem.push(items[index]);
            continue;
          }
          if (item[key] == value) {
            resultItem.push(items[index]);
          }
        } catch (e) {
          console.log(e.name + ": " + e.message);
        }
      }
      return resultItem;
    }

    function _getDateTime(date){
      if (angular.isDate(date)){
        return date.getTime();
      }else {
        return new Date(date).getTime();
      }
    }

    function timeFilter(items, start, end, key){
      if (!items) {
        console.log("Items must be defined");
        return;
      }
      if (!angular.isArray(items)) {
        console.log("Items must be a array");
        return items;
      }
      var startTime = _getDateTime(start);
      var endTime = _getDateTime(end);
      var newItems = items.concat();
      var resultItems = [];
      var newKey = key.toString()
      for (var index in items){
        var newItem = items[index];
        if (!angular.isObject(newItem)) {
          console.log("Items must be a object array");
          return items;
        }
        if (!newItem[newKey]) {
          continue;
        }
        var newItemDate = _getDateTime(newItem[newKey]);
        if (newItemDate >= startTime && newItemDate <= endTime){
          resultItems.push(newItem);
        }
      }
      return resultItems;
    }

    function editItem(items, item, primaryKey, isCreated){
      if (!items) {
        console.log("Items must be defined");
        return;
      }
      if (!item || !primaryKey) {
        console.log("Item, primaryKey must be defined");
        return items;
      }
      if (!angular.isArray(items)) {
        console.log("Items must be a array");
        return items;
      }
      if (!angular.isObject(item)) {
        console.log("Item must be a object");
        return items;
      }
      primaryKey = primaryKey.toString();
      /* Copy Items*/
      var newItems = items.concat();
      for (var index in newItems) {
        try {
          var newItem = newItems[index];
          if (!angular.isObject(newItem)) {
            console.log("Items must be a object array");
            return items;
          }
          if (!newItem[primaryKey] && newItem[primaryKey] != 0 && !item[primaryKey] && item[primaryKey] != 0) {
            continue;
          }else {
            if (newItem[primaryKey] == item[primaryKey]){
              newItems[index] = item;
              isCreated = false;
            }
          }
        } catch (e) {
          console.log(e.name + ": " + e.message);
          return items;
        }
      }
      if (isCreated){
        newItems.push(item);
      }
      return newItems;
    }

    /*
      Usage:
      var csv = new ListTableEXExtend.Csv({
        --titles(Option):
          ObjectArray.
          just lick listtableex.titles, 'key' and 'name' is needed.
          This is used for defining Csv col.
        --items(Option):
          ObjectArray.
          just lick listtableex.items.
        --filterData(Option):
          FuncObject.
          This is used for switch data.
          For example:
            {id(Must be titles'key): function(input){return input + 'Test'}}.
        --defaultChar(Option):
          String or Object.
          String: All table's default char.
          Object: One col default char(Must be titles'key).
          This is used for set default char when <td></td> is like this.
        --handleData(Option):
          Func.
          Must return Data.
          Data is the fileData.
        --fileName(Option):
          String.
        --delimiter(Option):
          String.
          This is used for maping <td> and another <td> with 'char'.
          Default is ',' used for Csv.
          });
      csv has to public method:
        --setItems(Option)
          Note: The items maybe is undefined because API are not repond this time.
          So you need to set items again.
        --setTitles(Option)
          Note: The titles maybe changed.
          So you need to set titles again.
        --exportCsv(Necessary, Main)
        Others are private.
        If you have to get proto, you can add public method.
    */
    function Csv(options) {
      var items = options.items;
      var titles = options.titles;
      var filterData = options.filterData;
      var handleData = options.handleData;
      var defaultChar = options.defaultChar;
      var type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
      var fileName = options.fileName ? options.fileName : 'download.csv';
      var delimiter = options.delimiter ? options.delimiter : ',';
      var data = '';

      function _download(data, fileName) {
        var blob = new Blob(["\ufeff" + data], {
          type: type
        });
        saveAs(blob, fileName);
      }

      function _getData(items, titles) {
        if (!items || !titles || typeof(items) !== "object" || items.constructor !== Array || typeof(titles) !== "object" || titles.constructor !== Array) {
          console.log("Usage:\n\titems: ObjectArray\n\ttitles: ObjectArray\n");
          return false;
        }
        return true;
      }

      function _handleData(items, titles, delimiter, filterData, handleData, defaultChar) {
        data = '';
        if (handleData) {
          data = handleData(items, titles);
        } else {
          var rowData = '';
          for (var index in titles) {
            rowData += titles[index].name + delimiter;
          }
          rowData = rowData.slice(0, rowData.length - 1);
          data += rowData + '\n';
          for (var i in items) {
            var item = items[i];
            var rowData = '';
            for (var j in titles) {
              var title = titles[j];
              if (!title.key) {
                return '';
              } else if (item[title.key] === undefined || item[title.key] === '') {
                if (defaultChar) {
                  if (angular.isObject(defaultChar)) {
                    if (defaultChar[title.key] !== undefined) {
                      rowData += defaultChar[title.key] + delimiter;
                    } else {
                      rowData += delimiter;
                    }
                  } else {
                    rowData += defaultChar + delimiter;
                  }
                } else {
                  rowData += delimiter;
                }
              } else {
                if (filterData) {
                  if (title.filterKey && filterData[title.filterKey]) {
                    var filterResultData = filterData[title.filterKey](item[title.key]);
                    rowData += filterResultData + delimiter;
                  } else if (filterData[title.key]) {
                    var filterResultData = filterData[title.key](item[title.key]);
                    rowData += filterResultData + delimiter;
                  } else {
                    rowData += item[title.key] + delimiter;
                  }
                } else {
                  rowData += item[title.key] + delimiter;
                }
              }
            }
            rowData = rowData.slice(0, rowData.length - 1);
            data += rowData + '\n';
          }
        }
        return data;
      }

      this.setItems = function (value) {
        items = value;
      }

      this.setTitles = function (value) {
        titles = value;
      }

      this.exportCsv = function () {
        if (!_getData(items, titles)) {
          return data;
        }
        data = _handleData(items, titles, delimiter, filterData, handleData, defaultChar);
        _download(data, fileName);
      }
    }

    return {
      searchFilter: searchFilter,
      selectFilter: selectFilter,
      timeFilter: timeFilter,
      editItem: editItem,
      Csv: Csv
    }
  })

　　以上导出CSV方法是导出所有分页的数据，当表结构并非以[{...}, {...}]这种结构返回则比较难以实现通用性。对于没有分页的表，可以解析html来导出当页的数据到CSV。

angular.module('newApp')
  .directive('exportCsv', ['$parse', '$timeout', function ($parse, $timeout) {
    /*
      This is used for export ShownTable, Only current page.
      You do not need to handle data.

      For example:
        if ngTable:
          <a class="btn btn-primary" ng-click='csv.generate($event, "FileName", "ngTableBindname")' href=''>export</a>
          <table ng-table="ngTableBindname" class="table trans-table table-hover dahuo-table" width="100%" export-csv="csv">
        else:
          <a class="btn btn-primary" ng-click='csv.generate($event, "FileName", "tableId")' href=''>export</a>
          <table id="tableId" class="table trans-table table-hover dahuo-table" width="100%" export-csv="csv">
    */
    var delimiter = ',';
    var tables = {};
    var type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
    return {
      restrict: 'A',
      scope: false,
      link: function(scope, element, attrs) {
        var data = '';
        if (attrs.ngTable){
          tables[attrs.ngTable] = element;
        }else {
          tables[attrs.id] = element;
        }
        function stringify(str) {
          return '"' + str.replace(/^\s\s*/, '').replace(/\s*\s$/, '').replace(/"/g,'""') + '"';
        }
        function parseTable(table) {
          data = '';
          if (tables[table]){
            var rows = tables[table].find('tr');
          }else {
            return data
          }
          angular.forEach(rows, function(row, i) {
            var tr = angular.element(row),
              tds = tr.find('th'),
              rowData = '';
            if (tr.hasClass('ng-table-filters')) {
              return;
            }
            if (tds.length === 0) {
              tds = tr.find('td');
            }
            angular.forEach(tds, function(td) {
              rowData += stringify(angular.element(td).text()) + Array.apply(null, Array(td.colSpan)).map(function () { return delimiter; }).join('');
            });
            rowData = rowData.slice(0, rowData.length - 1);
            data += rowData + '\n';
          });
        }

        function download(data, filename) {
          var blob = new Blob(["\ufeff" + data], {
            type: type
          });
          saveAs(blob, filename);
        }

        var csv = {
          generate: function(event, filename, table) {
            if (table){
              parseTable(table);
              download(data, filename);
            } else {
              parseTable();
              download(data, filename);
            }
          }
        };
        $parse(attrs.exportCsv).assign(scope.$parent, csv);
      }
    }
  }])