페이지 트리

버전 비교

  • 이 줄이 추가되었습니다.
  • 이 줄이 삭제되었습니다.
  • 서식이 변경되었습니다.

...

패널
borderColor#303031
borderWidth1
borderStylesolid
title기본

가이드 - 기본

attribute keyattribute value typeexample
FontNamestring


코드 블럭
languagejs
var WORKBOOK = {
         "FontName": "맑은 고딕",
         "FontSize": 11,
         "WorkSheets": [
             {
                 "Name": grid_name,
                 "DisplayGridlines": "false",
                 "Ranges": [
                     {
                         "Range": "A1", "Value": "■ Report Name : " + Matrix.GetReportInfo().NAME,
                         "ColSpan": 5
                     },
                     {
                         "Range": "A2", "Value": "■ Printer : " + Matrix.GetUserInfo().UserName,
                         "ColSpan": 5
                     },
                     {
                         "Range": "A3", "Value": "■ Print Time : " + Matrix.GetDateTime().ToString("yyyy-MM-dd HH:mm:ss"),
                         "ColSpan": 5
                     }
                 ],
                 "Controls": [
                     { "Name": grid_name, "Range": "A5" }
                 ]
             }
         ]
     };


FontSizenumber
WorkSheets

Array<worksheet>

attribute keyattribute value type
Namestring
DisplayGridlinesstring
Ranges

Array<range>

attribute keyattribute value type
Rangestring
Valuestring
ColSpan(optional)number
RowSpan(optional)number
Style(optional)

string|object

※ 심화 가이드를 참고하세요


Controls

Array<control>

attribute keyattribute value type
Namestring
Rangestring

ImageExport(optional)

boolean



Styles(optional)

Array<Style>

※ 심화 가이드를 참고하세요


참고사항
title내보내기 가능한 컨트롤 타입
  • Grid 계열 (DataGrid, TreeGrid, OlapGrid)
  • Chart 계열(Chart, PieChart, ScatterChart, Polygon Chart)
  • MXGrid
  • Image


정보
title차트 내보내기 - ImageExport

ImageExport의 경우, 내보내기 하는 컨트롤이 Chart인 경우 반드시 true로 설정하셔야 합니다.


...

패널
borderColor#303031
borderWidth1
borderStylesolid
title심화(셀 스타일 지정하기)

가이드 - 심화(셀 스타일 지정하기)

MXGrid 컨트롤을 이용하여 보다 쉽게 셀 별로 스타일을 지정할 수 있습니다.

정보
title가이드 순서
  1. MXGrid Designer에서 사용할 스타일을 셀 별로 설정합니다.
  2. 보고서를 저장한 후 조회하여 화면을 확인한 다음 보고서를 로컬로 저장합니다.
  3. 압축 파일 내의 json2 파일을 오픈합니다.
  4. 1번에서 설정한 스타일을 json2 파일에서 확인합니다.
  5. JSON 객체 설정 시 Range 스타일을 적용합니다. (두 가지 방법)
  1. MXGrid Designer에서 사용할 스타일을 셀 별로 설정합니다.
    1. i-AUD Designer에서 MXGrid 컨트롤을 생성합니다.
      Image Added
    2. MXGrid 우클릭 > 디자인 메뉴를 선택하여 MXGrid Designer를 오픈하여, 원하는 셀 스타일을 미리 설정하여 저장합니다.
      Image Added
  2. 보고서를 저장한 후 조회하여 화면을 확인한 다음 보고서를 로컬로 저장합니다.
    1. i-AUD Designer에서 MXGrid에서 정상적으로 표시되었음을 확인 후, 보고서를 저장합니다.
      Image Added
    2. "다른 이름으로 저장" 기능을 이용하여 보고서를 로컬로 다운로드합니다.
      Image AddedImage Added
  3. 압축 파일 내의 json2 파일을 오픈합니다.
    1. 로컬로 다운로드된 파일을 압축해제하기 위해, 확장자를 mtsd → zip으로 변경합니다.
      Image Added
    2. 압축을 푼 후, resource/iGRID_DESIGN/ 하위의 json2 파일을 오픈합니다.
      Image Added
  4. 1번에서 설정한 스타일을 json2 파일에서 확인합니다.
    1. json2 파일의 첫 번째 레벨 attribute인 Styles를 검색합니다.
      Image Added
    2. 아래와 같이 1번에서 설정한 스타일을 확인하실 수 있습니다.
      Image Added
  5. JSON 객체 설정 시 Range 스타일을 적용합니다. (두 가지 방법)
    1. Styles attribute에 스타일을 추가 후, Range의 Style에 스타일 이름을 설정합니다. (Styles type: Array<Style>)
    2. Range Style에 스타일 객체를 바로 설정합니다.
    3. a와 b 방법 모두를 적용한 코드 예시

      코드 블럭
      languagejs
      	var WORKBOOK = {
      		"FontName":"맑은 고딕"
      		, "FontSize" : 10
      		, "Styles": [
      						{
      							"Font": "font-family:궁서체;font-size:24;font-color:#FFC00000;font-weight:bold;",
      							"Horizontal": "center",
      							"Vertical": "center",
      							"Name": "S3"
      						},
      					]		
      		, "WorkSheets": [
      			{
      				"Name":"Sheet1"
      				, "DisplayGridlines":"false"
      				, "Ranges": [
      					{"Range" : "B9", "Value" : "1번 그리드",  "ColSpan": 5, "Style": "S3"},
      					{"Range" : "B18", "Value" : "1번 그리드", "ColSpan": 5, "Style": {
      																			"Font": "font-family:궁서체;font-size:18;font-color:#FF7030A0;",
      																			"Fill": "solid,#FFDBDBDB",
      																			"Horizontal": "center",
      																			"Vertical": "center"
      																		}
      					},
      				]
      			}
      		]
      	};
      
      
      	Matrix.getObject('BTN_EXPORT_EXCEL').OnClick = function(s, e){
      		Matrix.ExcelExportServiceCall(WORKBOOK ,null ,function(e){ 	  
      			if(e.Success == false){
      				alert("export fail::" + e.Message);
      				return;
      			}
      			// download file
      			var row = e.DataSet.GetTable(0).GetRow(0);
      			var folderName = row.GetValue("FolderName");
      			var fileName = row.GetValue("FileName");
      			
      			var nowText = Matrix.GetDateTime().ToString("yyyy-MM-dd HH:mm:ss");
      
      			// download.maf 주소
      			Matrix.DownloadFile(folderName + "/"
      								, fileName
      								, Matrix.GetReportInfo().NAME + "_" + nowText + ".xlsx", true, null);
      		});
      	};


    4. 결과 화면
      Image Added