앵귤러JS(Agular, 이하 앵귤러)에서 앵귤러UI(AgularUI)에서 ng-grid라는 것을 지원해 줍니다.
(참고 : AngularUI, Angular UI Grid )
다양한 기능을 오픈소스로 만날 기회!!
지만 상용 그리드(grid)에 비해서 기능이 좀 모자라긴 합니다 ㅎㅎㅎㅎ
ng-grid에서는 pdf나 cvs로 출력해주는 기능이 있습니다.
그런데 이 기능을 사용하면 이상한 점을 보게 됩니다.....
필터가 빠진 체로 출력됩니다.
1. 문제 발견
아래 예제는 그리드를 만들고 컬럼에 필터를 적용하였습니다.
"눌러서 cvs 저장" 버튼을 눌러 다운로드 받아 봅시다.
일반적으로 사용자는 화면에 보이는 데이터를 받는다고 생각합니다.
그런데 파일을 받아보면 원본 데이터를 받은 것을 알 수 있습니다.
2. 문제의 원인
이 문제는 의외로 간단한 원인이 있습니다.
'ui-grid.js'파일을 열어보면 'cvs'를 출력할 때 'getData'함수를 호출하는데 여기서 인자를 3개만 쓰고 있습니다.
앵귤러UI의 API 문서를 보면 4번째 인자가 없으면 'false'가 들어간다고 되어 있습니다.
(참고 : UI Grid API - uiGridExporterService)
결국 'csvExport'는 원본을 출력한다는 소리가 됩니다.
3. 해결 방법
이 문제를 해결하려면 'ui-grid.js'를 수정하던가 직접 'csvExport'를 구현해야 합니다.
3-1. 'ui-grid.js'를 수정하는 방법
'ui-grid.js'를 열어 17788라인과 183095라인의 함수를 아래와 같이 수정합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
//17788라인의 'csvExport'함수 수정
//applyCellFilters값이 없으면 'false'를 기본값으로 사용하고 있으면 들어온 값을 사용합니다.
csvExport: function (rowTypes, colTypes, applyCellFilters) {
service.csvExport(grid, rowTypes, colTypes, (applyCellFilters === undefined ? false : applyCellFilters));
},
//18295라인의 'csvExport'함수를 수정
csvExport: function (grid, rowTypes, colTypes, applyCellFilters) {
var self = this;
this.loadAllDataIfNeeded(grid, rowTypes, colTypes, applyCellFilters).then(function() {
var exportColumnHeaders = grid.options.showHeader ? self.getColumnHeaders(grid, colTypes) : [];
var exportData = self.getData(grid, rowTypes, colTypes, applyCellFilters);
var csvContent = self.formatAsCsv(exportColumnHeaders, exportData, grid.options.exporterCsvColumnSeparator);
self.downloadFile (grid.options.exporterCsvFilename, csvContent, grid.options.exporterCsvColumnSeparator, grid.options.exporterOlderExcelCompatibility);
});
}, |
cs |
3-2. 직접 코드를 만드는 방법
준비중입니다.
4. 테스트
이제 'csvExport'를 콜할 때 3번째 인자로 'true'를 주게 되면 필터가 적용된 데이터가 출력됩니다.
아래 예제를 사용하여 테스트해봅시다.
이제 아래와 같이 필터가 적용된 데이터가 다운로드된 것을 볼 수 있습니다.
마무리
은근이 'ui-grid'에 빠진 내용이 많다고 생각되는 이유 중에 하나가 이거입니다-_-;;;
이 정도는 옵션으로 넣어도 어렵지 않은데 왜 픽스되어 있는 건지 모르겠네요.
