GridView

GridView → Excel 다운로드

다운로드 상태창 제어

advancedExcelDownload 함수의 옵션 설정을 통해 다운로드 상태 표시를 제어할 수 있습니다.

해당 옵션

options.timeout: 다운로드 완료 최대 대기시간 (단위: ms)

options.checkInterval: 다운로드 완료 응답 확인 가능 (단위: ms)

options.onSuccessCallback: 다운로드 성공 시 호출할 함수

options.onFailureCallback: 다운로드 실패 시 호출할 함수

GridView의 수식을 Excel 파일에서도 지원

GridView를 Excel 파일로 다운로드할 경우 GridView가 사용하는 4칙 연산 및 (MIN, MAX, SUM, POWER, AVERAGE, IF, >, < 등) 수식 함수를 Excel 파일에서도 지원할 수 있습니다.

$r_title(수식을 사용하는 GridView (예시))
<w2:column id="col3" blockSelect="false" dataType="number" 
	style="" excelExpression="'col1'+'col2' + 1" width="70" inputType="text" 
	value="" displayMode="label"></w2:column>
<w2:column id="col5" blockSelect="false" dataType="number" 
	style="" excelExpression="sum( 'col1','col2','col3')" 
	inputType="text" width="70" value="" displayMode="label"></w2:column>

Excel 파일 스타일 설정

셀의 선

advancedExcelDownload 함수의 옵션 설정을 통해 셀의 선 스타일을 설정할 수 있습니다.

해당 옵션

infoArr.borderColor: 셀의 선 색상

infoArr.borderWidth: 셀의 선 두께

헤더 폰트를 굵게 표시

아래와 같이 useStyle 및 headerFontBold 설정을 이용하여 GridView를 Excel 파일로 다운로드할 때 헤더 폰트를 굵게 표시할 수 있습니다.

$r_title(사용 예)
var options = {
	useStyle : false,
	headerFontBold : true
}
gridView1.advancedExcelDownload(options);

GridView의 스타일 유지

$r_title(사용 예)
var options = {
	useStyle : true
}
gridView1.advancedExcelDownload(options);

GridView에 setCellClass()로 스타일을 적용 한 후 advancedExcelDownload() 함수를 사용하여 Excel 파일로 다운로드할 경우, options.useStyle="true" 옵션 설정을 통해, 적용한 스타일을 다운로드한 Excel 파일에서도 유지할 수 있습니다.

셀 병합

셀 병합을 유지한 상태로 다운로드

아래와 같이 options.colMerge 및 colMergeValue 설정을 이용하여 셀 병합을 유지한 채로 GridView를 Excel 파일로 다운로드할 수 있습니다.

$r_title(사용 예)
gridView1.advancedExcelDownload({"colMerge":"true", "colMergeValue":"true"});

Excel 파일에서 셀 병합 해제

병합된 셀을 포함하는 GridView를 Excel 파일로 다운로드한 후, Excel에서 병합을 취소할 경우 options.colMergeValue 옵션을 사용하여 엑셀 파일의 셀에 데이터를 채우는 방식을 설정할 수 있습니다.

옵셜 설정

true: 병합 해제된 모든 셀에 데이터를 채움.

false (기본 값): 첫 행이나 첫 열에만 데이터를 채움

Excel 차트 출력

$r_title(Bar 차트 예제)
options.chart = {
    "chartName": "bar",
    "chartType": "",
    "title": "차트 타이틀",
    "yTitle": "Y 타이틀",
    "xTitle": "X 타이틀",
    "startRowIndex": 0,
    "startColIndex": 5,
    "endRowIndex": 20,
    "endColIndex": 15,
    "serAxis": "true",
    "catAxis": "true",
    "catAxisRange": {
        "startColIndex": 1,
        "startRowIndex": 0,
        "endColIndex": 4,
        "endRowIndex": 0
    },
    "serAxisRange": {
        "startColIndex": 0,
        "startRowIndex": 1,
        "endColIndex": 0,
        "endRowIndex": 4
    },
    "dataAxisRange": {
        "startColIndex": 1,
        "startRowIndex": 1,
        "endColIndex": 4,
        "endRowIndex": 1
    },
    "catGridLines": "true", // 가로
    "serGridLines": "true", // 세로
    "legend": "true", // 범례
    "legendPosition": "bottom", //범례위치
};

