엑셀 방법 1.
엑셀 방법2.
방법 2.
.java
방법 3.
방법3 설명
1. export 할 그리드 혹은 데이터셋을 얻어 옵니다.
- export 할 데이터를 getExportData를 이용하여 각각 추출합니다.
- 시트 명으로 설정할 name을 지정합니다.
- 추출한 데이터들을 하나의 JSON 데이터로 머징합니다.
- 파일 크기에 따라 responseType을 filedownload / blob으로 지정한 후 서브미션에 담아 서버로 전송합니다.
2번 절차에서 그리드의 데이터를 추출하고 싶으시다면 그리드객체.getExportData()를 사용하시면 되고,
데이터셋과 그리드의 데이터를 추출하고 싶으시다면 cpr.utils.ExportUtil.getExportData()를 사용하시기 바랍니다.
3번 절차에서는 cpr.utils.ExportUtil.merge() 을 사용하여 머징하시기 바랍니다.
다만, cpr.utils.ExportUtil.getExportData()의 파라메터의 경우 control과 exportOption을 받고 있는데, 이 중 exportOption은 json형태의 param값만 지원합니다.
Grid.getExportData()의 경우 json형태와 boolean param을 지원하는 점 참고해주시기 바랍니다.
ExportUtil api 정보는 HelpContents > eXBuilder6 > API Reference > cpr.utils > ExortUtil > Methods 를
그리드의 getExportData() 는 HelpContents > eXBuilder6 > API Reference > cpr.controls > Grid > Methods > getExportData 를
responseType 지정은 HelpContents > eXBuilder6 > 앱 개발 > 컨트롤 > 프로토콜 > 고급 > 파일 다운로드 확인해주세요.
참고하실 샘플(multiSheetExcelExportSample.clx, multiSheetExcelExportSample.js)을 함께 첨부해 드립니다.
eXBuilder6와 연동된 서버프로젝트에 src/exbuilder/web/CleopatraFileExportController.java 파일이 있는지 확인하시고,
서버 구동하셔서 샘플파일을 실행시키시면 동작을 확인하실 수 있습니다.
또한, FAQ 93번에서 제공해드렸던 sample-ui 샘플 프로젝트에도 샘플 파일을 확인하실 수 있습니다.
- ui 파일 경로 = sample-ui/clx-src/template/common/grid/multiSheetExcelExport.clx
- web 파일 경로 = sample-web-spring/src/exbuilder/sample/example/web/PromiseController.java
압축 해제 후 서버를 구동하셔서 확인이 가능합니다.
4월 24일 버전(1.0.1929)부터 서버가 구동중이고 그 서버와 연동된 ui프로젝트의 화면을 여는 상황이라면
디자인탭에서 마우스 오른쪽 클릭하여 Sample-web에서 보기 항목을 눌러서 손쉽게 확인하실 수 있습니다.
그리드
로우 추가
function f_onInsertRow() {
//그리드에 신규 행(Row) 추가
util.Grid.insertRow(app, "grdList", 1);
}
로우 삭제
function f_onDeleteRow() {
var vnIdx = util.Grid.getCheckOrSelectedRowIndex(app, "grdList");
//선택된 행이 없는 경우
if (vnIdx.length == 0) {
util.Msg.alertDlg(app, "WRN-M023", ["삭제할 행"]);
return false;
};
//그리드의 선택된 행(Row) 삭제
util.Grid.deleteRow(app, "grdList", vnIdx)}
헤더 컬럼 idx 추출
function f_onGetHeaderColumn() {
var vsSelVal = util.Control.getValue(app, "cmbGetHeaderColumn");
if (vsSelVal == null) {
var poOptions = {
"confirmCallback": function() {
util.Control.setFocus(app, "cmbGetHeaderColumn");
}
}
util.Msg.alertDlg(app, "WRN-M023", ["header 정보를 취득할 컬럼"], poOptions);
return false;
}
var resultId = util.Grid.getHeaderColumn(app, "grdList", vsSelVal)[0].colIndex;
return resultId;}
그리드 동적 그리기 (일반 그리드)
function f_simpleGrid() {
util.Grid.dynamicGrid(app, "grd1", {
dataSetId: "dsSimpleGrid",
isSimpleGrid: true,
//useSimpleGirdColumnType 속성은 isSimpleGrid 속성 값이 true인 경우에만 동작 합니다.
// useSimpleGirdColumnType: { //columnType control을 배치 여부에 대한 속성
// checkbox: false, //그리드에 columnType 체크박스를 배치 여부(default : true)
// rowindex: false //그리드에 columnType rowindex를 배치 여부(default : true)
// }
});
그리드 동적 그리기 (헤더 병합)
function f_headerRowTwoGrid() {
// 컬럼 너비 배열
var vaColumns = [{
"width": "100px"
}, {
"width": "100px"
}, {
"width": "100px"
}, {
"width": "100px"
}];
// 헤더 영역 정보
var voHeader = {
"rows": [{
"height": "36px"
}, {
"height": "36px"
}],
"cells": [{
"constraint": {
"rowIndex": 1,
"colIndex": 0,
"rowSpan": 1,
"colSpan": 1
},
"configurator": function(cell) {
cell.text = "column1-1";
}
},
{
"constraint": {
"rowIndex": 1,
"colIndex": 1,
"rowSpan": 1,
"colSpan": 1
},
"configurator": function(cell) {
cell.text = "column2-1";
}
},
{
"constraint": {
"rowIndex": 1,
"colIndex": 2,
"rowSpan": 1,
"colSpan": 1
},
"configurator": function(cell) {
cell.text = "column3-1";
}
},
{
"constraint": {
"rowIndex": 1,
"colIndex": 3,
"rowSpan": 1,
"colSpan": 1
},
"configurator": function(cell) {
cell.text = "column4-1";
}
},
{
"constraint": {
"rowIndex": 0,
"colIndex": 0
},
"configurator": function(cell) {
cell.text = "column1";
}
},
{
"constraint": {
"rowIndex": 0,
"colIndex": 1
},
"configurator": function(cell) {
cell.text = "column2";
}
},
{
"constraint": {
"rowIndex": 0,
"colIndex": 2
},
"configurator": function(cell) {
cell.text = "column3";
}
},
{
"constraint": {
"rowIndex": 0,
"colIndex": 3
},
"configurator": function(cell) {
cell.text = "column4";
}
}
]
};
//디테일 영역 정보
var voDetail = {
"rows": [{
"height": "37px"
}],
"cells": [{
"constraint": {
"rowIndex": 0,
"colIndex": 0
},
"configurator": function(cell) {
cell.columnName = "column1";
}
},
{
"constraint": {
"rowIndex": 0,
"colIndex": 1
},
"configurator": function(cell) {
cell.columnName = "column2";
}
},
{
"constraint": {
"rowIndex": 0,
"colIndex": 2
},
"configurator": function(cell) {
cell.columnName = "column3";
}
},
{
"constraint": {
"rowIndex": 0,
"colIndex": 3
},
"configurator": function(cell) {
cell.columnName = "column4";
}
}
]
};
util.Grid.dynamicGrid(app, "grd1", {
dataSetId: "dsHeaderRowTwoGrid",
columns: vaColumns,
header: voHeader,
detail: voDetail
});}
헤더 병합 그리드
function f_headerMergedGrid() {
// 컬럼 너비 배열
var vaColumns = [{
"width": "100px"
}, {
"width": "100px"
}, {
"width": "100px"
}, {
"width": "100px"
}];
// 헤더 영역 정보
var voHeader = {
"rows": [{
"height": "36px"
}, {
"height": "36px"
}],
"cells": [{
"constraint": {
"rowIndex": 1,
"colIndex": 1,
"rowSpan": 1,
"colSpan": 1
},
"configurator": function(cell) {
cell.targetColumnName = "column2";
cell.text = "column2";
}
},
{
"constraint": {
"rowIndex": 1,
"colIndex": 2,
"rowSpan": 1,
"colSpan": 1
},
"configurator": function(cell) {
cell.targetColumnName = "column3";
cell.text = "column3";
}
},
{
"constraint": {
"rowIndex": 1,
"colIndex": 3,
"rowSpan": 1,
"colSpan": 1
},
"configurator": function(cell) {
cell.targetColumnName = "column4";
cell.text = "column4";
}
},
{
"constraint": {
"rowIndex": 0,
"colIndex": 0,
"rowSpan": 2,
"colSpan": 1
},
"configurator": function(cell) {
cell.text = "column1";
}
},
{
"constraint": {
"rowIndex": 0,
"colIndex": 1,
"rowSpan": 1,
"colSpan": 3
},
"configurator": function(cell) {
cell.text = "헤더 병합";
}
}
]
};
//디테일 영역 정보
var voDetail = {
"rows": [{
"height": "37px"
}],
"cells": [{
"constraint": {
"rowIndex": 0,
"colIndex": 0
},
"configurator": function(cell) {
cell.columnName = "column1";
}
},
{
"constraint": {
"rowIndex": 0,
"colIndex": 1
},
"configurator": function(cell) {
cell.columnName = "column2";
}
},
{
"constraint": {
"rowIndex": 0,
"colIndex": 2
},
"configurator": function(cell) {
cell.columnName = "column3";
}
},
{
"constraint": {
"rowIndex": 0,
"colIndex": 3
},
"configurator": function(cell) {
cell.columnName = "column4";
}
}
]
};
util.Grid.dynamicGrid(app, "grd1", {
dataSetId: "dsHeaderMergedGrid",
columns: vaColumns,
header: voHeader,
detail: voDetail
});}
그리드 필터
그리드 동적 추가
1번째 인덱스 뒤에 컬럼을 추가한다.
1, true
