在 AngularJS 中从 Smart Table 导出数据
Export data from Smart Table in AngularJS
在 AngularJS 项目中,我使用智能 Table 模块和 asafdav/ng-csv 将数据从智能 table 导出到 CSV。
我成功地将数据从 smart table 导出到 csv,但仅从第一页导出。我从 $scope.displayedCollection
变量导出数据(与 st-table 指令中的相同)。此变量中的数据与 table 中的数据完全相同,但仅来自第一页。您知道如何导出整个数据吗(通过智能 table 进行排序和过滤)。我认为在将数据拆分到页面之前,我应该 "plug in" 智能 table 模块。但是怎么办?
我创建了自己的指令,以便在分页之前访问 table 中的数据:
angular.module('smart-table')
.directive('stFilteredCollection', function () {
return {
restrict: 'A',
require: '^stTable',
scope: {
stFilteredCollection: '='
},
controller: 'stTableController',
link: function (scope, element, attr, ctrl) {
scope.$watch(function () {
return ctrl.getFilteredCollection();
}, function (newValue, oldValue) {
scope.stFilteredCollection = ctrl.getFilteredCollection();
});
}
};
});
要使用它,请添加 st-filtered-collection
属性和变量名称,该变量将在分页前设置为来自 table 的数据:
<table st-table="..." st-safe-src="..." st-filtered-collection="filteredCollection">
...
</table>
从现在开始,您可以在控制器中使用 $scope.filteredCollection
变量。
将 ng-csv.min.js
添加到您的主文件 (index.html
)。另请确保您要添加 angular-sanitize.min.js
.
HTML:
<td><a class="btn btn-default" st-expor ng-csv="displayed" filename="test.csv" csv-header="['Field A', 'Field B', 'Field C']">ExportNow</a></td>
控制器:
top line
var myApp = angular.module('myApp', ['smart-table', 'ui.bootstrap','ngSanitize', 'ngCsv']);
somewhere in your controller
.directive('stExport', function(csv){
return {
restrict:'E',
require:'^stTable',
template:'<button ng-click="export()"></button>',
link:function(scope, element, smartTable){
scope.export = function(){
var filtered = smartTable.getFilteredCollection();
csv(filtered);
}
}
}
})
在 AngularJS 项目中,我使用智能 Table 模块和 asafdav/ng-csv 将数据从智能 table 导出到 CSV。
我成功地将数据从 smart table 导出到 csv,但仅从第一页导出。我从 $scope.displayedCollection
变量导出数据(与 st-table 指令中的相同)。此变量中的数据与 table 中的数据完全相同,但仅来自第一页。您知道如何导出整个数据吗(通过智能 table 进行排序和过滤)。我认为在将数据拆分到页面之前,我应该 "plug in" 智能 table 模块。但是怎么办?
我创建了自己的指令,以便在分页之前访问 table 中的数据:
angular.module('smart-table')
.directive('stFilteredCollection', function () {
return {
restrict: 'A',
require: '^stTable',
scope: {
stFilteredCollection: '='
},
controller: 'stTableController',
link: function (scope, element, attr, ctrl) {
scope.$watch(function () {
return ctrl.getFilteredCollection();
}, function (newValue, oldValue) {
scope.stFilteredCollection = ctrl.getFilteredCollection();
});
}
};
});
要使用它,请添加 st-filtered-collection
属性和变量名称,该变量将在分页前设置为来自 table 的数据:
<table st-table="..." st-safe-src="..." st-filtered-collection="filteredCollection">
...
</table>
从现在开始,您可以在控制器中使用 $scope.filteredCollection
变量。
将 ng-csv.min.js
添加到您的主文件 (index.html
)。另请确保您要添加 angular-sanitize.min.js
.
HTML:
<td><a class="btn btn-default" st-expor ng-csv="displayed" filename="test.csv" csv-header="['Field A', 'Field B', 'Field C']">ExportNow</a></td>
控制器:
top line
var myApp = angular.module('myApp', ['smart-table', 'ui.bootstrap','ngSanitize', 'ngCsv']);
somewhere in your controller
.directive('stExport', function(csv){
return {
restrict:'E',
require:'^stTable',
template:'<button ng-click="export()"></button>',
link:function(scope, element, smartTable){
scope.export = function(){
var filtered = smartTable.getFilteredCollection();
csv(filtered);
}
}
}
})