var infoArr = [];
gridView1.advancedExcelDownload(options, infoArr);

$r_title(Line 차트 예제)
options.chart = {
    "chartName": "line",
    "chartType": "",
    "title": "차트 타이틀",
    "yTitle": "Y 타이틀",
    "xTitle": "X 타이틀",
    "startRowIndex": 0,
    "startColIndex": 5,
    "endRowIndex": 20,
    "endColIndex": 15,
    "serAxis": "true",
    "catAxis": "true",
    "catAxisRange": {
        "startColIndex": 1,
        "startRowIndex": 0,
        "endColIndex": 4,
        "endRowInex": 0
    },
    "serAxisRange": {
        "startColIndex": 0,
        "startRowIndex": 1,
        "endColIndex": 0,
        "endRowIndex": 4
    },
    "dataAxisRange": {
        "startColIndex": 1,
        "startRowIndex": 1,
        "endColIndex": 4,
        "endRowIndex": 4
    },
    "catGridLines": "true", // 가로
    "serGridLines": "true", // 세로
    "legend": "true", // 범례
    "legendPosition": "bottom" // 범례위치
};

var infoArr = [];
gridView1.advancedExcelDownload(options, infoArr);

비밀번호 설정

아래와 같이 advanedExcelDownload 함수의 옵션인 pwd를 사용하여 다운로드하는 Excel 파일의 비밀번호를 설정할 수 있습니다.

$r_title(사용 예)
var options = {};
options.fileName = "excel.xlsx";
options.pwd = WebSquare.text.BASE64Encoder("password");
gridView1.advancedExcelDownload(options);

단, websquare.xml 파일에 아래와 같이 tempDir을 설정해야 합니다.

$r_title(tempDir 지정)
<websquare>
	<excel>
		<download>
			<encrypt tempDir="경로"/>
		</download>
	</excel>
</websquare>

다운로드 크기 제한

advancedExcelDownload 함수를 통해 엑셀 파일로 다운로드 할 데이터 크기를 제한할 수 있습니다.

관련 옵션

options.maxCellCount: 엑셀 파일로 다운로드할 수 있는 최대 셀 개수

options.maxRowCount: 엑셀 파일로 다운로드할 수 있는 최대 행 개수

GridView가 설정한 최대 셀 혹은 행 개수를 초과할 경우, 다운로드 요청이 서버로 전달되지 않으며 아래와 같은 알림 메시지가 출력됩니다.

Excel 파일 상의 서식 지정

options.useDataFormat : "true" 설정을 사용하는 advancedExcelDownload() 함수를 통해 GridView를 Excel 파일로 다운로드할 경우, 다운로드한 Excel 파일 상에서 출력할 데이터의 표시 형식(셀 타입)을 Body, SubTotal, Footer의 컬럼의 excelCellType 속성을 통해 지정할 수 있습니다.

• excelCellType

  • "number" : Excel 상에서 "숫자"로 출력됨.

  • "bigDecimal" : Excel 상에서"숫자"로 출력됨.

  • "text" : Excel 상에서 "텍스트"로 출력됨.

  • "date" : Excel 상에서 "날짜"로 출력됨.

$r_title(advancedExcelDownload(); 사용 예)
var options = {
    useDataFormat: true,
    //useSubTotal: true,   
    //useFooter: true
};
gridView1.advancedExcelDownload(options);

Excel 포맷

표시 형식 (excelFormat)

advancedExcelDownload() 함수를 통해 GridView를 Excel 파일로 다운로드할 경우, 다운로드한 Excel 파일 상에서 적용할 데이터의 표시 형 gridView.column의 excelFormat 속성을 통해 지정할 수 있습니다.

표시 형식 (excelFormatter)

