ui-grid是angularjs常用的表格插件，不仅可以显示表格数据，还提供了很多其他可选的操作功能。
如果想详细了解ui-gird，附上官网地址，上面也有很多详细的例子：http://ui-grid.info/
这篇重点讲一下怎样导出ui-grid表格中数据，将数据以.csv文件形式导出。
ui-grid基本用法如下：
html:
<body>
<span type="button" class="btn btn-default" ng-click="recoedExportAsCsv()">导出</span>
<div ng-controller="MyCtrl">
<div ui-grid="gridOptions" style="width: 100%; height: 426px;" ui-grid-pagination ui-grid-selection ui-grid-exporter ui-grid-resize-columns ui-grid-auto-resize class="grid"></div>
</div>
</body>
js:
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
app.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{
field: "serialCode",
displayName: "流水号",
},
{
field: "payChannel",
displayName: "支付方式",
},
{
field: "payStatus",
displayName: "状态",
}
],
enableSorting: true, //是否排序
useExternalSorting: false, //是否使用自定义排序规则
enableGridMenu: false, //是否显示grid 菜单
enableHorizontalScrollbar: 0, //grid水平滚动条是否显示, 0-不显示 1-显示
enableVerticalScrollbar: 0, //grid垂直滚动条是否显示, 0-不显示 1-显示
//-------- 分页属性 ----------------
enablePagination: true, //是否分页，默认为true
enablePaginationControls: true, //使用默认的底部分页
paginationPageSizes: [10], //每页显示个数可选项
paginationCurrentPage: 1, //当前页码
paginationPageSize: 10, //每页显示个数
//paginationTemplate:"<div></div>", //自定义底部分页代码
totalItems: 0, // 总数量
useExternalPagination: true,//是否使用分页按钮
//----------- 选中 ----------------------
enableFooterTotalSelected: true, // 是否显示选中的总数，默认为true, 如果显示，showGridFooter 必须为true
enableFullRowSelection: true, //是否点击行任意位置后选中,默认为false,当为true时，checkbox可以显示但是不可选中
enableRowHeaderSelection: true, //是否显示选中checkbox框 ,默认为true
enableRowSelection: true, // 行选择是否可用，默认为true;
enableSelectAll: true, // 选择所有checkbox是否可用，默认为true;
enableSelectionBatchEvent: true, //默认true
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
}
isRowSelectable: function (row) { //GridRow
$scope.index += 1;
if ($scope.index == 1) {
row.grid.api.selection.selectRow(row.entity); // 选中行
}
},
modifierKeysToMultiSelect: true,//默认false,为true时只能 按ctrl或shift键进行多选, multiSelect 必须为true;
multiSelect: true,// 是否可以选择多个,默认为true;
noUnselect: false,//默认false,选中后是否可以取消选中
selectionRowHeaderWidth: 30,//默认30 ，设置选择列的宽度；
//---------------api---------------------
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
//分页按钮事件
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
$scope.index =0;
//行选中事件
$scope.gridApi.selection.on.rowSelectionChanged($scope, function (row, event) {
if (row) {
$scope.testRow = row.entity;
$scope.isSelected = row.isSelected;
}
});
},
exporterCsvColumnSeparator: ',',
exporterOlderExcelCompatibility : true,//是否兼容低版本excel
exporterHeaderFilterUseName : true,
exporterMenuCsv : true,
exporterPdfDefaultStyle: {fontSize: 11},
};
var myData = [{"serialCode":"11111,"payChannel": "营业厅","payStatus":"1"},
{"serialCode":"22222,"payChannel": "营业厅","payStatus":"1"},
{"serialCode":"33333,"payChannel": "营业厅","payStatus":"1"}
{"serialCode":"44444,"payChannel": "营业厅","payStatus":"1"}]
//给你的表格赋值
$scope.gridOptions.data = myData;
//导出你的数据
$scope.recoedExportAsCsv = function(){
var uiGridExporterService = $scope.gridApi.exporter;
uiGridExporterService.csvExport("all","all");
}
}]);
表格的样子是类似这样的
点击导出，便能导出一个download.csv的文件，里面便是表格中的数据。
过程就是以上这些，接下来说下重点
1.你的module中需要引入ui.grid.exporter.只引入ui.grid是不能导出任何文件的。
2.这里download.csv是系统默认的，你如果不特意设置，就是这个名字了。ui-grid中有一个可以设置.csv文件名字的属性：
exporterCsvFilename: '你想要的名字.csv',
把上面这个属性定义到你的$scope.gridOption里面， 就可以生效。
3.如果你的表头，或者标的内容中有中文字符，就可能会遇到中文乱码的可能。
我导出的时候就遇到这个问题，导出的文件用Notepad打开可以显示中文，用excel打开后全是乱码。这有可能是因为ui-grid不能兼容旧版本的excel.
在$scope.gridOption中设置如下属性：
exporterOlderExcelCompatibility : true,
把属性设置成true就能解决以上乱码问题了。
4.其实ui-grid自带了导出功能，不仅可以导出.csv文件，还可以到出PDF，在菜单栏中可以选择，我的代码把菜单栏隐藏了
enableGridMenu: false, //是否显示grid 菜单
把这个属性设置成True菜单栏就可以显示了,在表格的右上角。大概是这个样子的
但一般情况为了用户方便操作，都是把导出功能单独写出来。
5.导出方法中有一句话：
uiGridExporterService.csvExport("all","all");
这句话的意思是把所有的行和列都导出来。这个参数也可见的VISIBLE，或者已选的SELECTED。具体这个方法怎么用可以去读源码，我也是摸索着写出来的。
源码在介里：
https://github.com/angular-ui/ui-grid/blob/ac1d75e/src/features/exporter/js/exporter.js#L30
csv的导出大概这610行左右，PDF的导出大概在990行左右。