Angularjs 使用外部分页和导出数据的ui网格
我目前正在使用外部分页实现的ui网格来显示我的数据。我遇到了as问题,我只能导出当前查看的数据,但是我还需要能够导出所有数据Angularjs 使用外部分页和导出数据的ui网格,angularjs,pagination,export-to-csv,angular-ui-grid,Angularjs,Pagination,Export To Csv,Angular Ui Grid,我目前正在使用外部分页实现的ui网格来显示我的数据。我遇到了as问题,我只能导出当前查看的数据,但是我还需要能够导出所有数据 有人知道使用外部分页导出所有数据的解决方法吗?好的,所以我以ui网格服务器端为例,稍微修改了他们的plnkr。我只是在ui网格外创建了一个按钮,该按钮调用将json转换为CSV并下载文件的数据源 导出数据 然后在控制器中: $scope.exportAllData = function() { setTimeout(function() { $http
有人知道使用外部分页导出所有数据的解决方法吗?好的,所以我以ui网格服务器端为例,稍微修改了他们的plnkr。我只是在ui网格外创建了一个按钮,该按钮调用将json转换为CSV并下载文件的数据源
导出数据
然后在控制器中:
$scope.exportAllData = function()
{
setTimeout(function()
{
$http.get('largeLoad.json').success(function(response)
{
$scope.JSONToCSVConvertor(response, "Data Title", true);
});
},100);
};
$scope.JSONToCSVConvertor = function(JSONData, ReportTitle, ShowLabel)
{
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';
//Set Report title in first row or line
CSV += ReportTitle + '\r\n\n';
//This condition will generate the Label/Header
if (ShowLabel) {
var row = "";
//This loop will extract the label from 1st index of on array
for (var index in arrData[0]) {
//Now convert each value to string and comma-seprated
row += index + ',';
}
row = row.slice(0, -1);
//append Label row with line break
CSV += row + '\r\n';
}
//1st loop is to extract each row
for (var i = 0; i < arrData.length; i++) {
var row = "";
//2nd loop will extract each column and convert it in string comma-seprated
for (var index in arrData[i]) {
row += '"' + arrData[i][index] + '",';
}
row.slice(0, row.length - 1);
//add a line break after each row
CSV += row + '\r\n';
}
if (CSV == '') {
alert("Invalid data");
return;
}
//Generate a file name
var fileName = "MyReport_";
//this will remove the blank-spaces from the title and replace it with an underscore
fileName += ReportTitle.replace(/ /g,"_");
//Initialize file format you want csv or xls
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
// Now the little tricky part.
// you can use either>> window.open(uri);
// but this will not work in some browsers
// or you will not get the correct file extension
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
$scope.exportAllData=function()
{
setTimeout(函数()
{
$http.get('largeLoad.json').success(函数(响应)
{
$scope.JSONToCSVConvertor(响应,“数据标题”,true);
});
},100);
};
$scope.JSONToCSVConvertor=函数(JSONData、ReportTitle、ShowLabel)
{
//如果JSONData不是对象,那么JSON.parse将解析对象中的JSON字符串
var arrData=typeof JSONData!=“object”?JSON.parse(JSONData):JSONData;
var CSV=“”;
//在第一行或第一行设置报表标题
CSV+=ReportTitle+'\r\n\n';
//此条件将生成标签/标题
如果(显示标签){
var行=”;
//此循环将从数组的第一个索引中提取标签
对于(arrData[0]中的var索引){
//现在将每个值转换为字符串和逗号分隔符
行+=索引+',';
}
row=row.slice(0,-1);
//用换行符追加标签行
CSV+=行+'\r\n';
}
//第一个循环是提取每一行
对于(变量i=0;i>window.open(uri);
//但这在某些浏览器中不起作用
//否则您将无法获得正确的文件扩展名
//这个技巧将生成一个temp我最终使用了ui网格中包含的csvExport函数。我添加了一个“全部导出”自定义菜单项,效果非常好!下面是我的代码:
gridMenuCustomItems: [
{
title: 'Export All',
action: function ($event) {
$http.get(url).success(function(data) {
$scope.gridOptions.totalItems = data.totalFeatures;
$scope.gridOptions.data = data.features;
$timeout(function()
{
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.csvExport( uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, myElement );
}, 1000);
});
}
}
]
希望这对其他人有所帮助!分页与数据有什么关系?数据一次拉入X行数吗?是的,因为它是外部的,所以我正在进行查询以确定要显示哪些数据…因此,当我尝试导出所有数据时,我需要能够进行另一次查询以获取所有数据…只是不确定如何/在何处使用ui-g实现这一点rid。我不认为您会使用ui网格来获取数据。我不确定您的数据源,但您不能从您正在使用的纯ole$http.get()服务器端脚本中获取数据吗
?我正在使用ui网格菜单导出数据…我不知道如何使用现有ui网格菜单实现自定义http.get调用。我希望有人能举一个例子来说明如何做到这一点。下面是我正在使用的本机ui网格导出:表的数据源是什么?谢谢!我将尝试在cus中实现您的解决方案tom菜单项(而不是按钮)…我会让你知道它是如何运行的。如果你有问题,请告诉我。我会尽力帮助你。
gridMenuCustomItems: [
{
title: 'Export All',
action: function ($event) {
$http.get(url).success(function(data) {
$scope.gridOptions.totalItems = data.totalFeatures;
$scope.gridOptions.data = data.features;
$timeout(function()
{
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.csvExport( uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, myElement );
}, 1000);
});
}
}
]