GridView의 advancedExcelDownload() 함수를 통해 Excel 파일을 다운로드할 때, Excel 파일에서 해당 컬럼에 포맷을 적용하기 위해 실행할 사용자 함수를 지정할 수 있습니다. gridView.column의 excelFormatter 속성 값으로 해당 함수명을 설정하십시오. 단, 해당 사용자 함수는 직접 구현해야 합니다.

숫자 연산 지원

inputType="custom"이고 dataType="number" (혹은 "bigDecimal")인 셀이 포함된 GridView를 Excel 파일로 다운로드할 때, 다운로드한 Excel 파일에서 해당 셀 데이터를 숫자로 인식하고 숫자 연산을 지원할 수 있습니다. advancedExcelDownload() 함수를 사용할 때 options.customToDataType="true" 옵션 설정을 추가하십시오.

$r_title(사용 예)
var options = {}; 
options.fileName = "test.xlsx";  
options.customToDataType = "true";
gridView1.advancedExcelDownload( options );

Excel 파일의 헤더 높이 지정

advancedExcelDownload() 함수를 통해 GridView를 Excel 파일로 다운로드할 경우, headerRowHeight 옵션을 설정하여 Excel 파일의 헤더 높이를 직접 설정할 수 있습니다.

$r_title(headerRowHeight 옵션 설정 예)
var excelOpt = {};
excelOpt.fileName = "excelData_oneHeader_marge.xls";
var rowHeightArr = [
    {
        "rowIndex": 0,
        "height": 200
    }
];
excelOpt.headerRowHeight = rowHeightArr;
gridView1.advancedExcelDownload(excelOpt);

다운로드 할 데이터 종류(value 혹은 label)를 GridView 전체에 대해 명시

GridView 컬럼의 inputType이 "select", "autoComplete", 혹은 "checkcombobox"인 경우, value 값과 label 값 중 어떤 값을 다운로드 할 지 선택할 수 있습니다.

$r_title(options.Type 사용 예)
var options = {
    type: "0" // value 값을 다운로드. 
    // type: "1" // label 값을 다운로드. 
};
gridView1.advancedExcelDownload(options);

다운로드할 데이터 종류(value 혹은 label)를 컬럼 별로 명시

GridView 컬럼의 inputType이 "select", "autoComplete", 혹은 "checkcombobox"인 경우, value 값과 label 값 중 어떤 값을 다운로드 할 지 각 컬럼 별로 지정할 수 있습니다.

$r_title(options.Type 및 options.convertIndex 사용 예)
var options = {
    type: "0" // value 값을 다운로드. 
    convertIndex: "0,2" // 단, 인덱스가 0인 컬럼과 2인 컬럼은 label 값을 다운로드. 
};
gridView1.advancedExcelDownload(options);

Excel 파일에서 공백 제거

advancedExcelDownload() 함수를 사용하여 GridView를 Excel 파일로 다운로드할 때, GridView 각 셀에 포함된 공백을 제거할 수 있습니다.

$r_title(사용 예)
var options = {
  ...
  trim: true
};
gridView1.advancedExcelDownload(options);

다운로드한 Excel 파일에 셀 추가

GridView 외에 셀을 추가하여 Excel 파일로 다운로드할 수 있습니다. 추가할 셀은 infoArray 배열을 통해 정의하십시오. 아래 예제와 같이 추가할 셀의 위치 및 해당 셀의 스타일을 지정할 수 있으며, Excel 수식(infoArray.excelExpression)을 사용하여 해당 셀의 값을 설정할 수 있습니다.

$r_title(infoArray 옵셜 설정 예)
var options = {

};
var infoArray = [

    {
        rowIndex: 31,
        colIndex: 2,
        rowSpan: 1,
        colSpan: 1,
        text: "Total",
        textAlign: "center",
        fontSize: "20px",
        bgColor: "green"
    },
    {
        rowIndex: 31,
        colIndex: 3,
        rowSpan: 1,
        colSpan: 1,
        text: "",
        excelExpression: "D2*D29",
        textAlign: "center",
        fontSize: "20px",
        bgColor: "orange"
    }
];
gridView1.advancedExcelDownload(options, infoArray);

오류 코드

advancedExcelDownload() 함수를 통해 GridView를 Excel 파일로 다운로드할 때 표시는 오류는 다음과 같습니다.

