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

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,
};
}]);

<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>

<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>

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('下线失败');
});
};
}
]);

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();

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

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

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
}
})

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);
}
}
}])