Excel 업로드 → GridView

제외할 컬럼 지정

아래와 같이 advanedExcelUpload 함수의 옵션인 removeColumns를 사용하여 업로드에서 제외할 Excel 파일의 컬럼을 지정할 수 있습니다.

$r_title(사용 예)
scwin.trigger1_onclick = function(e) {
    var opt = {};
    ...
    opt.removeColumns = "0, 1, 2"; // 인덱스가 0, 1, 2인 컬럼을 제외하고 업로드.
    ...
    gridView1.advancedExcelUpload(opt);
};

지정한 Excel 시트만 업로드

sheetName 옵션을 사용하여 Excel 파일의 지정한 시트만 GridView로 업로드할 수 있습니다.

$r_title(사용 예)
var options = {
    headerExist: "1",
    sheetName: "sheet3"
};
gridView1.advancedExcelUpload(options);

헤더 제외 후 업로드

advanedExcelUpload 함수의 옵션인 headerExist를 사용하여 헤더를 제외한 Excel 파일을 업로드할 수 있습니다.

날짜 포맷 지정

아래와 같이 advanedExcelUpload 함수의 옵션인 dateFormat을 사용하여 업로드 후 Excel 파일에 표시될 날짜 포맷을 지정할 수 있습니다.

$r_title(사용 예)
gridView1.advancedExcelUpload({
	...
	"dateFormat" : "MM-yyyy"
	...
});

// (결과) 
// Excel 파일에 지정한 형식으로 날짜가 표시됨.

업로드 창을 WFrame으로 생성

advancedExcelUpload(options); 함수를 사용하여 Excel 업로드 창을 WFrame으로 생성하고 업로드 창의 속성을 지정할 수 있습니다.

$r_title(advancedExcelUpload(options);)
var options = {
    wframe: true,
    name: "Upload Your Excel",
    features: "top=20,left=20,width=400,height=200",
    className: "border",
    resizable: false,
    windowDragMove: true
};
gridView1.advancedExcelUpload(options);

다국어 팝업창

advancedExcelUpload를 통해 엑셀 파일을 업로드할 경우 아래와 같은 팝업 창이 표시됩니다. 본 장은 팝업 창에 다국어를 적용하는 방법을 설명합니다.

config.xml 파일에 useLanguagePack="true" 설정을 추가하십시오.

$r_title(config.xml 설정)
<languagePack useLanguagePack="true">

아래의 방법으로 현재 브라우저의 언어를 확인하고, 원하는 언어를 다국어로 설정할 수 있습니다.

1. 브라우저의 언어를 확인합니다.

2. 언어를 선택합니다.

3. 엑셀파일업로드 기능이 포함된 페이지를 다시 로딩합니다.

4. 선택한 언어가 표시되는지 확인합니다.

$r_title(브라우저 언어 확인 (예))
<script ev:event="onclick" type="javascript">
	<![CDATA[
	alert(	"navigator.language  :  " + 
			navigator.language + 
			"\nnavigator.browserLanguage  :  " + 
			navigator.browserLanguage );

]]>
</script>

$r_title(selectbox1에서 선택한 언어를 설정 (예))
<script ev:event="onclick(e)" type="javascript">
	<![CDATA[
	WebSquare.cookie.setCookie("locale", selectbox1.getValue());
	WebSquare.cookie.setCookie("system_language",selectbox1.getValue());
]]>
</script>

$r_title(사용 예)
<?xml version="1.0" encoding="UTF-8"?>
<html
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ev="http://www.w3.org/2001/xml-events"
	xmlns:w2="http://www.inswave.com/websquare"
	xmlns:xf="http://www.w3.org/2002/xforms">
	<head>
		<w2:type>DEFAULT</w2:type>
		<w2:buildDate/>
		<xf:model>
			<xf:instance>
				<data
					xmlns=""/>
				</xf:instance>
				<w2:dataCollection baseNode="map"></w2:dataCollection>
				<w2:workflowCollection></w2:workflowCollection>
			</xf:model>
			<script type="javascript">
				<![CDATA[ 

        ]]>
			</script>
		</head>
		<body>
			<xf:trigger id="trigger3" style="position: absolute ;left:187px;top:14px;width:185px;height:23px;" type="button">
				<xf:label>브라우저 언어 확인</xf:label>
				<script ev:event="onclick" type="javascript">
					<![CDATA[
			alert("navigator.language  :  " + navigator.language + "\nnavigator.browserLanguage  :  " + navigator.browserLanguage );
			]]>
				</script>
			</xf:trigger>
			<xf:select1 allOption="" appearance="minimal" chooseOption="" direction="auto" disabled="false" displayMode="label" id="selectbox1"
    		style="position: absolute ;left:12px;top:72px;width: 100px;height: 20px;" submenuSize="auto">
				<xf:choices>
					<xf:item>
						<xf:label>EN</xf:label>
						<xf:value>en</xf:value>
					</xf:item>
					<xf:item>
						<xf:label>KO</xf:label>
						<xf:value>ko</xf:value>
					</xf:item>
				</xf:choices>
			</xf:select1>
			<script ev:event="onclick(e)" type="javascript">
				<![CDATA[
	WebSquare.cookie.setCookie("locale", selectbox1.getValue());
    WebSquare.cookie.setCookie("system_language",selectbox1.getValue());
]]>
			</script>
		</body>
	</html>

다음은 클라이언트에서 다국어를 변환한 후의 모습입니다. 파일 선택 버튼은 사용자 PC에 설치된 OS에 따라 결정됩니다.

readCSV() 함수를 사용하여 CSV를 GridView로 업로드할 수 있습니다.

업로드 할 데이터 종류(value 혹은 label)를 명시

GridView 컬럼의 inputType이 "select", "autoComplete", 혹은 "checkcombobox"인 경우, value 값과 label 값 중 어떤 값을 업로드 할 지 선택할 수 있습니다.

$r_title(options.Type 사용 예)
var options = {
    type: "0" // value 값을 업로드. 
    // type: "1" // label 값을 업로드. 
};
gridView1.advancedExcelUpload(options);

업로드 할 데이터 종류(value 혹은 label)를 컬럼 별로 명시

GridView 컬럼의 inputType이 "select", "autoComplete", 혹은 "checkcombobox"인 경우, value 값과 label 값 중 어떤 값을 업로드 할 지 각 컬럼 별로 지정할 수 있습니다.

$r_title(options.Type 및 options.convertIndex 사용 예)
var options = {
    type: "0" // value 값을 업로드. 
    convertIndex: "0,2" // 단, 인덱스가 0인 컬럼과 2인 컬럼은 label 값을 업로드. 
};
gridView1.advancedExcelUpload(options);

Excel 파일의 업로드 시 공백 제거

advancedExcelUpload() 함수의 trim 옵션을 사용하여 Excel 파일을 GridView로 업로드할 때 Excel 파일의 각 셀에 포함된 공백을 제거할 수 있습니다.

$r_title(사용 예)
var options = {
  ...
  trim: 1
  ...
};
gridView1.advancedExcelUpload(options);

GridView → CSV 다운로드

saveCSV() 함수를 사용하여 Gridview 데이터를 CSV를 파일로 다운로드할 수 있습니다.

CSV 업로드 → GridView

readCSV() 함수를 사용하여 CSV를 GridView로 업로드할 수 있습니다.

CSV 업로드 창을 WFram으로 생성

readCSV(options); 함수를 사용하여 CSV 업로드 창을 WFrame으로 생성하고 업로드 창의 속성을 지정할 수 있습니다.

$r_title(gridView1.readCSV(options);)
var options = {
    wframe: true,
    name: "Upload CSV",
    features: "top=20,left=500,width=500,height=200",
    className: "border",
    resizable: false,
    windowDragMove: true
};
gridView1.readCSV(options);

GridView 여러 개 → Excel 다운로드

Websquare.util.multipleExcelDownload() 함수를 사용하면 여러 개의 그리드의 데이터를 별도의 Excel 파일이나 시트로 저장할 수 있습니다. Page가 WFrame을 포함할 경우, WFrame의 소스 Page에 포함된 GridView도 다운로드할 수 있습니다.

여러 시트에 분리해서 다운로드

Websquare.util.multipleExcelDownload() 함수의 multipleSheet 옵션 설정을 통해 여러 시트에 분리해서 다운로드할 수 있습니다.

단, 이 기능은 provider 설정시에만 동작하며 sheetName은 중복되지 않게 설정해야 합니다. (JDK 1.5이상에서 사용 가능)

$r_title(사용 예)
var options = {
  common: {
    fileName: "GridViews_down.xlsx",
    multipleSheet: "true",
    showProcess: false
  },

  excelInfo: [{
      gridId: "gridview1",
      sheetName: "No. 1",
      removeColumns: "",
      wframeId: ""
    },
    {
      gridId: "gridview4",
      sheetName: "No. 4",
      removeColumns: "",
      wframeId: "wframe1"
    }
  ]
};

WebSquare.util.multipleExcelDownload(options);

동일한 시트에 다운로드

multipleSheet: "false" 옵션을 설정할 경우 여러 GridView를 하나의 Excel 시트로 다운로드할 수 있습니다.

$r_title(사용 예)
var options = {
    common: {
        fileName: "gridViews_download.xlsx",
        multipleSheet: "false"
    },
    excelInfo: [{
            infoArr: [{
                rowIndex: 1, colIndex: 0, rowSpan: 2, colSpan: 2, text: "Sample 1"
            }],
            startRowIndex: 4,
            gridId: "gridView1"
        },
        {
            startRowIndex: 5,
            gridId: "gridView2"
        }
    ]
}; 
WebSquare.util.multipleExcelDownload(options);

Pivot

Pivot → Excel 다운로드

pivotExcelDownload( opt ); 함수를 이용하여 피봇을 Excel 파일로 다운로드 할 수 있습니다.

Excel 업로드 → Pivot

pivotExcelUpload( opt ); 함수를 이용하여 Excel 파일을 피봇으로 업로드할 수 있습니다.

Pivot → CSV 다운로드

pivotCSVDownloadCSV() 함수를 사용하여 Pivot 데이터를 CSV를 파일로 다운로드할 수 있습니다.

CSV 업로드 → Pivot

pivotCSVUploadCSV() 함수를 사용하여 CSV 데이터를 Pivot으로 업로드할 수 있습니다.

DataList

DataList 여러 개 → Excel 다운로드

Websquare.util.multipleDataListDownload() 함수를 사용하면 여러 개의 DataList의 데이터를 별도의 Excel 파일이나 시트로 저장할 수 있습니다. 또한 Page가 WFrame을 포함할 경우, WFrame의 소스 Page에 포함된 DataList도 다운로드할 수 있습니다.

$r_title(사용 예)
var options = {
  common: {
    fileName: "dataLists_down.xlsx",
    multipleSheet: "true",
    showProcess: false
  },

  excelInfo: [{
      dataListId: "dataList1",
      sheetName: "No. 1",
      removeColumns: "",
      wframeId: ""
    },
    {
      dataListId: "dataList4",
      sheetName: "No. 4",
      removeColumns: "",
      wframeId: "wframe1"
    }
  ]
};

WebSquare.util.multipleDataListDownload(options);

다운로드 중 상태 메시지 표시

여러 DataList를 다운로드하는 동안 상태 메시지를 표시할 수 있습니다. 관련 옵션은 아래와 같습니다.

multipleDatalistDownload() 함수의 관련 옵션

options.showProcess : true

options.processMsg : "Message to display..."

$r_title(사용 예)
var scId = "";

var options = {
  common: {
    fileName: "dataList.xlsx",
    multipleSheet: "true",
    showProcess: true,
    processMsg: "Downloading as an Excel file..."
  },
  excelInfo: [{
      dataListId: "dataList1",
      sheetName: "dataList1",
      removeColumns: "",
      wframeId: scId
    },
    {
      dataListId: "dataList2",
      sheetName: "dataList2",
      removeColumns: "",
      wframeId: scId
    }
  ]
};
WebSquare.util.multipleDataListDownload(options);

요약