/* eslint-disable */
var MARKDOWN_TOC_DATA = [
  {
    "gid": 1,
    "name": "intro",
    "label": "Introduction",
    "children": [
      {
        "cid": 1,
        "sid": "1introduce",
        "name": "1introduce",
        "label": "시작하기",
        "data": {
          "body": "좌측 검색창을 통해 각 함수,프로퍼티를 쉽게 검색할 수 있습니다. <video poster=\"../../assets/imgs/manual.png\" id=\"videoClip\" loop autoplay controls> <source src=\"../../assets/imgs/IBSheet8Manual.mp4\" type=\"video/mp4\"> Sorry, your browser doesn't support embedded videos. </video> [<span style='color:orange;font-weight:700'>상단</span> : 함수/이벤트 명 검색 , <span style='color:orange;font-weight:700'>하단</span> : 컨텐츠 전체 검색] <hr> <div style=\"margin-top:10px;width:90vw;display:flex;flex-direction:row;justify-content:space-between\"> <div> <h3 style=\"\">기본 기능</h3> <ul> <li><a href=\"https://portal.ibsheet.com/support/solutions/articles/72000639119-ibsheet-%ED%99%94%EB%A9%B4%EC%97%90-%EA%B7%B8%EB%A6%AC%EA%B8%B0\" target=\"_blank\">시작하기</a></li> <li><a href=\"#\" onclick=\"window.event.preventDefault();window.event.stopPropagation();gotoByURL('docs/intro/files.html')\">파일 구성</a></li> <li><a href=\"#\" onclick=\"window.event.preventDefault();window.event.stopPropagation();gotoByURL('docs/start/basic-structure.html')\">초기화 객체 기본 구조</a></li> <li><a href=\"#\" onclick=\"window.event.preventDefault();window.event.stopPropagation();gotoByURL('docs/dataStructure/1data-structure.html')\">조회/저장 데이터 구조</a></li> </ul> </div> <div> <h3>행/열 기능</h3> <ul> <li><a href=\"#\" onclick=\"window.event.preventDefault();window.event.stopPropagation();gotoByURL('docs/start/row.html')\">행 구조</a></li> <li><a href=\"#\" onclick=\"window.event.preventDefault();window.event.stopPropagation();gotoByURL('docs/start/col.html')\">열 구조</a></li> </ul> </div> <div> <h3>기타 기능</h3> <ul> <li><a href=\"#\" onclick=\"window.event.preventDefault();window.event.stopPropagation();gotoByURL('docs/appx/ibsheet7-migration.html')\">ibsheet7 마이그레이션</a></li> <li><a href=\"#\" onclick=\"window.event.preventDefault();window.event.stopPropagation();gotoByURL('docs/appx/spa-react.html')\">react 기반 개발</a></li> <li><a href=\"#\" onclick=\"window.event.preventDefault();window.event.stopPropagation();gotoByURL('docs/appx/spa-vue.html')\">vue 기반 개발</a></li> </ul> </div> </div>"
        },
        "url": "docs/intro/1introduce.html"
      },
      {
        "cid": 2,
        "sid": "feature",
        "name": "feature",
        "label": "제품의 특징",
        "data": {
          "body": "`IBSheet 8`은 순수 javascript 기반의 **데이터 그리드 컨트롤 컴포넌트**로 사용자 PC에 어떠한 설치 없이 `HTML, javascript, CSS`만을 이용하여 윈도우 어플리케이션에서 볼 수 있는 데이터 그리드의 다양한 기능을 제공합니다. ## 주요한 제품의 기능 ### 데이터 조회 기능 ajax 통신으로 통해 서버로부터 가져온 JSON 데이터를 파싱하여 클라이언트 화면에 로딩 합니다. 데이터를 로딩하는 방법에 따라 `lazyload, fastload` 등 다양한 형식으로 데이터 렌더링 기능을 제공합니다. ### *소팅 기능* 헤더 셀을 클릭하거나 제공되는 API를 통해 단일열 뿐 아니라 여러개 열에 대해 동시에 소팅하실 수 있습니다. 또한 열이나 각 셀의 데이터에 따라 숫자형식의 소팅, 문자형식의 소팅, 소팅 제외 등을 설정하실 수 있습니다. ![다중열소트](/assets/imgs/sort.png \"여러개 열에 대한 소팅\") [**여러개 열에 대한 소팅 예**] ### *틀고정 및 행고정 기능* 그리드의 좌/우측에 원하는 열만큼을 고정하여 볼 수 있는 기능을 제공합니다. 또한 데이터 상단 혹은 하단에 일부 행을 고정하여 원하는 데이터를 설정하여 사용하실 수도 있습니다. ![틀고정기능](/assets/imgs/section.png \"좌우측 틀고정 기능\") [**좌/우측 열에 대한 틀고정 예**] ### *필터링 기능* 헤더 아래 필터행을 통해 사용자가 조회 된 데이터 중에 찾고자 하는 내용을 필터링 하여 볼 수 있는 기능을 제공합니다. 한 셀 안에서 and나 or 조건을 통해 필터링 하거나 여러개 열간에 and나 or 조건을 통해 필터링 하실 수 있습니다. ![필터기능](/assets/imgs/filter.png \"필터행을 통한 필터링\") [**필터행을 통한 필터링 예**] ### *다양한 데이터 유형 및 유효성검사 기능* 그리드 내에 날짜 열이나, 숫자 입력 열, 마스킹 기능 등을 통해 다양한 데이터 입력 및 유효성 체크가 가능합니다. 또한 Html 형식의 셀을 통해 셀 안에 원하시는 `Html` 구문을 표현하실 수도 있습니다. ### *상태 관리 및 저장 기능* 조회된 데이터 내에서 사용자가 수정한 행이나 셀에 대한 정보를 관리하여, 최종 저장시 수정된 데이터만 서버측으로 전송하는 기능을 제공합니다. 신규로 추가되거나 수정된 데이터, 삭제될 데이터 행에 대에서는 각기 다른 배경색으로 표시되어 사용자의 시인성을 높였습니다. ### *합계 및 Formula 기능* 열 전체 데이터의 합계를 합계행에 표시하거나, 열에 다른 열간의 계산로직을 설정함으로써 열 내에 다양한 계산값이나 기능을 설정할 수 있습니다. ### *다양한 import/export 기능* `엑셀, text, pdf` 등의 파일형식으로 데이터를 다운로드 하거나, `엑셀, csv, text` 파일을 업로드 하는 기능을 제공합니다. ### *그룹핑 기능* 사용자가 드래그를 통해 조회된 데이터를 그룹지어 보거나, 그룹된 데이터 내에서 소계 등의 계산 결과를 확인 하실 수 있습니다. ![그룹기능](/assets/imgs/groupRow.png \"그룹핑 기능\") [**특정 열을 기준으로 그룹핑 예**] ### *트리 기능* 그리드 내에 특정 열을 트리로 지정함으로써 데이터 간에 상하위 관계를 표현할 수 있습니다. 트리로 구성된 데이터는 부모/자식 간의 관계에 대한 여러가지 API를 사용하실 수 있습니다. ![트리사용](/assets/imgs/tree.png \"트리사용\") [**트리사용 예**] ### *피벗 기능* 피벗 다이얼로그를 통해 사용자가 피벗팅 할 데이터를 구성하고, 계산 결과를 확인하실 수 있습니다. ### *자동 머지 기능* 헤더 영역이나 데이터 영역 내에서 인접한 셀간에 같은 값을 갖을때 자동으로 병합하는 기능을 제공합니다. 또한 셀의 내용과 무관하게 특정 영역을 병합하여 보여주는 것도 가능합니다. ![머지 기능](/assets/imgs/dataMerge3.png \"머지 기능\") [**입력된 글자를 기준으로 자동 셀 병합**] ### *열의 너비, 위치 변경 기능* 사용자가 헤더 셀에서 Drag & Drop을 통해 열의 너비를 변경하거나 열의 위치를 수정하실 수 있습니다. 또한 이렇게 변경된 시트의 정보(열의 위치, 너비, 보임여부)는 사용자 브라우저에 저장되어 추후 해당화면에 다시 접속시 기존에 설정한 모습대로 보여지게 하실 수도 있습니다. ![열이동](/assets/imgs/colDragMove.png \"열이동\") [**드래그를 통한 열 위치 이동**] ### *페이징 조회 기능* 대량의 데이터가 조회되었을때 페이지 단위로 나눠서 보여주는 기능을 제공합니다. 페이징 조회 기능 사용시에는 시트 하단에 페이지네이션을 이용하여 원하는 페이지로 이동하실 수 있습니다. ### *선택 영역에 대한 copy & paste 기능* 그리드 내에서 드래그시 원하는 영역을 선택할 수 있고, 이를 `ctrl+c`를 통해 클립보드로 복사하거나 클립보드의 내용을 그리드 내부에 `ctrl+v`를 통해 붙여넣기 하는 기능을 제공합니다. ### *프린팅 기능* 그리드의 내용과 더불어 타이틀이나, 조회 조건등의 내용을 같이 인쇄하는 기능을 제공합니다. 인쇄시 각 페이지에서 그리드의 타이틀(그리드 상단의 타이틀(페이지 타이틀 설정 가능) 및 헤더 타이틀)이 반복적으로 보여지는 등의 기능을 제공합니다. ### *자동완성기능* 특정 열에 입력가능한 데이터 집합을 설정해 두고, 사용자가 입력하는 글자에 따라 가능한 경우의 문자열이 보여지게끔 하는 기능을 제공합니다. ![자동완성기능](/assets/imgs/suggest.gif \"자동완성기능\") [**자동완성기능 예**] ### *Drag & Drop 기능* 행이나 셀을 Drag하여 다른 시트에 복사하거나 이동하실 수 있습니다. ![드래그드롭](/assets/imgs/drag1.png \"드래그드롭\") [**시트간 행이동**] ### *힌트 및 풍선 도움말 기능* 열의 너비가 부족하여 셀안의 모든 내용이 보여지지 않을 때, 마우스커서가 올라간 셀에 한하여 풍선 도움말을 표시하거나 셀의 크기를 임시적으로 늘려 보여주는 기능을 제공합니다. ![힌트기능](/assets/imgs/hint1.png \"힌트기능\") [**힌트기능 예**] ### *컨텍스트 메뉴 기능* 시트 내에서 마우스 우측버튼 클릭시 다양한 기능의 컨텍스트 메뉴를 구성하여 사용하실 수 있습니다. ![컨텍스트메뉴기능](/assets/imgs/menuIcon.png \"컨텍스트메뉴기능\") [**컨텍스트 메뉴 기능 예**]"
        },
        "url": "docs/intro/feature.html"
      },
      {
        "cid": 3,
        "sid": "files",
        "name": "files",
        "label": "파일 구성",
        "data": {
          "body": "## ibsheet8 제품은 다음과 같은 파일,폴더로 구성되어 있습니다. ``` ibsheet 최상위 폴더 ├─ ibsheet.js // ibsheet 코어파일 (기본) ├─ ibleaders.js // 라이선스 파일 (기본) │ ├─ css // CSS 폴더 │ ├─ default/main.css // 기본 테마 css 파일 (기본) │ ├─ meterial/main.css // meterial 테마 css 파일 │ ├─ simple/main.css // simple 테마 css 파일 │ ├─ mint/main.css // mint 테마 css 파일 │ └─ grace/main.css // grace 테마 css 파일 │ ├─ loacle // 다국어 메세지 폴더 │ ├─ ko.js // 한국어 메세지 파일 (기본) │ └─ en.js // 영어 메세지 파일 │ ├─ fonts // ibsheet가 사용하는 폰트(.ttf, .otf)를 담고 있는 폴더 │ └─ plugins // 별도 기능 추가 폴더 ├─ ibsheet-common.js // 공통 기능 설정을 위한 상수 및 함수를 정의한 파일 ├─ ibsheet-dialog.js // 찾기, 다운로드, 편집 등 각종 다이얼로그 기능을 정의한 파일 └─ ibsheet-excel.js // 파일 import/export 기능과 관련된 함수가 정의된 파일 ``` ## 각 파일의 기능은 아래와 같습니다. ### *ibleaders.js* `제품 라이선스`를 담고 있는 파일로 내용은 다음과 같습니다. ```javascript var ibleaders = ibleaders || {}; ibleaders.license = \"W2FtSztPKCBzbD8emM5ZzV7fAQnTXcJYS4gLHA0bXp0PTx1EGsBbEA6NicldTx+aXx0MG0IbRZ8HD1uL3srbz=\"; ``` ### *ibsheet.js* 제품의 코어 파일로 안의 내용은 **`절대 수정하시면 안됩니다`.** 파일 상단에 제품에 대한 버전 정보가 있습니다. ### *css(folder)* 시트에서 사용하는 css파일(`/css/default/main.css`)이 해당 폴더에 들어있습니다. **`css 폴더 구조 변경 안됩니다`.** ibsheet.js 와 같은 경로에 css 폴더가 존재 해야 합니다. <!-- ### *css/compatible(folder)* - IE9 이하 브라우저 전용 css 시트에서 보여지는 아이콘(달력이나 체크박스 등)은 기본적으로 base64 이미지(문자화 된 SVG 이미지 스트링)를 사용하지만 `gif` 파일을 이용하는 경우 이미지 아이콘과 css 파일(`/css/compatible/light/main.css`)이 해당 폴더에 들어있습니다. --> ### *locale(folder)* 시트 내부에서 사용하는 여러가지 상수와 시트 사용자가 보게 되는 메세지가 정의 되어 있습니다. * 한글: `/locale/ko.js` * 영문: `/locale/en.js` ### *fonts(folder)* 시트에서 사용하는 폰트파일(`.ttf, .otf`)이 들어있습니다. --- ### *plugins(folder)* 선택적으로 필요한 기능을 추가할 수 있는 js 파일들이 들어 있습니다. |파일명|Description| |-----|-----| |`ibsheet-common.js`|모든 화면 시트에 공통으로 적용하고 싶은 기능에 대한 설정이나 열의 기능일 미리 정의해 둔 Preset 변수를 담고 있습니다. 사용자는 이를 알맞게 수정하여 사용할 수 있습니다.| |`ibsheet-excel.js`|엑셀다운로드/업로드,텍스트 다운로드/업로드와 관련된 기능이 포함되어있는 javascript 파일입니다. `down2Excel()`, `loadExcel()`함수를 사용하시려면 이 파일이 항상 `ibsheet.js` 파일 이후에 include 되어야 합니다. 도움말 `Method` >> `Excel Plugin` 함수 호출시 필요 합니다. ![ibsheet-excel](/assets/imgs/ibsheet-excel.png \"ibsheet-excel\")| |`ibsheet-dialog.js`|찾기 다이얼로그(ctrl+shift+f), 상세보기 다이얼로그, 피벗 다이얼로그 등 시트에서 사용 가능한 다양한 다이얼로그에 대한 플러그인을 담고 있습니다. 사용자는 이를 알맞게 수정하여 사용할 수 있습니다. 도움말 `Method` >> `Dialog Plugin` 함수 호출시 필요 합니다. ![ibsheet-dialog](/assets/imgs/ibsheet-dialog.png \"ibsheet-dialog\")|"
        },
        "url": "docs/intro/files.html"
      }
    ]
  },
  {
    "gid": 2,
    "name": "start",
    "label": "Getting Started",
    "children": [
      {
        "cid": 6,
        "sid": "quick-start",
        "name": "quick-start",
        "label": "Quick Start",
        "data": {
          "body": "## ibsheet 파일 구성 `IBSheet8`을 사용하기 위해서 다음 4~7가지 파일을 추가합니다. ```html <!----- ibsheet 기본 모듈 -----> <!-- 디자인 css --> <link rel=\"stylesheet\" type=\"text/css\" href=\"ibsheet/css/default/main.css\"> <!-- 시트 코어 파일 --> <script src=\"ibsheet/ibsheet.js\"></script> <!-- 라이선스 파일 --> <script src=\"ibsheet/ibleaders.js\"></script> <!-- 메세지 파일 ko.js 나 en.js 중 하나 추가 --> <script src=\"ibsheet/locale/ko.js\"></script> <!----- ibsheet 선택 모듈 -----> <!-- 엑셀 다운/업로드 관련 모듈 --> <script src=\"ibsheet/plugins/ibsheet-excel.js\"></script> <!-- 찾기,상세보기 등 다이얼로그 관련 모듈 --> <script src=\"ibsheet/plugins/ibsheet-dialog.js\"></script> <!-- 공통 속성 관련 모듈 --> <script src=\"ibsheet/plugins/ibsheet-common.js\"></script> ``` ## 시트 생성 이 후 열의 개수와 기능, 헤더 타이틀과 같은 정보를 설정하고 **[IBSheet.create()](/docs/static/create)** 함수를 통해 객체를 생성합니다. *초기 생성시 **시트의 너비, 높이**는 el 속성에서 정의하는 **div객체의 너비, 높이**를 따르며, <mark>*해당 div에 너비, 높이가 **없는 경우*** 너비는 **100%**, 높이는 **800px**를 기본값으로 갖습니다.</mark>* [자바스크립트 구문] ```javascript function initSheet() { //시트의 초기화 속성 설정 var OPT = { //각 열에 대한 정의 (열의 이름, 유형(Type), 포맷(Format)등을 설정) //열의 \"Type\"과 \"Name\" 속성은 반드시 설정되어야 합니다. Cols:[ {Header: \"컬럼1\", Name: \"colName1\", Type: \"Text\"}, {Header: \"컬럼2\", Name: \"colName2\", Type: \"Text\", Align: \"center\"} ] }; //초기 데이터 설정 var DATA = []; IBSheet.create({ id: \"sheet\", // 시트 객체 ID el: \"sheetDiv\", // 시트를 생성할 DIV객체 ID options: OPT, // 초기화 구문 변수 data: DATA // 초기 로딩 데이터 }); } ``` [HTML 구문 - 시트 높이 고정] ```html <body onload=\"initSheet()\"> <div class=\"btnCls\"> <button type=\"button\" class=\"mainBtnB\">조회</button> <button type=\"button\" class=\"mainBtnB\">신규</button> </div> <hr> <!-- 시트가 될 DIV 객체 --> <div id=\"sheetDiv\" style=\"width:100%; height:500px;\"></div> </body> ``` [HTML 구문 - 시트 부모 요소 높이 고정] ```html <body onload=\"initSheet()\"> <div class=\"btnCls\"> <button type=\"button\" class=\"mainBtnB\">조회</button> <button type=\"button\" class=\"mainBtnB\">신규</button> </div> <hr> <!-- 시트의 부모 요소 --> <div style=\"width:100%; height:600px;\"> <!-- 시트가 될 DIV 객체 --> <div id=\"sheetDiv\" style=\"width:100%; height:100%;\"></div> </div> </body> ``` **시트의 높이를 100% 등 상대값으로 생성할 경우 부모 요소의 높이가 고정되어 있어야합니다.** <mark>**시트의 높이는 고정된 행(헤더,필터,합계 행등)이 모두 보여질 정도로 설정 되어야 합니다.** 이는 보통 150~200px 정도이며 이보다 작게 설정한 경우에는 시트가 생성되지 않을 수 있습니다.</mark> *`options` 와 `data` 는 [시트객체구조](/docs/start/basic-structure)를 참고하세요.* ![시트생성](/assets/imgs/quickStart1.png \"시트 간단 생성\") [그림 1] 생성된 ibsheet ## 시트 초기화 및 열 설정 [IBSheet.create()](/docs/static/create) 함수의 `options`를 통해 시트의 헤더, 행, 열 등에 대한 자세한 부분을 설정할 수 있습니다. ```javascript var OPT = { //각 열에 대한 정의 (열의 이름, 유형(Type), 포맷(Format)등을 설정) Cols:[ { Header: \"이름\", Name: \"sa_nm\", Type: \"Text\" }, { Header: \"사원번호\", Name: \"sa_id\", Type: \"Text\", Align: \"center\" }, { Header: \"부서\", Name: \"sa_dept\", Type: \"Enum\", Enum: \"|경영지원|총무|인사|설계|시공1|시공2\", EnumKeys: \"|01|02|03|04|05|06\" }, { Header: \"직급\", Name: \"sa_position\", Type: \"Enum\", Enum: \"|대표|상무|이사|부장|차장|과장|대리|사원\", EnumKeys: \"|A1|A2|A3|B0|B1|C4|C5|C6\" }, { Header: \"입사일\", Name: \"sa_enterdate\", Type: \"Date\", Width:100, Format: \"yyyy/MM/dd\", }, { Header: \"비고\", Name: \"sa_desc\", Type: \"Lines\" } ] }; ``` ![시트생성2](/assets/imgs/quickStart2.png \"시트생성2\") [그림 2] 열 설정이 적용된 `ibsheet` 두 줄 이상의 헤더를 생성하거나 헤더 안에 셀간 병합을 설정하는 방법은 [(col)Header](/docs/props/col/header)속성을 참고해 주세요. [IBSheet.create](/docs/static/create)의 data를 설정하면 시트를 생성하는 것과 동시에 데이터를 로딩할 수 있습니다. ```javascript var DATA = [ {\"sa_nm\": \"홍길동\", \"sa_id\": \"9821450\", \"sa_dept\": \"04\", \"sa_position\": \"B0\", \"sa_enterdate\": \"19980305\", \"sa_desc\": \"\"}, {\"sa_nm\": \"김한국\", \"sa_id\": \"9510427\", \"sa_dept\": \"01\", \"sa_position\": \"A3\", \"sa_enterdate\": \"19890317\", \"sa_desc\": \"\"} ]; ``` ![시트생성3](/assets/imgs/quickStart3.png \"시트생성3\") [그림 3] 데이터가 로드된 `ibsheet` 사용자 입력에 의한 조회가 필요하면 시트를 생성 후, [loadSearchData()](/docs/funcs/core/load-search-data) 나 [doSearch()](/docs/funcs/core/do-search) API 를 이용하면 됩니다. <div class='notice'> ### 주의 시트 생성 함수 [IBSheet.create()](/docs/static/create)는 비동기 형식으로 동작함으로 생성 직후에 시트의 기능 함수를 호출시 오류가 발생할 수 있습니다. ```javascript //시트 생성 함수 IBSheet.create({ ... }); //비동기적으로 생성됨으로 \"sheet\"객체가 생성되었는지 알 수 없다. sheet.showFilterRow(); //onRenderFirstFinish 이벤트에서 호출하거나 options.Cfg.ShowFilter: true로 설정하면 시트 생성과 동시에 필터행이 보여집니다. ``` 따라서 시트 생성 후 필요한 함수를 호출하시려면 [onRenderFirstFinish](/docs/events/on-render-first-finish) 이벤트에 로직을 구성하셔야 합니다. </div> ## 각종 기능 사용의 예 [아이비시트 메소드 사용법](/docs/funcs/method) ### **행추가** [addRow()](/docs/funcs/core/add-row) 함수를 통해 신규 행을 추가할 수 있습니다. ```javascript //선택행 행 위로 새로운 행을 추가합니다. sheet.addRow(sheet.getFocusedRow(), 1); ``` ### **데이터 로드** [loadSearchData()](/docs/funcs/core/load-search-data) 함수를 통해 데이터를 로딩할 수 있습니다. ```javascript //jquery를 이용한 ajax 통신 $.ajax({ url: \"./data.jsp\", param: \"edate=19950101&position=C1\", success: function (rtnData) { //서버에서 가져온 json데이터를 로딩 sheet.loadSearchData(rtnData); } }); ``` [doSearch()](/docs/funcs/core/do-search) 함수를 통해 url에서 데이터를 로딩할 수 있습니다. 조회된 데이터라 로딩 완료 후 ```javascript //ajax 통신 및 데이터 로드 sheet.doSearch(\"/ex/getPetaData.do\", \"edate=19950101&position=C1\"); ``` 위 [loadSearchData()](/docs/funcs/core/load-search-data)와 [doSearch()](/docs/funcs/core/do-search) 함수는 모두 비동기 형식으로 동작합니다. ### **수정된 데이터 추출** [getSaveJson()](/docs/funcs/core/get-save-json), [getSaveString()](/docs/funcs/core/get-save-string) 함수를 통해 시트에서 수정된 데이터(혹은 전체 데이터)를 json형식이나 querystring 형식으로 추출할 수 있습니다. ([getChangedData()](/docs/funcs/core/get-changed-data)는 수정된 데이터를 셀단위로 추출하고, [getSaveJson()](/docs/funcs/core/get-save-json), [getSaveString()](/docs/funcs/core/get-save-string)은 행단위로 추출합니다.) ```javascript var chgData = sheet.getSaveJson(); ``` return 값 ```js { \"data\":[ // 삭제 데이터 {\"id\":\"AR2\",\"SEQ\":2,\"sStatus\":\"D\",\"DCheck\":\"1\",\"sNation\":\"한국\", ... \"STATUS\":\"Deleted\"}, // 신규 데이터 {\"id\":\"AR51\",\"SEQ\":4,\"sStatus\":\"I\",\"DCheck\":\"0\",\"sNation\":\"미국\", ... \"STATUS\":\"Added\"}, // 수정 데이터 {\"id\":\"AR5\",\"SEQ\":6,\"sStatus\":\"U\",\"DCheck\":\"0\",\"sNation\":\"한국\", ... \"STATUS\":\"Changed\"} ] } ``` 시트의 수정 여부는 [hasChangedData()](/docs/funcs/core/has-changed-data)를 통해 확인할 수 있습니다. 특정 상태의 행만 추출하는 경우, 가령 신규 입력된 행만 추출해야 한다면 [getRowsByStatus('Added')](/docs/funcs/core/get-rows-by-status)함수를 이용하시면 편리합니다. ### **행삭제** [deleteRow()](/docs/funcs/core/delete-row) 함수로 특정 행의 상태를 `Deleted`로 변경 할 수 있습니다. [removeRow()](/docs/funcs/core/remove-row) 함수로 특정 행을 즉시 삭제할 수 있습니다. [removeAll()](/docs/funcs/core/remove-all) 함수로 모든 데이터 행을 삭제할 수 있습니다. ```javascript //첫번째 행 객체 추출 var row = sheet.getFirstRow(); //첫번째 행을 즉시 삭제한다. sheet.removeRow(row); ``` ### **상태 클리어** [acceptChangedData](/docs/funcs/core/accept-changed-data) 함수를 통해 저장 작업이 완료된 후 시트의 상태를 클리어 할 수 있습니다. 위 함수를 호출하면 수정(Changed),입력(Added)인 행은 조회 상태로 변경되고, 삭제(Deleted)인 행은 삭제 됩니다. ### **셀 값의 확인/변경** [getValue](/docs/funcs/core/get-value),[setValue](/docs/funcs/core/set-value) 함수를 통해 셀의 값을 확인하거나 변경하실 수 있습니다. ```javascript // 셀의 값 READ var cls = sheet.getValue( sheet.getFirstRow(), \"CLS\" ); //첫번째 데이터 행에 \"CLS\" 컬럼의 값을 얻음. // 셀의 값 WRITE sheet.setValue( sheet.getRowByIndex(100), \"DESC\", \"임계값 근접 경고!\" ); //100번째 행의 \"DESC\" 값을 변경. ``` ### **글자색,배경색 설정** [setAttribute()](/docs/funcs/core/set-attribute) 함수를 통해 특정 셀의 속성을 변경 할 수 있습니다. ```javascript // AMT 컬럼의 배경색을 FF0000로 변경 sheet.setAttribute(null, \"AMT\", \"Color\", \"#FF0000\" ); // 마지막행의 글자색을 0000FF로 변경 sheet.setAttribute( sheet.getLastRow(), null, \"TextColor\", \"#0000FF\" ); // 특정 셀의 폰트를 Bold로 변경 sheet.setAttribute( sheet.getFocusedRow(), \"ETC\", \"TextStyle\", 1 ); ``` 여러개의 디자인 속성을 한꺼번에 변경해야 하는 경우에는 [setCellStyle()](/docs/funcs/core/set-cell-style) 함수를 사용합니다. ```javascript var row = sheet.getFirstRow(); sheet.setCellStyle({row: row, col: \"sa_nm\", attr: {TextColor:\"red\", Color: \"#00FF00\"}, render: 1}); ``` ## 이벤트 사용 [아이비시트 이벤트 사용법](/docs/events/event) ### 데이터 수정시 이벤트 사용 예 ```javascript //객체 생성시 이벤트 선언 options.Events = { onAfterChange:function (evtParam) { if (evtParam.col == \"AMT\" && evtParam.val == 3000) { evtParam.sheet.showMessage(\"I Love You 3000\"); } } }; ``` ### 더블 클릭 이벤트 bind 예 (권장하지 않음) ```javascript //시트객체 생성 이후 이벤트 바인딩 sheet.bind(\"onDblClick\" , function(evtParam) { var row = evtParam.row; var col = evtParam.col; //편집불가능한 셀 더블클릭시 상세 다이얼로그 open if (!sheet.getAttribute(row, col, \"Edit\")) { evtParam.sheet.showEditDialog(row); } }); ```",
          "see": [
            {
              "label": "시트 객체 구조 getting started",
              "url": "/docs/start/basic-structure"
            },
            {
              "label": "Header col",
              "url": "/docs/props/col/header"
            },
            {
              "label": "method 사용법 기초 method",
              "url": "/docs/funcs/method"
            },
            {
              "label": "event 사용법 기초 event",
              "url": "/docs/events/event"
            },
            {
              "label": "onRenderFirstFinish event",
              "url": "/docs/events/on-render-first-finish"
            },
            {
              "label": "create static",
              "url": "/docs/static/create"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/start/quick-start.html"
      },
      {
        "cid": 7,
        "sid": "row",
        "name": "row",
        "label": "행(Row) 구조에 대한 이해",
        "data": {
          "body": "> `ibsheet`를 가로로 나누어보면 크게 `헤더`와 `바디`, `푸터`로 나누어 집니다. > 헤더는 데이터 영역 상단에 고정되어 보여지는 부분으로 헤더행과 필터 등이 헤더 영역에 속합니다. > 바디는 스크롤에 의해 보여지는 데이터 영역이고, 푸터는 합계행과 같이 바디 영역 하단에서 스크롤 여부와 상관없이 항상 보여지는 부분을 의미합니다. --- ## 헤더 영역 ### *헤더행* 시트 생성시 `options.Cols.Header`를 통해 설정한 값들이 헤더에 들어가게 됩니다. 헤더 셀은 클릭시 소팅이 되거나 드래그를 통해 열의 위치이동, 컬럼의 사이즈 조절 등의 역할을 수행합니다. ```javascript var options = { \"Cols\": [ { Header: [ { // 열의 헤더 설정 개별 셀 설정 \"Value\": \"부서정보\", \"Color\": \"#085820\", \"Span\": 2 }, \"부서명\" ], \"Name\": \"deptName\", \"Type\": \"Text\", \"Size\": 100 }, { Header: [\"\", \"부서코드\"], \"Name\": \"deptCd\", \"Type\": \"Text\", \"Width\": 100 }, { Header: [ { \"Value\": \"2014 년 실적\", \"Color\": \"#6699FF\", \"Span\": 4 }, \"1분기\" ], \"Name\": \"qt1\", \"Type\": \"Int\", \"Width\": 100 }, { Header: [\"\", \"2분기\"], \"Name\": \"qt2\", \"Type\": \"Int\", \"Width\": 100 }, { Header: [\"\", \"3분기\"], \"Name\": \"qt3\", \"Type\": \"Int\", \"Width\": 100 }, { Header: [\"\", \"4분기\"], \"Name\": \"qt4\", \"Type\": \"Int\", \"Width\": 100 } ] }; ``` ![해더행](/assets/imgs/header1.png \"헤더행\") [생성된 헤더행] ### *필터행* (`cfg`) [ShowFilter](/docs/props/cfg/show-filter)나 sheet.[showFilterRow()](/docs/funcs/core/show-filter-row)함수를 통해 생성되는 필터행도 헤더부에 위치하게 됩니다. ```javascript sheet.showFilterRow(); ``` ![필터행](/assets/imgs/header2.png \"필터행\") [필터행] ### *커스텀 행(Head)* 헤더행 아래(필터행이 있으면 필터행 아래)에 세로 스크롤 여부와 상관없이 항상 보여지는 행을 원하는 개수만큼 만드실 수 있습니다. 커스텀 헤더행은 `options.Head` 속성을 통해 설정합니다. `컬럼Name : {\"Type\":\"Text\", \"Value\":\"Test\"}` 와 같이 커스텀 헤더행의 컬럼 속성을 부여하고 생성할 수 있습니다. ```javascript options = { Head: [ { \"id\": \"myHeadRow1\", // 커스텀 헤더행 Row 객체의 ID를 의미합니다. Def 에 id 로 선언하여 // 커스텀 헤더행의 속성을 공통으로 사용할 수 있습니다. \"Spanned\": 1, // 커스텀 헤더행 Span 병합 가능 설정 \"deptName\": { \"Type\": \"Text\", \"Value\": \"미수금 포함 여부\", \"Span\": 2, \"Color\": \"#EDEDED\", \"Align\": \"center\", \"TextStyle\": 1 }, // 커스텀 헤더행에서 deptName 컬럼의 Type, Value, Span, Color, Align, TextStyle 속성을 설정합니다. \"qt1\": {\"Type\": \"Bool\"}, \"qt2\": {\"Type\": \"Bool\"}, \"qt3\": {\"Type\": \"Bool\"}, \"qt4\": {\"Type\": \"Bool\"} } ] } ``` 아래의 이미지는 위의 설정을 통해 생성되는 커스텀행(Head) 예시 이미지 입니다. ![커스텀해더행](/assets/imgs/header3.png \"커스텀헤더행\") [커스텀헤더행] --- ## 바디 영역 바디는 [doSearch()](/docs/funcs/core/do-search), [loadSearchData()](/docs/funcs/core/load-search-data)함수를 통해서 조회 된 데이터나 [addRow()](/docs/funcs/core/add-row)함수를 통해 추가된 데이터가 보여지는 영역입니다. ![바디 영역](/assets/imgs/body.png \"바디 영역\") [**바디 영역**] --- ## 푸터 영역 ### *합계 행* 열 생성시 (`col`) [FormulaRow](/docs/props/col/formula-row) 속성을 설정하면 시트 하단에 고정된 합계행이 만들어져 합계값을 보여 줍니다. 합계행의 위치는 상단으로 올릴 수 도 있으나 기본적으로 생성되는 합계행은 푸터 영역에 위치하게 됩니다. ```javascript var options = { \"Cols\": [ ... }, { \"Header\": [ { \"Value\": \"2014 년 실적\", \"Color\": \"#6699FF\", \"Span\": 4 }, \"1분기\" ], \"Name\": \"qt1\", \"Type\": \"Int\", \"Width\": 100, FormulaRow: \"Sum\" }, { \"Header\": [\"\", \"2분기\"], \"Name\": \"qt2\", \"Type\": \"Int\", \"Width\": 100, FormulaRow: \"Avg\" }, { ... ] } ``` ![합계행](/assets/imgs/formulaRow.png \"합계행\") [합계행] ### *커스텀 행(Foot)* 헤더 영역과 마찬가지로 푸터 영역에도 커스텀행을 추가할 수 있습니다. 커스텀 푸터행은 `options.Foot` 속성을 통해 설정합니다. `컬럼Name : {\"Type\":\"Text\", \"Value\":\"Test\"}` 와 같이 커스텀 푸터행의 컬럼 속성을 부여하고 생성할 수 있습니다. ```javascript options = { Foot: [ //커스텀행(Foot) 영역 설정 { \"id\": \"MyFootRow1\", // 커스텀 푸터행 Row 객체의 ID를 의미합니다. Def 에 id 로 선언하여 // 커스텀 푸터행의 속성을 공통으로 사용할 수 있습니다. \"Spanned\" 1, // 커스텀 푸터행의 Span 병합 가능 설정 \"Color\": \"#666666\", \"TextColor\": \"#FFFFFF\", \"deptName\": {\"Value\": \"2015년 자료\", \"TextColor\": \"#FFBBBB\", \"Span\": 5}, // 커스텀 푸터행에서 deptName 컬럼의 Value, TextColor, Span 속성을 설정합니다. \"qt4\": {\"Type\": \"Int\", \"Format\": \"#,###\", \"Value\": 1248423} } ] } ``` 아래의 이미지는 위의 설정을 통해 생성되는 커스텀행(Foot) 예시 이미지 입니다. ![푸터행](/assets/imgs/foot.png \"푸터행\") [푸터행] --- ## 기타 ### *솔리드 행* 헤더나 푸터 영역 주변에 임의의 행을 추가할 수 있습니다. 이렇게 추가된 행은 시트 내 열과 무관하게 기능과 크기를 갖을 수 있습니다. 보다 자세한 내용은 (appendix) [Soild](/docs/appx/solid)을 참고하세요. ### *행의 ID* 모든 행은 고유한 `ID`를 갖고 있습니다. 데이터 행은 순서대로 `AR1, AR2, AR3...` 식의 `ID`를 갖습니다. **헤더 행은 헤더가 한줄 일 때는 Header 라는 이름을 갖고 2번째 헤더행부터는 `HR1,HR2...` 식으로 `ID`를 갖습니다.** 헤더 영역나 푸터 영역에 커스텀하게 생성한 행 또는 솔리드 행은, 만드실 때 부여한 id속성 값이 고유한 ID가 됩니다. (푸터 행을 만들때 별도의 id를 지정하지 않으면 `FR1,FR2..` 식의 `ID`를 갖습니다.) **이외에 필터행은 `Filter`, 합계행은 `FormulaRow` 라는 ID를 갖고 있습니다.** 이러한 ID를 이용하여 행에 대한 값을 변경하거나 내용을 확인하실 수 있습니다. ```javascript //example1 헤더행의 타이틀를 수정 var hrow = sheet.getRowById(\"Header\"); //헤더행 객체 얻기 hrow[\"colName\"] = \"수정할 헤더명\"; sheet.refreshCell(hrow, \"colName\"); //example2 일반행에 기능 설정하기 var trow = sheet.getRowById(\"AR34\"); //AR34번 행을 얻음 trow[\"CanEdit\"] = 0; //행에대한 편집 불가 설정 trow[\"CanFocus\"] = 0; //행 포커스 불가 설정 sheet.refreshRow(trow); ``` ### *Def를 통한 행 공통 설정* 시트 생성시 행/열에 대한 공통기능을 설정하는 `Def`를 통해서 커스텀행에 대한 디자인과 기능을 설정할 수 있습니다. ```javascript var options = { Def: { \"Col\": {}, //전체 열에 대한 공통 설정 \"Row\": {}, //전체 데이터 행에 대한 공통 설정 \"Header\": {}, //헤더행에 대한 공통 설정 myCustomRow2: { //임의의 커스텀 행에대한 공통 기능 설정 \"Color\": \"#555555\", \"TextColor\": \"#FFFFFF\", \"CanFocus\": 0, \"Tip\": \"커스텀 행입니다.\" } } }; ``` 위와 같이 만들어진 \"myCustomRow2\"는 아래와 같은 방식으로 커스텀행에 적용하실 수 있습니다. ```javascript options = { Head:[ { //커스텀 헤더행 Def: \"myCustomRow2\", //Def에서 정의한 공통을 적용함 id: \"headRow1\", \"colName1\": {\"Type\": \"Text\", \"Align\": \"Right\", \"Value\": \"상태\"}, \"colName2\": {\"Type\": \"Text\", \"Align\": \"Left\", \"Value\": \"작업완료\"} } ] }; ```",
          "see": [
            {
              "label": "ShowFilter cfg",
              "url": "/docs/props/cfg/show-filter"
            },
            {
              "label": "FormulaRow col",
              "url": "/docs/props/col/formula-row"
            },
            {
              "label": "addRow method",
              "url": "/docs/funcs/core/add-row"
            },
            {
              "label": "doSearch method",
              "url": "/docs/funcs/core/do-search"
            },
            {
              "label": "loadSearchData method",
              "url": "/docs/funcs/core/load-search-data"
            },
            {
              "label": "showFilterRow method",
              "url": "/docs/funcs/core/show-filter-row"
            },
            {
              "label": "행 객체 appendix",
              "url": "/docs/appx/row-object"
            },
            {
              "label": "Soild appendix",
              "url": "/docs/appx/solid"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/start/row.html"
      },
      {
        "cid": 5,
        "sid": "col",
        "name": "col",
        "label": "열(Col) 구조에 대한 이해",
        "data": {
          "body": "> 시트를 세로로 나누면 `Left`, `Center`, `Right` 영역(Section)으로 나누어 집니다. > 각각의 영역은 고유하게 스크롤을 갖을 수 있고 각 영역 간에 이동도 가능합니다. ## 열 생성 시트 생성시 `LeftCols, Cols, RightCols` 에 각 열에 대한 기능을 정의하면 원하는 개수만큼 열을 생성할 수 있습니다. 단, **SEQ 열은 항상 자동으로 생성되며 별도로 Name: \"SEQ\" 인 열을 설정하지 않으면 LeftCols에 Hidden 상태로 생성됩니다.** [sheet.showCol('SEQ');](/docs/funcs/core/show-col) 로 숨겨진 `SEQ 열`을 확인 할 수 있습니다. 빈번하게 사용될 것 같은 열의 기능은 [Extend](/docs/props/col/extend)를 통해 여러개 열에 동일하게 적용하실 수 있습니다. ```javascript var options = { \"Cfg\": { //전역 기능 설정(cfg property) \"LeftCanResize\": 1, \"LeftWidth\": 100, \"RightCanResize\": 1, \"RightWidth\": 100 }, LeftCols: [ //왼쪽영역(LeftSection) 고정 열 설정 (col property) {\"Header\": \"NO\", \"Type\": \"Int\", \"Name\": \"SEQ\", \"Width\": 50}, {\"Header\": \"선택\", \"Type\": \"Bool\", \"CanEdit\": 1,\"Name\": \"chk\", \"Width\": 50}, {\"Header\": \"년도\", \"Name\": \"Year\", \"Type\": \"Text\", \"Align\": \"Center\", \"Width\": 70} ], Cols: [ //가운데 영역 {\"Header\": \"매출\", \"Name\": \"revenue\", \"Type\": \"Int\", \"Width\": 120, \"Format\": \"#,### 백만원\"}, {\"Header\": \"매출원가\", \"Name\": \"revenueOrg\", \"Type\": \"Int\", \"Width\": 120, \"Format\": \"#,### 백만원\"}, {\"Header\": \"판매관리비\", \"Name\": \"salesMgr\", \"Type\": \"Int\", \"Width\": 120, \"Format\": \"#,### 백만원\"}, {\"Header\": \"영업이익\", \"Name\": \"oprIncome\", \"Type\": \"Int\", \"Width\": 120, \"Format\": \"#,### 백만원\", Formula: \"revenue-revenueOrg-salesMgr\", Color: \"#DEDEDE\"} ], RightCols: [ //오른쪽영역(RightSection) 고정 열 설정 (col property) {\"Header\": \"금융손실\", \"Name\": \"finloss\", \"Type\": \"Int\", \"Width\": 120, \"Format\": \"#,### 백만원\"}, {\"Header\": \"법인세\", \"Name\": \"corpTax\", \"Type\": \"Int\", \"Width\": 120, \"Format\": \"#,### 백만원\"}, {\"Header\": \"순이익\", \"Name\": \"INCOME\", \"Type\": \"Int\", \"Width\": 120, \"Format\": \"#,### 백만원\", Formula: \"oprIncome-finloss-corpTax\", Color: \"#DEDEDE\"} ] }; ``` ![섹션](/assets/imgs/section2.png \"section\") [`좌측,가운데,우측 영역`] 각 영역에 대한 너비는 `Cfg`에서 [LeftWidth](/docs/props/cfg/left-width), [RightWidth](/docs/props/cfg/right-width)를 통해 설정하게 됩니다. 다만, 시트의 너비가 충분히 커서 가로스크롤바가 필요 없는 경우에는 위 설정은 무시됩니다. 영역과 영역사이는 원래 붙어 있으며, 사용자가 직접 영역의 크기를 조절할 수 있게 하려면 `Cfg`에서 [LeftCanResize](/docs/props/cfg/left-can-resize), [RightCanResize](/docs/props/cfg/right-can-resize)을 설정하시면 됩니다. ## 열 기능 변경 이미 생성된 열에 대해서 설정을 확인하거나 기능을 수정하거나 추가할 수 있습니다. ```javascript var col = sheet.Cols[\"finloss\"]; //Name이 finloss인 열 객체 얻기 // 열에 설정된 색상 확인 console.log(col[\"Color\"]); // 열에 속성 변경 col[\"TextColor\"] = \"#FF0000\"; //열에 색상 정의 col[\"CanSelect\"] = 0; //열에 대한 선택 불가(드래그시 선택이 안됨) sheet.rerender(); //변경내용 반영 ``` 다만 위와 같이 직접 열에 속성에 직접 접근하여 속성값을 변경하는 경우 시트내에서 이를 감지하지 못하여 예상치 못한 문제가 발생할 수 있으므로 가급적 [getAttribute](/docs/funcs/core/get-attribute)나 [setAttribute](/docs/funcs/core/set-attribute) 함수를 사용하실 것을 권해드립니다. ## 빈번하게 사용되는 열 유형에 대해서 **Extend** 기능 활용 프로젝트에서 자주 사용될 것 같은 기능을 갖은 열, 가령 \"yyyy-MM-dd\" 형식의 Date열이나 \"$ 12.33\"와 같은 통화 형식의 Float열을 공통으로 정의해 두고 각 화면에서는 미리 정의해둔 설정을 불러다 사용하실 수 있습니다. [`ibsheet-common.js` 파일에 공통기능을 정의한 IB_Preset 이 있습니다.] ```javascript var IB_Preset = { \"YMD\": {Type: \"Date\", Width: 110, Align: \"Center\", Format: \"yyyy-MM-dd\", DataFormat: \"yyyyMMdd\", EditFormat: \"yyyyMMdd\"}, \"YM\": {Type: \"Date\", Width: 90, Align: \"Center\", Format: \"yyyy-MM\", DataFormat: \"yyyyMM\", EditFormat: \"yyyyMM\"}, \"USD\":{Type: \"Float\", Width: 100, Format: \"$ #,###.##\"}, .... }; ``` [각 페이지에서 시트 초기화 구문] ```javascript var options = { Cols:[ ///Extend를 통해 미리 정의한 Type,Format 등의 설정을 적용 {Header: \"국외수입\", Name: \"Income\", Extend: IB_Preset.USD}, {Header: \"취득일\", Name: \"ICDate\", Extend: IB_Preset.YMD} ] } ```",
          "see": [
            {
              "label": "LeftWidth cfg",
              "url": "/docs/props/cfg/left-width"
            },
            {
              "label": "RightWidth cfg",
              "url": "/docs/props/cfg/right-width"
            },
            {
              "label": "LeftCanResize cfg",
              "url": "/docs/props/cfg/left-can-resize"
            },
            {
              "label": "RightCanResize cfg",
              "url": "/docs/props/cfg/right-can-resize"
            },
            {
              "label": "Extend col",
              "url": "/docs/props/col/extend"
            },
            {
              "label": "showCol method",
              "url": "/docs/funcs/core/show-col"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/start/col.html"
      },
      {
        "cid": 4,
        "sid": "basic-structure",
        "name": "basic-structure",
        "label": "시트 객체 기본 구조",
        "data": {
          "body": "***시트 객체 초기화(options)*** ## 초기화 구문 구조 ``` options.(ROOT) ├── Cfg:{} // 시트 전역 기능 설정 │ ├── LeftCols:[] // 왼쪽 고정 영역 열 설정 ├── Cols:[] // 기본열 설정(가운데 영역) ├── RightCols:[] // 우측 고정 영역 열 설정 │ └── Events:{} // 이벤트 선언 ``` 시트설정 예) ```javascript var OPT = { \"Cfg\": { // 전역 기능 설정(cfg property) \"CanEdit\": 0, }, \"LeftCols\": [ // 왼쪽영역(LeftSection) 고정 열 설정 (col property) { \"Header\": \"NO\", \"Type\": \"Int\", \"Name\": \"SEQ\", \"Width\": 50 }, { \"Header\": \"선택\", \"Type\": \"Bool\", \"CanEdit\": 1, \"Name\": \"CHK\"} ], \"Cols\": [ // 기본 열 설정(가운데영역) (col property) { \"Header\": \"부서명\", \"Name\": \"deptName\", \"Type\": \"Text\", \"Size\": 30 }, { \"Header\": \"1분기\", \"Name\": \"qt1\", \"Type\": \"Int\", \"Width\": 100, \"Format\": \"#,##0 만원\", \"FormulaRow\": \"Avg\" }, { \"Header\": \"2분기\", \"Name\": \"qt2\", \"Type\": \"Int\", \"Width\": 100, \"Format\": \"#,##0 만원\", \"FormulaRow\": \"Avg\", \"Color\": \"#EDEDED\" }, { \"Header\": \"3분기\", \"Name\": \"qt3\", \"Type\": \"Int\", \"Width\": 100, \"Format\": \"#,##0 만원\", \"FormulaRow\": \"Avg\" }, { \"Header\": \"4분기\", \"Name\": \"qt4\", \"Type\": \"Int\", \"Width\": 100, \"Format\": \"#,##0 만원\", \"FormulaRow\": \"Avg\", \"Color\": \"#EDEDED\"} ], \"RightCols\": [], // 오른쪽 영역(RightSection) \"Events\":{ // 이벤트 설정 \"onBeforeChange\":function (evt) { ... } } }; ``` ## 조회 데이터 구조 ```js var DATA = [ {\"deptName\": \"국내영업 1팀\", \"qt1\": 15030, \"qt2\": 21102, \"qt3\": 20308, \"qt4\": 23041}, {\"deptName\": \"국내영업 2팀\", \"qt1\": 25100, \"qt2\": 42460, \"qt3\": 38740, \"qt4\": 54765}, {\"deptName\": \"국내영업 3팀\", \"qt1\": 11474, \"qt2\": 19671, \"qt3\": 24746, \"qt4\": 20754}, {\"deptName\": \"해외 영업팀\", \"qt1\": 24146, \"qt2\": 24654, \"qt3\": 24164, \"qt4\": 48121} ] ``` ## 시트 생성 구문 ```js IBSheet.create({ \"id\": \"mySheet\", // 시트객체 이름 (SPA에서는 사용 X) \"el\": document.querySelector(\"div.part1 .gridarea\"), // 시트를 생성할 html element \"options\": OPT, // 초기화 구문 \"data\": DATA //초기 데이터 }); ``` ![로드된 시트 이미지](/assets/imgs/basicStructure.png \"로드된 시트 이미지\") [로드된 시트 이미지]",
          "see": [
            {
              "label": "상세 구조",
              "url": "/docs/appx/init-structure"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/start/basic-structure.html"
      }
    ]
  },
  {
    "gid": 3,
    "label": "Properties",
    "name": "props",
    "children": [
      {
        "gid": 1,
        "name": "props-cfg",
        "label": "Cfg",
        "children": [
          {
            "cid": 8,
            "sid": "accept-pivot-cols",
            "name": "accept-pivot-cols",
            "label": "AcceptPivotCols",
            "data": {
              "body": "> 피벗 시트에서 기준 열의 값으로 사용될 수 있는 열을 설정합니다. > `\",\"`로 연결하여 복수 개의 열 이름을 지정할 수 있습니다. ### Type `string` ### Example ```javascript options.Cfg = { UsePivot: true, // 피벗 사용 여부 AcceptPivotCols: \"sDept,sTeam,sPosition,sName,sGender,sAgeRange,sAddr,sAge,sPeriod\" }; ```",
              "see": [
                {
                  "label": "UsePivot cfg",
                  "url": "./use-pivot"
                },
                {
                  "label": "PivotFunc cfg",
                  "url": "./pivot-func"
                },
                {
                  "label": "AcceptPivotRows cfg",
                  "url": "./accept-pivot-rows"
                },
                {
                  "label": "AcceptPivotData cfg",
                  "url": "./accept-pivot-data"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/accept-pivot-cols.html"
          },
          {
            "cid": 9,
            "sid": "accept-pivot-data",
            "name": "accept-pivot-data",
            "label": "AcceptPivotData",
            "data": {
              "body": "> 피벗 시트에서 데이터의 값으로 사용될 수 있는 열을 설정합니다. > `\",\"`로 연결하여 복수 개의 열 이름을 지정할 수 있습니다. ### Type `string` ### Example ```javascript options.Cfg = { UsePivot: true, // 피벗 사용 여부 AcceptPivotData: \"sAge,sPeriod,sSalary,sBonus\" }; ```",
              "see": [
                {
                  "label": "UsePivot cfg",
                  "url": "./use-pivot"
                },
                {
                  "label": "PivotFunc cfg",
                  "url": "./pivot-func"
                },
                {
                  "label": "AcceptPivotCols cfg",
                  "url": "./accept-pivot-cols"
                },
                {
                  "label": "AcceptPivotRows cfg",
                  "url": "./accept-pivot-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/accept-pivot-data.html"
          },
          {
            "cid": 10,
            "sid": "accept-pivot-rows",
            "name": "accept-pivot-rows",
            "label": "AcceptPivotRows",
            "data": {
              "body": "> 피벗 시트에서 기준 행의 값으로 사용될 수 있는 열을 설정합니다. > `\",\"`로 연결하여 복수 개의 열 이름을 지정할 수 있습니다. ### Type `string` ### Example ```javascript options.Cfg = { UsePivot: true, // 피벗 사용 여부 AcceptPivotRows: \"sDept,sTeam,sPosition,sName,sGender,sAgeRange,sAddr,sAge,sPeriod\" }; ```",
              "see": [
                {
                  "label": "UsePivot cfg",
                  "url": "./use-pivot"
                },
                {
                  "label": "PivotFunc cfg",
                  "url": "./pivot-func"
                },
                {
                  "label": "AcceptPivotCols cfg",
                  "url": "./accept-pivot-cols"
                },
                {
                  "label": "AcceptPivotData cfg",
                  "url": "./accept-pivot-data"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/accept-pivot-rows.html"
          },
          {
            "cid": 11,
            "sid": "alternate-count",
            "name": "alternate-count",
            "label": "AlternateCount",
            "data": {
              "body": "> [Alternate](./alternate) 로 설정된 행 간격에 `AlternateCount` 정의한 개수만큼 [AlternateColor](/docs/props/row/alternate-color) 배경색를 적용합니다. > 예를 들어 `Alternate: 5` 이고, `AlternateCount: 2` 인 경우 5개 행 간격으로 마지막 2개 행에만 하이라이트를 적용합니다. ### ![AlternateCount](/assets/imgs/alternateCount.png \"AlternateCount\") [`Alternate: 5, AlternateCount: 2` 로 설정한 경우] ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|`alternate` 설정된 행 간격마다 하이라이트가 적용될 마지막 행수 (`default: 1`)| ### Example ```javascript options[\"Cfg\"] = { Alternate:5, AlternateCount:2 }; ```",
              "see": [
                {
                  "label": "AlternateColor row",
                  "url": "/docs/props/row/alternate-color"
                },
                {
                  "label": "Alternate cfg",
                  "url": "./alternate"
                },
                {
                  "label": "AlternateStart cfg",
                  "url": "./alternate-start"
                },
                {
                  "label": "AlternateType cfg",
                  "url": "./alternate-type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/alternate-count.html"
          },
          {
            "cid": 12,
            "sid": "alternate-start",
            "name": "alternate-start",
            "label": "AlternateStart",
            "data": {
              "body": "> [Alternate cfg](./alternate) 에 설정한 행 간격에 [AlternateColor](/docs/props/row/alternate-color)를 적용할 행의 시작 위치를 설정합니다. > `0`은 간격의 첫번째 행을 의미합니다. > 예를 들어 [Alternate](./alternate): 5 이고, [AlternateCount](./alternate-count): 2, AlternateStart: 0 로 설정한 경우 > 화면에는 5개 행 간격으로 맨위의 2개 행에만 `AlternateColor`를 표시합니다. ### ![AlternateStart](/assets/imgs/alternateCount.png \"AlternateStart\") [`Alternate: 5, AlternateCount: 2` 로 설정한 경우] ![AlternateStart](/assets/imgs/alternateStart.png \"AlternateStart\") [`Alternate: 5, AlternateCount: 2, AlternateStart: 0` 로 설정한 경우] ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|[Alternate](./alternate) 설정된 행 간격마다 하이라이트가 시작될 행 위치 (`default : (cfg)Alternate - (cfg)AlternateCount`)| ### Example ```javascript options[\"Cfg\"] = { Alternate:5, AlternateCount:2, AlternateStart:0 }; ```",
              "see": [
                {
                  "label": "Alternate cfg",
                  "url": "./alternate"
                },
                {
                  "label": "AlternateCount cfg",
                  "url": "./alternate-count"
                },
                {
                  "label": "AlternateType cfg",
                  "url": "./alternate-type"
                },
                {
                  "label": "AlternateColor row",
                  "url": "/docs/props/row/alternate-color"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/alternate-start.html"
          },
          {
            "cid": 13,
            "sid": "alternate-type",
            "name": "alternate-type",
            "label": "AlternateType",
            "data": {
              "body": "> 트리로 구성된 시트에서 자식행들도 [Alternate](./alternate) 계산에 포함될지 여부를 설정합니다. > 해당 속성을 `1`로 설정한 경우, 트리를 펼치고 접을 때마다 자식행들에 대한 컬러 계산이 이루어지면서 시트가 느려질 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|트리 시트의 자식행을 포함하지 않고 하이라이트 표시 (`default`)| |`1`|트리 시트의 자식행을 포함해 재계산하여 하이라이트 표시 | ### Example ```javascript options.Cfg = { \"Alternate\": 2, // 짝수행에 하이라이트 표시 \"AlternateType\": 1 // 트리시트에서 자식행도 Alternate 에 포함하여 하이라이트 처리 }; ```",
              "see": [
                {
                  "label": "Alternate cfg",
                  "url": "./alternate"
                },
                {
                  "label": "AlternateColor row",
                  "url": "/docs/props/row/alternate-color"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/alternate-type.html"
          },
          {
            "cid": 14,
            "sid": "alternate",
            "name": "alternate",
            "label": "Alternate",
            "data": {
              "body": "> 홀수, 짝수 행에 대하여 번갈아 가며 배경색을 다르게 설정하여 가독성을 높일수 있는 기능입니다. > 옵션 값이 `3` 이상인 경우 (Cfg)[AlternateStart](./alternate-start) 와 (cfg)[AlternateCount](./alternate-count) 에 따라 하이라이트 적용을 변경할 수 있습니다. > 하이라이트 색상은 css 파일의 `.IBColorAlternate` 색상을 기본값으로 가지며, (Row)[AlternateColor](/docs/props/row/alternate-color) 를 설정한 경우 해당 색상을 따르게 됩니다. ### ![Alternate0](/assets/imgs/alternate0.png \"Alternate0\") [`Alternate: 0` 의 경우] ![Alternate2](/assets/imgs/alternate2.png \"Alternate0\") [`Alternate: 2` 의 경우] ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|하이라이트 기능 사용 안함 (css 파일의 `.IBColorDefault` 색상) (`default`)| |`1`|모든 데이터행에 하이라이트 사용 (css 파일의 `.IBColorAlternate` 색상)| |`2`|**짝수행에 하이라이트 사용** (css 파일의 `.IBColorDefault, .IBColorAlternate` 색상이 반복적으로 표시)| |`3`|3개 행 마다 마지막 행에 하이라이트 사용 | |`N`|N개 행 마다 마지막 행에 하이라이트 사용 | ### Example ```javascript options = { Cfg:{ Alternate: 2, // 홀/짝수행 색상을 css 의 .IBColorDefault 색상과 (Row)AlternateColor 색상으로 처리 }, Def:{ Row:{ AlternateColor: \"FFFF00\" // 하이라이트 색상을 노란색으로 설정 } } }; ```",
              "see": [
                {
                  "label": "AlternateColor row",
                  "url": "/docs/props/row/alternate-color"
                },
                {
                  "label": "AlternateCount cfg",
                  "url": "./alternate-count"
                },
                {
                  "label": "AlternateStart cfg",
                  "url": "./alternate-start"
                },
                {
                  "label": "AlternateType cfg",
                  "url": "./alternate-type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/alternate.html"
          },
          {
            "cid": 15,
            "sid": "auto-calendar",
            "name": "auto-calendar",
            "label": "AutoCalendar",
            "data": {
              "body": "> 모든 [Type](/docs/appx/type)이 `Date`인 셀에 대해 사용자가 편집모드로 들어갈때 달력을 띄울지 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|기능 사용 안함 (`default`)| |`1(true)`|편집시 달력을 띄움| ### Example ```javascript //모든 Date 타입 열에 대해서 편집시 자동으로 달력을 오픈한다. options.Cfg = { AutoCalendar: true }; ```",
              "see": [
                {
                  "label": "AutoCalendar col",
                  "url": "/docs/props/col/auto-calendar"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/auto-calendar.html"
          },
          {
            "cid": 16,
            "sid": "auto-close-dialog-timeout",
            "name": "auto-close-dialog-timeout",
            "label": "AutoCloseDialogTimeout",
            "data": {
              "body": "> `(Cfg) AutoCloseDialog`를 설정하여 다이얼로그를 자동으로 닫을 경우, 다이얼로그가 자동으로 닫히는 딜레이 시간을 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|다이얼로그가 자동으로 닫히는 시간을 설정합니다.| ### Example ```javascript options = { \"Cfg\":{ \"AutoCloseDialogTimeout\": 1000, // 1초 후 다이얼로그가 자동으로 닫히도록 설정 } }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.3.0.24|기능 추가|"
            },
            "url": "docs/props/cfg/auto-close-dialog-timeout.html"
          },
          {
            "cid": 17,
            "sid": "auto-close-dialog",
            "name": "auto-close-dialog",
            "label": "AutoCloseDialog",
            "data": {
              "body": "> 달력, 컨텍스트 메뉴 등 내부적으로 사용하는 다이얼로그에서 마우스가 벗어날 때, 다이얼로그를 자동으로 닫을지 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`false`|다이얼로그를 자동으로 닫지 않습니다. (`default`)| |`true`|다이얼로그를 자동으로 닫습니다.| ### Example ```javascript options = { \"Cfg\":{ \"AutoCloseDialog\": true, // 달력, 컨텍스트 메뉴 등 내부적으로 사용하는 다이얼로그에서 마우스가 벗어날 때 달력을 자동으로 닫습니다. } }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.3.0.24|기능 추가|"
            },
            "url": "docs/props/cfg/auto-close-dialog.html"
          },
          {
            "cid": 18,
            "sid": "auto-excel-mode",
            "name": "auto-excel-mode",
            "label": "AutoExcelMode",
            "data": {
              "body": "> down2Excel(),loadExcel() 함수를 이용하여 엑셀 다운/업로드를 할 때, 서버모듈을 이용할지 클라이언트 모듈을 이용할지 정할 수 있는 모드 입니다. > 따로 설정하지 않으면 서버모듈을 기준으로 사용됩니다. > `AutoExcelMode`를 `1`로 설정시 서버모듈([down2Excel](/docs/funcs/excel/down-to-excel), [loadExcel](/docs/funcs/excel/load-excel)) 과 동일합니다. > `AutoExcelMode`를 `2`로 설정시 클라이언트 모듈([exportData](/docs/funcs/core/export-data), [importData](/docs/funcs/core/import-data))과 동일합니다. 클라이언트 모듈만을 사용하고 싶은 경우는 따로 설정하지 않고 ([exportData](/docs/funcs/core/export-data), [importData](/docs/funcs/core/import-data))를 사용하셔도 됩니다. > `AutoExcelMode`를 `3`으로 설정하면 브라우저의 성능에 따라 서버모듈([down2Excel](/docs/funcs/excel/down-to-excel), [loadExcel](/docs/funcs/excel/load-excel))과 클라이언트 모듈([exportData](/docs/funcs/core/export-data), [importData](/docs/funcs/core/import-data))에 대해 **자동분기점**이 형성된다. ### Type `number` ### Options |Value|Description| |-----|-----| |`1`|서버모듈을 (`down2Excel, loadExcel`) 사용합니다. (`default`)| |`2`|클라이언트 모듈을 (`exportData, importData`) 사용합니다. **(IE10이상에서만 사용 가능)** | |`3`|브라우저의 성능에 따라 서버모듈, 클라이언트 모듈로 **자동분기점**을 형성한다. 하위 브라우저(IE9 이하)의 경우: `서버모듈`, 상위 브라우저의 경우: `클라이언트 모듈`.| ### Example ```javascript options.Cfg = { // 서버모듈을 사용 AutoExcelMode: 1 }; // AutoExcelMode: 1, 서버모듈 엑셀 다운 sheet.down2Excel({fileName: \"Excel.xlsx\"}); options.Cfg = { // 클라이언트 모듈 사용 AutoExcelMode: 2 }; // 상위 브라우저(IE10이상), AutoExcelMode: 2, 클라이언트 업로드 sheet.loadExcel(); // sheet.importData()와 같음. options.Cfg = { // 클라이언트 모듈, 서버모듈 자동 분기점. AutoExcelMode: 3 }; // 상위 브라우저(IE10이상), AutoExcelMode: 3, 클라이언트 엑셀 다운 sheet.down2Excel({fileName: \"Excel.xlsx\"}); ```",
              "see": [
                {
                  "label": "down2Excel method",
                  "url": "/docs/funcs/excel/down-to-excel"
                },
                {
                  "label": "exportData method",
                  "url": "/docs/funcs/core/export-data"
                },
                {
                  "label": "importData method",
                  "url": "/docs/funcs/core/import-data"
                },
                {
                  "label": "loadExcel method",
                  "url": "/docs/funcs/excel/load-excel"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|8.0.0.4|기능 추가||excel|8.0.0.5|명칭 변경 `ExportMode => AutoExcelMode`|"
            },
            "url": "docs/props/cfg/auto-excel-mode.html"
          },
          {
            "cid": 19,
            "sid": "auto-row-height",
            "name": "auto-row-height",
            "label": "AutoRowHeight",
            "data": {
              "body": "> [SearchMode:0](/docs/props/cfg/search-mode) 인 시트에서 자동 줄넘김이 되어 행의 높이가 각각 다르게 표현 되는 시트가 동작이 되도록 설정하는 옵션입니다. > 컬럼 타입 `Lines`, `Html`, `Img`, `Button` 또는 컬럼 속성 [Wrap](/docs/props/col/wrap), [HtmlPrefix](/docs/props/col/html-prefix), [HtmlPostfix](/docs/props/col/html-postfix), [TextSize](/docs/props/col/text-size), `HtmlPrefixFormula`, `HtmlPostfixFormula`, `TextSizeFormula`, [SignFontStyle](/docs/props/col/sign-font-style)중 `TextSize`속성을 사용한 컬럼이 있을 경우에만 사용이 가능합니다. > **<mark>주의</mark> : 한번 `AutoRowHeight: false` 의 조건으로 생성된 시트에 대해서 `AutoRowHeight: true` 의 조건에 맞게 설정을 변경한 뒤 다시 [rerender](/docs/funcs/core/rerender) 동작을 하더라도 `AutoRowHeight` 옵션 값은 변하지 않습니다. 소스 상 동적으로 해당 속성을 변경하는 경우 시트 내부적으로 충돌이 일어날 수 있습니다.** ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|행 높이 자동 맞춤 기능 사용 안함 (`default`)| |`1(true)`|SearchMode:0 모드에서 행 높이 자동 맞춤 기능 사용 (사용 조건에 맞지 않을 경우 `false` 로 변경되어 시트 생성)| ### Example ```javascript options.Cfg{ //SearchMode:0 시트에서 자동 행 높이 기능 사용 SearchMode: 0, AutoRowHeight: true ... }; ``` ### Try it - [True](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/AutoRowHeight-true/)",
              "see": [
                {
                  "label": "SearchMode cfg",
                  "url": "/docs/props/cfg/search-mode"
                },
                {
                  "label": "Wrap col",
                  "url": "/docs/props/col/wrap"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.27|기능 추가||core|8.3.0.19|`SignFontStyle`속성 중 `TextSize` 대응 추가|"
            },
            "url": "docs/props/cfg/auto-row-height.html"
          },
          {
            "cid": 20,
            "sid": "auto-select-Ym",
            "name": "auto-select-Ym",
            "label": "AutoSelectYm",
            "data": {
              "body": "> 년월 달력일 경우, `AutoSelectYm`을 `1`로 설정 시, 년월 달력에 확인버튼은 사라지고 월 클릭으로 값을 입력 할 수 있다. > `AutoSelectYm`을 `2`로 설정 시, 확인버튼이 사라지지 않고 월 클릭으로 값을 입력 할 수 있다. ### [`AutoSelectYm: 0 또는 2` 설정시] ![다운로드](/assets/imgs/autoselectNon.png) [`AutoSelectYm: 1` 설정시] ![다운로드](/assets/imgs/AutoSelectYm.png) ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|확인버튼으로 값을 입력 할 수 있음. (`default`)| |`1`|확인버튼이 사라지고 월 클릭으로 값을 입력 할 수 있음. | |`2`|확인버튼이 있으며, 월 클릭으로 값을 입력 할 수 있음. | ### Example ```javascript options.Cfg = { // 확인버튼 사라지고 월 클릭으로 값 입력 \"AutoSelectYm\": 1 }; ```",
              "see": [
                {
                  "label": "CalendarButtons col",
                  "url": "/docs/props/col/calendar-buttons"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가||core|8.0.0.19|2 동작 추가|"
            },
            "url": "docs/props/cfg/auto-select-Ym.html"
          },
          {
            "cid": 21,
            "sid": "auto-select-firstenum",
            "name": "auto-select-firstenum",
            "label": "AutoSelectFirstEnum",
            "data": {
              "body": "> `Enum` 컬럼 아이템의 첫번째 값이 선택 되도록 설정 합니다. > 행 추가, setAttribute 함수로 Enum/EnumKeys 설정시에 동작 합니다. > 단 Enum/EnumKeys를 동시에 설정 할 경우 `EnumKeys`를 먼저 설정해야 getValue시 첫번째 아이템의 값으로 읽을 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|기능 사용 안함 (`default`)| |`1(true)`|Enum 아이템의 첫번째 값이 선택 되도록 설정| ### Example ```javascript options.Cfg = { AutoSelectFirstEnum : 1(true) }; sheet.setAttribute(sheet.getFocusedRow(), \"ComboData\", \"EnumKeys\", \"|101|102\"); sheet.setAttribute(sheet.getFocusedRow(), \"ComboData\", \"Enum\", \"|진행중|완료\"); ```",
              "see": [
                {
                  "label": "addRow",
                  "url": "/docs/funcs/core/add-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.5|기능 추가|"
            },
            "url": "docs/props/cfg/auto-select-firstenum.html"
          },
          {
            "cid": 22,
            "sid": "border-cursors",
            "name": "border-cursors",
            "label": "BorderCursors",
            "data": {
              "body": "> (cfg)[Hover](./hover) : 2 로 행단위 `Hover`를 설정시 호버되는 행의 `Border` 가 보일지 여부를 설정합니다.(`Hover:0/1` 일 때는 동작안함) ### ![borderCursors](/assets/imgs/borderCursors1.png \"borderCursors\") [`borderCursors : 1` 인 경우] ![borderCursors](/assets/imgs/borderCursors0.png \"borderCursors\") [`borderCursors : 0` 인 경우] ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|`Hover` 된 행과 셀의 `Border` 표시 안함| |`1(true)`|`Hover` 된 행과 셀의 `Border` 표시 (`default`) | ### Example ```javascript options.Cfg = { \"Hover\": 2, // 행단위 Hover 동작 \"BorderCursors\": true, // Hover 행과 셀의 Border 표시 }; ```",
              "see": [
                {
                  "label": "Hover cfg",
                  "url": "./hover"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/border-cursors.html"
          },
          {
            "cid": 23,
            "sid": "calc-merge-mode",
            "name": "calc-merge-mode",
            "label": "CalcMergeMode",
            "data": {
              "body": "> [makeSubTotal](/docs/funcs/core/make-sub-total) 혹은 [FormulaRow](/docs/props/col/formula-row) 사용시 머지된 셀을 각각 병합된 하나의 데이터로 계산하도록 기능입니다. > ~~주의 : SearchMode:0 모드에서 사용시 소계 값에 오류가 있을 수 있습니다~~ (8.0.0.8 버전에서 개선) > 사용자 입력에 의해 셀 값을 변경하거나 [setValue](/docs/)로 셀 값 변경 시 [SearchMode](/docs/props/cfg/search-mode)에 따라 [MergeCellsMatch](/docs/props/cfg/merge-cells-match) 혹은 [EditAutoMerge](/docs/props/cfg/edit-auto-merge) 를 반드시 설정해주어야 합니다. > 1. `SearchMode:0/3`: `MergeCellsMatch:1`설정 시 값 편집 시에도 정확한 값 계산 가능 > 2. `SearchMode:1/2`: `EditAutoMerge:1` 혹은 `MergeCellsMatch:1`설정 시 값 편집 시에도 정확한 값 계산 가능 ### [CalcMergeMode: 0 설정시] ![다운로드](/assets/imgs/nonCalcMergeMode.png) [CalcMergeMode: 1 설정시] ![다운로드](/assets/imgs/CalcMergeMode.png) ### Type `number` ### Options |Value|Description| |-----|------| |`0`|소계, FormulaRow사용 시 머지가 된 셀도 Row별 값 계산 (`default`)| |`1`|소계 계산시 머지된 셀을 하나의 값으로 계산([makeSubTotal](/docs/funcs/core/make-sub-total)만 적용)| |`2`|FormulaRow계산 시 머지된 셀을 하나의 값으로 계산 ([FormulaRow](/docs/props/col/formula-row)만 적용)| |`3`|FormulaRow와 소계 계산시 머지가 된 셀을 하나의 값으로 계산(둘다 적용)| ### Example ```javascript options.Cfg = {CalcMergeMode: 1}; sheet.makeSubTotal({...}); ```",
              "see": [
                {
                  "label": "makeSubTotal method",
                  "url": "/docs/funcs/core/make-sub-total"
                },
                {
                  "label": "FormulaRow col",
                  "url": "/docs/props/col/formula-row"
                },
                {
                  "label": "SearchMode",
                  "url": "/docs/props/cfg/search-mode"
                },
                {
                  "label": "EditAutoMerge",
                  "url": "/docs/props/cfg/edit-auto-merge"
                },
                {
                  "label": "MergeCellsMatch",
                  "url": "/docs/props/cfg/merge-cells-match"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가||core|8.0.0.8|SearchMode:0에서 동작하게 수정||core|8.0.0.11|CalcMergeMode: 2/3 추가|"
            },
            "url": "docs/props/cfg/calc-merge-mode.html"
          },
          {
            "cid": 24,
            "sid": "can-col-move",
            "name": "can-col-move",
            "label": "CanColMove",
            "data": {
              "body": "> 사용자가 시트의 헤더셀을 드래그하여 열의 위치를 변경하는 기능을 허용할지 여부를 설정합니다. > 열 이동시 헤더 열과 데이터 열이 같이 이동됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|열 이동 불가능| |`1`|열 이동 가능 (`default`)| |`2`|헤더가 2줄 이상일 때 부모 헤더가 열병합 되어있는 경우 병합된 영역 안에서만 이동 가능| ### Example ```javascript options.Cfg = { \"CanColMove\":0 // 사용자 열 순서 변경 불가 }; ``` ### Try it - [Set to 2](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/CanColMove-2/)",
              "see": [
                {
                  "label": "CanMove col",
                  "url": "/docs/props/col/can-move"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.2.0.12|`CanColMove: 2` 기능 추가|"
            },
            "url": "docs/props/cfg/can-col-move.html"
          },
          {
            "cid": 25,
            "sid": "can-col-resize",
            "name": "can-col-resize",
            "label": "CanColResize",
            "data": {
              "body": "> 마우스를 통한 열 너비 조정의 가능여부를 설정할 수 있습니다. > 기본값은 `1(true)` 로 헤더 영역의 열과 열 사이에서 마우스를 이용하여 너비조절을 할 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|열 너비 조정 불가능| |`1(true)`|열 너비 조정 가능 (`default`)| ### Example ```javascript options.Cfg = { \"CanColResize\": true // 열 너비 조정 불허 }; ``` ### Try it - [True by default](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/CanColResize-true/)",
              "see": [
                {
                  "label": "CanResize col",
                  "url": "/docs/props/col/can-resize"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/can-col-resize.html"
          },
          {
            "cid": 26,
            "sid": "can-drag",
            "name": "can-drag",
            "label": "CanDrag",
            "data": {
              "body": "> 마우스 드래그로 행을 이동할지 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|마우스 드래그를 통한 행 이동 불가 (`default`)| |`1(true)`|마우스 드래그를 통한 행 이동 가능| ### Example ```javascript options.Cfg = { \"CanDrag\": true //마우스 드래그를 통한 행 이동 설정 }; ``` ### Try it - [True](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/CanDrag-true/)",
              "see": [
                {
                  "label": "CanDrag row",
                  "url": "/docs/props/row/can-drag"
                },
                {
                  "label": "DragCell cfg",
                  "url": "./drag-cell"
                },
                {
                  "label": "DragObject cfg",
                  "url": "./drag-object"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/can-drag.html"
          },
          {
            "cid": 27,
            "sid": "can-edit",
            "name": "can-edit",
            "label": "CanEdit",
            "data": {
              "body": "> 전체적인 시트의 편집 가능여부를 설정합니다. > 전체 편집이 가능한 경우에만 셀별 편집 가능여부 설정이 동작합니다. > 필터, 그룹행의 경우 해당 속성의 영향을 **받지 않습니다**. > `CanEdit: 4`를 제외하고는 편집불가 모드 사용시 `Enum` 컬럼의 아이콘과 `Date` 타입 컬럼의 달력 아이콘을 표현하지 않습니다. > `Cfg`를 이용하여 편집불가 사용시에는 우선순위가 가장 높아짐으로, `Cell, Row, Col`에 `CanEdit: 0`은 먹히지 않습니다. > `Button` 타입의 버튼 클릭 시 동작, `File` 타입의 아이콘 표시 여부에 대해서는 해당 속성의 영향을 **`받지 않습니다`**. ([Disabled col](/docs/props/col/disabled) 통하여 제어 가능.) ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|전체 편집 불가능| |`1`|전체 편집 가능 (`default`)| |`3`|전체 편집 불가능(편집 가능 불가능에 대한 배경색을 표시하지 않음) [ColorState (cfg)](/docs/props/cfg/color-state)와 관계없이 배경색을 표현하지 않음. |`4`|전체 편집 불가능 + 배경색 표현안함 + 아이콘 표시| ### Example ```javascript options.Cfg = { \"CanEdit\":0 }; ```",
              "see": [
                {
                  "label": "ColorState cfg",
                  "url": "/docs/props/cfg/color-state"
                },
                {
                  "label": "CanEdit row",
                  "url": "/docs/props/row/can-edit"
                },
                {
                  "label": "CanEdit col",
                  "url": "/docs/props/col/can-edit"
                },
                {
                  "label": "CanEdit cell",
                  "url": "/docs/props/cell/can-edit"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.12|`CanEdit: 4` 추가|"
            },
            "url": "docs/props/cfg/can-edit.html"
          },
          {
            "cid": 28,
            "sid": "can-select",
            "name": "can-select",
            "label": "CanSelect",
            "data": {
              "body": "> 행 또는 셀 선택이 가능한지에 대한 여부를 설정합니다. > 셀에 포커스를 주는 것과 셀 선택을 하는 것은 다르게 동작이 가능합니다. > 포커스가 있는 행 또는 셀 과 다르게 다른 영역의 셀과 행들을 선택할 수 있으며, 이 때는 `CanSelect` 속성에 따라 동작합니다. > 기본적으로 행를 선택하되 셀과 열을 선택하지 않을 때 `SelectingCells: 0` 을 설정할 수 있습니다. > 기본값은 `1(true)` 입니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|행 또는 셀 선택 불가| |`1(true)`|행 또는 셀 선택 가능 (`default`)| ### Example ```javascript options.Cfg = { \"CanSelect\": true, // 시트 선택 가능 \"SelectingCells\": 0, // 개별 셀 선택 불가능 }; ```",
              "see": [
                {
                  "label": "SelectingCells cfg",
                  "url": "./selecting-cells"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/can-select.html"
          },
          {
            "cid": 29,
            "sid": "can-sort",
            "name": "can-sort",
            "label": "CanSort",
            "data": {
              "body": "> 헤더 클릭을 통한 열 정렬(`Sort`) 기능의 허용 여부를 설정합니다. > [SortIcons cfg](./sort-icons) 설정에 따라 헤더 정렬 아이콘을 숨길 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|정렬 기능 사용 안함| |`1(true)`|정렬 기능 사용 (`default`)| ### Example ```javascript options.Cfg = { CanSort: false, // 정렬 기능 사용 안함 }; ``` ### Try it - [True by default](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/CanSort-true/)",
              "see": [
                {
                  "label": "SortIcons cfg",
                  "url": "./sort-icons"
                },
                {
                  "label": "CanSort row",
                  "url": "/docs/props/row/can-sort"
                },
                {
                  "label": "CanSort col",
                  "url": "/docs/props/col/can-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/can-sort.html"
          },
          {
            "cid": 30,
            "sid": "center-message",
            "name": "center-message",
            "label": "CenterMessage",
            "data": {
              "body": "> 시트에서 발생하는 메세지(div layer)를 시트의 위치와 무관하게 화면 한가운데 표시합니다. > 해당 속성을 설정하지 않는 경우, 시트 객체의 가운데에 메세지가 표시됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|시트객체의 가운데에 메세지를 표시 (`default`)| |`1(true)`|현재 보여지는 화면의 가운데에 메세지를 표시| ### Example ```javascript options = { \"Cfg\":{ \"CenterMessage\": true, // 시트의 메세지를 화면 중앙에 표시 } }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.1|기능 추가|"
            },
            "url": "docs/props/cfg/center-message.html"
          },
          {
            "cid": 31,
            "sid": "clear-filter-off",
            "name": "clear-filter-off",
            "label": "ClearFilterOff",
            "data": {
              "body": "> 필터행의 연산자 중 사용안함(X) 선택시 필터 셀 값을 삭제할지 여부를 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|필터 사용안함(x) 선택시 필터셀의 값을 유지 (`default`)| |`1`|필터 사용안함(x) 선택시 필터셀의 값을 삭제| ### Example ```javascript options = { \"Cfg\":{ \"ClearFilterOff\":1, // 필터 사용안함(x) 선택시 필터셀 값 삭제 } }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/clear-filter-off.html"
          },
          {
            "cid": 32,
            "sid": "click-pivot-filter",
            "name": "click-pivot-filter",
            "label": "ClickPivotFilter",
            "data": {
              "body": "> 피벗 시트에서 피벗 데이터를 클릭할 경우 원본 시트에서 해당 피벗 데이터의 행들을 필터링하여 보여줍니다. > 필터된 시트에서 원본 시트를 보고 싶은 경우 [clearFilter](/docs/funcs/core/clear-filter) 해야합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|피벗 시트 클릭 필터 기능 사용 안함 (`default`)| |`1(true)`|피벗 시트 클릭 필터 기능 사용| ### Example ```javascript options = { \"Cfg\":{ \"ClickPivotFilter\": 1, // 피벗 시트 클릭 필터 기능 사용 } }; ```",
              "see": [
                {
                  "label": "UsePivot cfg",
                  "url": "./use-pivot"
                },
                {
                  "label": "makePivotTable method",
                  "url": "/docs/funcs/core/make-pivot-table"
                },
                {
                  "label": "switchPivotSheet method",
                  "url": "/docs/funcs/core/switch-pivot-sheet"
                },
                {
                  "label": "clearFilter method",
                  "url": "/docs/funcs/core/clear-filter"
                },
                {
                  "label": "setFilter method",
                  "url": "/docs/funcs/core/set-filter"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.20|기능 추가|"
            },
            "url": "docs/props/cfg/click-pivot-filter.html"
          },
          {
            "cid": 33,
            "sid": "color-state",
            "name": "color-state",
            "label": "ColorState",
            "data": {
              "body": "> 편집가능 여부, 입력/수정/삭제 상태 등과 관련하여 자동으로 표현되는 시트 데이터 영역의 배경색과 관련하여 사용여부를 설정합니다. > 0으로 설정시 시트내에 상태나, 편집여부등에 따라 표현되는 배경색이 모두 제거되고, 설정값에 따라서 해당 기능에 대한 배경색이 표현됩니다. > bit 연산 형태로 속성을 설정합니다. 가령 값으로 5를 설정시 1번옵션 + 4번 옵션에 대해 배경색을 표현하게 됩니다. > 기본값(`default`)은 **`63`** 입니다. ### Type `number` ### Options |Value|Description|Class| |-----|-----|---| |`0`|상태에 따른 배경색 표현 안함.|| |`1`|수정된 **셀** 에 대한 배경색 표현|`.IBColorChangedCell`| |`2`|입력/수정/삭제된 **행** 에 대한 배경색 표현|`.IBColorAdded`,`.IBColorChanged`,`.IBColorDeleted`| |`4`|추가/삭제 된 **열** 에 대한 배경색 표현|`.IBColorAdded`,`.IBColorDeleted`| |`8`|셀의 `CanEdit`, `CanFocus` 속성이 `false`인 경우에 대한 배경색 표현|`.IBColorReadOnly`,`.IBColorNoFocus`| |`16`|셀의 값을 직접 수정이 불가능한 `Formula`(셀의 값을 계산하는 `Formula`)가 설정된 경우에 대한 배경색 표현|`.IBColorReadOnly`| |`32`|오류가 있는 셀에 대한 배경색 표현|`.IBColorError`| ### Example ```javascript options.Cfg = { \"ColorState\": 7 // 편집할 수 없는 셀의 배경색을 표현하지 않음 }; ```",
              "see": [
                {
                  "label": "CanEdit cell",
                  "url": "/docs/props/cell/can-focus"
                },
                {
                  "label": "CanFocus cell",
                  "url": "/docs/props/cell/can-focus"
                },
                {
                  "label": "Error cell",
                  "url": "/docs/props/cell/error"
                },
                {
                  "label": "Added row",
                  "url": "/docs/props/row/added"
                },
                {
                  "label": "Changed row",
                  "url": "/docs/props/row/changed"
                },
                {
                  "label": "Deleted row",
                  "url": "/docs/props/row/deleted"
                },
                {
                  "label": "CanEdit row",
                  "url": "/docs/props/row/can-focus"
                },
                {
                  "label": "CanFocus row",
                  "url": "/docs/props/row/can-focus"
                },
                {
                  "label": "CanFocus col",
                  "url": "/docs/props/col/can-focus"
                },
                {
                  "label": "CanEdit col",
                  "url": "/docs/props/col/can-focus"
                },
                {
                  "label": "CanEdit cfg",
                  "url": "/docs/props/cfg/can-edit"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/color-state.html"
          },
          {
            "cid": 34,
            "sid": "controls-tag",
            "name": "controls-tag",
            "label": "ControlsTag",
            "data": {
              "body": "> 시트 내 팝업 메뉴, 툴팁, 메시지, 힌트를 띄울 위치를 설정하기 위한 부모 태그를 지정하는 옵션입니다. > > 해당 옵션을 설정하지 않을 경우 부모 태그는 `document.body` 내부에 자동적으로 생성됩니다. > > SalesForce의 Lightening Web Component나 ShadowDOM 환경처럼 `document.body` 전체를 시트의 기준 영역으로 설정하지 않고 페이지 내 특정 컴포넌트 영역을 시트 기준 영역으로 잡아야 할 경우, 해당 컴포넌트 내에 별도로 div를 만들어 해당 div를 `(Cfg) ControlsTag`로 설정해야 합니다. > > 주의사항 > * `ControlsTag`는 시트를 처음 생성할 때 설정해야 하며, 이후에는 동적으로 변경할 수 없습니다. > * `ControlsTag`는 반드시 시트의 DIV와 동일한 컴포넌트 영역에 있어야 하며, 시트의 DIV가 생성되는 컴포넌트보다 상위 컴포넌트에 생성되어서는 안됩니다. > * `ControlsTag`는 반드시 `position:absolute;left:0px;top:0px;` 스타일이 적용되어 생성되어야 합니다. ### Type `object` ### Options |Value|Description| |-----|-----| |`object`|시트 내 팝업 메뉴, 툴팁, 메시지, 힌트를 띄울 위치를 설정하기 위한 부모 태그| ### Example ```javascript <template> <lightning-card> <div> <div class=\"IBControls\" style=\"position:absolute;left:0px;top:0px;\" lwc:dom=\"manual\"></div> <!-- LWC 환경의 컴포넌트 내부에서 ControlsTag 역할을 맡을 태그를 생성 --> <div class=\"sheetDiv\" style=\"width: 100%; height: 400px;\" lwc:dom=\"manual\"></div> </div> </lightning-card> </template> ... options.Cfg = { ControlsTag: this.template.querySelector(\".IBControls\") // 시트 내 팝업 메뉴, 툴팁, 메시지, 힌트를 띄울 위치를 설정하기 위한 부모 태그 설정 }; ```",
              "see": [
                {
                  "label": "DialogsArea cfg",
                  "url": "/docs/props/cfg/dialogs-area"
                },
                {
                  "label": "IBSheet.QuerySelector static",
                  "url": "/docs/static/query-selector"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/controls-tag.html"
          },
          {
            "cid": 35,
            "sid": "copy-cols",
            "name": "copy-cols",
            "label": "CopyCols",
            "data": {
              "body": "> 복사하여 붙여넣기에 사용할 열을 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|포커스된 열만 붙여넣기에 사용| |`1`|모든 표시열을 붙여넣기에 사용 (`SelectingCells : 0` 인 경우 해당 값이 `default`로 설정됩니다.)| |`2`|모든 열을 붙여넣기에 사용(숨겨진 컬럼도 포함)| |`3`|포커스된 행에 대해서만 포커스된 셀 범위 또는 모든 표시 열(`default`)| ### Example ```javascript options = { \"Cfg\":{ \"CopyCols\": 1, // 모든 표시열을 붙여넣기에 사용 } }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.3.0.20|기능 추가|"
            },
            "url": "docs/props/cfg/copy-cols.html"
          },
          {
            "cid": 36,
            "sid": "copy-edit",
            "name": "copy-edit",
            "label": "CopyEdit",
            "data": {
              "body": "> `ctrl+c`를 통해 선택된 셀의 값을 `clipboard`로 복사시 마스크가 포함된 문자([Format](/docs/props/col/format))로 복사할지, 편집시 사용되는 포맷([EditFormat](/docs/props/col/edit-format)) 복사할지를 설정합니다. > `ctrl+v`를 통해 값을 붙여넣기 하는 경우에는, [EditFormat](/docs/props/col/edit-format)이 적용된 셀값을 복사하는 것이 적합합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|`Format`이 적용된 셀값을 복사, `CustomFormat`이 설정되어 있다면 `CustomFormat`을 우선 적용하여 적용된 셀값을 복사| |`1`|`EditFormat`이 적용된 셀값을 복사 (`default`)| ### Example ```javascript options = { \"Cfg\":{ \"CopyEdit\": 0, // Format 이 적용된 셀값으로 복사 } }; ```",
              "see": [
                {
                  "label": "Format col",
                  "url": "/docs/props/col/format"
                },
                {
                  "label": "CustomFormat col",
                  "url": "/docs/props/col/custom-format"
                },
                {
                  "label": "EditFormat col",
                  "url": "/docs/props/col/edit-format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/copy-edit.html"
          },
          {
            "cid": 37,
            "sid": "copy-paste-hidden",
            "name": "copy-paste-hidden",
            "label": "CopyPasteHidden",
            "data": {
              "body": "> 숨긴 행/열에 붙여넣기 가능여부를 설정합니다. (비트연산으로 제공합니다) ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|숨김 처리된 행, 열은 붙여넣기가 불가능 (`default`)| |`1`|숨김 처리된 열은 붙여넣기가 가능, 숨긴 처리된 행은 불가능| |`2`|숨김 처리된 행은 붙여넣기가 가능, 숨긴 처리된 열은 불가능| ### Example ```javascript options = { \"Cfg\":{ \"CopyPasteHidden\":3, // 숨김 처리된 행, 열에 붙여넣기 기능 사용 } }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/copy-paste-hidden.html"
          },
          {
            "cid": 38,
            "sid": "ctrl-arange",
            "name": "ctrl-arange",
            "label": "CtrlARange",
            "data": {
              "body": "> `Ctrl + A` 를 사용하여 선택복사시 영역을 헤더에서 풋까지 보도록 하는 기능입니다. > 기능 사용시 `CanSelect` 의 유무를 보기 때문에 `Def.Header, Def.Foot` 에 `CanSelect: 1` 을 설정하면 됩니다. > 예를 들어 `Header` 에만 `CanSelect: 1` 로 설정하고 `Foot` 에 `CanSelect: 0` 으로 설정시에 `Foot` 은 선택복사가 되지 않습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|선택 복사시 데이터 영역만 봄. (`default`)| |`1(true)`|선택 복사시 헤더부터 풋영역까지 보도록 함.| ### Example ```javascript options.Def = { Header: { CanSelect: true }, Foot: { CanSelect: true }, }; options.Cfg = { CtrlARange: true // Ctrl + A 의 선택복사 영역을 헤더부터 풋 까지 보게 합니다. }; ```",
              "see": [
                {
                  "label": "CanSelect row",
                  "url": "/docs/props/row/can-select"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.23|기능 추가|"
            },
            "url": "docs/props/cfg/ctrl-arange.html"
          },
          {
            "cid": 39,
            "sid": "custom-scroll",
            "name": "custom-scroll",
            "label": "CustomScroll",
            "data": {
              "body": "> 시트에서 사용될 스크롤바의 타입을 설정합니다. > 시트 섹션별 생성되는 가로 스크롤이나 전체 시트에 생성되는 가로/세로 스크롤바에 해당합니다. > 행과 열 수가 많은 시트에서는 `CustomScroll` 설정시 속도저하를 일으킬 수 있습니다. > `SearchMode:2 (LazyLoad)`의 경우 조회데이터수가 5만건 이상일때 IE 브라우저에서의 스크롤 설정 한계로 인하여 반드시 커스텀 스크롤을 0 이외의 값으로 설정해야 합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|브라우저 스크롤바 사용 (`default`) ![CustomScroll0](/assets/imgs/customScroll0.png \"CustomScroll0\") (by Chrome)| |`1`|평범한 스타일의 스크롤바 사용 ![CustomScroll1](/assets/imgs/customScroll1.png \"CustomScroll1\") (by Chrome)| |`2`|큰 스타일의 스크롤바 사용 ![CustomScroll2](/assets/imgs/customScroll2.png \"CustomScroll2\") (by Chrome)| |`3`|작은 스타일의 스크롤바 사용 ![CustomScroll3](/assets/imgs/customScroll3.png \"CustomScroll3\") (by Chrome)| ### Example ```javascript options.Cfg = { CustomScroll: 3 // 작은 스타일의 스크롤바 설정 }; ``` ### Try it - [0 by default](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/CustomScroll/)",
              "see": [
                {
                  "label": "TouchScroll cfg",
                  "url": "./touch-scroll"
                },
                {
                  "label": "CustomThumbMinSize cfg",
                  "url": "./custom-thumb-min-size"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/custom-scroll.html"
          },
          {
            "cid": 40,
            "sid": "custom-thumb-min-size",
            "name": "custom-thumb-min-size",
            "label": "CustomThumbMinSize",
            "data": {
              "body": "> [CustomScroll](./custom-scroll) 옵션을 통해 시트의 스크롤을 브라우져의 기본스크롤이 아닌 이미지 형태를 사용할 때, Thumb 의 최소 크기를 설정합니다. > 스크롤 바 내에서 현재 위치를 표시하는 thumb는 조회데이터 양이 많아지면 크기가 유동적으로 줄어들게 되는데, 해당 속성을 통해 최소한의 크기를 pixel단위로 지정하면 이 이하로 줄어드는 것을 방지합니다. > 해당 옵션은 가로와 세로 스크롤 바 모두 적용됩니다. ### ![CustomThumbMinSize](/assets/imgs/scrollthumb.png \"CustomThumbMinSize\") ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|스크롤바 thumb의 최소 크기 설정| ### Example ```javascript options.Cfg = { CustomScroll:1, CustomThumbMinSize:150, //150 pixel 보다 줄어들지 않게 한다. }; ```",
              "see": [
                {
                  "label": "TouchScroll cfg",
                  "url": "./touch-scroll"
                },
                {
                  "label": "CustomScroll cfg",
                  "url": "./custom-scroll"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.2|기능 추가|"
            },
            "url": "docs/props/cfg/custom-thumb-min-size.html"
          },
          {
            "cid": 41,
            "sid": "data-auto-trim",
            "name": "data-auto-trim",
            "label": "DataAutoTrim",
            "data": {
              "body": "> 조회 시 데이터의 공백 트림 여부를 설정합니다. > 이 속성을 `1(true)`로 설정한다면 조회, 데이터 입력, `setValue` 시 데이터에 있는 공백을 자동으로 트림합니다. > **<mark>주의</mark> : 해당 옵션 사용시 조회 성능에 영향을 줄 수 있습니다. 특히, `SearchMode:0 (FastLoad)` 또는 `SearchMode:3 (ScrollApend)` 모드를 제외한 조회 모드에는 데이터 양에 따라 조회 성능에 더 많은 영향을 줄 수 있습니다.** ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|조회 시 데이터 트림 안함 (`default`)| |`1(true)`|조회 시 데이터 트림| ### Example ```javascript // 조회 시 모든 데이터를 Trim 한다 options.Cfg = { DataAutoTrim: true }; ```",
              "see": [
                {
                  "label": "SearchMode cfg",
                  "url": "/docs/props/cfg/search-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가||core|8.0.0.19|데이터 입력, `setValue` 시에도 공백처리 되도록 추가|"
            },
            "url": "docs/props/cfg/data-auto-trim.html"
          },
          {
            "cid": 42,
            "sid": "data-merge",
            "name": "data-merge",
            "label": "DataMerge",
            "data": {
              "body": "> 시트 생성 시 데이터 영역에서 셀 값을 기준으로 병합할지 여부 및 병합 종류를 설정합니다. > 시트 생성 후 setAutoMerge메소드를 이용하여 데이터 영역의 병합을 동적으로 변경할 수도 있습니다. > DataMerge가 설정된 시트에서 [setValue](/docs/funcs/core/set-value) 메소드를 사용할 때 해당 메소드에 render 인자를 0으로 주면 데이터 영역에서 머지가 적용되지 않습니다. 화면에 머지를 적용하고 싶은 경우 [rerender](/docs/funcs/core/rerender) 메소드를 호출해야합니다. > [Span](/docs/props/cell/span)과 [RowSpan](/docs/props/cell/row-span)보다 우선 적용됩니다. > **특정 컬럼만 상하 병합에서 제외하고자 하실때는 해당 컬럼 생성시 [ColMerge](/docs/props/col/col-merge) 속성값을 0(false)로 설정하시면 됩니다.** > **유사하게 특정 컬럼만 좌우 병합에서 제외하고 자 하실때는 해당 컬럼 생성시 [RowMerge](/docs/props/row/row-merge) 속성값을 0(false)로 설정하시면 됩니다.** > **<mark>주의</mark> : 소계([makeSubTotal (method)](/docs/funcs/core/make-sub-total))사용 시 해당 옵션에 설정한 값은 무시되고 `DataMerge: 1` 로 동작합니다.** > 트리에서 해당 기능을 사용시에는 `DataMerge: 1` 기능만을 지원하고 머지에 관련되서는 다른 기능은 지원하지 않습니다. 사용시에는 같은 레벨에 한해서 자동머지가 일어납니다. ### Type `number` ### Options |Value|Description| | |-----|-----|----| |`0`|병합 안함 (`default`) |병합을 하지 않습니다. ![option0](/assets/imgs/dataMerge0.png \"option0\")| |`1`|열 기준 병합|각 열에 대해 이전 혹은 다음 행의 값이 같은 경우 행들을 병합합니다. ![option1](/assets/imgs/dataMerge1.png \"option1\")| |`2`|행 기준 병합|각 행에 대해 이전 혹은 다음 열의 값이 같은 경우 열들을 병합합니다. ![option2](/assets/imgs/dataMerge2.png \"option2\")| |`3`|열 우선 병합|열 기준 병합(a)를 수행한 후 병합되지 않은 셀들에 행 기준 병합(b)를 실행합니다. ![option3](/assets/imgs/dataMerge3.png \"option3\")| |`4`|행 우선 병합|행 기준 병합(b)를 수행한 후 병합되지 않은 셀들에 열 기준 병합(a)를 실행합니다. ![option4](/assets/imgs/dataMerge4.png \"option4\")| |`5`|열 우선 사방 병합|열 기준 병합을 수행하면서 이웃한 열에 대해서도 값이 같으면 열끼리도 병합합니다. ![option5](/assets/imgs/dataMerge5.png \"option5\")| |`6`|행 우선 사방 병합|행 기준 병합을 수행하면서 이웃한 행에 대해서도 값이 같으면 행끼리도 병합합니다. ![option6](/assets/imgs/dataMerge6.png \"option6\")| ### Example ```javascript options = { \"Cfg\" :{ \"DataMerge\":1, // 시트 생성 시 데이터 영역의 셀을 열 기준으로 병합합니다. } }; ``` ### Try it - [0 by default with setAutoMerge](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/Merge/)",
              "see": [
                {
                  "label": "Span cell",
                  "url": "/docs/props/cell/span"
                },
                {
                  "label": "RowSpan cell",
                  "url": "/docs/props/cell/row-span"
                },
                {
                  "label": "ColMerge col",
                  "url": "/docs/props/col/col-merge"
                },
                {
                  "label": "RowMerge row",
                  "url": "/docs/props/row/row-merge"
                },
                {
                  "label": "HeaderMerge cfg",
                  "url": "./header-merge"
                },
                {
                  "label": "PrevColumnMerge cfg",
                  "url": "./prev-column-merge"
                },
                {
                  "label": "setAutoMerge method",
                  "url": "/docs/funcs/core/set-auto-merge"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.8|트리에 대한 `DataMerge`기능 추가 (`mode:1 말고는 사용 불가`)|"
            },
            "url": "docs/props/cfg/data-merge.html"
          },
          {
            "cid": 43,
            "sid": "date-strict-mode",
            "name": "date-strict-mode",
            "label": "DateStrictMode",
            "data": {
              "body": "> 조회시 날짜 타입에 `DataFormat`이 설정된 경우 설정된 포맷과 길이가 일치하지 않거나 잘못된 날짜가 조회되는 경우 공백으로 처리합니다. > `DataFormat`을 \"yyyyMMdd\" 로 설정한 후 \"88\" 이라는 값이 조회되는 경우 해당 셀 값은 공백으로 처리됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|정밀검사하지 않음 (`default`)| |`1(true)`|`DataFormat`에 설정된 포맷에 대한 정밀 검사| ### Example ```javascript //잘못된 날짜 데이터 조회시 공백처리 합니다. options.Cfg = { DateStrictMode: 1 }; options.Cols = [ ... // DateStrictMode를 사용하기 위해선 DataFormat이 설정되어야 합니다. {Type: \"Date\", Format: \"yyyy.MM.dd\", DataFormat: \"yyyyMMdd\", Name: \"enterDate\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "DataFormat col",
                  "url": "/docs/props/col/data-format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.12|기능 추가|"
            },
            "url": "docs/props/cfg/date-strict-mode.html"
          },
          {
            "cid": 44,
            "sid": "debounce-render",
            "name": "debounce-render",
            "label": "DebounceRender",
            "data": {
              "body": "> `rerender`, `renderBody` 호출시 debounce를 걸어 호출합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| | `0` | `rerender`, `renderBody` 호출시 debounce를 걸지 않습니다. (`default`)| | `1` | `rerender`, `renderBody` 호출시 debounce를 걸어 호출합니다. | ### Example ```javascript options = { Cfg :{ DebounceRender: 1, // `rerender`, `renderBody` 호출시 debounce를 걸어 호출합니다. ... } }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.3.0.38|기능 추가|"
            },
            "url": "docs/props/cfg/debounce-render.html"
          },
          {
            "cid": 45,
            "sid": "decimal-adjust",
            "name": "decimal-adjust",
            "label": "DecimalAdjust",
            "data": {
              "body": "> Int, Float 타입 컬럼 데이터의 근사값 처리방식을 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`round`|근사값을 반올림으로 처리합니다. (`default`)| |`floor`|근사값을 내림으로 처리합니다.| |`ceil`|근사값을 올림으로 처리합니다.| ### Example ```javascript options.Cols = [ ... {Type: \"Int\", Name: \"Pvt_TSum\", DecimalAdjust: \"floor\", ...}, // 근사값 처리 방식을 내림으로 설정 ... ]; ``` ### Try it - [\"round\" by default](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/DecimalAdjust-round/) ### Since |product|version|desc| |---|---|---| |core|8.0.0.11|기능 추가|",
              "since": "|product|version|desc||---|---|---||core|8.0.0.11|기능 추가|"
            },
            "url": "docs/props/cfg/decimal-adjust.html"
          },
          {
            "cid": 46,
            "sid": "dialogs-area",
            "name": "dialogs-area",
            "label": "DialogsArea",
            "data": {
              "body": "> 시트 내 다이얼로그의 위치를 설정하기 위한 영역을 지정합니다. > > SalesForce의 Lightening Web Component나 ShadowDOM 환경처럼 `document.body` 전체를 다이얼로그의 기준 영역으로 설정하지 않고 페이지 내 특정 컴포넌트 영역을 다이얼로그의 기준 영역으로 잡아야 할 경우, 해당 컴포넌트의 body에 해당하는 영역을 `(Cfg) DialogsArea`로 설정해주시면 됩니다. > > 더불어 `DialogsArea`는 반드시 시트의 DIV와 동일한 컴포넌트 영역에 있어야 하며, 시트의 DIV가 생성되는 컴포넌트보다 상위 컴포넌트에 생성되어서는 안됩니다. ### Type `object` ### Options |Value|Description| |-----|-----| |`object`|시트 내 다이얼로그의 위치를 설정하기 위한 영역| ### Example ```javascript <template> <lightning-card> <!-- LWC 컴포넌트에서 Body에 해당하는 영역 --> <div> <div class=\"IBControls\" lwc:dom=\"manual\"></div> <div class=\"sheetDiv\" style=\"width: 100%; height: 400px;\" lwc:dom=\"manual\"></div> </div> </lightning-card> </template> ... options.Cfg = { DialogsArea: this.template.firstChild, // lightning-card 태그를 시트 내 다이얼로그의 위치를 설정하기 위한 영역으로 지정 }; ```",
              "see": [
                {
                  "label": "ControlsTag cfg",
                  "url": "/docs/props/cfg/controls-tag"
                },
                {
                  "label": "IBSheet.QuerySelector static",
                  "url": "/docs/static/query-selector"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/dialogs-area.html"
          },
          {
            "cid": 47,
            "sid": "disable-keyword",
            "name": "disable-keyword",
            "label": "DisableKeyWord",
            "data": {
              "body": "> 필터행에서 예약어로 설정되어 있는 `;(or)` 나 `,(and)` 의 사용여부를 설정합니다. > 해당 기능을 `1(true)` 설정시 예약어 기능이 사용되지 않습니다. 해당 기능을 사용하면 필터행에 입력된 문자열 그대로 필터링 하게 됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|예약어 기능 사용 (`default`)| |`1(true)`|예약어 기능 사용하지 않음| ### Example ```javascript // 필터행에서 예약어 `;` , `,` 를 사용하지 않도록 처리합니다. options.Cfg = { DisableKeyWord: 1 }; ```",
              "see": [
                {
                  "label": "필터링 기능",
                  "url": "/docs/userGuide/filter"
                },
                {
                  "label": "showFilterRow",
                  "url": "/docs/funcs/core/show-filter-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.53|기능 추가|"
            },
            "url": "docs/props/cfg/disable-keyword.html"
          },
          {
            "cid": 48,
            "sid": "down-to-excel-config",
            "name": "down-to-excel-config",
            "label": "Down2ExcelConfig",
            "data": {
              "body": "> [down2Excel](/docs/funcs/excel/down-to-excel) 함수 호출시 들어가는 인자를 공통으로 설정합니다. > [CommontOptions (static)](/docs/static/common-options)에 Cfg속성에 설정하시면 모든 화면에서 [down2Excel](/docs/funcs/excel/down-to-excel) 함수 호출시 기본적인 속성을 설정하실 수 있습니다. ### Type `object` ### Options |Value|Description| |-----|-----| |`object`|[down2Excel](/docs/funcs/excel/down-to-excel) 함수에 들어가는 인자와 동일(각 화면에서 동일한 속성을 설정시 화면에서 설정한 값이 반영됩니다.)| ### Example ```javascript options.Cfg = { // 모든 화면에서 엑셀 다운로드시 기본 속성을 설정 Down2ExcelConfig: { \"sheetDesign\":0, \"merge\":1 } }; ```",
              "see": [
                {
                  "label": "down2Excel method",
                  "url": "/docs/funcs/excel/down-to-excel"
                },
                {
                  "label": "CommontOptions static",
                  "url": "/docs/static/common-options"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/down-to-excel-config.html"
          },
          {
            "cid": 49,
            "sid": "down-to-text-config",
            "name": "down-to-text-config",
            "label": "Down2TextConfig",
            "data": {
              "body": "> [down2Text](/docs/funcs/excel/down-to-text) 함수 호출시 들어가는 인자를 공통으로 설정합니다. > [CommontOptions (static)](/docs/static/common-options)에 Cfg속성에 설정하시면 모든 화면에서 [down2Text](/docs/funcs/excel/down-to-text) 함수 호출시 기본적인 속성을 설정하실 수 있습니다. ### Type `object` ### Options |Value|Description| |-----|-----| |`object`|[down2Text](/docs/funcs/excel/down-to-text) 함수에 들어가는 인자와 동일(각 화면에서 동일한 속성을 설정시 화면에서 설정한 값이 반영됩니다.)| ### Example ```javascript options.Cfg = { // 모든 화면에서 텍스트 다운로드시 기본 속성을 설정 \"Down2TextConfig\":{ \"downHeader\": 0, \"downSum\": 0 } }; ```",
              "see": [
                {
                  "label": "down2Text method",
                  "url": "/docs/funcs/excel/down-to-text"
                },
                {
                  "label": "CommontOptions static",
                  "url": "/docs/static/common-options"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/down-to-text-config.html"
          },
          {
            "cid": 50,
            "sid": "drag-cell",
            "name": "drag-cell",
            "label": "DragCell",
            "data": {
              "body": "> 드래그 시 셀 단위 드래그 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|행 단위 드래깅 (`default`)| |`1(true)`|셀 단위 드래깅| ### Example ```javascript options.Cfg = { \"CanDrag\": true, // 마우스 드래그를 통한 이동 설정 \"DragCell\": true // 셀 단위 드래그 설정 }; ```",
              "see": [
                {
                  "label": "CanDrag cfg",
                  "url": "/docs/props/cfg/can-drag"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.27|기능 추가|"
            },
            "url": "docs/props/cfg/drag-cell.html"
          },
          {
            "cid": 51,
            "sid": "drag-copy",
            "name": "drag-copy",
            "label": "DragCopy",
            "data": {
              "body": "> 두 개의 시트 사이에서 행 이동시 원본 시트의 행 상태를 변경할지 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|드래그 이동시 원본 시트의 행이 `Deleted` 상태로 변경됨 (`default`)| |`1(true)`|드래그 이동시 원본 시트의 행은 변화없음| ### Example ```javascript options.Cfg = { \"DragCopy\": true //마우스 드래그를 통한 행 이동시 원본시트의 상태변화 없음 }; ```",
              "see": [
                {
                  "label": "CanDrag cfg",
                  "url": "/docs/props/cfg/can-drag"
                },
                {
                  "label": "CanDrag row",
                  "url": "/docs/props/row/can-drag"
                },
                {
                  "label": "onEndDrag event",
                  "url": "/docs/events/on-end-drag"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/drag-copy.html"
          },
          {
            "cid": 52,
            "sid": "drag-fill",
            "name": "drag-fill",
            "label": "DragFill",
            "data": {
              "body": "> 포커스 된 셀 오른쪽 하단을 드래그 시 채우기 동작 활성화 여부를 설정합니다. > <!-- `[비공개]` shift + 드래그 액션을 공유합니다.--> ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|드래그 채우기 동작 비활성 (`default`)| |`1(true)`|드래그 채우기 동작 활성| ### Example ```javascript options.Cfg = { \"DragFill\": true // 채우기 동작 활성화 }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.3.0.24|기능 추가|"
            },
            "url": "docs/props/cfg/drag-fill.html"
          },
          {
            "cid": 53,
            "sid": "drag-merge",
            "name": "drag-merge",
            "label": "DragMerge",
            "data": {
              "body": "> 병합된 셀을 드래그 시, 첫번째 행과 전체 행의 대상 여부를 선택합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|드래그 한 셀에 병합된 영역 중 첫번째 행만 (`default`)| |`1(true)`|드래그 한 셀에 병합된 영역의 전체 행| ### Example ```javascript options.Cfg = { \"DragMerge\": true }; ```",
              "see": [
                {
                  "label": "CanDrag cfg",
                  "url": "./can-drag"
                },
                {
                  "label": "DragObject cfg",
                  "url": "./drag-object"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.26|기능 추가|"
            },
            "url": "docs/props/cfg/drag-merge.html"
          },
          {
            "cid": 54,
            "sid": "drag-object",
            "name": "drag-object",
            "label": "DragObject",
            "data": {
              "body": "> 행을 드래그할 때 마우스에 보여질 대상을 선택합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|아무것도 보이지 않음| |`1`|행 DOM 객체 (`default`)| |`2`|행의 개수를 담고 있는 메시지| ### Example ```javascript options.Cfg = { DragObject: 2 }; ```",
              "see": [
                {
                  "label": "CanDrag cfg",
                  "url": "./can-drag"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/drag-object.html"
          },
          {
            "cid": 55,
            "sid": "edit-auto-merge",
            "name": "edit-auto-merge",
            "label": "EditAutoMerge",
            "data": {
              "body": "> (cfg)[DataMerge](./data-merge) 또는 (cfg)[HeaderMerge](./header-merge) 설정하여 값 기준 병합 옵션을 사용 시 편집(셀 값 변경, 행 추가 등)할 때 자동으로 셀 병합할지 여부를 설정합니다. > 이 속성을 true로 설정시, 각 셀의 편집 시 매번 병합로직이 수행됨으로 시트가 느려질 수 있습니다. > <mark>이 기능은 SearchMode:0(FastLoad)에서는 동작하지 않습니다.</mark> ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|병합을 하지 않습니다. (`default`)| |`1(true)`|병합을 실행합니다.| ### Example ```javascript options = { Cfg :{ EditAutoMerge: false, // 값 편집시 병합하지 않음. } }; ```",
              "see": [
                {
                  "label": "DataMerge cfg",
                  "url": "./data-merge"
                },
                {
                  "label": "HeaderMerge cfg",
                  "url": "./header-merge"
                },
                {
                  "label": "addRow method",
                  "url": "/docs/funcs/core/add-row"
                },
                {
                  "label": "addRows method",
                  "url": "/docs/funcs/core/add-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.5|행 추가 시 셀 병합이 되도록 수정|"
            },
            "url": "docs/props/cfg/edit-auto-merge.html"
          },
          {
            "cid": 56,
            "sid": "edit-errors-message-time",
            "name": "edit-errors-message-time",
            "label": "EditErrorsMessageTime",
            "data": {
              "body": "> 시트를 조작 및 편집할때 발생하는 오류 메시지의 지속시간(보여지는 시간)을 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|메시지 지속시간 (`default: 1000, 밀리초 단위(ms)`)| ### Example ```javascript options.Cfg = { EditErrorsMessageTime: 1500, // 메세지 오류 메시지를 1500ms 동안 보여지게 설정 ... }; ```",
              "see": [
                {
                  "label": "showMessageTime method",
                  "url": "/docs/funcs/core/show-message-time"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/edit-errors-message-time.html"
          },
          {
            "cid": 57,
            "sid": "edit-mask-func",
            "name": "edit-mask-func",
            "label": "EditMaskFunc",
            "data": {
              "body": "> 시트 내 특정 열에 해당하는 셀 편집시 사용될 외부 마스킹 라이브러리를 연동시킵니다. > 마스킹을 추가하는 속성과 마스킹을 제거하는 속성(실제 셀에 넣어지는 값은 마스킹이 제거된 값이 필요합니다)을 쌍으로 함께 추가해야합니다. > > 대상 열이름을 키로, 외부 마스킹 라이브러리를 연동시키는 마스킹용 콜백함수(파라미터는 1개)를 값으로 받습니다. > 대상 열이름과 \"Resolve\"의 조합을 키로, 마스킹 제거 콜백함수(파라미터는 1개)를 값으로 받습니다. 해당 콜백함수는 <b>반드시 마스킹이 제거된 값을 리턴</b>해야합니다. > ex) {\"열이름\" : func1, \"열이름Resolve\" : func2, \"열이름2\" : func3, \"열이름2Resolve\": func4 } ### ![EditMaskFunc사용예](/assets/imgs/editMaskFunc.png) 아래는 Cleave나 jquery.inputmask 라이브러리를 이용하여 날짜 입력시 마스크를 적용해 본 예제입니다. ### Type `object` ### Example ```javascript var cleave; options.Cfg = { EditMaskFunc: { \"sDate_yyyyMMdd\": function(input) { // 외부 Cleave 라이브러리를 \"sDate_yyyyMMdd\"에 연동 cleave = new Cleave(input, { date: true, delimiter: '-', datePattern: ['Y', 'm', 'd'] }); }, \"sDate_yyyyMMResolve\": function(input) { // \"sDate_yyyyMMdd\"에 연동된 라이브러리에서 마스킹이 제거된 값을 리턴합니다. return cleave.getRawValue(); }, \"sDate_yyyyMM\": function(input) { // 외부 jquery.inputmask 라이브러리를 \"sDate_yyyyMM\"에 연동 $(input).inputmask(\"9999/99\"); }, \"sDate_yyyyMMResolve\": function(input) { // \"sDate_yyyyMM\"에 연동된 라이브러리에서 마스킹이 제거된 값을 리턴합니다. return $(input)[0].inputmask.unmaskedvalue(); } } }; ``` ### Try it - [Demo of EditMaskFunc](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/EditMaskFunc/)",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/edit-mask-func.html"
          },
          {
            "cid": 58,
            "sid": "edit-select",
            "name": "edit-select",
            "label": "EditSelect",
            "data": {
              "body": "> 편집 될 때 `input` 의 값이 선택될지 여부를 설정할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|편집 시 선택안 함| |`1`|마우스로 편집 모드로 들어갈 시 선택함| |`2`|키보드 키로 편집 모드에 들어갈 시 선택함| |`7`|편집 모드로 들어갈 시 항상 선택(`default`)| ### Example ```javascript options.Cfg :{ EditSelect: 0 }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/edit-select.html"
          },
          {
            "cid": 59,
            "sid": "editarrowbehavior",
            "name": "editarrowbehavior",
            "label": "EditArrowBehavior",
            "data": {
              "body": "> 편집 중 키보드 좌/우 방향키로 셀 이동을 할 수 있도록 설정 합니다. > 커서가 편집 중인 텍스트의 좌/우 끝에 도달 했을 때 이동합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|기능 사용 안함 (`default`)| |`1`|편집 불가 컬럼은 건너뛰고 좌/우 셀로 이동합니다.| |`2`|편집 불가 컬럼인 경우에는 포커스 이동 후 편집 모드가 종료 되며 좌/우 셀로 이동합니다.| ### Example ```javascript options.Cfg = { EditArrowBehavior: 2 }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.1.0.97|기능 추가|"
            },
            "url": "docs/props/cfg/editarrowbehavior.html"
          },
          {
            "cid": 60,
            "sid": "enter-mode",
            "name": "enter-mode",
            "label": "EnterMode",
            "data": {
              "body": "> `Enter` 키를 눌렀을때 셀 편집을 동작시키거나, 아래 방향키(down)나 우측 방향키(또는 Tab 키)와 같이 포커스가 이동하도록 설정할 수 있습니다. > 이동시 `EnterMode` 에 따라 편집 가능한 다음 셀로 이동합니다. > 편집이 불가능한 셀에서는 포커스만 이동합니다. > `EnterMode`는 `object`로 사용하여 `option` 기능을 사용할 수 있습니다. (`option` 기능은 비트연산으로 제공합니다.) ### Type `number | object` ### Options |Name|Type|Description| |-----|-----|-----| |mode|`number`|`0`: `Enter` 키를 누르면 `값 편집(edit) 시작`, (편집 상태) `Enter` 키를 누르면 `편집 종료` (`default`) `1`:`Enter` 키를 누르면 `아래 셀(down) 이동`, 마지막 셀에서 첫 행, 첫 열으로 이동 `2`:`Enter` 키를 누르면 `아래 셀(down) 이동`, 각 열의 마지막 셀에서 행 추가 후 이동 `3`:`Enter` 키를 누르면 `오른쪽 셀(tab) 이동`, 마지막 셀에서 첫 행, 첫 열으로 이동 `4`:`Enter` 키를 누르면 `오른쪽 셀(tab) 이동`, 마지막 셀에서 행 추가 후 첫 열으로 이동 `5`:`Enter` 키를 누르면 `아래 셀(down) 이동`, 마지막 셀에서 포커스 유지 `6`:`Enter` 키를 누르면 `오른쪽 셀(tab) 이동`, 마지막 셀에서 포커스 유지| |option|`number`|`0`:`CanFocus: 0`인 셀을 제외한 모든 셀을 포커스 이동에 포함. (`default`) `1`:`CanEdit: 0` 를 `EnterMode` 포커스 이동에 포함하지 않음.| ### Example ```javascript options.Cfg = { EnterMode: 3 // Enter 키를 누르면 값 편집 시작, 편집 상태에서 Enter키를 누르면 편집 종료 후 오른쪽 셀 이동 ... }; // EnterMode 가 3번이면서 추가적인 option으로 CanEdit: 0 을 확인하고 뛰어 넘어 이동함. options.Cfg = { EnterMode: { mode: 3, option: 1 } } ``` ### Try it - [0 by default with setEnterMode](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/EnterMode/)",
              "see": [
                {
                  "label": "ForceEnterEdit cfg",
                  "url": "./force-enter-edit"
                },
                {
                  "label": "AcceptEnters col",
                  "url": "/docs/props/col/accept-enters"
                },
                {
                  "label": "AcceptEnters cell",
                  "url": "/docs/props/cell/accept-enters"
                },
                {
                  "label": "setEnterMode method",
                  "url": "/docs/funcs/core/set-enter-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.7|5, 6 기능 추가, `EnterMode` 사용시 편집 불가능한 셀로도 이동할 수 있도록 수정||core|8.0.0.14|option 기능 추가 (비트 연산으로 제공)|"
            },
            "url": "docs/props/cfg/enter-mode.html"
          },
          {
            "cid": 61,
            "sid": "enum-open-mode",
            "name": "enum-open-mode",
            "label": "EnumOpenMode",
            "data": {
              "body": "> 포커스 이동 간에 Enum목록 열기 방법을 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |0(false)|포커스 시 Enum 리스트 목록을 표시하지 않음| |1(true)|포커스 시 Enum 리스트 목록을 표시 (`default`)| ### Example ```javascript options.Cfg = { EnumOpenMode: false // 포커스 시 Enum 리스트 목록을 표시하지 않음 }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.3.0.11|기능 추가|"
            },
            "url": "docs/props/cfg/enum-open-mode.html"
          },
          {
            "cid": 62,
            "sid": "exact-check",
            "name": "exact-check",
            "label": "ExactCheck",
            "data": {
              "body": "> `Bool`, `Radio` 타입 컬럼에서 정확한 체크박스나 라디오 버튼이 아닌 셀의 빈 공간을 클릭할 때 체크/언체크가 되지 않도록 설정합니다. > [`HeaderCheck`](/docs/props/cfg/header-check) 사용하여 표시되는 헤더 체크박스에도 적용이 됩니다. > **<mark>주의</mark> : 해당 속성과 관계없이 `Enum`이 설정된 `Radio` 컬럼에서는 라디오 버튼 옆 텍스트를 클릭해도 체크가 됩니다.** ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|셀 클릭으로 체크박스 클릭 (`default`)| |`1(true)`|셀 클릭으로 체크박스 클릭 안됨| ### Example ```javascript options.Cfg = { ExactCheck: true // 체크박스 클릭에만 체크/언체크가 동작 }; ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.19|기능 추가||core|8.1.0.6|헤더 체크 기능 적용|"
            },
            "url": "docs/props/cfg/exact-check.html"
          },
          {
            "cid": 63,
            "sid": "exclude-add-del-status",
            "name": "exclude-add-del-status",
            "label": "ExcludeAddDelStatus",
            "data": {
              "body": "> 행 추출 함수 사용시 상태가 `Added` 이면서 `Deleted` 인 행의 추출 제외 여부를 설정합니다. <br /> > 기본 동작은 `0(사용 안함, 추출됨)` 이고 `1(사용, 추출 제외)` 로 설정시 해당 상태인 행이 추출되지 않습니다. <br /> > 저장 관련 데이터 추출 함수 (`getSaveJson`, `getSaveString`, `doSave`) 호출에 적용 됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| | `0 (false)` | 행 상태가 `Added:1, Deleted:1` 인 행 추출 됨 (`default`) | | `1 (true)` | 행 상태가 `Added:1, Deleted:1` 인 행은 추출 제외됨| ### Examples ```js options = { Cfg:{ ExcludeAddDelStatus: 1 // Added:1, Deleted:1 인 행 추출 제외 } }; ```",
              "see": [
                {
                  "label": "Deleted row",
                  "url": "../../props/row/deleted"
                },
                {
                  "label": "Added row",
                  "url": "../../props/row/added"
                },
                {
                  "label": "getSaveJson",
                  "url": "../../funcs/core/get-save-json"
                },
                {
                  "label": "getSaveString",
                  "url": "../../funcs/core/get-save-string"
                },
                {
                  "label": "doSave",
                  "url": "../../funcs/core/do-save"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.38|기능 추가|"
            },
            "url": "docs/props/cfg/exclude-add-del-status.html"
          },
          {
            "cid": 64,
            "sid": "exclude-mode",
            "name": "exclude-mode",
            "label": "ExcludeMode",
            "data": {
              "body": "> `Ctrl + x` 사용시 동작을 정의합니다. 비트 연산으로 동작합니다. > 기본 동작은 **데이터 복사 + 행 Deleted:1 추가 (`Value:3`)** 입니다. > `Value:1`을 설정하지 않을 경우 데이터가 복사되지 않으므로 설정을 권장합니다. ### Type `number` ### Options |Value|Description| |-----|-----| | `1` | 데이터 클립보드 복사 | | `2` | 행 상태 `Deleted:1` 변경| | `4` | 셀 데이터 삭제 | ### Examples ```js options = { Cfg:{ ExcludeMode: 5 // 데이터 복사 및 셀 데이터 삭제 } }; ```",
              "see": [
                {
                  "label": "Deleted row",
                  "url": "../../props/row/deleted"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.22|기능 추가|"
            },
            "url": "docs/props/cfg/exclude-mode.html"
          },
          {
            "cid": 65,
            "sid": "export-data-config",
            "name": "export-data-config",
            "label": "ExportDataConfig",
            "data": {
              "body": "> [exportData](/docs/funcs/core/export-data) 함수 호출시 들어가는 인자를 공통으로 설정합니다. > [CommontOptions (static)](/docs/static/common-options)에 Cfg속성에 설정하시면 모든 화면에서 [exportData](/docs/funcs/core/export-data) 함수 호출시 기본적인 속성을 설정하실 수 있습니다. ### Type `object` ### Options |Value|Description| |-----|-----| |`object`|[exportData](/docs/funcs/core/export-data) 함수에 들어가는 인자와 동일(각 화면에서 동일한 속성을 설정시 화면에서 설정한 값이 반영됩니다.)| ### Example ```javascript options.Cfg = { // 모든 화면에서 엑셀 다운로드시 기본 속성을 설정 ExportDataConfig: { \"sheetDesign\":0, \"merge\":1 } }; ```",
              "see": [
                {
                  "label": "exportData method",
                  "url": "/docs/funcs/core/export-data"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.26|기능 추가|"
            },
            "url": "docs/props/cfg/export-data-config.html"
          },
          {
            "cid": 66,
            "sid": "export",
            "name": "export",
            "label": "Export",
            "data": {
              "body": "> `IBSheet`는 [down2Excel()](/docs/funcs/excel/down-to-excel)나 [down2Text()](/docs/funcs/excel/down-to-text)등 과 같은 함수를 통해서 데이터를 `xlsx, txt` 파일로 export 하거나 import 할 수 있습니다. > 이러한 작업은 해당 함수 호출시 시트의 내용을 서버 측으로 전달하고, 서버에서는 제품과 같이 제공되는 `jsp(혹은 aspx)`파일에서 전달된 내용을 파싱하여 파일을 클라이언트 측으로 리턴하거나, 파일의 내용을 시트에 로드시키게 됩니다. > 따라서 위와 같은 함수를 사용하기 위해서는 서버측 `jsp모듈(혹은 aspx)`에 대한 `Url`을 이 속성을 통해 명시해 주어야 합니다. > `Url` 속성만 필수적으로 설정해야 하고 그 외 속성은 선택 가능합니다. ### Type `object` ### Info |Name|Type|Description| |---------|----|-----------| |Url|`string`|서버모듈 `jsp(Down2Excel.jsp,LoadExcel.jsp 등)` 파일에 대한 경로 (`필수`) `Url`을 통해 `Down2Excel.jsp` 파일이 위치한 디렉토리를 지정하면 해당 URL위에 `Down2Excel.jsp`를 호출합니다.| |Down2ExcelUrl|`string`|[down2Excel](/docs/funcs/excel/down-to-excel) 함수 호출시 연결할 `URL`을 강제 지정 이 속성이 설정되면 위에 `Url` 속성은 무시되고, 이 속성으로 지정한 `URL`이 호출됩니다.| |LoadExcelUrl|`string`|[loadExcel](/docs/funcs/excel/load-excel) 함수 호출시 연결할 `URL`을 강제 지정 이 속성이 설정되면 위에 `Url` 속성은 무시되고, 이 속성으로 지정한 `URL`이 호출됩니다.| |DirectLoadExcelUrl|`string`|[directLoadExcel](/docs/funcs/excel/direct-load-excel) 함수 호출시 연결할 `URL`을 강제 지정 이 속성이 설정되면 위에 `Url` 속성은 무시되고, 이 속성으로 지정한 `URL`이 호출됩니다.| |Down2TextUrl|`string`|[down2Text](/docs/funcs/excel/down-to-text) 함수 호출시 연결할 `URL`을 강제 지정 이 속성이 설정되면 위에 `Url` 속성은 무시되고, 이 속성으로 지정한 `URL`이 호출됩니다.| |LoadTextUrl|`string`|[loadText](/docs/funcs/excel/load-text) 함수 호출시 연결할 `URL`을 강제 지정 이 속성이 설정되면 위에 `Url` 속성은 무시되고, 이 속성으로 지정한 `URL`이 호출됩니다.| |Down2PdfUrl|`string`|[down2Pdf](/docs/funcs/excel/down-to-pdf) 함수 호출시 연결할 `URL`을 강제 지정 이 속성이 설정되면 위에 `Url` 속성은 무시되고, 이 속성으로 지정한 `URL`이 호출됩니다.| |down2HwpxUrl|`string`|[down2Hwpx](/docs/funcs/excel/down-to-hwpx) 함수 호출시 연결할 `URL`을 강제 지정 이 속성이 설정되면 위에 `Url` 속성은 무시되고, 이 속성으로 지정한 `URL`이 호출됩니다.| |Ext|`string`|`Url` 경로를 설정 시 서버 파일의 확장자를 지정합니다. ex) `\"aspx\"` or `\"jsp\"` (`default: \"jsp\"`)| |FilePath|`string`|[File](/docs/appx/file-type-upload)타입 사용 시 조회 데이터의 파일 저장 경로를 설정 할 수 있습니다. 우선 순위는 [Path](/docs/props/cell/path)> `FilePath` 입니다.| ### Example ```javascript options.Cfg.Export = { Url: '/IBSheet/jsp/', // 시트 데이터를 엑셀로 다운로드 하기 위해 보내질 서버모듈 경로 FilePath: '/IBSheet/file/' // 파일 타입 컬럼 저장 경로 }; //Down2Excel 함수를 호출하는 경우 실제 호출되는 URL은 \"/IBSheet/jsp/Down2Excel.jsp\" 가 호출됩니다. ```",
              "see": [
                {
                  "label": "down2Excel method",
                  "url": "/docs/funcs/excel/down-to-excel"
                },
                {
                  "label": "loadExcel method",
                  "url": "/docs/funcs/excel/load-excel"
                },
                {
                  "label": "down2Text method",
                  "url": "/docs/funcs/excel/down-to-text"
                },
                {
                  "label": "loadText method",
                  "url": "/docs/funcs/excel/load-text"
                },
                {
                  "label": "directDown2Excel method",
                  "url": "/docs/funcs/excel/direct-down-to-excel"
                },
                {
                  "label": "directLoadExcel method",
                  "url": "/docs/funcs/excel/direct-load-excel"
                },
                {
                  "label": "down2Hwpx method",
                  "url": "/docs/funcs/excel/down-to-hwpx"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||excel|0.0.11|`Ext` 기능 추가||excel|8.1.0.85|`down2Hwpx` 기능 추가|"
            },
            "url": "docs/props/cfg/export.html"
          },
          {
            "cid": 67,
            "sid": "filter-count",
            "name": "filter-count",
            "label": "FilterCount",
            "data": {
              "body": "> 필터 기능 사용시 제공되는 읽기 전용 옵션으로, 시트에서 필터링되어 화면에 보이는 데이터행의 개수를 반환합니다. > `Search`행에서 `Filter` 옵션 사용시에도 적용됩니다. ### Type `number` ### Example ```javascript // alert문에 사용 시 alert(sheet.FilterCount + \"개 사용 가능합니다\"); // Search행 설정할 때 사용 시 options.Solid = [{ Kind: \"Search\", // Kind : 커스텀 행의 Kind를 지정합니다.{가능한 행 종류 : Header, Filter, Search, Group, Space, Data} Space: 1, // Space : 커스텀 Row가 위치할 곳을 설정합니다 {-1: 테이블 상단 영역, 0: Head 영역, 1: Body와 Head 사이, 2: Body와 Foot 사이 빈공간, 3: Foot 바로 위, 4: Foot 아래 툴바위치, 5:하단 테이블 밖} Cells: \"Expression,Sep1,Counts,Filter,Select,Mark,FindPrev,Find,Clear,Sep2\", // 커스텀 행 내에 Cell들을 생성하고 id를 부여함. Defs, Case, Type, Cols, List, Search, Actions, Expression, Filter, Select, Mark, Find, FindPrev, Clear, Help는 내장 설정 예약어 Expression: { // 검색하기 위한 expression 설정 Action: \"Last\", // expression 셀 내용이 변경되었을때 취할 동작에 대한 설정, Last로 설정시 사용자가 직전에 했던 동작을 실행합니다(필터를 이전에 사용했다면 필터를 사용). NoColor: 0, // 셀이 css style의 컬러(Color, Background)를 가질지 여부 CanFocus: 1, Left: \"5\", // 셀 좌측에 지정한 px 만큼의 빈 공간 생성 MinWidth: \"90\", // 최소 너비 px 단위 EmptyValue: \"<s>검색어를 입력해 주세요</s>\" // input의 placeholder 속성과 동일한 기능으로 Value가 없을 경우 지정된 값을 노출합니다 }, Sep1: { Width: \"10\",Type: \"Html\" }, Counts: { Width: \"50\", CanFocus:0,Type: \"html\", Formula: \"(Sheet.SearchCount ? Sheet.SearchCount : (Sheet.FilterCount ? Sheet.FilterCount : count(7))) +'개'\" }, // filter, select 등의 버튼 클릭시 화면에 보이는 행의 개수를 세어 셀 값으로 사용. Filter: { ButtonText: \"필터\" }, Select: { ButtonText: \"선택\" }, Mark: { ButtonText: \"마킹\" }, FindPrev:{ ButtonText: \"(위로)찾기\", Width: \"70\" }, Find: { ButtonText: \"(아래로)찾기\", Width: \"70\" }, Clear: { ButtonText: \"클리어\", Width: \"50\" }, Sep2: { Width: \"5\", Type: \"Html\" } }] ```",
              "see": [
                {
                  "label": "SearchCount cfg",
                  "url": "./search-count"
                },
                {
                  "label": "Solid appendix",
                  "url": "/docs/appx/solid"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/filter-count.html"
          },
          {
            "cid": 68,
            "sid": "filter-defaults-icon-left",
            "name": "filter-defaults-icon-left",
            "label": "FilterDefaultsIconLeft",
            "data": {
              "body": "> 필터 행에서 [Defaults](/docs/props/col/defaults) 를 사용할 때 필터링 시 생성되는 필터 메뉴의 체크 박스 아이콘을 왼쪽에 위치시킬지 여부를 설정합니다 ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|필터 체크 박스를 오른쪽에 위치 (`default`)| |`1(true)`|필터 체크 박스를 왼쪽에 위치| ### Example ```javascript options.Cfg = { FilterDefaultsIconLeft: true }; ```",
              "see": [
                {
                  "label": "Defaults col",
                  "url": "/docs/props/col/defaults"
                },
                {
                  "label": "FilterEnumIconLeft cfg",
                  "url": "./filter-enum-icon-left"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
            },
            "url": "docs/props/cfg/filter-defaults-icon-left.html"
          },
          {
            "cid": 69,
            "sid": "filter-defaults-max-width",
            "name": "filter-defaults-max-width",
            "label": "FilterDefaultsMaxWidth",
            "data": {
              "body": "> 필터 행에서 [Defaults](/docs/props/col/defaults) 를 사용할 때 생성되는 필터 메뉴의 `MaxWidth` 를 설정합니다. <br /> > 생성될 필터 메뉴의 width 가 설정하는 값보다 작은 경우에는 기존의 생성될 width 가 우선되고, 설정하는 값보다 큰 경우에 필터 메뉴의 너비 축소 및 가로 스크롤이 생성됩니다. <br /> ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|필터의 Defaults 메뉴의 Maxwidth| ### Example ```javascript options.Cfg = { FilterDefaultsMaxWidth: 500 }; ```",
              "see": [
                {
                  "label": "Defaults col",
                  "url": "/docs/props/col/defaults"
                },
                {
                  "label": "FilterEnumIconLeft cfg",
                  "url": "./filter-enum-icon-left"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.34|기능 추가|"
            },
            "url": "docs/props/cfg/filter-defaults-max-width.html"
          },
          {
            "cid": 70,
            "sid": "filter-enum-icon-left",
            "name": "filter-enum-icon-left",
            "label": "FilterEnumIconLeft",
            "data": {
              "body": "> `Enum` 타입에 대한 필터링 시 생성되는 필터 메뉴의 체크 박스 아이콘을 왼쪽에 위치시킬지 여부를 설정합니다 ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`| `Enum` 타입의 필터 체크 박스를 오른쪽에 위치 (`default`)| |`1(true)`| `Enum` 타입의 필터 체크 박스를 왼쪽에 위치| ### Example ```javascript options.Cfg = { FilterEnumIconLeft: true }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.6|기능 추가|"
            },
            "url": "docs/props/cfg/filter-enum-icon-left.html"
          },
          {
            "cid": 71,
            "sid": "filter-ignore-empty",
            "name": "filter-ignore-empty",
            "label": "FilterIgnoreEmpty",
            "data": {
              "body": "> 필터 연산자에 의해 빈 값을 가지는 셀이 무시될지 여부를 설정합니다. > 이 설정은 빈 문자열 찾거나 비교할 때는 적용되지 않습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|사용하지 않음 (`default`)| |`1`|[Type](/docs/appx/type)이 `Int`나 `Float`일 때, <, <=, >, >= 중 한 가지 연산자로 필터링 수행시 빈 값을 보여주지 않습니다.| |`4`|[Type](/docs/appx/type)이 `Text`나 `Lines`일 때, 포함하지 않음, 시작하지 않음, 끝나지 않음 연산자 중 한 가지 연산자로 필터링 수행시 빈 문자열을 가진 셀을 보여주지 않습니다.| |`8`|[Type](/docs/appx/type)이 `Int`나 `Float` 일 때 같지 않음 연산자로 필터링 수행시 빈 값을 보여주지 않습니다. | |`16`|[Type](/docs/appx/type)이 `Text`나 `Lines`일 때, 같지 않음 연산자로 필터링 수행시 빈 문자열을 가진 셀을 보여주지 않습니다. | ### Example ```javascript options = { Cfg :{ FilterIgnoreEmpty: 8, // Type이 `Int`나 `Float`일 때 같지 않음 연산자로 필터링 수행시 빈 값을 보여주지 않습니다. } }; ```",
              "see": [
                {
                  "label": "appendix](/docs/appx/type)"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/filter-ignore-empty.html"
          },
          {
            "cid": 72,
            "sid": "filter-value-list",
            "name": "filter-value-list",
            "label": "FilterValueList",
            "data": {
              "body": "> 필터행의 특정셀에 값 목록이 있을때 처리하는 방법을 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|필터 값이 빈값일때 빈값 그대로 보여줌 (`default`) | |`1`|`Button: \"Defaults\"`, `Defaults`를 `*Row`로 설정할 경우 필터 값이 빈값일때 메시지 파일에 `Lang.Text.FilterEmptyValue`에 정의된 문자열로 표시 | |`2`|`Enum` 타입일 경우 필터 값이 빈값일때 메시지 파일에 `Lang.Text.FilterEmptyValue`에 정의된 문자열로 표시 | |`3`|`1번 설정`과 `2번 설정`을 동시에 적용 | ### Example ```javascript options.Cfg = { FilterValueList: 1 ... }; ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "Button col",
                  "url": "/docs/props/col/button"
                },
                {
                  "label": "Defaults col",
                  "url": "/docs/props/col/defaults"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/filter-value-list.html"
          },
          {
            "cid": 73,
            "sid": "fit-width",
            "name": "fit-width",
            "label": "FitWidth",
            "data": {
              "body": "> 마지막 컬럼 뒤에 더미 컬럼을 두어 세로 스크롤바를 우측 끝에 붙게 합니다. ### [`FitWidth: false` 설정시] ![FitWidth: false](/assets/imgs/fitWidth0.png \"FitWidth: false\") [`FitWidth: true` 설정시] ![FitWidth: true](/assets/imgs/fitWidth1.png \"FitWidth: true\") ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|기능 사용 안함 (`default`)| |`1(true)`|기능 사용| ### Example ```javascript options.Cfg = { FitWidth: true //더미 헤더를 추가하여 스크롤바를 우측 끝에 붙인다. }; ``` ### Try it - [True](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/FitWidth-true/)",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/fit-width.html"
          },
          {
            "cid": 74,
            "sid": "fix-prev-column-merge",
            "name": "fix-prev-column-merge",
            "label": "FixPrevColumnMerge",
            "data": {
              "body": "> 행 병합(위아래로 병합)시 각 열의 기준 열의 병합 된 범위를 기준으로 병합하는 기능입니다. > 기준 열 보다 `Index`가 큰 열에 대해서만 적용됩니다. > (cfg)[DataMerge](/docs/props/cfg/data-merge)와 (cfg)[HeaderMerge](/docs/props/cfg/header-merge) 옵션이 설정되어 있어야 정상적으로 동작합니다. > [PrevColumnMerge](/docs/props/cfg/prev-column-merge)가 선언되어 있어도, 해당 속성이 우선으로 적용됩니다. > 시트 생성 후 [setAutoMerge](/docs/funcs/core/set-auto-merge)메소드를 이용하여 병합을 동적으로 변경할 수 있습니다. ### **`정책사업` 컬럼으로 설정한 경우, 앞 컬럼과 관계 없이 기준 컬럼 병합 범위를 기준으로 병합** ![prevColumnMergeMode:0](/assets/imgs/fixprevColumnMerge1.png) ![prevColumnMergeMode:0](/assets/imgs/fixprevColumnMerge2.png) ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|행 병합 시 기준으로 설정할 열의 이름| ### Example ```javascript options = { Cfg: { FixPrevColumnMerge : 'sPolicy', // 시트 생성 시 앞 열 기준으로 셀 병합할지 여부를 설정합니다. ... } }; ```",
              "see": [
                {
                  "label": "HeaderMerge cfg",
                  "url": "/docs/props/cfg/header-merge"
                },
                {
                  "label": "DataMerge cfg",
                  "url": "/docs/props/cfg/data-merge"
                },
                {
                  "label": "PrevColumnMerge method",
                  "url": "/docs/props/cfg/prev-column-merge"
                },
                {
                  "label": "ColMerge col",
                  "url": "/docs/props/col/col-merge"
                },
                {
                  "label": "setAutoMerge method",
                  "url": "/docs/funcs/core/set-auto-merge"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.15|기능 추가|"
            },
            "url": "docs/props/cfg/fix-prev-column-merge.html"
          },
          {
            "cid": 75,
            "sid": "focus-mode",
            "name": "focus-mode",
            "label": "EditTabMode",
            "data": {
              "body": "> 편집 상태인 셀에서 `tab / shift + tab` 키 이동시 동작을 설정한다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`| `CanEdit:0,3,4`, `CanFocus:0,2`가 설정되지 않은 셀로 편집을 유지하면서 tab 이동한다. (`default`)| |`1(true)`|`CanEdit`, `CanFocus`유무와 상관없이 tab 이동한다. 편집이 가능한 컬럼은 편집을 유지하면서 이동하고 편집이 불가한 컬럼에 foucs시 편집을 종료한다.| ### Example ```javascript options.Cfg :{ EditTabMode: 1 }; ```",
              "see": [
                {
                  "label": "CanEdit Cfg",
                  "url": "./can-edit"
                },
                {
                  "label": "CanEdit Row",
                  "url": "../row/can-edit"
                },
                {
                  "label": "CanEdit Col",
                  "url": "../col/can-edit"
                },
                {
                  "label": "CanEdit Cell",
                  "url": "../cell/can-edit"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.53|기능 추가|"
            },
            "url": "docs/props/cfg/focus-mode.html"
          },
          {
            "cid": 76,
            "sid": "focus-whole-row",
            "name": "focus-whole-row",
            "label": "FocusWholeRow",
            "data": {
              "body": "> 시트 셀 선택시 포커스를 해당 셀에만 처리할지 해당 행 전체에 처리할지를 설정합니다. > `제약사항` 해당 기능 사용시 `Lines` 타입 컬럼은 편집 불가 `(CanEdit:0)` 로 설정됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|시트 셀 단위로 포커스 처리 (`default`)| |`1(true)`|시트 행 단위로 포커스 처리| ### Example ```javascript options.Cfg = { FocusWholeRow: true // 행단위로 포커스 처리 }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/focus-whole-row.html"
          },
          {
            "cid": 77,
            "sid": "focused-col",
            "name": "focused-col",
            "label": "FocusedCol",
            "data": {
              "body": "> 시트를 생성하거나 `reload` 할 때 포커스를 줄 열이름(`ColName`)을 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|포커스를 줄 열이름| ### Example ```javascript options.Cfg = { FocusedRow: \"AR5\", // 데이터 다섯번째 행에 포커스 처리 FocusedCol: \"sawonName\" // 포커스된 행의 \"sawonName\" 열에 포커스 처리 }; ```",
              "see": [
                {
                  "label": "FocusedRow cfg",
                  "url": "./focused-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/focused-col.html"
          },
          {
            "cid": 78,
            "sid": "focused-row",
            "name": "focused-row",
            "label": "FocusedRow",
            "data": {
              "body": "> 시트를 생성하거나 `reload` 할 때 포커스 시킬 행의 `ID`를 설정합니다. > 데이터행 : `AR1, AR2 (AutoRow :AR + index)` , 솔리드행 : `SR1, SR2 (SolidRow: SR+index)`, 그룹행 : `GR1, GR2 (GroupRow: GR+index)`... > ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|RowID [ 데이터행: `AR1(AutoRow +index)` ]| ### Example ```javascript options.Cfg = { FocusedRow: \"AR1\", // 데이터 첫번째 행에 포커스 처리 FocusedCol: \"seq\" // 포커스된 행의 \"seq\" 열에 포커스 처리 }; ```",
              "see": [
                {
                  "label": "FocusedCol cfg",
                  "url": "./focused-col"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/focused-row.html"
          },
          {
            "cid": 79,
            "sid": "force-enter-edit",
            "name": "force-enter-edit",
            "label": "ForceEnterEdit",
            "data": {
              "body": "> [EnterMode](/docs/props/cfg/enter-mode)의 `mode`값이 `0`이 아닌 경우 포커스 상태에서 편집 상태가 되고 이후의 동작이 되도록 설정하는 옵션입니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|`EnterMode`의 기본 동작 수행| |`1(true)`|포커스 상태에서는 편집 상태로 바뀐 후 `EnterMode`의 기본 동작 수행 (`default`)| ### Example ```javascript options.Cfg{ // enter 키 이동시 편집 상태일때는 편집을 종료하고 우측 셀로 이동 (포커스 상태일 때는 우측 셀로 바로 이동) EnterMode: 3, ForceEnterEdit: false ... }; ```",
              "see": [
                {
                  "label": "EnterMode cfg",
                  "url": "/docs/props/cfg/enter-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/force-enter-edit.html"
          },
          {
            "cid": 80,
            "sid": "formula-range",
            "name": "formula-range",
            "label": "FormulaRange",
            "data": {
              "body": "> 컬럼의 포뮬러 동작시 영역을 헤더에서 풋까지 보도록 하는 기능입니다. > 기능 사용시 `CanFormula` 의 유무를 확인함. > 헤더의 경우, `Def.Row.CalcOrder` 내용을 보지 않으며, `Def.Header.CalcOrder` 에 따로 설정해주어야 합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|데이터 영역까지 포뮬러 동작함. (`default`)| |`1(true)`|전체 영역에 포뮬러 동작함.| ### Example ```javascript options.Def: { \"Row\": { \"CanFormula\": 1, \"CalcOrder\": \"AAAButton\" }, \"Filter\": { CanFormula: 0 // 필터에는 포뮬러 동작 x }, \"Foot\": { CanFormula: 0 // 풋에는 포뮬러 동작 x }, Header: { CanFormula: 1, CalcOrder: \"AAAButton\" // 헤더에서 포뮬러를 사용하기 위해서 설정 필요. } }, options.Cfg = { Cfg.FormulaRange = true // 컬럼의 포뮬러 동작을 전체영역에 볼 수 있도록 함. }; ```",
              "see": [
                {
                  "label": "CanFormula row",
                  "url": "/docs/props/row/can-formula"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.23|기능 추가|"
            },
            "url": "docs/props/cfg/formula-range.html"
          },
          {
            "cid": 81,
            "sid": "formula-row-no-filtered",
            "name": "formula-row-no-filtered",
            "label": "FormulaRowNoFiltered",
            "data": {
              "body": "> 필터링되어 보이지 않는 로우를 합계 행 계산에 제외할 지 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|계산에 포함시킨다. (`default`)| |`1(true)`|계산에 포함시키지 않는다.| ### Example ```javascript options.Cfg = { FormulaRowNoFiltered: true // 필터링되어 안보이는 로우를 합계 계산에서 제외합니다. }; ```",
              "see": [
                {
                  "label": "ShowFilter cfg",
                  "url": "./show-filter"
                },
                {
                  "label": "showFilterRow method",
                  "url": "/docs/funcs/core/show-filter-row"
                },
                {
                  "label": "FormulaRow col",
                  "url": "/docs/props/col/formula-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.6|기능 추가|"
            },
            "url": "docs/props/cfg/formula-row-no-filtered.html"
          },
          {
            "cid": 82,
            "sid": "get-by-data-format",
            "name": "get-by-data-format",
            "label": "GetByDataFormat",
            "data": {
              "body": "> [getValue](/docs/funcs/core/get-value) 메소드 실행 시 셀의 타입이 `Date`인 경우 셀에 설정된 `DataFormat` 형식에 맞게 값을 반환합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|해당 셀의 값을 반환합니다.(`Date` 타입의 경우 타임스탬프 형식)| |`1(true)`|`DataFormat`의 형식에 맞게 값을 반환합니다. (`default`)| ### Example ```javascript // 모든 Date 타입 열에 대해서 getValue시 DateFormat에 맞는 값을 반환합니다. options.Cfg = { GetByDataFormat: true }; ```",
              "see": [
                {
                  "label": "getValue method",
                  "url": "/docs/funcs/core/get-value"
                },
                {
                  "label": "setValue method",
                  "url": "/docs/funcs/core/set-value"
                },
                {
                  "label": "DataFormat col",
                  "url": "/docs/props/col/data-format"
                },
                {
                  "label": "DataFormat cell",
                  "url": "/docs/props/cell/data-format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.1|기능 추가|"
            },
            "url": "docs/props/cfg/get-by-data-format.html"
          },
          {
            "cid": 83,
            "sid": "get-col-with-hide",
            "name": "get-col-with-hide",
            "label": "GetColWithHide",
            "data": {
              "body": "> `getColIndex, getColByIndex, getFirstCol, getLastCol, getNextCol, getPrevCol` 해당 API들은 기본 기능이 보여지는 열을 기준으로 동작합니다. > 해당 기능을 `true`로 설정시, 위의 `API`들은 `Col.Visible` 관계없이 동작합니다. > 우선 순위는 `includeHideCol` > `GetColWithHide` 임으로, `GetColWithHide`를 `true`로 설정 하여도 `includeHideCol`을 `false`로 설정시에는 보여지는 열을 기준으로 동작하게 할 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|기능 사용 안함 (`default`)| |`1(true)`|`getColIndex, getColByIndex, getFirstCol, getLastCol, getNextCol, getPrevCol`- `Col.Visible` 상관없이 동작.| ### Example ```javascript //getColIndex, getColByIndex, getFirstCol, getLastCol, getNextCol, getPrevCol 해당 API들의 기능을 Visible 관계 없이 동작하도록 합니다. options.Cfg = { GetColWithHide: true }; ```",
              "see": [
                {
                  "label": "getColIndex method",
                  "url": "/docs/funcs/core/get-col-index"
                },
                {
                  "label": "getColByIndex method",
                  "url": "/docs/funcs/core/get-col-by-index"
                },
                {
                  "label": "getFirstCol method",
                  "url": "/docs/funcs/core/get-first-col"
                },
                {
                  "label": "getLastCol method",
                  "url": "/docs/funcs/core/get-last-col"
                },
                {
                  "label": "getNextCol method",
                  "url": "/docs/funcs/core/get-next-col"
                },
                {
                  "label": "getPrevCol method",
                  "url": "/docs/funcs/core/get-prev-col"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.11|기능 추가|"
            },
            "url": "docs/props/cfg/get-col-with-hide.html"
          },
          {
            "cid": 84,
            "sid": "group-format",
            "name": "group-format",
            "label": "GroupFormat",
            "data": {
              "body": "> 그룹핑 시 생성된 그룹 트리가 있는 열에 그룹에 속하는 데이터 행의 개수 와 그 표시 형식을 설정합니다. > `{%s}` 는 그룹이 되는 기준 값, `{%c}` 는 그룹핑 된 데이터의 개수를 설정합니다. > `{%vc}` 는 그룹핑 된 데이터 중 감춰진 행을 제외한 행의 개수 ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|그룹 표시 형식 설정 String ex) `<span style='color: black'>{%s}</span> \\ <span style='color: gray'>({%c}건)</span>`| ### Example ```javascript options.Cfg = { Group: \"gender,age\", // 시트 로딩시 colName 이 성별, 나이인 열으로 그룹핑 GroupMain: \"Name\", // 시트 트리를 colName 이 이름 인 열에 표시 GroupFormat:\" <span style='color:red'>{%s}</span> <span style='color:blue'>({%c}건)</span>\" //그룹핑 열이름은 빨강색, 건수는 파란색으로 표시 }; option.Solid = [{ Kind: \"Group\", // 커스텀 행의 Kind 를 Group 으로 설정 Space: -1 // 커스텀 행의 위치를 설정 (-1: 테이블 상단) }]; ``` ### Try it - [Demo of GroupFormat](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/Group/)",
              "see": [
                {
                  "label": "Group cfg",
                  "url": "./group"
                },
                {
                  "label": "getGroupRows method",
                  "url": "/docs/funcs/core/get-group-rows"
                },
                {
                  "label": "Kind appendix",
                  "url": "/docs/appx/kind"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.27|{%vc} 기능 추가|"
            },
            "url": "docs/props/cfg/group-format.html"
          },
          {
            "cid": 85,
            "sid": "group-main",
            "name": "group-main",
            "label": "GroupMain",
            "data": {
              "body": "> 그룹핑이 되었을때 그룹 트리를 보여줄 열을 설정합니다. > `GroupMain` 을 설정하지 않는 경우, 자동으로 그룹핑이 표시될 기준 열이 지정됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`colName`|그룹핑 트리가 표시될 열이름| ### Example ```javascript options.Cfg = { Group: \"gender,age\", // 시트 로딩시 열이름이 gender, age인 열으로 그룹핑 GroupMain: \"Name\" // 시트 트리를 열이름이 Name 인 열에 표시 }; option.Solid = [{ Kind: \"Group\", // 커스텀 행의 Kind 를 Group 으로 설정 Space: -1 // 커스텀 행의 위치를 설정 (-1: 테이블 상단) }]; ``` ### Try it - [Demo of GroupMain](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/Group/)",
              "see": [
                {
                  "label": "Group cfg",
                  "url": "./group"
                },
                {
                  "label": "Kind appendix",
                  "url": "/docs/appx/kind"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/group-main.html"
          },
          {
            "cid": 86,
            "sid": "group-sort-main",
            "name": "group-sort-main",
            "label": "GroupSortMain",
            "data": {
              "body": "> 그룹핑 사용시 그룹 열에 대해서 오름차순/내림차순 정렬 여부를 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`1`|오름차순 정렬 (`default`)| |`2`|내림차순 정렬| ### Example ```javascript options.Cfg = { \"GroupSortMain\": 2 //그룹핑 되는 열에 대해 내림차순으로 정렬한다. }; ```",
              "see": [
                {
                  "label": "Group cfg",
                  "url": "./group"
                },
                {
                  "label": "GroupMain cfg",
                  "url": "./group-main"
                },
                {
                  "label": "Solid appendix",
                  "url": "/docs/appx/solid"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/group-sort-main.html"
          },
          {
            "cid": 87,
            "sid": "group-sort",
            "name": "group-sort",
            "label": "GroupSort",
            "data": {
              "body": "> 그룹핑시 기준컬럼에 대한 정렬 처리 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |0|Sort 처리 없이 현재 상태로 그룹핑| |1|Sort 처리 후 그룹핑 (`default`)| ### Example ```javascript options.Cfg = { \"GroupSort\": 0 // 정렬 처리 하지 않고 현재 상태로 그룹핑 }; ```",
              "see": [
                {
                  "label": "Group cfg",
                  "url": "./group"
                },
                {
                  "label": "GroupMain cfg",
                  "url": "./group-main"
                },
                {
                  "label": "GroupSortMain",
                  "url": "./group-sort-main"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.35|기능 추가|"
            },
            "url": "docs/props/cfg/group-sort.html"
          },
          {
            "cid": 88,
            "sid": "group-tree",
            "name": "group-tree",
            "label": "GroupTree",
            "data": {
              "body": "> 그룹핑 시 각 그룹 기준 컬럼에서 트리 노드를 사용합니다. > 옵션에 따라 트리 아이콘, [CanEdit](./can-edit)여부를 다르게 설정할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|사용 안함 (`default`)| |`1`|편집 불가([CanEdit: 0](./can-edit)), 트리 아이콘이 왼쪽에 위치| |`2`|편집 불가([CanEdit: 0](./can-edit)), 트리 아이콘이 오른쪽에 위치| |`3`|편집 가능([CanEdit: 1](./can-edit)), 트리 아이콘이 왼쪽에 위치| |`4`|편집 가능([CanEdit: 1](./can-edit)), 트리 아이콘이 오른쪽에 위치| ### Example ```javascript options.Cfg = { Group: \"gender,age\", // 시트 로딩시 colName 이 성별, 나이인 열으로 그룹핑 GroupTree: 3, // 성별, 나이 컬럼에 각각 접힘/펼침 트리 노드 생성 }; ```",
              "see": [
                {
                  "label": "Group cfg",
                  "url": "./group"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.21|기능 추가|"
            },
            "url": "docs/props/cfg/group-tree.html"
          },
          {
            "cid": 89,
            "sid": "group",
            "name": "group",
            "label": "Group",
            "data": {
              "body": "> 시트 로딩시 그룹핑 하고자 하는 열의 `ColName` 을 \",\" 구분자을 넣어 문자열로 설정합니다. > `Solid Row 의 Kind: \"Group\"` 를 설정하면 그룹핑한 열의 헤더text 가 그룹행에 표시되며, 사용자가 마우스 드롭 다운으로 통해 다른 열을 그룹핑에 추가하거나 기존 그룹핑 열을 변경 할 수 있습니다. > `Solid Row 의 Kind: \"Group\"` 를 설정하지 않는 경우 시트 로딩시 `Group` 에 설정된 열 그룹핑 기능이 반영되나, 사용자가 변경 작업을 할 수 없습니다. > `Group` 설정시 이름들은 반드시 띄어쓰기 없이 서로 붙여 작성해주셔야 됩니다. 이름들 간에 띄어쓰기가 되어 있는 경우 `Group` 동작이 정상적으로 이뤄지지 않습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`colName`|그룹핑할 열이름을 \",\" 로 연결한 문자열| ### Example ```javascript options.Cfg = { Group:\"gender,age\" // 시트 로딩시 열이름이 성별, 나이인 열으로 그룹핑 }; option.Solid = [{ Kind: \"Group\", // 커스텀 행 Kind 를 Group 으로 설정 Space: -1 // 커스텀 행의 위치를 설정 (-1: 테이블 상단) }]; ``` ### Try it - [Demo of Group](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/Group/)",
              "see": [
                {
                  "label": "Kind appendix",
                  "url": "/docs/appx/kind"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/group.html"
          },
          {
            "cid": 90,
            "sid": "header-check-mode",
            "name": "header-check-mode",
            "label": "HeaderCheckMode",
            "data": {
              "body": "> 헤더 체크 박스(`HeaderCheck (cfg, col)`)가 활성화된 시트에서 `Bool` 타입인 열의 헤더 체크 박스를 클릭 시 해당 열의 셀이 체크 될 대상이 되는 행을 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| | `0` | 시트의 모든 행 (`default`)| | `1` | 시트에 보이는 행 | ### Example ```javascript options = { Cfg :{ HeaderCheck: 1, // Type이 Bool인 열의 헤더에 체크박스를 생성합니다. HeaderCheckMode: 1, // 시트에 보이는 행에 대해 체크합니다(필터링되거나, 행이 Visible 0일 때 체크가 되지 않습니다) ... } }; ```",
              "see": [
                {
                  "label": "HeaderCheck col",
                  "url": "/docs/props/col/header-check"
                },
                {
                  "label": "HeaderCheck cfg",
                  "url": "./header-check"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/header-check-mode.html"
          },
          {
            "cid": 91,
            "sid": "header-check-page-only",
            "name": "header-check-page-only",
            "label": "HeaderCheckPageOnly",
            "data": {
              "body": "> `(Cfg) SearchMode: 1`에서 `(Cfg) HeaderCheck` 옵션을 사용하여 전체 체크를 할 때, 전체 페이지를 체크하지 않고 현재 보여지는 페이지만 체크합니다. ### Type `number` ### Options |Value|Description| |-----|-----| | `0` | 전체 체크 버튼 클릭시 전체 페이지를 체크 (`default`)| | `1` | 전체 체크 버튼 클릭시 현재 보여지는 페이지만 체크 | ### Example ```javascript options = { Cfg :{ HeaderCheckPageOnly: 1, // `(Cfg) SearchMode: 1`에서 `(Cfg) HeaderCheck` 옵션을 사용하여 전체 체크를 할 때, 전체 페이지를 체크하지 않고 현재 보여지는 페이지만 체크합니다. ... } }; ```",
              "see": [
                {
                  "label": "HeaderCheck col",
                  "url": "/docs/props/col/header-check"
                },
                {
                  "label": "HeaderCheckMode cfg",
                  "url": "./header-check-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.26|기능 추가|"
            },
            "url": "docs/props/cfg/header-check-page-only.html"
          },
          {
            "cid": 92,
            "sid": "header-check",
            "name": "header-check",
            "label": "HeaderCheck",
            "data": {
              "body": "> 시트 생성 시 타입이 `Bool`인 모든 열들의 헤더에 체크 박스를 생성하며, 체크 박스를 클릭시 해당 열에 있는 모든 셀의 체크박스를 체크 또는 해제합니다. > [HeaderCheck](/docs/props/col/header-check)가 우선 적용됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| | `0` | 체크 박스 생성 안함 (`default`)| | `1` | 체크 박스 생성| ### Example ```javascript options = { Cfg :{ HeaderCheck: 1, // Type이 Bool인 열의 헤더에 체크박스를 생성합니다. ... } }; ```",
              "see": [
                {
                  "label": "HeaderCheck col",
                  "url": "/docs/props/col/header-check"
                },
                {
                  "label": "HeaderCheckMode cfg",
                  "url": "./header-check-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/header-check.html"
          },
          {
            "cid": 93,
            "sid": "header-merge",
            "name": "header-merge",
            "label": "HeaderMerge",
            "data": {
              "body": "> 시트 생성 시 헤더 영역에서 셀 값을 기준으로 병합할지 여부 및 병합 종류를 설정합니다. > 옵션에 대한 설명은 [DataMerge](./data-merge)와 동일합니다. > 시트 생성 후 [setAutoMerge](/docs/funcs/core/set-auto-merge)메소드를 이용하여 헤더 영역의 병합을 동적으로 변경할 수 있습니다. > [Span cell](/docs/props/cell/span)과 [RowSpan cell](/docs/props/cell/row-span)보다 우선 적용됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| | `0` | 병합 안함 (`default`)| | `1` | 열 기준 병합| | `2` | 행 기준 병합| | `3` | 열 우선 병합| | `4` | 행 우선 병합| | `5` | 열 우선 사방 병합| | `6` | 행 우선 사방 병합| ### Example ```javascript options = { Cfg :{ HeaderMerge: 0, // 시트 생성 시 헤더 영역의 셀 병합을 진행하지 않습니다. } }; ``` ### Try it - [0 by default with setAutoMerge](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/Merge/)",
              "see": [
                {
                  "label": "Span cell",
                  "url": "/docs/props/cell/span"
                },
                {
                  "label": "RowSpan cell",
                  "url": "/docs/props/cell/row-span"
                },
                {
                  "label": "DataMerge cfg",
                  "url": "./data-merge"
                },
                {
                  "label": "PrevColumnMerge cfg",
                  "url": "./prev-column-merge"
                },
                {
                  "label": "setAutoMerge method",
                  "url": "/docs/funcs/core/set-auto-merge"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/header-merge.html"
          },
          {
            "cid": 94,
            "sid": "header-sort-action-mode",
            "name": "header-sort-action-mode",
            "label": "HeaderSortActionMode",
            "data": {
              "body": "> 헤더 클릭/Ctrl 클릭 시 어떻게 소팅할지 결정합니다.</br> > 옵션에 따라 단일 열에 대한 소팅과 다중 열에 대한 소팅이 실행됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| | `0(false)` | 클릭 시 다중 소팅을 사용하며, Ctrl 클릭 시 단일 소팅을 사용합니다. (`default`)| | `1(true)` | 클릭 시 단일 소팅을 사용하며, Ctrl 클릭 시 다중 소팅을 사용합니다.| ### Example ```javascript options.Cfg = { HeaderSortActionMode: true, ... }; ```",
              "see": [
                {
                  "label": "MaxSort cfg",
                  "url": "/docs/props/cfg/max-sort"
                },
                {
                  "label": "HeaderSortMode cfg",
                  "url": "/docs/props/cfg/header-sort-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가|"
            },
            "url": "docs/props/cfg/header-sort-action-mode.html"
          },
          {
            "cid": 95,
            "sid": "header-sort-mode",
            "name": "header-sort-mode",
            "label": "HeaderSortMode",
            "data": {
              "body": "> 헤더를 클릭시 소팅하는 순서를 변경합니다. > 별다른 설정이 없는 경우 시트는 [MaxSort](/docs/props/cfg/max-sort) 설정에 따라 클릭하는 헤더의 순서대로, 대분류, 중분류, 소분류로 소팅을 합니다. > 가령 `MaxSort:3` 이고 A, B, C 컬럼의 헤더를 순서대로 클릭하였다면 **대분류:A, 중분류:B, 소분류:C**의 순서대로 소팅이 이루어지고 이렇게 3개 컬럼이 결정되고 난 이후에는 다른 컬럼은 클릭하여도 소팅이 되지 않습니다. > > **그런데 이러한 방식 대신에 마지막으로 클릭한 컬럼을 대분류로 하고, 소팅 컬럼이 결정된 이후에 새롭게 클릭하는 헤더를 계속적으로 대분류로 변경하여 소팅하고자 하실때는 이 속성을 1로 설정하시면 됩니다.** > > 만약 기존에 소팅된 내용을 clear하려면 **shift+헤더클릭** 하시면 됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| | `0` | 클릭한 순서대로 대분류/중분류/소분류가 되며, `MaxSort`에서 지정한 갯수까지만 소팅하고 `MaxSort` 초과의 컬럼은 소팅이 되지 않음. (`default`) | | `1` | 클릭한 순서의 역순으로 대분류/중분류/소분류가 되며, 마지막으로 클릭하는 헤더가 대분류가 되고 기존의 소분류였던 컬럼은 소팅 취소됨.| | `2` | 클릭한 헤더의 소팅 아이콘만 변경되고 실제 소팅이 되지 않음.| | `3` | 클릭한 헤더의 소팅 아이콘만 변경되고 실제 소팅이 되지 않음. 추가적으로 [doSort](/docs/funcs/core/do-sort) 이용한 정렬에도 아이콘만 변경되고 실제 소팅이 되지 않음.| | `4` | 클릭한 순서대로 대분류/중분류/소분류가 되며, 마지막으로 클릭하는 헤더가 소분류가 되고 기존의 대분류였던 컬럼은 소팅 취소됨. | ### Example ```javascript options = { Cfg :{ HeaderSortMode: 1, ... } }; ```",
              "see": [
                {
                  "label": "MaxSort cfg",
                  "url": "/docs/props/cfg/max-sort"
                },
                {
                  "label": "HeaderSortActionMode cfg",
                  "url": "/docs/props/cfg/header-sort-action-mode"
                },
                {
                  "label": "UseHeaderSortCancel cfg",
                  "url": "/docs/props/cfg/use-header-sort-cancel"
                },
                {
                  "label": "doSort method",
                  "url": "/docs/funcs/core/do-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.4|기능 추가||core|8.0.0.8|`HeaderSortMode: 2,3` 추가||core|8.3.0.43|`HeaderSortMode: 4` 추가|"
            },
            "url": "docs/props/cfg/header-sort-mode.html"
          },
          {
            "cid": 96,
            "sid": "highlight-after-sort",
            "name": "highlight-after-sort",
            "label": "HighlightAfterSort",
            "data": {
              "body": "> 정렬 동작 이후 포커스 처리 동작을 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|포커스 클리어 및 세로스크롤 위치를 유지합니다. | |`1`|정렬 동작 이전 포커스 행 유지 및 해당 셀의 위치로 세로스크롤을 이동합니다. (`default`)| |`2`|정렬 동작 이전 포커스 행 유지 및 가로스크롤 및 세로스크롤 위치를 최상단으로 초기화 합니다. | |`3`|정렬 동작 이후에도 항상 첫번째 행에 포커스 이동 및 세로스크롤 위치를 해당 셀 위치로 이동 합니다.| |`4`|포커스 행 위치에 포커스 유지, 만약 25행을 포커스하고 정렬을 하면 항상 25 번째 행에 포커스가 유지됩니다. (세로스크롤 위치 유지합니다.)| ### Example ```javascript options.Cfg = { HighlightAfterSort: 2 // 정렬이 동작되면 이전 포커스 행을 유지하고 세로스크롤 위치는 최상단으로 초기화. }; ```",
              "see": [
                {
                  "label": "doSort method",
                  "url": "/docs/funcs/core/do-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.63|기능 추가|"
            },
            "url": "docs/props/cfg/highlight-after-sort.html"
          },
          {
            "cid": 97,
            "sid": "hover-scope",
            "name": "hover-scope",
            "label": "HoverScope",
            "data": {
              "body": "> 시트내의 행 또는 셀에 마우스 커서가 위치 했을때 `Hover` 동작이 수행되는 영역을 제한합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|헤더/데이터 영역에 `Hover` 동작 (`default`)| |`1`|헤더 영역에 `Hover` 동작하지 않음| ### Example ```javascript options.Cfg = { HoverScope: 1, // 헤더 영역에 Hover 동작하지 않음 }; ```",
              "see": [
                {
                  "label": "Hover cfg",
                  "url": "./hover"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.9|기능 추가|"
            },
            "url": "docs/props/cfg/hover-scope.html"
          },
          {
            "cid": 98,
            "sid": "hover",
            "name": "hover",
            "label": "Hover",
            "data": {
              "body": "> 시트내의 행 또는 셀에 마우스 커서가 위치 했을때 `Hover` 동작 모드를 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|`Hover` 동작 안함 | |`1`|셀단위 `Hover`| |`2`|행단위 `Hover` (`default`) | ### Example ```javascript options.Cfg = { Hover: \"1\", // 셀단위 Hover 동작처리 }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/hover.html"
          },
          {
            "cid": 99,
            "sid": "ignore-focused",
            "name": "ignore-focused",
            "label": "IgnoreFocused",
            "data": {
              "body": "> 시트는 데이터 조회 후 포커스를 보여지는 첫번째 행 첫번째 열에 위치시킵니다. > 해당 속성을 `1(true)`로 설정하면 조회 후 시트가 포커스를 갖고 오지 않게 합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|조회 후 포커스를 첫 번째 행, 열로 가져옴 (`default`)| |`1(true)`|조회 후 포커스를 가져오지 않음| ### Example ```javascript options.Cfg = { IgnoreFocused: true, // 조회 후 포커스를 가져오지 않게 한다. }; ```",
              "see": [
                {
                  "label": "Focus method",
                  "url": "/docs/funcs/core/focus"
                },
                {
                  "label": "onFocus event",
                  "url": "/docs/events/on-focus"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/ignore-focused.html"
          },
          {
            "cid": 100,
            "sid": "ignore-header-col-merge",
            "name": "ignore-header-col-merge",
            "label": "IgnoreHeaderColMerge",
            "data": {
              "body": "> `ColMerge` 속성을 헤더 영역에도 적용할지 여부를 결정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`| ColMerge 속성을 헤더 영역에도 적용합니다. | |`1(true)`| ColMerge 속성을 헤더 영역에 적용하지 않습니다. (`default`)| ### Example ```javascript options.Cfg = { IgnoreHeaderColMerge: false, // ColMerge 속성을 헤더 영역에도 적용합니다. }; ```",
              "see": [
                {
                  "label": "ColMerge col",
                  "url": "/docs/props/col/col-merge"
                },
                {
                  "label": "ColMerge cell",
                  "url": "/docs/props/cell/col-merge"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/ignore-header-col-merge.html"
          },
          {
            "cid": 101,
            "sid": "in-edit-mode",
            "name": "in-edit-mode",
            "label": "InEditMode",
            "data": {
              "body": "> 시트의 편집 시점을 설정합니다. > 일반적으로 편집하고자 하는 셀을 더블클릭하거나, 해당 셀에 포커스가 있는 상태에서 F2 혹은 Enter 키 입력시 편집이 시작됩니다. > 편집 상태에서 Esc 키 입력시 편집상태가 종료됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|- 이미 포커스된 셀을 클릭할 때 - Enter나 F2 키를 입력할 때 - 포커스 되지 않은 셀을 더블 클릭할 때 | |`1`|- 셀을 클릭시 - 포커스 상태에서 Enter나 F2 키 입력시| |`2`|- 이미 포커스된 셀을 클릭할 때 - Enter나 F2 키를 입력할 때 - 포커스 되지 않은 셀을 더블 클릭할 때 - 포커스 상태에서 입력할 때 (`default`)| |`3`|- 이미 포커스된 셀을 더블 클릭할 때 - Enter나 F2 키를 입력할 때 - 포커스 상태에서 입력할 때 | ### Example ```javascript options.Cfg = { InEditMode: 1, //클릭시 즉시 편집상태로 전환 ... }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/in-edit-mode.html"
          },
          {
            "cid": 102,
            "sid": "include-del-row",
            "name": "include-del-row",
            "label": "IncludeDelRow",
            "data": {
              "body": "> 소계/누계([makeSubTotal](/docs/funcs/core/make-sub-total)) / 합계([FormulaRow](/docs/props/col/formula-row))에 삭제 상태 행 ([Deleted](/docs/props/row/deleted): 1) 을 계산에 포함할지 여부를 설정합니다. > bit 연산 형태로 속성을 설정합니다. 3으로 설정시 1번옵션 + 2번옵션 대해 설정하게 됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|삭제행 계산에 포함하지 않음. (`default`)| |`1`|소계/누계 계산에 삭제행을 포함하여 계산| |`2`|합계 계산에 삭제행을 포함하여 계산| ### Example ```javascript options.Cfg = { ... \"IncludeDelRow\": 3 // 소계/누계, 합계 계산 모두 삭제행을 포함하여 계산 ... }; ```",
              "see": [
                {
                  "label": "makeSubTotal method",
                  "url": "/docs/funcs/core/make-sub-total"
                },
                {
                  "label": "FormulaRow col",
                  "url": "/docs/props/col/formula-row"
                },
                {
                  "label": "Deleted row",
                  "url": "/docs/props/row/deleted"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.11|기능 추가|"
            },
            "url": "docs/props/cfg/include-del-row.html"
          },
          {
            "cid": 103,
            "sid": "info-row-config",
            "name": "info-row-config",
            "label": "InfoRowConfig",
            "data": {
              "body": "> 시트 상단 혹은 하단에 별도의 행을 통해 조회된 데이터의 개수나 페이지 네비게이션을 설정합니다. > 건수정보표시행에 임의의 문자나 숫자를 추가적으로 설정 하는 것도 가능합니다. > `Layout`에 셀에 대한 속성 및 타입을 설정 할 수 있습니다. ### Type `object` ### Options |Value|Type|Description| |----------|-----|---| |Visible|`boolean`|정보 행을 화면에 표시할지 여부 `0(false)`:정보 행 화면에 표시 안함 (`SearchMode : 0,2,3 default`) `1(true)`:정보 행 화면에 표시 (`SearchMode : 1,4,5 default`)| |Layout|`array`\\[`string`\\|`object`\\]|페이징, 건수 정보 표시, 선택 영역 합계/평균 표시, 상태 정보 표시, 사용자 정의 영역의 Layout을 설정합니다. **참고** : `Paging,Paging2` 는 `SearchMode:1,4,5` 에서 동작 합니다.<ul><li>**Paging** : 페이지 네비게이션 활성화(예약어), 천단위로 ',' 찍힘. ex) `1/1,000` ![Paging](/assets/imgs/Paging.png \"Paging\")</li><li>**Paging2**: 숫자형 페이지 네비게이션 활성화(예약어), `주의`: Paging과 동시 사용 X ![Paging2](/assets/imgs/paging2.png \"Paging2\")</li><li>**Count**: 건수 정보 표시(예약어) ![Count](/assets/imgs/Count.png \"Count\")</li><li>**SummaryLabel** : 선택 영역에 대한 합계/평균 정보 표시 ![Paging](/assets/imgs/summaryLabel.png \"Paging\")</li><li>**StatusLabel** : 데이터 편집, 데이터 조회, 행이동, 필터링, 정렬, 컬럼이동, 파일 업로드/제거 내용 표시 ![status](/assets/imgs/statusLabel.png \"status\")</li><li>**사용자 영역 문자열** : 표시하려는 문자열 \\<Span\\>\\<Div\\>와 같은 태그 사용가능</li></ul> (`default: [\"Paging\",\"Count\"]`) ex:) **[\"Paging\",{Value:\"\\<div style='background-color:#FFFFAA'>1234\\</div>\",Color:\"#FFDDFF\"},\"가나다\",\"Count\"]** 위와 같이 설정시 다음과 같이 표현됩니다. ![InfoRow](/assets/imgs/infoRow0.png \"\")| |ViewCount|`number`|Layout의 Paging2 설정시 `PageLength`를 변경하는 selectBox 표시 여부를 결정합니다. `0`:표시안함 (`default`), `1`:표시 ![ViewCount](/assets/imgs/viewCount.png \"ViewCount\")| |ViewFormat|`string`|Layout의 Paging2 설정 후 `ViewCount:1` 설정시 `ViewCount`의 selectBox 옵션을 설정합니다. \"\\|\" 를 구분자로 구분하며 \"10\\|20\\|30\\|40\\|50\" 과 같이 설정합니다. ViewFormat을 설정하지 않으면 selectBox 기본 옵션값은 \"10\\|20\\|30\\|50\\|100\"입니다. 시트의 `PageLength`가 옵션에 포함되어 선택 됩니다.(PageLength가 ViewFormat 문자열에 포함되어 있지 않는 경우 자동 추가 후 선택) |Paging2Count|`number`|Layout의 Paging2 설정시 페이지 네비게이션에 보여지는 숫자의 개수를 설정합니다. (`default: 5, max: 10`)| |Space|`string`|정보 행의 위치 (\"Top\": 상단, \"Bottom\":하단) (`default: \"Bottom\"`)| |Format|`string`|위 `Layout` 에서 `Count`로 설정한 셀(건수정보)에 들어갈 예약어 조합 `default: [BOTTOMDATAROW / TOTALROWS]` <ul><li>TOTALROWS: (서버페이징) 전체 데이터 개수</li><li>ROWCOUNT: 조회된 데이터 개수</li><li>VISIBLECOUNT: 보이는 데이터 개수</li><li>ADDROWS: 추가된 데이터 개수</li><li>CHANGEROWS: 변경된 데이터 개수</li><li>DELETEROWS: 삭제된 데이터 개수</li><li>BOTTOMDATAROW: 현재 가장 마지막에 보이는 행의 번호</li></ul>| ![InfoRowConfig](/assets/imgs/infoRow1.png \"InfoRowConfig\") ### Example ```javascript // Html options.Cfg = { InfoRowConfig: { \"Visible\": true, \"Layout\": [ \"Paging\", // 예약어 페이지네이션 {Value:\"2024/01/05일 마감 예정입니다.\", TextColor:\"#FF0000\"}, // 임의의 셀 \"Count\" // 예약어 건수정보 ], \"Space\": \"Bottom\", // InfoRow 상/하 위치 \"Format\": \"CHANGEROWS개 행이 수정되었습니다.\" // 건수정보 포멧 } }; // Layout의 Paging2 는 아래와 같이 설정합니다. options.Cfg = { InfoRowConfig: { \"Visible\": true, \"Layout\": [ \"Paging2\", // 예약어 페이지네이션 {Value:\"2024/01/05일 마감 예정입니다.\", TextColor:\"#FF0000\"}, // 임의의 셀 \"관리자 홍길동\", // 임의의 셀2 \"Count\" // 예약어 건수정보 ], \"ViewCount\": 1, // selectBox 표시 \"ViewFormat\": \"10|20|30|40|50\", // selectBox option 구성 \"Paging2Count\": 8, // 페이지 네비게이션에 표시되는 페이지 number 개수 \"Space\": \"Bottom\" // InfoRow 상/하 위치 } }; // InfoRow에 버튼 셀 생성하기 options.Cfg = { InfoRowConfig: { \"Visible\": true, \"Layout\": [ // 버튼 셀 정보 설정 {Value:\"확인\", Type:\"Button\",TextColor:\"#FFFFFF\", Color:\"#53629E\", RelWidth:0, Width: 100, OnClick: function(){alert(\"확인\");}}, \"Count\" ], \"Space\": \"Top\" } }; ``` ### Try it - [Demo of InfoRowConfig](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/InfoRowConfig/)",
              "see": [
                {
                  "label": "SearchMode cfg",
                  "url": "/docs/props/cfg/search-mode"
                },
                {
                  "label": "SelectionSummary cfg",
                  "url": "/docs/props/cfg/selection-summary"
                },
                {
                  "label": "setInfoRow method",
                  "url": "/docs/funcs/core/set-info-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.5|InfoRow에 Layout.Cells(개별 셀 속성 설정) 기능 추가||core|8.1.0.96|StatusLabel 추가||core|8.1.0.97|Paging2,ViewCount,ViewFormat,Paging2Count 추가|"
            },
            "url": "docs/props/cfg/info-row-config.html"
          },
          {
            "cid": 104,
            "sid": "init-pivot-cols",
            "name": "init-pivot-cols",
            "label": "InitPivotCols",
            "data": {
              "body": "> 피벗 시트에서 기준 열의 값으로 사용할 열(들)을 설정합니다. > `\",\"`로 연결하여 복수 개의 열 이름을 지정할 수 있습니다. ### Type `string` ### Example ```javascript options.Cfg = { UsePivot: true, // 피벗 사용 여부 InitPivotCols: \"sTeam,sPosition\" // 가로 기준 컬럼 설정 }; ```",
              "see": [
                {
                  "label": "UsePivot cfg",
                  "url": "./use-pivot"
                },
                {
                  "label": "PivotFunc cfg",
                  "url": "./pivot-func"
                },
                {
                  "label": "InitPivotRows cfg",
                  "url": "./init-pivot-rows"
                },
                {
                  "label": "InitPivotData cfg",
                  "url": "./init-pivot-data"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.6|기능 추가||dialog|8.0.0.4|기능 추가|"
            },
            "url": "docs/props/cfg/init-pivot-cols.html"
          },
          {
            "cid": 105,
            "sid": "init-pivot-data",
            "name": "init-pivot-data",
            "label": "InitPivotData",
            "data": {
              "body": "> 피벗 시트에서 데이터의 값으로 사용할 열(들)을 설정합니다. > `\",\"`로 연결하여 복수 개의 열 이름을 지정할 수 있습니다. ### Type `string` ### Example ```javascript options.Cfg = { UsePivot: true, // 피벗 사용 여부 InitPivotData: \"sSalary,sBonus\" // 값 계산할 컬럼 설정 }; ```",
              "see": [
                {
                  "label": "UsePivot cfg",
                  "url": "./use-pivot"
                },
                {
                  "label": "PivotFunc cfg",
                  "url": "./pivot-func"
                },
                {
                  "label": "InitPivotCols cfg",
                  "url": "./init-pivot-cols"
                },
                {
                  "label": "InitPivotRows cfg",
                  "url": "./init-pivot-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.6|기능 추가||dialog|8.0.0.4|기능 추가|"
            },
            "url": "docs/props/cfg/init-pivot-data.html"
          },
          {
            "cid": 106,
            "sid": "init-pivot-rows",
            "name": "init-pivot-rows",
            "label": "InitPivotRows",
            "data": {
              "body": "> 피벗 시트에서 기준 행의 값으로 사용할 열(들)을 설정합니다. > `\",\"`로 연결하여 복수 개의 열 이름을 지정할 수 있습니다. ### Type `string` ### Example ```javascript options.Cfg = { UsePivot: true, // 피벗 사용 여부 InitPivotRows: \"sDept\" // 세로 기준 컬럼 설정 }; ```",
              "see": [
                {
                  "label": "UsePivot cfg",
                  "url": "./use-pivot"
                },
                {
                  "label": "PivotFunc cfg",
                  "url": "./pivot-func"
                },
                {
                  "label": "InitPivotCols cfg",
                  "url": "./init-pivot-cols"
                },
                {
                  "label": "InitPivotData cfg",
                  "url": "./init-pivot-data"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.6|기능 추가||dialog|8.0.0.4|기능 추가|"
            },
            "url": "docs/props/cfg/init-pivot-rows.html"
          },
          {
            "cid": 107,
            "sid": "left-width",
            "name": "left-width",
            "label": "LeftWidth",
            "data": {
              "body": "> 왼쪽 고정 열 섹션의 최대 너비를 설정합니다. > 왼쪽 고정 열 섹션의 열들이 설정된 너비보다 큰 경우 스크롤바가 생성됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|왼쪽 섹션의 총 너비| ### Example ```javascript options = { LeftCols:[ { //열 헤더 설정 Header: { Value: \"No\" // 헤더행의 SEQ 열에 해당하는 셀에 표시될 title 값 }, Name: \"SEQ\", // 행의 순서를 보여주는 열으로, 자동으로 순번이 시트에서 생성됩니다. }, { // 열 헤더 설정 Header: { Value: \"회사명3\" // 헤더행의 sCorp 열에 해당하는 셀에 표시될 title 값 }, Name: \"sCorp\", // colName 열이름을 설정 (Data와 Matching) Type: \"Text\" // 열 타입 } ], Cfg :{ LeftWidth:150 // 왼쪽 고정 열 섹션의 최대 너비 설정 } }; ```",
              "see": [
                {
                  "label": "LeftWidth cfg",
                  "url": "./left-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/left-width.html"
          },
          {
            "cid": 108,
            "sid": "level-mark",
            "name": "level-mark",
            "label": "LevelMark",
            "data": {
              "body": "> 트리구조에서 [exportData](/docs/funcs/core/export-data), [down2Excel](/docs/funcs/excel/down-to-excel)를 사용하여 엑셀 다운 시 나타내고 싶은 트리구분자를 지정할 수 있다. > 기본적으로 트리구조를 엑셀, 텍스트 다운시 트리 구분자를 지원해주고 있다. > 트리구분자를 사용하고 싶지 않으면 `LevelMark: \"\"` 로 지정하면 트리구조에서 구분자를 사용하지 않을 수 있다. ### Type `string` ### Example ```javascript options.Cfg = { LevelMark: \"#\" // 트리구분자 변경. }; options.Cfg = { LevelMark: \"\" // 트리구분자를 사용하지 않음. }; ```",
              "see": [
                {
                  "label": "exportData method",
                  "url": "/docs/funcs/core/export-data"
                },
                {
                  "label": "down2Excel method",
                  "url": "/docs/funcs/excel/down-to-excel"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.6|기능 추가||excel, servermodule|1.1.11, 1.1.35|down2Excel 적용|"
            },
            "url": "docs/props/cfg/level-mark.html"
          },
          {
            "cid": 109,
            "sid": "load-excel-config",
            "name": "load-excel-config",
            "label": "LoadExcelConfig",
            "data": {
              "body": "> [loadExcel](/docs/funcs/excel/load-excel) 함수 호출시 들어가는 인자를 공통으로 설정합니다. > [CommontOptions (static)](/docs/static/common-options)에 Cfg속성에 설정하시면 모든 화면에서 [loadExcel](/docs/funcs/excel/load-excel) 함수 호출시 기본적인 속성을 설정하실 수 있습니다. ### Type `object` ### Options |Value|Description| |-----|-----| |`object`|[loadExcel](/docs/funcs/excel/load-excel) 함수에 들어가는 인자와 동일(각 화면에서 동일한 속성을 설정시 화면에서 설정한 값이 반영됩니다.)| ### Example ```javascript options.Cfg = { // 모든 화면에서 엑셀 업로드시 기본 속성을 설정 LoadExcelConfig: { \"append\": 1, \"mode\": \"HeaderSkip\" } }; ```",
              "see": [
                {
                  "label": "loadExcel method",
                  "url": "/docs/funcs/excel/load-excel"
                },
                {
                  "label": "CommontOptions static",
                  "url": "/docs/static/common-options"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/load-excel-config.html"
          },
          {
            "cid": 110,
            "sid": "load-text-config",
            "name": "load-text-config",
            "label": "LoadTextConfig",
            "data": {
              "body": "> [loadText](/docs/funcs/excel/load-text) 함수 호출시 들어가는 인자를 공통으로 설정합니다. > [CommontOptions (static)](/docs/static/common-options)에 Cfg속성에 설정하시면 모든 화면에서 [loadText](/docs/funcs/excel/load-text) 함수 호출시 기본적인 속성을 설정하실 수 있습니다. ### Type `object` ### Options |Value|Description| |-----|-----| |`object`|[loadText](/docs/funcs/excel/load-text) 함수에 들어가는 인자와 동일(각 화면에서 동일한 속성을 설정시 화면에서 설정한 값이 반영됩니다.)| ### Example ```javascript options.Cfg = { // 모든 화면에서 텍스트 업로드시 기본 속성을 설정 LoadTextConfig: { \"append\": 1 } }; ```",
              "see": [
                {
                  "label": "loadText method",
                  "url": "/docs/funcs/excel/load-text"
                },
                {
                  "label": "CommontOptions static",
                  "url": "/docs/static/common-options"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/load-text-config.html"
          },
          {
            "cid": 111,
            "sid": "main-col",
            "name": "main-col",
            "label": "MainCol",
            "data": {
              "body": "> 트리기능 사용시 트리를 보여줄 열을 설정합니다. > 지정한 열에서 트리의 접힘/펼침 아이콘이 보여지게 됩니다. > 반드시 하나의 열만 트리가 될 수 있습니다. > 트리를 사용시에는 조회 데이터도 트리에 맞춰서 구성되어야 합니다. (7장 [데이터구조](/docs/appx/data-structure)를 참고) ### Type `string` ### Options |Value|Description| |-----|-----| |`colName`|트리가 표시될 열이름| ### Example ```javascript options.Cfg = { MainCol: \"Emp_name\" // 시트 트리를 열이름이 \"Emp_name\"인 열에 표시 }; ``` ### Try it - [Demo of MainCol](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/MainCol/)",
              "see": [
                {
                  "label": "데이터 규격 appendix",
                  "url": "/docs/appx/data-structure"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/main-col.html"
          },
          {
            "cid": 112,
            "sid": "markup-tag-delimiter",
            "name": "markup-tag-delimiter",
            "label": "MarkupTagDelimiter",
            "data": {
              "body": "> [down2Excel](/docs/funcs/excel/down-to-excel)이나 [loadExcel](/docs/funcs/excel/load-excel) 처럼 `import/export` 함수 사용시 서버로 전송되는 전문의 구분자를 변경합니다. > 서버로 전송되는 전문은 `xml 과 유사한 구조`로 < 나 > 같은 기호를 이용하여 전문을 구성하게 되는데, 일부 서버에서 이러한 `html tag`를 필터링하여 다른 문자로 치환하는 경우 `ibsheet`의 서버 모듈에서 해석하지 못해 오류가 발생하곤 합니다. > 따라서 이러한 경우 <,>와 같은 테그가 아닌 다른 문자를 지정하여 서버로 전송할 수 있습니다. > 구분자는 4개가 있으며 이 속성을 통해 구분자를 변경시 서버사이드에서도 이 함수를 통해 동일한 구분자를 설정해야 합니다. ### Type `array` ### Options 기본 구분자 번호|기호 ---|--- 1|< 2|> 3|< 4|/> ### Example ```javascript options.Cfg = { MarkupTagDelimiter: [\"┼\",\"╫\",\"╬\",\"╪\"] }; ``` 서버측 설정 ```java down = new IBSheetDown(); //==================================================================================================== // [ 사용자 환경 설정 #1 ] //==================================================================================================== // 엑셀 전문의 MarkupTag Delimiter 사용자 정의 시 설정하세요. // 설정 값은 IBSheet8 환경설정(ibsheet.cfg)의 MarkupTagDelimiter 설정 값과 동일해야 합니다. //==================================================================================================== down.setMarkupTagDelimiter(\"┼\",\"╫\",\"╬\",\"╪\"); ```",
              "see": [
                {
                  "label": "down2Excel method",
                  "url": "/docs/funcs/excel/down-to-excel"
                },
                {
                  "label": "loadExcel method",
                  "url": "/docs/funcs/excel/load-excel"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/markup-tag-delimiter.html"
          },
          {
            "cid": 113,
            "sid": "max-pages",
            "name": "max-pages",
            "label": "MaxPages",
            "data": {
              "body": "> `SearchMode: 2` 인 경우, 시트가 한 번에 갖고 있는 페이지 수를 설정합니다. > 페이지 수가 클수록 많은 DOM을 갖게 됨으로 무거워 질 수 있습니다. > 페이지 수가 너무 적으면 스크롤을 움직일 때 마다 빈번하게 데이터 로딩이 일어날 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|갖고있는 페이지 수 (`default: 1`)| ### Example ```javascript options.Cfg ={ MaxPages: 5, //5개 페이지만 갖고 있음 }; ```",
              "see": [
                {
                  "label": "PageLength cfg",
                  "url": "/docs/props/cfg/page-length"
                },
                {
                  "label": "SearchMode cfg",
                  "url": "/docs/props/cfg/search-mode"
                },
                {
                  "label": "updateClientPaging method",
                  "url": "/docs/funcs/core/update-client-paging"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/max-pages.html"
          },
          {
            "cid": 114,
            "sid": "max-sort",
            "name": "max-sort",
            "label": "MaxSort",
            "data": {
              "body": "> 헤더 클릭을 이용한 연계 소팅의 최대 개수를 설정합니다. > 화면에 보이는 열만 사용할 수 있으며, 3개 이후부터는 성능이 느려질 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|연계 정렬 가능 열 수 (`default: 3`)| ### Example ```javascript options.Cfg = { MaxSort: 2, // 최대 2개 열만 연계 소팅을 처리함. }; ```",
              "see": [
                {
                  "label": "CanSort cfg",
                  "url": "./can-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/max-sort.html"
          },
          {
            "cid": 115,
            "sid": "max-v-scroll",
            "name": "max-v-scroll",
            "label": "MaxVScroll",
            "data": {
              "body": "> `NoVScroll` 을 사용하면서 해당 높이부터는 스크롤을 만들고 싶은 경우, 사용하는 기능으로써 해당 기능을 사용하면 스크롤이 생기는 높이를 지정할 수 있습니다. > > `주의` 해당 옵션은 시트 생성 시 시트가 생성된 Dom el의 높이를 변경하기 때문에 생성 이후 해당 옵션을 변경할 경우, 시트가 그려진 요소의 높이를 다시 설정해야 합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|스크롤이 생기는 최대 높이| ### Example ```javascript options = { Cfg:{ NoVScroll: 1, MaxVScroll: 500 } }; ```",
              "see": [
                {
                  "label": "NoVScroll cfg",
                  "url": "./no-v-scroll"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.23|기능 추가|"
            },
            "url": "docs/props/cfg/max-v-scroll.html"
          },
          {
            "cid": 116,
            "sid": "memo-id",
            "name": "memo-id",
            "label": "MemoId",
            "data": {
              "body": "> 시트에 메모기능을 사용하기 위해 필요한 고유한 id 값을 설정합니다. > 메모기능은 시트의 헤더 셀에 설정 가능합니다. > 메모기능이 설정된 헤더 셀에는 왼쪽 위에 빨간색 삼각형이 표시됩니다. > 메모기능이 설정된 헤더 셀에 마우스를 올렸을 경우 툴팁 형태로 메모값이 보여집니다. > 메모 값 설정을 위해서는 [showMemoDialog method](/docs/funcs/core/show-memo-dialog)를 통하여 셋팅 가능합니다. > 메모 데이터는 브라우저의 localStorage에 관리됩니다. ![MemoId](/assets/imgs/memoId0.png) ![MemoId](/assets/imgs/memoId1.png) ### Type `string` ### Example ```javascript options.Cfg = { MemoId: \"sheet1Memo\" // 메모기능을 사용하기 위한 시트의 메모 id 값 설정 }; ```",
              "see": [
                {
                  "label": "showMemoDialog method",
                  "url": "/docs/funcs/core/show-memo-dialog"
                },
                {
                  "label": "removeMemo method",
                  "url": "/docs/funcs/core/remove-memo"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.19|기능 추가|"
            },
            "url": "docs/props/cfg/memo-id.html"
          },
          {
            "cid": 117,
            "sid": "menu-buttons",
            "name": "menu-buttons",
            "label": "MenuButtons",
            "data": {
              "body": "> 기존의 아무설정 없이 [Enum](/docs/props/col/enum) 타입의 셀([Defaults](/docs/props/col/defaults) 포함)에서 `Menu.Buttons`의 순서는 `Clear, Ok` 순서로만 만들어지고 있다. > [Enum](/docs/props/col/enum) 타입의 셀([Defaults](/docs/props/col/defaults) 포함)에서 [Menu](/docs/appx/menu) 하단의 `Buttons`의 순서를 변경할 수 있다. > `Type`은 배열형태로 지원한다. ### Type `array` ### Example ```javascript options.Cfg = { MenuButtons: [\"Ok\", \"Clear\"], // 버튼의 순서를 Ok, Clear 순으로 변경한다. ... }; options.Col = [ { Header: '콤보(Enum)', Type: 'Enum', Name: 'ComboData', Width: 100, Align: 'Right', Enum: '|대기|진행중|완료', EnumKeys: '|01|02|03', Range: true, } ] ```",
              "see": [
                {
                  "label": "Defaults col",
                  "url": "/docs/props/col/defaults"
                },
                {
                  "label": "Enum col",
                  "url": "/docs/props/col/enum"
                },
                {
                  "label": "Range col",
                  "url": "/docs/props/col/range"
                },
                {
                  "label": "Menu appendix",
                  "url": "/docs/appx/menu"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
            },
            "url": "docs/props/cfg/menu-buttons.html"
          },
          {
            "cid": 118,
            "sid": "menu-h-separator",
            "name": "menu-h-separator",
            "label": "MenuHSeparator",
            "data": {
              "body": "> [Menu](/docs/props/col/menu) 사용시 아이템 구분자를 지정할 수 있습니다. > 더불어 `-`와 `-*`는 기본적으로 [EnumKeys](/docs/props/col/enum-keys) 옵션에 설정했을 때 구분자가 생성되는 예약어로 작동하는데, 만약 `-`, 혹은 `-*` 예약어를 [EnumKeys](/docs/props/col/enum-keys)에 직접 데이터로 넣고 싶으시다면 해당 옵션을 이용해 `-`, `-*` 이외의 문자열을 지정해주시면 됩니다. ![MenuHSeparator](/assets/imgs/MenuHSeparator.png \"여MenuHSeparator 기능\") ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|메뉴 아이템 구분자로 지정할 예약어| ### Example ```javascript options.Cfg = { MenuHSeparator : '!', // 메뉴 아이템 구분자로 지정할 예약어 --------를 표시할 구분자를 !로 변경 }; options.Cols = [ { Type: 'Enum', \"Enum\": \"|대기|-|진행중|완료\",\"EnumKeys\": \"|01|-|02|03|04\", Name: 'char' ... }, // '-'와 같은 구분자 예약어도 데이터로 사용가능 { Type: \"Text\", Menu: \"|진행|반려|전결|보류\", Name: \"procs\" ... } ]; ```",
              "see": [
                {
                  "label": "Enum col",
                  "url": "/docs/props/col/enum"
                },
                {
                  "label": "EnumKeys col",
                  "url": "/docs/props/col/enum-keys"
                },
                {
                  "label": "Menu col",
                  "url": "/docs/props/col/menu"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가|"
            },
            "url": "docs/props/cfg/menu-h-separator.html"
          },
          {
            "cid": 119,
            "sid": "menu-max-height",
            "name": "menu-max-height",
            "label": "MenuMaxHeight",
            "data": {
              "body": "> `(Col, Cell)Type`이 `Enum`인 열에서 열리는 메뉴의 최대 높이를 지정합니다. > `Suggest`로 열리는 메뉴에도 적용됩니다. ### Type `string` ### Example ```javascript options.Cfg = { MenuMaxHeight: 400 }; ```",
              "see": [
                {
                  "label": "Type col",
                  "url": "/docs/props/col/type"
                },
                {
                  "label": "Type cell",
                  "url": "/docs/props/cell/type"
                },
                {
                  "label": "Suggest col",
                  "url": "/docs/props/col/suggest"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/menu-max-height.html"
          },
          {
            "cid": 120,
            "sid": "menu",
            "name": "menu",
            "label": "Menu",
            "data": {
              "body": "> 마우스 우측 버튼 클릭 시 보여질 컨텍스트 메뉴를 설정합니다. > `InfoRow`를 제외한 시트의 다른행들에서 표시됩니다. ### Type mixed( `object` \\| `string` ) ### Options |Value|Description| |-----|-----| |`string`|첫글자를 구분자로 한 컨텍스트 메뉴스트링 지정 (ex: @저장@임시저장@취소 or *상신*취소) | |`object`|[Menu Object 설정 링크 참고](/docs/appx/menu) ### Example ```javascript // 문자열로 설정하는 경우 options.Cfg = { Menu: \"|행추가|행숨기기|행삭제\" }; // object로 설정하는 경우 options.Cfg = { Menu: { Items: [ { Name: \"Excel\", Value: \"xls\" }, { Name: \"text\", Value: \"txt\" }, { Name: \"pdf\", Value: \"pdf\" }, ], OnSave: function (item, data) { switch(item.Value){ case 'xls': try{ this.Sheet.down2Excel({FileName:\"test.xlsx\",SheetDesign:1}); }catch(e){ if(e.message.indexOf(\"down2Excel is not a function\")>-1){ console.log(\"%c 경고\",\"color:#FF0000\",\" : ibsheet-excel.js 파일이 필요합니다.\"); } } break; case 'txt': try{ this.Sheet.down2Text(); }catch(e){ if(e.message.indexOf(\"down2Text is not a function\")>-1){ console.log(\"%c 경고\",\"color:#FF0000\",\" : ibsheet-excel.js 파일이 필요합니다.\"); } } break; case 'pdf': try{ this.Sheet.down2Pdf(); }catch(e){ if(e.message.indexOf(\"down2Pdf is not a function\")>-1){ console.log(\"%c 경고\",\"color:#FF0000\",\" : ibsheet-excel.js 파일이 필요합니다.\"); } } break; } }; } }; ```",
              "see": [
                {
                  "label": "Menu appendix",
                  "url": "/docs/appx/menu"
                },
                {
                  "label": "MenuHSeparator cfg",
                  "url": "/docs/props/cfg/menu-h-separator"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/menu.html"
          },
          {
            "cid": 121,
            "sid": "merge-cells-match",
            "name": "merge-cells-match",
            "label": "MergeCellsMatch",
            "data": {
              "body": "> 머지된 데이터 수정시 전체 머지 영역의 데이터를 수정합니다. > [setValue](/docs/funcs/core/set-value)를 통한 값 변경 시에도 적용됩니다. > [onBeforeChange](/docs/events/on-before-change), [onAfterChange](/docs/events/on-after-change)는 값이 변경된 전체 셀 마다 발생합니다. > 해당 기능은 자동 머지([DataMerge](/docs/props/cfg/data-merge))를 이용한 머지 영역에서만 동작됩니다. > `주의` 복사붙여넣기(ctrl+c/ctrl+v) 를 통해 데이터를 수정할 때에는 셀 단위로 사용해야 합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|머지된 셀 수정시 첫번째 셀의 값만 변경 (`default`)| |`1(true)`|머지된 셀 수정시 전체 머지 영역의 값 변경| ### Example ```javascript options.Cfg = { MergeCellsMatch: true }; ```",
              "see": [
                {
                  "label": "DataMerge Cfg",
                  "url": "/docs/props/cfg/data-merge"
                },
                {
                  "label": "setValue Method",
                  "url": "/docs/funcs/core/set-value"
                },
                {
                  "label": "onBeforeChange Event",
                  "url": "/docs/events/on-before-change"
                },
                {
                  "label": "onAfterChange Event",
                  "url": "/docs/events/on-after-change"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가||core|8.1.0.49|복사붙여넣기를 통한 값 변경에도 기능 적용|"
            },
            "url": "docs/props/cfg/merge-cells-match.html"
          },
          {
            "cid": 122,
            "sid": "merge-height-adjust",
            "name": "merge-height-adjust",
            "label": "MergeHeightAdjust",
            "data": {
              "body": "> [HtmlPrefix](/docs/props/col/html-prefix)나 [HtmlPostfix](/docs/props/col/html-postfix)와 같이 Cell의 높이에 영향을 주는 기능을 사용할 경우, 병합 영역 또는 시트의 레이아웃 깨짐 현상이 발생 시, 병합 영역의 높이를 조정합니다. > 이 속성을 true로 설정 시, 시트 내의 병합 정보를 확인하여 수행됨으로써, 병합 정보 수에 따라 시트가 느려질 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|병합된 행의 높이 보정 안함 (`default`)| |`1(true)`|병합된 행의 높이 보정| ### Example ```javascript options.Cfg = { MergeHeightAdjust: 1 // 병합된 영역의 높이 보정 }; ```",
              "see": [
                {
                  "label": "HtmlPrefix row",
                  "url": "/docs/props/row/html-prefix"
                },
                {
                  "label": "HtmlPrefix col",
                  "url": "/docs/props/col/html-prefix"
                },
                {
                  "label": "HtmlPrefix cell",
                  "url": "/docs/props/cell/html-prefix"
                },
                {
                  "label": "HtmlPostfix row",
                  "url": "/docs/props/row/html-postfix"
                },
                {
                  "label": "HtmlPostfix col",
                  "url": "/docs/props/col/html-postfix"
                },
                {
                  "label": "HtmlPostfix cell",
                  "url": "/docs/props/cell/html-postfix"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.3|기능 추가|"
            },
            "url": "docs/props/cfg/merge-height-adjust.html"
          },
          {
            "cid": 123,
            "sid": "merge-visible-dom",
            "name": "merge-visible-dom",
            "label": "MergeVisibleDom",
            "data": {
              "body": "> [SearchMode](/docs/props/cfg/search-mode):0 에서 보이는 영역만 머지할지에 대한 여부를 설정합니다. > [MergeCellsMatch Cfg](/docs/props/cfg/merge-cells-match) 와 함께 사용시 보이지 않는 영역까지 머지된 셀에 대해서 데이터 값을 자동으로 바꾸게 할 수 있습니다. <!-- 해당 기능은 자동 머지([DataMerge](/docs/props/cfg/data-merge))를 이용한 머지 영역에서만 동작됩니다. --> ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|자동 머지시 전체 머지 영역의 값 병합| |`1(true)`|자동 머지시 보여지는 셀의 영역까지만 병합 (`default`)| ### Example ```javascript options.Cfg = { MergeVisibleDom: false }; ```",
              "see": [
                {
                  "label": "DataMerge Cfg",
                  "url": "/docs/props/cfg/data-merge"
                },
                {
                  "label": "MergeCellsMatch Cfg",
                  "url": "/docs/props/cfg/merge-cells-match"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.26|기능 추가|"
            },
            "url": "docs/props/cfg/merge-visible-dom.html"
          },
          {
            "cid": 124,
            "sid": "message-width",
            "name": "message-width",
            "label": "MessageWidth",
            "data": {
              "body": "> 시트 메시지 창의 최소 너비(`pixel`) 를 설정합니다. > [showMessage()](/docs/funcs/core/show-message)나 [showMessageTime()](/docs/funcs/core/show-message-time)과 같은 메소드를 통해 `Layer팝업` 형태로 시트 중앙에 표시되는 메세지 창의 너비를 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|메세지 창의 최소 너비 (`default: 140`)| ### Example ```javascript options.Cfg = { SuppressMessage: 0, // 시트의 모든 상태 메세지 표시 MessageWidth: 200, // 메세지 창의 너비를 200px 로 설정 ... }; ```",
              "see": [
                {
                  "label": "SuppressMessage cfg",
                  "url": "./suppress-message"
                },
                {
                  "label": "MoveMessage cfg",
                  "url": "./move-message"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/message-width.html"
          },
          {
            "cid": 125,
            "sid": "mid-width",
            "name": "mid-width",
            "label": "MidWidth",
            "data": {
              "body": "> 중앙 열 섹션의 최대 너비를 설정합니다. > 열 섹션의 열들이 설정된 너비보다 큰 경우 스크롤바가 생성됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|중앙 섹션의 총 너비| ### Example ```javascript options = { Cols:[ { //열 헤더 설정 Header: { Value: \"No\" // 헤더행의 SEQ 열에 해당하는 셀에 표시될 title 값 }, Name: \"SEQ\", // 행의 순서를 보여주는 열으로, 자동으로 순번이 시트에서 생성됩니다. }, { // 열 헤더 설정 Header: { Value: \"회사명3\" // 헤더행의 sCorp 열에 해당하는 셀에 표시될 title 값 }, Name: \"sCorp\", // colName 열이름을 설정 (Data와 Matching) Type: \"Text\" // 열 타입 }, ... ], Cfg :{ MidWidth: 500, // 중앙 열 섹션의 최대 너비 설정 } }; ```",
              "see": [
                {
                  "label": "LeftWidth cfg",
                  "url": "./left-width"
                },
                {
                  "label": "RightWidth cfg",
                  "url": "./right-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/mid-width.html"
          },
          {
            "cid": 126,
            "sid": "move-deselect-mode",
            "name": "move-deselect-mode",
            "label": "MoveDeselectMode",
            "data": {
              "body": "> 해당 옵션 설정 후 **방향키, 페이지 업다운 키, 홈 엔드 키** 입력시 현재 선택된 영역이 해제됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|방향키, 페이지 업다운 키, 홈 엔드 키 입력시에도 현재 선택된 영역이 해제되지 않음. (`default`)| |`1(true)`|방향키, 페이지 업다운 키, 홈 엔드 키 입력시 현재 선택된 영역 해제| ### Example ```javascript options.Cfg = { MoveDeselectMode: true }; ```",
              "see": [
                {
                  "label": "CanSelect cfg",
                  "url": "./can-select"
                },
                {
                  "label": "SelectingCells cfg",
                  "url": "./selecting-cells"
                },
                {
                  "label": "Selected row",
                  "url": "/docs/props/row/selected"
                },
                {
                  "label": "Selected col",
                  "url": "/docs/props/col/selected"
                },
                {
                  "label": "Selected cell",
                  "url": "/docs/props/cell/selected"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가|"
            },
            "url": "docs/props/cfg/move-deselect-mode.html"
          },
          {
            "cid": 127,
            "sid": "move-message",
            "name": "move-message",
            "label": "MoveMessage",
            "data": {
              "body": "> 시트 메시지 창의 드래그 여부를 설정합니다. > `1(true)`로 설정시 사용자가 메세지 장을 드래그를 통해 옮길 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|메세지 창의 드래그 불가능 (`default`)| |`1(true)`|메세지 창의 드래그 가능| ### Example ```javascript options.Cfg = { MoveMessage: 0, // 메세지 창 드래깅 가능 ... }; ```",
              "see": [
                {
                  "label": "SuppressMessage cfg",
                  "url": "./suppress-message"
                },
                {
                  "label": "MessageWidth cfg",
                  "url": "./message-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/move-message.html"
          },
          {
            "cid": 128,
            "sid": "msg-locale",
            "name": "msg-locale",
            "label": "MsgLocale",
            "data": {
              "body": "> 시트에서 사용할 언어(메세지 파일) Language Prefix를 설정합니다. > > 제품과 함께 배포되는 메세지 파일(ko.js,en.js등)안에 메세지 구조는 다음과 같습니다. ```js IBSMSG.[Language Prefix] = { \"Lang\": { // ... 중략 ... } } ``` > 한국어 외에 다른 나라 언어(메세지)를 사용하고자 하실 때는 해당 메세지 파일(js)를 import 하고, 그에 대한 Language Prefix값을 이 속성으로 설정하시면 됩니다. > <mark>**만약 이 속성을 설정하지 않은 경우에는 사용자 브라우저의 언어(navigator.language)을 확인하여 해당 값을 Language Prefix로 사용하게 됩니다.**<mark/> ### Type `string` ### Options |Value|Description| |-----|-----| |`Ko`|한국어 메세지| |`En`|영어 메세지| |`Jp`|일본어 메세지| |`Cn`|중국어 메세지| |`Etc`|직접 만든 다른 메세지 Prefix 사용 가능| ### Example ```html <!-- 영문 메세지 import --> <script src=\"./common/ibsheet/locale/en.js\"></script> ``` ```javascript options.Cfg = { \"MsgLocale\":\"En\" //영문 메세지 사용 }; ```",
              "see": [
                {
                  "label": "getLocale method",
                  "url": "/docs/funcs/core/get-locale"
                },
                {
                  "label": "setLocale method",
                  "url": "/docs/funcs/core/set-locale"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/msg-locale.html"
          },
          {
            "cid": 129,
            "sid": "multi-record-shape",
            "name": "multi-record-shape",
            "label": "MultiRecordShape",
            "data": {
              "body": "> 멀티레코드([MultiRecord](/docs/props/cfg/multi-record)) 기능을 사용하는 시트에서 엑셀 파일 다운로드를 보여지는 그대로 나타나게 하는 설정입니다. > 서버 모듈 다운로드([down2Excel](/docs/funcs/excel/down-to-excel))에 대해서만 지원됩니다. 클라이언트 모듈 다운로드([exportData](/docs/funcs/core/export-data))는 지원하지 않습니다. > 다이얼로그를 이용한 다운로드 하는 [showDownloadDialog](/docs/funcs/dialog/show-download-dialog)에서는 지원되지 않습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|열을 일렬로 표시해서 다운로드 (`default`)| |`1`|열을 시트에서 보이는대로 표시해서 다운로드| ### Example ```javascript options.Cfg = { MultiRecord: 1, // 멀티레코드 전용 시트로 설정 MultiRecordShape: 1, // 멀티레코드 시트의 모양대로 엑셀 파일 다운로드 ... }; // API 사용 sheet.down2Excel({ sheetDesign: 1, merge: 1 }); // 엑셀 다운로드 실행 ```",
              "see": [
                {
                  "label": "MultiRecord cfg",
                  "url": "/docs/props/cfg/multi-record"
                },
                {
                  "label": "down2Excel method",
                  "url": "/docs/funcs/excel/down-to-excel"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||excel|0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/multi-record-shape.html"
          },
          {
            "cid": 130,
            "sid": "multi-record",
            "name": "multi-record",
            "label": "MultiRecord",
            "data": {
              "body": "> 시트에서 하나의 데이터를 여러 줄로 표시하는 기능입니다. > 일반적인 시트는 헤더가 여러 개이더라도 데이터는 조회된 데이터(레코드)마다 하나의 행으로 표현되는데 이를 여러 행으로 표시되도록 하는 기능입니다. > 따라서, 기능 제약이 있고 그 기능 제약은 다음과 같습니다. (이외의 기능은 기본 시트의 동작과 동일합니다.) > * `소계 사용 불가` > * `그룹 사용 불가` > * `트리 사용 불가` > * `자동 병합 기능 사용 불가(생성할 때 RecordRowSpan 및 RecordColSpan으로만 병합기능 사용가능)` > * `동적으로 영역 병합 기능 사용 불가(생성할 때 RecordRowSpan 및 RecordColSpan으로만 병합기능 사용가능)` > * `열이동 불가` > * `생성할 때 Visible 속성 사용시 주의(생성할 때 가장 마지막 열에 생성하도록 권장)` > * `hideCol/showCol 불가(동적으로 컬럼 보임 여부 컨트롤 불가)` > * `동적으로 열 추가/삭제 불가(시트 생성할 때 정의된 Cols만 사용가능)` > * `셀/열 단위 선택 불가(행 단위 선택만 가능)` > * `셀/열 단위 복사/붙여넣기 불가(행 단위 복사/붙여넣기 가능)` > * `SelectionSummary 기능 사용 불가` > * `엑셀 다운로드/업로드 및 행 복사/붙여넣기는 모든 열이 일렬로 처리됨(모양이 유지되진 않음)` > * `doPrint 프린트 시 모든 열이 일렬로 처리됨(모양이 유지되진 않음)` > * `down2Pdf 다운로드 모든 열이 일렬로 처리됨(모양이 유지되진 않음)` > * `여러 헤더행 중에 최상단 행의 너비 기준으로 Width가 적용됨, 최상단 행을 제외한 Width 속성은 동작하지 않음` > * `RecordColSpan이 설정된 더미컬럼은 RelWidth 기능이 동작하지 않으며 동적으로 Width가 변하지 않음` > * `Def.Header.SortIcons: 1(모든 정렬 아이콘 표시기능)은 사용 불가` > * `LeftCols/RightCols 와 Type:\"Lines\"는 함께 사용 불가` ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|멀티레코드 기능 비활성화 (`default`)| |`1(true)`|멀티레코드 기능 활성화| ### Example ```javascript options.Cfg = { MultiRecord: true // 멀티레코드 전용 시트로 설정 ... }; // 멀티레코드 기능 사용시 열설정(1차원 배열 -> 2차원 배열) options.Cols = [ //첫번째 단위데이터행(DataRow) [ {Header: \"A\", Name: \"colA\", Type:\"Text\", Width: 100}, {Header: \"B\", Name: \"colB\", Type:\"Image\", Width: 100, RecordRowSpan: 3}, {Header: \"C\", Name: \"colC\", Type:\"Int\", Width: 100}, {Header: \"D\", Name: \"colD\", Type:\"Float\", Width: 100} ], //두번째 단위데이터행(DataRow) [ {Header: \"E\", Name: \"colE\", Type:\"Text\", Width: 100}, {Header: \"B\"}, {Header: \"F\", Name: \"colF\", Type:\"Enum\", Width: 100}, {Header: \"G\", Name: \"colG\", Type:\"Date\", Width: 100} ], //세번째 단위데이터행(DataRow) [ {Header: \"H\", Name: \"colH\", Type:\"Text\", Width: 100}, {Header: \"B\"}, {Header: \"I\", Name: \"colI\", Type:\"Text\", Width: 100, RecordColSpan: 2}, {Header: \"I\", Width: 120} // 더미컬럼 ] ]; // 멀티레코드 사용시 데이터(기존과 같음) data = [ {colA: \"data1_A\", colB: \"data1_B\", colC: 0, colD: 0.0, colE: \"data1_E\", colF: \"code1\" ,colG: \"20191017\", colH: \"data1_H\", colI: \"data1_I\"}, {colA: \"data2_A\", colB: \"data2_B\", colC: 1, colD: 1.0, colE: \"data2_E\", colF: \"code2\" ,colG: \"20191101\", colH: \"data2_H\", colI: \"data2_I\"}, ]; ```",
              "see": [
                {
                  "label": "RecordRowSpan col",
                  "url": "/docs/props/col/record-row-span"
                },
                {
                  "label": "RecordColSpan col",
                  "url": "/docs/props/col/record-col-span"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.4|엑셀 업로드/다운로드 다이얼로그 대응|"
            },
            "url": "docs/props/cfg/multi-record.html"
          },
          {
            "cid": 131,
            "sid": "no-data-message",
            "name": "no-data-message",
            "label": "NoDataMessage",
            "data": {
              "body": "> 빈 데이터로 시트 생성(IBSheet.create의 data인자), 조회 함수를 이용한 조회시 **\"조회된 데이터가 없습니다.\"** 라는 메세지 표시여부를 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|시트 생성, 조회 시 메세지 표시 안함.| |`1`|시트 생성 시에만 메세지 표시| |`2`|조회 시에만 메세지 표시 (`default`)| |`3`|시트 생성, 조회 시 메세지 표시| ### Example ```javascript options.Cfg = { NoDataMessage: 2, // 조회 함수를 이용한 조회 시에만 메세지 표시 ... }; ``` ### Try it - [Set to 3](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/NoDataMessage/)",
              "see": [
                {
                  "label": "create static",
                  "url": "/docs/static/create"
                },
                {
                  "label": "loadSearch method",
                  "url": "/docs/funcs/core/load-search-data"
                },
                {
                  "label": "doSearch method",
                  "url": "/docs/funcs/core/do-search"
                },
                {
                  "label": "doSearchPaging method",
                  "url": "/docs/funcs/core/do-search-paging"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.6|기능 추가|"
            },
            "url": "docs/props/cfg/no-data-message.html"
          },
          {
            "cid": 132,
            "sid": "no-data-middle",
            "name": "no-data-middle",
            "label": "NoDataMiddle",
            "data": {
              "body": "> 조회 된 데이터가 없는 경우 표시되는 NoData행을 화면 가운데에 표시합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|NoData행을 상단에 표시 (`default`)| |`1(true)`|NoData행을 화면 가운데에 표시| NoDataMiddle : 0 (`default`) ![NoDataMiddle:0](/assets/imgs/NoDataMiddle0.png \"NoDataMiddle:0\") NoDataMiddle : 1 ![NoDataMiddle:1](/assets/imgs/NoDataMiddle.png \"NoDataMiddle:1\") ### Example ```javascript options.Cfg = { NoDataMiddle: 1, // 조회된 데이터가 없는 경우 화면 가운데에 표시 ... }; ``` ### Try it - [True](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/NoDataMessage/)",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.1.0.36|기능 추가|"
            },
            "url": "docs/props/cfg/no-data-middle.html"
          },
          {
            "cid": 133,
            "sid": "no-format-escape",
            "name": "no-format-escape",
            "label": "NoFormatEscape",
            "data": {
              "body": "> 열 ([Col](/docs/props/col/format), [Cell](/docs/props/cell/format)) [Format](/docs/appx/format) 에 Html 태그로 사용되는 &, < 문자를 그대로 출력할지 여부를 설정합니다. > 해당 속성을 설정하지 않는 경우 text 열은 `0(false)`를, lines / number / date 타입은 `1(true)`를 기본값으로 가지게 됩니다. > `0(false)`를 설정시 &, < 문자는 그대로 출력되고, `1(true)`를 설정시 열 `(Col, Cell) Format` 에 HTML 태그를 넣어 사용할 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|**&, <** 문자가 그대로 출력 (`default: text 열`)| |`1(true)`|`HTML 태그`를 사용 (`default: lines, number, date 열`)| ### Example ```javascript options.Cfg = { NoFormatEscape: true, // (cell, col)Format 에 html 태그를 넣어 사용 ... }; ```",
              "see": [
                {
                  "label": "Format appendix",
                  "url": "/docs/appx/format"
                },
                {
                  "label": "Format col",
                  "url": "/docs/props/col/format"
                },
                {
                  "label": "Format cell",
                  "url": "/docs/props/cell/format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/no-format-escape.html"
          },
          {
            "cid": 134,
            "sid": "no-h-scroll",
            "name": "no-h-scroll",
            "label": "NoHScroll",
            "data": {
              "body": "> 시트에 가로스크롤바를 표시하지 않는 기능으로 시트 컬럼의 개수 만큼 너비가 결정됩니다. > 해당 기능은 `SearchMode: 0 (FastLoad)`에서는 사용할 수 없습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|시트내 가로 스크롤 사용 (`default`)| |`1(true)`|가로 스크롤 사용안함| ### Example ```javascript options = { Cfg:{ NoHScroll: true, //시트 내에 가로스크롤을 표시하지 않고, 너비를 조절함 }, }; ```",
              "see": [
                {
                  "label": "NoVScroll cfg",
                  "url": "./no-v-scroll"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/no-h-scroll.html"
          },
          {
            "cid": 135,
            "sid": "no-pivot-sort",
            "name": "no-pivot-sort",
            "label": "NoPivotSort",
            "data": {
              "body": "> 피벗 시트 생성시 원본 시트 데이터 정렬을 사용할지 여부를 결정합니다. > 정렬을 사용하는 경우 계산 대상의 행 정보 순서대로 정렬됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|피벗 시트 생성을 위한 원본 데이터 정렬 사용 (`default`)| |`1(true)`|피벗 시트 생성을 위한 원본 데이터 정렬 사용 안함| ### Example ```javascript options = { \"Cfg\":{ \"NoPivotSort\": 1, // 원본 시트 정렬 안함 } }; ```",
              "see": [
                {
                  "label": "UsePivot cfg",
                  "url": "./use-pivot"
                },
                {
                  "label": "makePivotTable method",
                  "url": "/docs/funcs/core/make-pivot-table"
                },
                {
                  "label": "switchPivotSheet method",
                  "url": "/docs/funcs/core/switch-pivot-sheet"
                },
                {
                  "label": "clearFilter method",
                  "url": "/docs/funcs/core/clear-filter"
                },
                {
                  "label": "setFilter method",
                  "url": "/docs/funcs/core/set-filter"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.12|기능 추가|"
            },
            "url": "docs/props/cfg/no-pivot-sort.html"
          },
          {
            "cid": 136,
            "sid": "no-render-hidden",
            "name": "no-render-hidden",
            "label": "NoRenderHidden",
            "data": {
              "body": "> 시트 생성후 최초 조회할 때 보이지 않는 컬럼은 Dom에 생성하지 않도록 합니다. > 해당 기능을 사용하면 보이지 않는 컬럼 (Visible: 0) 은 화면에 랜더링되지 않아 많은 컬럼이 있는 경우 보다 빠르게 랜더링 될 수 있습니다. > `주의` 단, 해당 옵션 사용 후 `showCol, hideCol` 을 이용하여 컬럼을 보이거나 숨기게 할 경우에는 반드시 `render` 인자를 `0` 으로 사용 후 마지막에 `rerender` 함수를 호출해야 합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|보이지 않는 컬럼(Visible:0) 을 Dom에 미리 생성함 (`default`)| |`1(true)`|보이지 않는 컬럼(Visible:0) 을 Dom에 미리 생성하지 않음| ### Example ```javascript options = { \"Cfg\":{ \"NoRenderHidden\": 1, // 보이지 않는 컬럼을 Dom 에 미리 생성하지 않도록 설정 } }; ```",
              "see": [
                {
                  "label": "showCol",
                  "url": "/docs/funcs/core/show-col"
                },
                {
                  "label": "hideCol",
                  "url": "/docs/funcs/core/hide-col"
                },
                {
                  "label": "rerender",
                  "url": "/docs/funcs/core/rerender"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.21|기능 추가|"
            },
            "url": "docs/props/cfg/no-render-hidden.html"
          },
          {
            "cid": 137,
            "sid": "no-tree-lines",
            "name": "no-tree-lines",
            "label": "NoTreeLines",
            "data": {
              "body": "> 트리를 사용하는 시트 생성시 노드와 노드 사이의 연결선을 표시할 지 여부를 설정합니다. > 1 로 설정시 단순한 접기/펼침 버튼 형태로 트리의 노드가 표현됩니다. ### ![NoTreeLines](/assets/imgs/noTreeLines.png \"NoTreeLines 사용\") [NoTreeLines: true] ![일반트리](/assets/imgs/tree.png \"일반 트리\") [일반트리] ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|노드 연결 선을 표시 (`default`)| |`1(true)`|노드 연결 선을 표시하지 않음| ### Example ```javascript options.Cfg = { NoTreeLines: true, //노드 연결선을 표시하지 않음. ... }; ```",
              "see": [
                {
                  "label": "MainCol cfg",
                  "url": "./main-col"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/no-tree-lines.html"
          },
          {
            "cid": 138,
            "sid": "no-v-scroll",
            "name": "no-v-scroll",
            "label": "NoVScroll",
            "data": {
              "body": "> 시트에 세로스크롤바를 표시하지 않는 기능으로 조회된 데이터의 갯수만큼 시트의 높이가 동적으로 변경됩니다. > `SearchMode: 1`이나 `SearchMode: 4,5`를 이용한 페이징 조회시에는, 전체 데이터에서 `PageLength`에 설정한 크기만큼 높이가 변경됩니다. > 해당 기능은 `SearchMode: 0`에서는 사용할 수 없습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|시트내 세로 스크롤 사용 (`default`)| |`1(true)`|세로 스크롤 사용안함| ### Example ```javascript options = { Cfg:{ NoVScroll: true //시트에 세로스크롤바를 표시하지 않고 전체 데이터 양에 따라 높이 자동 조절 } }; ```",
              "see": [
                {
                  "label": "NoHScroll cfg",
                  "url": "./no-h-scroll"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/no-v-scroll.html"
          },
          {
            "cid": 139,
            "sid": "page-length",
            "name": "page-length",
            "label": "PageLength",
            "data": {
              "body": "> 한 페이지(`Page`)에 표시할 행(`Row`) 의 개수를 설정합니다. > `SearchMode: 1 (클라이언트 페이징)`로 조회시 한 페이지에 표시되는 데이터 행수로 처리됩니다. > `SearchMode: 2 (LazyLoad)` 조회시 한 번에 조회되는 데이터는 `PageLength` 와 `MaxPages`(default 1) 로 계산된 데이터만큼 조회됩니다. > `SearchMode: 1,2,4,5`로 조회시 PageLength의 값이 너무 크면 성능이 떨어집니다. 20~100개 설정 권장합니다. > **<mark>주의</mark> : 서버페이징(SearchMode: 3,4,5) 사용 시 PageLength 값과 서버에서 받아오는 데이터의 갯수를 반드시 맞춰주셔야 합니다.(PageLength 설정하지 않았을 경우 기본값은 20 입니다)** ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|한 페이지 단위의 행수 (`default: 20`)| ### Example ```javascript options = { Cfg :{ PageLength: 30, // 한페이지당 표시할 행수 MaxPages: 5 // 렌더링될 페이지 수를 설정 } }; ```",
              "see": [
                {
                  "label": "MaxPages cfg",
                  "url": "/docs/props/cfg/max-pages"
                },
                {
                  "label": "goToPage method",
                  "url": "/docs/funcs/core/go-to-page"
                },
                {
                  "label": "updateClientPaging method",
                  "url": "/docs/funcs/core/update-client-paging"
                },
                {
                  "label": "updatePageLength method",
                  "url": "/docs/funcs/core/update-page-length"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/page-length.html"
          },
          {
            "cid": 140,
            "sid": "paste-cols",
            "name": "paste-cols",
            "label": "PasteCols",
            "data": {
              "body": "> `ctrl+v` 를 통해 클립보드의 내용을 시트에 붙여넣을 때, 어떤 열을 기준으로 데이터가 붙여넣어질지 설정합니다. > 맨 앞에 열 부터 붙여넣을 지, 포커스가 있는 위치 우측으로 붙여넣을 지 등을 설정할 수 있습니다. > [(col)CanCopyPaste](/docs/props/col/can-copy-paste)속성에 따라 붙여넣기 가능/불가능 여부가 결정됩니다. > 시트 내에서 드래그를 통한 선택은 [(cfg)SelectingCells](./selecting-cells)를 통해 설정가능합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|포커스가 된 열에만 붙여넣기가 됨.(포커스 된 셀을 기준으로 아래로 덮어씌움)| |`1`|포커스 위치와 무관하게 맨 왼쪽 열을 기준으로 보여지는 열에 붙여넣기가 됨.( `SelectingCells:0` 인 경우에 해당 값이 `default`)| |`2`|1번과 유사하게 왼쪽부터 붙여넣기가 되는데 히든된 열까지 포함해서 붙여넣기 함.| |`3`|포커스된 셀을 기준으로 우측, 아래로 붙여넣기 함.(`defaut`)| ### Example ```javascript options = { Cfg :{ PasteCols: 1 // 맨 왼쪽부터 보여지는 열에 붙여넣기 한다. } }; ```",
              "see": [
                {
                  "label": "CanCopyPaste col",
                  "url": "/docs/props/col/can-copy-paste"
                },
                {
                  "label": "SelectingCells cfg",
                  "url": "./selecting-cells"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/paste-cols.html"
          },
          {
            "cid": 141,
            "sid": "paste-focused",
            "name": "paste-focused",
            "label": "PasteFocused",
            "data": {
              "body": "> 시트에서 `ctrl+c` 로 복사한 데이터를 `ctrl+v` 로 붙여넣을때 데이터가 붙여질 방식을 설정합니다. > 붙여넣기를 할때는 반드시 해당 시트에 포커스된 행 또는 셀이 있어야 합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|포커스된 행에는 붙여넣기를 안함.| |`3`|포커스된 행과 그 하위 레벨의 행들만 붙여넣기 함. 만약 복사한 범위가 선택된 영역의 행 크기와 다를 경우 일치하지 않는 영역은 무시됨 (`default`)| |`6`|포커스된 행 상단에 신규행을 추가하여 붙여넣기 함.| |`9`|포커스된 행 하단으로 붙여넣기 하다가 더 이상 덮어씌울 행이 없는 경우에는 행을 추가하여 붙여넣기 함.| ### Example ```javascript options = { Cfg :{ PasteFocused: 6, // ctrl+v 시 신규행을 추가 } }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/paste-focused.html"
          },
          {
            "cid": 142,
            "sid": "paste-strict-mode",
            "name": "paste-strict-mode",
            "label": "PasteStrictMode",
            "data": {
              "body": "> `ctrl+v` 를 통해 클립보드의 내용을 시트에 붙여넣을 때, 타입에 맞는 데이터만 붙여넣기 하는 것을 허용할 지 여부를 설정합니다. > `Int`, `Float` 타입의 컬럼에 대해서 붙여넣기 할때, 숫자인지 엄격하게 검사합니다. > 천단위 구분 쉼표는 허용합니다. > `ibsheet-common.js (1.0.14-20241219-14)` 사용하실 경우 기본 값은 `1(true)` 로 설정 됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|숫자 데이터에 대해 정밀 검사하지 않음 (`default`)| |`1(true)`|숫자 데이터가 아닐 경우 붙여넣기 Skip.| ### Example ```javascript options.Cfg = { PasteStrictMode: 1 }; ```",
              "see": [
                {
                  "label": "event](/docs/events/on-after-paste)"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.13|기능 추가|"
            },
            "url": "docs/props/cfg/paste-strict-mode.html"
          },
          {
            "cid": 143,
            "sid": "pivot-format",
            "name": "pivot-format",
            "label": "PivotFormat",
            "data": {
              "body": "> 피벗 시트에 있는 셀들에 적용될 포맷을 설정합니다. ### Type `string` ### Example ```javascript options.Cfg = { UsePivot: true, // 피벗 사용 여부 PivotFormat: \"#,### 원\" // 시트 내 셀들의 포맷 }; ```",
              "see": [
                {
                  "label": "UsePivot cfg",
                  "url": "./use-pivot"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/pivot-format.html"
          },
          {
            "cid": 144,
            "sid": "pivot-func",
            "name": "pivot-func",
            "label": "PivotFunc",
            "data": {
              "body": "> 피벗 시트의 데이터 값을 도출할 때 사용할 함수를 설정합니다. > [AcceptPivotData cfg](./accept-pivot-data) 를 통해 여러 개의 데이터 컬럼을 설정한다면 `PivotFunc` 도 동일한 개수로 맞춰주어야 합니다. 구분자는 `,(쉼표)` 를 이용합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |Sum|원본 데이터행 셀 값들을 합하여 피벗 시트의 셀 값을 설정합니다. (`default`)| |Count|원본 데이터행 셀 개수를 카운팅하여 피벗 시트의 셀 값을 설정합니다.| |Max|원본 데이터행 셀 값들 중 최대값으로 피벗 시트의 셀 값을 설정합니다.| |Min|원본 데이터행 셀 값들 중 최소값으로 시트의 셀 값을 설정합니다.| ### Example ```javascript options.Cfg = { UsePivot: true, // 피벗 사용 여부 PivotFunc: \"Count,Sum\" // PivotDataCol이 2개인 경우 각각 설정할 DataType. 구분자는 ,(쉼표) }; ```",
              "see": [
                {
                  "label": "UsePivot cfg",
                  "url": "./use-pivot"
                },
                {
                  "label": "PivotFormat cfg",
                  "url": "./pivot-format"
                },
                {
                  "label": "AcceptPivotRows cfg",
                  "url": "./accept-pivot-rows"
                },
                {
                  "label": "AcceptPivotCols cfg",
                  "url": "./accept-pivot-cols"
                },
                {
                  "label": "AcceptPivotData cfg",
                  "url": "./accept-pivot-data"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.46|`Max`, `Min` 기능 추가||core|8.2.0.15|`PivotFunc` 각 데이터 별 적용되도록 기능 개선|"
            },
            "url": "docs/props/cfg/pivot-func.html"
          },
          {
            "cid": 145,
            "sid": "pivot-sum-position",
            "name": "pivot-sum-position",
            "label": "PivotSumPosition",
            "data": {
              "body": "> 피벗 시 합계행의 위치를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|하단 - 푸터 영역 (`default`)| |`1(true)`|상단 - 헤더 영역| ### Example ```javascript options.Cfg = { UsePivot: true, // 피벗 사용 여부 PivotSumPosition: true }; ```",
              "see": [
                {
                  "label": "UsePivot cfg",
                  "url": "./use-pivot"
                },
                {
                  "label": "AcceptPivotRows cfg",
                  "url": "./accept-pivot-rows"
                },
                {
                  "label": "AcceptPivotData cfg",
                  "url": "./accept-pivot-data"
                },
                {
                  "label": "AcceptPivotCols cfg",
                  "url": "./accept-pivot-cols"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
            },
            "url": "docs/props/cfg/pivot-sum-position.html"
          },
          {
            "cid": 146,
            "sid": "preserve-null",
            "name": "preserve-null",
            "label": "PreserveNull",
            "data": {
              "body": "> 사용자가 데이터를 null로 기입한 경우 시트 객체에 null 값 그대로 바인딩하고, `getSaveJson`으로 데이터 추출시 데이터를 \"\"이 아닌 null 값 그대로 추출합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| | `0` | 사용자가 데이터를 null로 기입해도 `getSaveJson`으로 데이터 추출할 때는 데이터가 \"\"으로 추출됨 (`default`)| | `1` | 사용자가 데이터를 null로 기입한 경우 `getSaveJson`으로 데이터 추출할 때 데이터가 null 값 그대로 추출됨 | ### Example ```javascript options = { Cfg :{ PreserveNull: 1, // 사용자가 데이터를 null로 기입한 경우 getSaveJson으로 데이터를 추출할 때 데이터가 null 값 그대로 추출됨 ... } }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.3.0.34|기능 추가|"
            },
            "url": "docs/props/cfg/preserve-null.html"
          },
          {
            "cid": 147,
            "sid": "prev-column-merge-mode",
            "name": "prev-column-merge-mode",
            "label": "PrevColumnMergeMode",
            "data": {
              "body": "> [SearchMode:2](/docs/props/cfg/search-mode)에서 셀을 머지하는 기준을 설정하는 옵션입니다. > [SearchMode:2](/docs/props/cfg/search-mode)는 머지된 모든 `Row`가 한 Table안에 그려지기 때문에 머지된 셀이 많은 경우 성능 문제가 발생할 수 있습니다. > `PrevColumnMergeMode:1`설정 시 [PageLength](/docs/props/cfg/page-length) 만큼 페이지 단위로 나누어 그려지기 때문에 시트 성능이 향상됩니다. ### **`PrevColumnMergeMode:0(default)`** ![prevColumnMergeMode:0](/assets/imgs/prevColumnMergemode0.png) **`PrevColumnMergeMode:1, PageLength:10`** ![prevColumnMergeMode:1](/assets/imgs/prevColumnMergemode1.png) ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`| 같은 값을 가지는 모든 셀을 머지함 (`default`)| |`1(true)`| 페이지 단위로 나누어 셀을 머지함 | ### Example ```javascript options = { Cfg: { PrevColumnMergeMode: 1, // 페이지 단위로 나누어 셀을 머지합니다. ... } }; ```",
              "see": [
                {
                  "label": "SearchMode cfg",
                  "url": "/docs/props/cfg/search-mode"
                },
                {
                  "label": "DataMerge cfg",
                  "url": "/docs/props/cfg/data-merge"
                },
                {
                  "label": "setAutoMerge method",
                  "url": "/docs/funcs/core/set-auto-merge"
                },
                {
                  "label": "PageLength cfg",
                  "url": "/docs/props/cfg/page-length"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.11|기능 추가||core|8.0.0.12|default 변경 (1 -> 0)|"
            },
            "url": "docs/props/cfg/prev-column-merge-mode.html"
          },
          {
            "cid": 148,
            "sid": "prev-column-merge",
            "name": "prev-column-merge",
            "label": "PrevColumnMerge",
            "data": {
              "body": "> 행 병합(위아래로 병합)시 각 열의 좌측 열의 병합 된 범위를 기준으로 병합하는 기능입니다. > (cfg)[DataMerge](/docs/props/cfg/data-merge)와 (cfg)[HeaderMerge](/docs/props/cfg/header-merge) 옵션이 설정되어 있어야 정상적으로 동작합니다. > 시트 생성 후 [setAutoMerge](/docs/funcs/core/set-auto-merge)메소드를 이용하여 병합을 동적으로 변경할 수 있습니다. > **<mark>주의</mark> : 소계([makeSubTotal (method)](/docs/funcs/core/make-sub-total))사용 시 해당 옵션에 설정한 값은 무시되고 `PrevColumnMerge : 1` 로 동작합니다.** ### ![prevColumnMerge](/assets/imgs/prevColumnMerge_base.png \"prevColumnMerge\") (col)[ColMerge](/docs/props/col/col-merge)값이 0인 컬럼은 탐색범위에서 제외됩니다.(좌측 컬럼이 ColMerge:0인 경우, 해당컬럼을 건너뛰고 좌측 컬럼을 기준으로 병합합니다) ![prevColumnMerge](/assets/imgs/prevColumnMerge_colMerge.png \"prevColumnMerge\") ### Type `number` ### Options |Value|Description| |-----|-----| |`0`| 전체영역에 앞컬럼 머지기능을 사용안함 (`default`)| |`1`| 데이터 영역에만 앞컬럼머지기능을 사용| |`2`| 헤더 영역에서만 앞컬럼머지기능을 사용| |`3`| 데이터 및 헤더 영역에서 앞컬럼머지 기능 사용| ### Example ```javascript options = { Cfg: { PrevColumnMerge: 1, // 시트 생성 시 앞 열 기준으로 셀 병합할지 여부를 설정합니다. ... } }; ``` ### Try it - [0 by default with setAutoMerge](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/Merge/)",
              "see": [
                {
                  "label": "HeaderMerge cfg",
                  "url": "/docs/props/cfg/header-merge"
                },
                {
                  "label": "DataMerge cfg",
                  "url": "/docs/props/cfg/data-merge"
                },
                {
                  "label": "ColMerge col",
                  "url": "/docs/props/col/col-merge"
                },
                {
                  "label": "setAutoMerge method",
                  "url": "/docs/funcs/core/set-auto-merge"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/prev-column-merge.html"
          },
          {
            "cid": 149,
            "sid": "range-enum-icon-left",
            "name": "range-enum-icon-left",
            "label": "RangeEnumIconLeft",
            "data": {
              "body": "> `Enum` 타입에 [Range](/docs/props/col/range) 속성 사용시 메뉴의 체크 박스 아이콘을 왼쪽에 위치시킬지 여부를 설정합니다 ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`| `Enum` 타입의 체크 박스를 오른쪽에 위치 (`default`)| |`1(true)`| `Enum` 타입의 체크 박스를 왼쪽에 위치| ### Example ```javascript options.Cfg = { RangeEnumIconLeft : true }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.8|기능 추가|"
            },
            "url": "docs/props/cfg/range-enum-icon-left.html"
          },
          {
            "cid": 150,
            "sid": "remove-custom-format-delimiter",
            "name": "remove-custom-format-delimiter",
            "label": "RemoveCustomFormatDelimiter",
            "data": {
              "body": "> 데이터 로드시 설정된 CustomFormat 과 동일한 포멧일시 구분자를 제거하는 기능을 추가합니다. > 동일한 CustomFormat 이 제대로 적용되도록 하기 위해 원본데이터를 구분자를 제거한 데이터로 치환합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|구분자를 제거하지 않음 (`default`)| |`1(true)`|설정된 CustomFormat 과 동일한 포멧일시 구분자를 제거| ### Example ```javascript options.Cfg = { RemoveCustomFormatDelimiter: true // 웹 접근성 모드 사용 }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.24|기능 추가|"
            },
            "url": "docs/props/cfg/remove-custom-format-delimiter.html"
          },
          {
            "cid": 151,
            "sid": "remove-sep-req-value",
            "name": "remove-sep-req-value",
            "label": "RemoveSepReqValue",
            "data": {
              "body": "> `getSaveJson, getSaveString, doSave` 와 같은 서버로 데이터를 보내는 경우, 데이터와 `CustomFormat` 의 형태가 일치할시 `CustomFormat` 의 구분자를 제거해서 서버로 보내는 기능입니다. > 해당 기능의 경우, 사용자가 직접 커스터마이징한 포멧은 사용할 수 없고 시트에서 제공하는 6가지 포멧의 형태만 지원합니다. `[\"IdNo\", \"IdNoMask\", \"PostNo\", \"SaupNo\", \"CardNo\", \"PhoneNo\"]` ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|원본 데이터 그대로 보냄. (`default`)| |`1(true)`|데이터와 `CustomFormat` 의 형태가 일치할시, 데이터의 구분자를 제거하여 서버로 보냄.| ### Example ```javascript options.Cfg = { \"RemoveSepReqValue\": true }; ``` ```javascript Cols = [ { ... CustomFormat: \"IdNo\" Name: \"idnoformat\" ... }, { ... CustomFormat: \"######-#######\", Name: \"userformat\" ... } ]; data = [ { idnoformat: \"123456-1234567\", userformat: \"123456-1234567\" } ]; var saveStr = sheet.getSaveJson(0); console.log(saveStr); /* idnoformat: \"1234561234567\", // IdNo 형식에 맞아 해당 구분자를 제거하고 데이터를 보냄. userformat: \"123456-1234567\" // 유저가 직접 만든 포멧은 적용되지 않고 원본 데이터를 그대로 보냄. */ ```",
              "see": [
                {
                  "label": "CustomFormat col",
                  "url": "/docs/props/col/custom-format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.19|기능 추가|"
            },
            "url": "docs/props/cfg/remove-sep-req-value.html"
          },
          {
            "cid": 152,
            "sid": "req-status-name",
            "name": "req-status-name",
            "label": "ReqStatusName",
            "data": {
              "body": "> 저장 함수([doSave](/docs/funcs/core/do-save), [getSaveString](/docs/funcs/core/get-save-string), [getSaveJson](/docs/funcs/core/get-save-json)) 호출시 각 행의 상태(`Added`, `Changed`, `Deleted`)에 대해서 전달하는 변수 명을 설정합니다. > 별도의 설정이 없는 경우에는 `\"STATUS\"`로 전달 됩니다. > 서버로 전달할 상태값은 `local/언어.js` 파일 안에 문자열(`\"ReqStatusAdded\": \"Added\"`\\(I\\), `\"ReqStatusChanged\": \"Changed\"`\\(U\\), `\"ReqStatusDeleted\": \"Deleted\"`\\(D\\), `\"ReqStatusEmpty\": \"\"`\\(R\\))을 수정하면 됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|서버로 전송될 상태 명 (`default: STATUS`)| ### Example ```javascript options.Cfg = { \"ReqStatusName\": \"mySheet_st\" }; ``` //실제 서버로 전송시 다음과 같이 전달 됩니다. ```javascript var saveStr = sheet.getSaveString(); //saveStr //mySheet_st=Changed&ColName1=chris&ColName2=43 ... ```",
              "see": [
                {
                  "label": "doSave method",
                  "url": "/docs/funcs/core/do-save"
                },
                {
                  "label": "getSaveString method",
                  "url": "/docs/funcs/core/get-save-string"
                },
                {
                  "label": "getSaveJson method",
                  "url": "/docs/funcs/core/get-save-json"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/req-status-name.html"
          },
          {
            "cid": 153,
            "sid": "required-image",
            "name": "required-image",
            "label": "RequiredImage",
            "data": {
              "body": "> 필수 입력 항목 이미지를 기본 이미지와 다르게 바꾸고 싶은 경우, 필수 입력 항목에 대한 표시 이미지 경로를 설정 합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|필수 입력 항목 이미지 경로| ### Example ```javascript options = { Cfg:{ RequiredImage: \"./required.png\", // 필수 입력 항목 이미지 경로를 설정 }, }; ```",
              "see": [
                {
                  "label": "Required col",
                  "url": "/docs/props/col/required"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.23|기능 추가|"
            },
            "url": "docs/props/cfg/required-image.html"
          },
          {
            "cid": 154,
            "sid": "required-position",
            "name": "required-position",
            "label": "RequiredPosition",
            "data": {
              "body": "> [Required](/docs/props/col/required)가 보여질 위치를 설정합니다. ### Type String ### Options |Value|Description| |-----|-----| |`Left`|헤더의 왼쪽에 `Required` 표시를 합니다. (`default`) ![option1](/assets/imgs/required1.png \"option1\")| |`Right`|헤더의 오른쪽에 `Required` 표시를 합니다 ![option2](/assets/imgs/required2.png \"option2\")| |`None`|헤더에 `Required` 마크를 표시하지 않습니다 | ### Example ```javascript options = { Cfg:{ RequiredPosition: \"Right\", // 헤더의 오른쪽에 Required를 설정 }, Cols : [ {Type: \"Text\", Name: \"sName\", Required: 1 ...}, {Type: \"Int\", Name: \"ssalary\",Width: 70 ...}, ... ]; }; ```",
              "see": [
                {
                  "label": "Required col",
                  "url": "/docs/props/col/required"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.2.0.13|`None` 옵션 추가|"
            },
            "url": "docs/props/cfg/required-position.html"
          },
          {
            "cid": 155,
            "sid": "right-width",
            "name": "right-width",
            "label": "RightWidth",
            "data": {
              "body": "> 오른쪽 고정 열 섹션의 최대 너비를 설정합니다. > 오른쪽 열 섹션의 열들이 설정된 너비보다 큰 경우 스크롤바가 생성됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|오른쪽 섹션의 총 너비| ### Example ```javascript options = { RightCols:[ { //열 헤더 설정 Header: { Value: \"No\" // 헤더행의 SEQ 열에 해당하는 셀에 표시될 title 값 }, Name: \"SEQ\", // 행의 순서를 보여주는 열으로, 자동으로 순번이 시트에서 생성됩니다. }, { // 열 헤더 설정 Header: { Value: \"회사명3\" // 헤더행의 sCorp 열에 해당하는 셀에 표시될 title 값 }, Name: \"sCorp\", // colName 열이름을 설정 (Data와 Matching) Type: \"Text\" // 열 타입 } ], Cfg :{ RightWidth:200, // 오른쪽 열 섹션의 최대 너비 설정 } }; ```",
              "see": [
                {
                  "label": "MidWidth cfg",
                  "url": "./mid-width"
                },
                {
                  "label": "LeftWidth cfg",
                  "url": "./left-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/right-width.html"
          },
          {
            "cid": 156,
            "sid": "row-index",
            "name": "row-index",
            "label": "RowIndex",
            "data": {
              "body": "> `SEQ`의 기능을 대신할 컬럼명을 변경할 수 있습니다. 해당 기능에 컬럼명을 넣어주면, `SEQ`기능을 해당 컬럼에서 대신 사용할 수 있습니다. ### Type `string` ### Example ```javascript options.Cfg = { RowIndex: \"AAA\" // SEQ의 기능을 대신할 컬럼명 }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.10|기능 추가|"
            },
            "url": "docs/props/cfg/row-index.html"
          },
          {
            "cid": 157,
            "sid": "save-html-char",
            "name": "save-html-char",
            "label": "SaveHTMLChar",
            "data": {
              "body": "> `doSave (queryMode: 0)` 저장시 `<, >, &`가 `NameCode`로 변환되지 않고 그대로 저장됩니다. > **해당 옵션 사용시 xss (Cross-Site Scripting) 문제가 발생할 수 있으므로 사용에 주의 바랍니다.** ### Type `boolean` ### Options |Value|Description| |-----|-----| | `0(false)` | `<, >, &`가 각각 `&lt;`, `&gt;`, `&amp;`로 변환되어 전송 됨 (`default`)| | `1(true)` | `<, >, &` 문자 그대로 전송됨| ### Example ```javascript options.Cfg = { SaveHTMLChar: 1 // <, >, & 그대로 서버 전송 }; sheet.doSave({url}) ```",
              "see": [
                {
                  "label": "doSave method",
                  "url": "/docs/funcs/core/do-save"
                },
                {
                  "label": "UnescapeHTML col",
                  "url": "/docs/props/col/unescape-html"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.22|기능 추가|"
            },
            "url": "docs/props/cfg/save-html-char.html"
          },
          {
            "cid": 158,
            "sid": "scale",
            "name": "scale",
            "label": "Scale",
            "data": {
              "body": "> 주어진 배율(zoom factor)에 따라 시트 전체를 확대하거나 축소합니다. > 1.0보다 작은 값은 시트를 축소합니다. (0.1 미만으로 사용하실 수 없습니다.) > 1.0보다 큰 값은 시트를 확대합니다. > **<mark>주의</mark> : 해당 속성은 `Menu`, `Dialog`, `Message`에는 영향을 주지 않습니다.** > **<mark>주의</mark> : 시트 div의 너비나 높이를 100%와 같이 비율로 설정하여 사용하시는 경우 `NoVScroll`이나 `NoHScroll`을 같이 사용하실 때, 설정하신 배율에 따라 시트의 영역 전체가 확대/축소 될 수 있습니다.** ### Type `number` ### Options |Value|Description| |-----|-----| |number|시트의 배율 설정 (`default: 1.0`)| ### Example ```javascript options.Cfg = { Scale: 0.5 // 시트를 0.5배로 출력합니다다. }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.3.0.11|기능 추가|"
            },
            "url": "docs/props/cfg/scale.html"
          },
          {
            "cid": 159,
            "sid": "scroll-left",
            "name": "scroll-left",
            "label": "ScrollLeft",
            "data": {
              "body": "> 중앙 열 섹션 (일반적인 Cols 영역) 의 가로 스크롤이 생성되는 시트에서 > 가로 스크롤의 스크롤바 위치를 좌측 기준으로 얼마만큼 이동하여 보여줄지를 설정합니다. (`단위: pixel`) > 스크롤 위치값을 0 이상으로 설정하는 경우 가로 스크롤 바가 이동하여 해당 위치의 데이터가 보여집니다. ### Type `number` ### Options |Value|Description| |-----|-----| |number|세로 스크롤의 위치 (`단위: pixel`) (`default: 0`)| ### Example ```javascript options.Cfg = { ScrollLeft: 50 // 세로 스크롤의 시작점에서 스크롤바가 50px 이동하여 해당 위치의 데이터를 보여줌. }; ```",
              "see": [
                {
                  "label": "ScrollTop cfg",
                  "url": "./scroll-top"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/scroll-left.html"
          },
          {
            "cid": 160,
            "sid": "scroll-over-sheet",
            "name": "scroll-over-sheet",
            "label": "ScrollOverSheet",
            "data": {
              "body": "> 시트와 브라우저에서 세로 스크롤이 있을 때 시트에서 스크롤이 끝난 후, 상위 부모의 스크롤이 동작하도록 하는 기능 ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|기능 사용 안함 (`default`)| |`1(true)`|세로 스크롤이 끝난 후, 상위 부모의 스크롤이 동작합니다.| ### Example ```javascript // 시트의 스크롤이 끝난 후, 부모의 스크롤이 동작하도록 기능 사용 options.Cfg = { ScrollOverSheet: true }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.18|기능 추가|"
            },
            "url": "docs/props/cfg/scroll-over-sheet.html"
          },
          {
            "cid": 161,
            "sid": "scroll-paging-server-sort",
            "name": "scroll-paging-server-sort",
            "label": "ScrollPagingServerSort",
            "data": {
              "body": "> 스크롤 페이징 사용 시([SearchMode](./search-mode): 3)을 사용하며 서버 소팅을 사용하고 싶은 경우 설정하는 옵션입니다. 설정시, 소팅할 때 소팅 정보를 서버에 보내고, 결과를 조회합니다. ### Type `boolean` ### Options |Value|Description| |---|---| |`0(false)`|Sort 정보를 서버에 보내지 않고, 현재 보여지는 페이지에 대해서만 정렬합니다. (`default`)| |`1(true)`|Sort 정보를 서버에 보내고, 결과를 조회합니다.| ### Example ```javascript options.Cfg = { ScrollPagingServerSort: true // 소팅시 소팅 정보를 서버에 보내고, 결과를 조회합니다. }; ```",
              "see": [
                {
                  "label": "SearchMode cfg",
                  "url": "./search-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.6|기능 추가|"
            },
            "url": "docs/props/cfg/scroll-paging-server-sort.html"
          },
          {
            "cid": 162,
            "sid": "scroll-top",
            "name": "scroll-top",
            "label": "ScrollTop",
            "data": {
              "body": "> 시트의 세로 스크롤바 위치를 설정합니다. (단위: `pixel`) > 스크롤바의 위치값을 0 이상으로 설정하는 경우 이동된 스크롤 바 위치의 데이터가 보여집니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|세로 스크롤바의 위치 (`단위: pixel`) (`default: 0`)| ### Example ```javascript options.Cfg = { ScrollTop: 100 // 상단 스크롤의 스크롤바 시작점에서 100px 이동하여 해당 위치의 데이터를 보여줌. }; ```",
              "see": [
                {
                  "label": "ScrollLeft cfg",
                  "url": "./scroll-left"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/scroll-top.html"
          },
          {
            "cid": 163,
            "sid": "search-case-sensitive",
            "name": "search-case-sensitive",
            "label": "SearchCaseSensitive",
            "data": {
              "body": "> 검색어가 영문(혹은 대/소문자를 구분하는 언어)에서 대/소문자를 구분해서 검색하도록 설정할 수 있습니다. > 기본값은 `0(false)`입니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|검색 시 대/소문자를 구분하지 않습니다.(`defalut`)| |`1(true)`|검색 시 대/소문자를 구분합니다.| ### Example ```javascript options.Cfg = { SearchCaseSensitive: true // 검색 기능 사용시 영문의 대/소문자 구분해서 검색 }; ```",
              "see": [
                {
                  "label": "SearchCount cfg",
                  "url": "./search-count"
                },
                {
                  "label": "SearchExpression cfg",
                  "url": "./search-expression"
                },
                {
                  "label": "findRows method",
                  "url": "/docs/funcs/core/find-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/search-case-sensitive.html"
          },
          {
            "cid": 164,
            "sid": "search-cells",
            "name": "search-cells",
            "label": "SearchCells",
            "data": {
              "body": "> 찾기 행 사용 시 행 단위로 검색할지 셀 단위로 검색할지 여부를 선택할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|행 단위로 검색 (`default`) ex) 찾기 행에 \"가방 영국\" 입력 시 행 내 셀들 중 \"가방\"과 \"영국\"을 포함하는 셀이 하나 이상 있는 경우(한 셀이 \"가방\", 다른 한 셀이 \"영국\"을 가지는 경우도 포함) 해당 행이 검색됨| |`1`|셀 단위로 검색 ex) 찾기 행에 \"가방 영국\" 입력 시 \"가방\"과 \"영국\" 두 개의 단어를 모두 포함하는 셀만 검색됨| ### Example ```javascript options.Cfg = { SearchCells: 0, }; ```",
              "see": [
                {
                  "label": "Solid appendix",
                  "url": "/docs/appx/solid"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/search-cells.html"
          },
          {
            "cid": 165,
            "sid": "search-count",
            "name": "search-count",
            "label": "SearchCount",
            "data": {
              "body": "> `Search` 행 사용시 제공되는 읽기 전용 옵션으로, `선택(Select), 마킹(Mark)` 동작에 의해 표시된 행들의 개수를 반환합니다. > `Search` 행에서 `Filter/Find/FindPrev` 동작을 실행하는 경우 `SearchCount` 옵션은 빈 값으로 변경됩니다. ### Type `number` ### Example ```javascript // Search행 설정할 때 사용 시 options.Solid = [{ Kind: \"Search\", // Kind : 커스텀 행의 Kind를 지정합니다.{가능한 행 종류 : Header, Filter, Search, Group, Space, Data} Space: 1, // Space : 커스텀 Row가 위치할 곳을 설정합니다 {-1: 테이블 상단 영역, 0: Head 영역, 1: Body와 Head 사이, 2: Body와 Foot 사이 빈공간, 3: Foot 바로 위, 4: Foot 아래 툴바위치, 5:하단 테이블 밖} Cells: \"Expression,Sep1,Counts,Filter,Select,Mark,FindPrev,Find,Clear,Sep2\", // 커스텀 행 내에 Cell들을 생성하고 id를 부여함. Defs, Case, Type, Cols, List, Search, Actions, Expression, Filter, Select, Mark, Find, FindPrev, Clear, Help는 내장 설정 예약어 Expression: { // 검색하기 위한 expression 설정 Action: \"Last\", // expression 셀 내용이 변경되었을때 취할 동작에 대한 설정, Last로 설정시 사용자가 직전에 했던 동작을 실행합니다(필터를 이전에 사용했다면 필터를 사용). NoColor: 0, // 셀이 css style의 컬러(Color, Background)를 가질지 여부 CanFocus: 1, Left: \"5\", // 셀 좌측에 지정한 px 만큼의 빈 공간 생성 MinWidth: \"90\", // 최소 너비 px 단위 EmptyValue: \"<s>검색어를 입력해 주세요</s>\" // input의 placeholder 속성과 동일한 기능으로 Value가 없을 경우 지정된 값을 노출합니다 }, Sep1: { Width: \"10\", Type: \"Html\" }, Counts: { Width: \"50\", CanFocus:0, Type: \"html\", Formula: \"(Sheet.SearchCount ? Sheet.SearchCount : (Sheet.FilterCount ? Sheet.FilterCount : count(7))) +'개'\" }, // filter, select 등의 버튼 클릭시 화면에 보이는 행의 개수를 세어 셀 값으로 사용. Filter: { ButtonText: \"필터\" }, Select: { ButtonText: \"선택\" }, Mark: { ButtonText: \"마킹\" }, FindPrev:{ ButtonText: \"(위로)찾기\", Width: \"70\" }, Find: { ButtonText: \"(아래로)찾기\", Width: \"70\" }, Clear: { ButtonText: \"클리어\", Width: \"50\" }, Sep2: { Width: \"5\", Type: \"Html\" } }] ```",
              "see": [
                {
                  "label": "FilterCount cfg",
                  "url": "./filter-count"
                },
                {
                  "label": "SearchCaseSensitive cfg",
                  "url": "./search-case-sensitive"
                },
                {
                  "label": "SearchExpression cfg",
                  "url": "./search-expression"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/search-count.html"
          },
          {
            "cid": 166,
            "sid": "search-expression",
            "name": "search-expression",
            "label": "SearchExpression",
            "data": {
              "body": "> 시트에서 검색할 문자열을 설정합니다. > 구글에서 검색하듯이 일반적인 문자열 및 검색 조건을 사용할 수 있습니다. ### Type `string` ### 검색 조건 |Name| Description | |----------|----| |`'-서울'`| `서울`을 제외하고 검색 | |`'서울 OR 경기'`| `서울`과 `경기`를 검색 | |`'#'`| 셀값이 하나라도 비어있는 데이터 행을 검색 | ### Example ```javascript // 대/소문자를 구분해서 시트에 'Seoul'을 포함한 데이터 행을 검색 sheet.SearchCaseSensitive = true; sheet.SearchExpression = \"Seoul\"; sheet.findRows('Find'); ```",
              "see": [
                {
                  "label": "SearchCount cfg",
                  "url": "./search-count"
                },
                {
                  "label": "SearchCaseSensitive cfg",
                  "url": "./search-case-sensitive"
                },
                {
                  "label": "findRows method",
                  "url": "/docs/funcs/core/find-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/search-expression.html"
          },
          {
            "cid": 167,
            "sid": "search-mode",
            "name": "search-mode",
            "label": "SearchMode",
            "data": {
              "body": "> 시트의 데이터 조회 모드를 설정합니다. ### Type `number` ### Options |Value|Mode|Description| |-----|-----|------| |`0`|**FastLoad 모드 (가상스크롤 처리 방식)**|`IBSheet8`의 FastLoad 모드(SearchMode: 0)는 가상 스크롤 기반으로, 사용자가 세로 스크롤시 보이는 영역의 데이터만 즉시 갱신합니다. 이로 인해 사용자는 스크롤과 동시에 화면의 끊김 없이 행의 데이터를 바로 확인할 수 있습니다. 해당 기능을 사용시 각 행의 높이는 모두 동일해야 하며, [(Appendix)기능에 제약사항](/docs/appx/fastload-constraints)이 있습니다. 데이터행의 높이가 일정하지 않다면 [(Cfg)AutoRowHeight](./auto-row-height)를 설정하시기 바랍니다.| |`1`|**ClientPaging** |전체 데이터를 조회하고 [(Cfg)PageLength](./page-length)속성 설정값만큼 페이징 처리 후 페이지 네비게이션을 통해 보여주는 기능입니다. [(Method)updateClientPaging](/docs/funcs/core/update-client-paging) 함수를 이용해서 동적으로 페이지의 개수를 변경하고 재계산할 수 있습니다. 페이지 네비게이션은 [InfoRowConfig](/docs/props/cfg/info-row-config)에서 사용할 수 있습니다. **<mark>주의</mark> : `(Method) makeSubTotal` 지원하지 않습니다.**| |`2`|**LazyLoad (default)**|전체 데이터를 조회 하고 [(Cfg)PageLength](./page-length)속성 설정값 단위로 스크롤 위치에 따라 데이터를 화면에 표시하는 기능입니다.| |`3`|**ScrollAppend**|[(Cfg)PageLength](./page-length)에 지정된 개수만큼 한 페이지씩 조회하여 화면에 표시하는 기능입니다. 조회는 반드시 [(Method)doSearchPaging](/docs/funcs/core/do-search-paging)함수를 통해 수행해야 합니다. 사용자가 세로 스크롤을 하단까지 내릴 경우, [(Method)doSearchPaging](/docs/funcs/core/do-search-paging)에서 호출한 URL을 다시 요청하여 다음 페이지 데이터를 기존 데이터 아래 추가(Append) 합니다. 서버는 시트로 부터 넘어오는 페이지 정보(ibpage=2,3,4...)에 따라 페이징 쿼리를 구성하여 각 페이지별 데이터를 리턴해야 합니다. 조회 데이터에 **Total**(전체 record 수) 속성이 포함되어 있어야 합니다. **Total**값과 누적 데이터 수가 같아지면 더 이상 서버 호출은 발생하지 않습니다. 한번 조회한 페이지는 재요청없이 재사용 됩니다. `Sort`, `Filter`, `엑셀 다운로드` 등은 조회한 데이터 안에서만 동작 합니다. **<mark>주의</mark>** : `Type:Lines, Img`나 `Wrap:1` 과 같이 데이터 행의 높이가 일정하지 않은 속성은 사용할 수 없습니다. `(Col) FormulaRow` 사용 할 수 없습니다. `(Method) makeSubTotal` 지원하지 않습니다. PageLength 값과 서버에서 받아오는 데이터의 갯수를 반드시 동일하게 설정해야 합니다.**| |`4`|**ServerPaging**|[(Cfg)PageLength](./page-length)에 지정된 개수만큼 한 페이지씩 조회하여 화면에 표시하는 기능입니다. 조회는 반드시 [(Method)doSearchPaging](/docs/funcs/core/do-search-paging)함수를 통해 수행해야 합니다. [InfoRowConfig](/docs/props/cfg/info-row-config)를 사용해 페이지 네비게이션 UI를 표시할 수 있습니다. 페이지 번호 변경시 [(Method)doSearchPaging](/docs/funcs/core/do-search-paging)이 호출한 URL을 다시 요청하여 해당 페이지 데이터를 표시합니다. 서버는 시트로 부터 넘어오는 페이지 정보(ibpage=2,3,4...)에 따라 페이징 쿼리를 구성하여 각 페이지별 데이터를 리턴해야 합니다. 조회 데이터에 **Total**(전체 record 수) 속성이 포함되어 있어야 합니다. 한번 조회한 페이지는 서버를 다시 호출하지 않습니다. `Filter`, `엑셀 다운로드` 등은 조회한 데이터 안에서만 동작 합니다. `Sort`는 [SortCurrentPage](./sort-current-page)에 의해서 동작합니다. **<mark>주의</mark> : `(Col) FormulaRow` 사용 할 수 없습니다. `(Method) makeSubTotal` 지원하지 않습니다. PageLength 값과 서버에서 받아오는 데이터의 갯수를 반드시 동일하게 설정해야 합니다.** |`5`|**ServerPaging2**| 동작 방식은 `ServerPaging`과 동일하지만, 페이지 이동시 항상 서버를 호출하여 데이터를 조회하는 기능입니다. `Filter`, `엑셀 다운로드` 등은 PageLength 만큼 동작 합니다. `Sort`는 [SortCurrentPage](./sort-current-page)에 의해서 동작합니다. [(Method)updatePageLength](/docs/funcs/core/update-page-length) 를 통해 동적으로 페이지 행의 개수를 변경하실 수 있습니다. **<mark>주의</mark> : `(Col) FormulaRow` 사용 할 수 없습니다. `(Method) makeSubTotal` 지원하지 않습니다. PageLength 값과 서버에서 받아오는 데이터의 갯수를 반드시 동일하게 설정해야 합니다.**|</br> ### Example ```javascript options.Cfg = {SearchMode: 0, ...}; ```",
              "see": [
                {
                  "label": "AutoRowHeight cfg",
                  "url": "./auto-row-height"
                },
                {
                  "label": "InfoRowConfig cfg",
                  "url": "./info-row-config"
                },
                {
                  "label": "PageLength cfg",
                  "url": "./page-length"
                },
                {
                  "label": "doSearchPaging method",
                  "url": "/docs/funcs/core/do-search-paging"
                },
                {
                  "label": "updateClientPaging method",
                  "url": "/docs/funcs/core/update-client-paging"
                },
                {
                  "label": "updatePageLength method",
                  "url": "/docs/funcs/core/update-page-length"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.54|`ServerPaging2` 추가|"
            },
            "url": "docs/props/cfg/search-mode.html"
          },
          {
            "cid": 168,
            "sid": "search-progress",
            "name": "search-progress",
            "label": "SearchProgress",
            "data": {
              "body": "> 데이터 조회(`doSearch, loadSearchData`) 사용시 내부에서 일어나는 작업 과정 (`\"API 호출 및 응답대기\", \"데이터 파싱\", \"렌더링 시작\", \"렌더링 완료\"`)을 순차적으로, 프로그래스바 형태로 보여줍니다. > 프로그레스바가 비동기형태로 동작하기 때문에 실제 시트에 로딩되는 속도와는 약간 차이가 있을 수 있습니다. > 조회시에 `SuppressMessage`를 낮추어 다른 조회 메세지를 사용시에는 해당 프로그레스바와 충돌이 일어날 수 있음으로, `SuppressMessage`를 3, 4 사용을 권장합니다. > 조회 중에 오류 발생시, 해당 프로그래스바에서 어떤 과정에서 오류가 났는지 확인할 수 있습니다. ### 프로그레스바 구조 ![프로그래스바](../../../assets/imgs/showProgress.png) 프로그래스바에 표시되는 Text는 메세지 파일(ko.js 등)의 `SearchProgressMessage`, `DataSearchingMessage` 값입니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|데이터 조회 시 프로그래스바 미사용 (`defalut`)| |`1(true)`|데이터 조회 시 프로그래스바 사용| ### Example ```javascript options.Cfg = { SearchProgress: true }; ```",
              "see": [
                {
                  "label": "SuppressMessage cfg",
                  "url": "./suppress-message"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.14|기능 추가|"
            },
            "url": "docs/props/cfg/search-progress.html"
          },
          {
            "cid": 169,
            "sid": "section-can-resize",
            "name": "section-can-resize",
            "label": "SectionCanResize",
            "data": {
              "body": "> 사용자가 섹션 사이를 드래그하여 섹션 너비를 조정할 수 있게 할 것인지 여부를 설정합니다. > 해당 옵션을 설정하면 섹션과 섹션 사이에 Splitter 영역이 생성됩니다.<br /> > 왼쪽 고정 열 섹션(`LeftCols`) 과 오른쪽 고정 열 섹션(`RightCols`) 이 설정되어 있고, 각 섹션 별로 가로 스크롤이 생기는 경우에 각 섹션 너비 조절 기능이 동작합니다. > 섹션 너비 조절이 가능해지면 Splitter 영역에 마우스 호버시 마우스 포인터 모양이 변경되며, 너비 변경 시 Cfg에서 설정한 [LeftWidth](./left-width)와 [MidWidth](./mid-width), [RightWidth](./right-width)는 자동 조절됩니다. ### ![너비조정](/assets/imgs/section3.png) ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|너비 조정 안됨 (`default`)| |`1`|왼쪽, 중앙, 오른쪽 중 섹션에 스크롤바가 있는 경우 항상 조절 가능| ### Example ```javascript options = { Cfg :{ SectionCanResize: 1 // 왼쪽, 중앙, 오른쪽 섹션 너비 조정 허용 }, LeftCols:[ { //열 헤더 설정 Header: { Value: \"No\" // 헤더행의 SEQ 열에 해당하는 셀에 표시될 title 값 }, Name: \"SEQ\", // 행의 순서를 보여주는 열으로, 자동으로 순번이 시트에서 생성됩니다. } ], Cols:[ { Header: { Value: \"금년매출\" }, Name: \"sYear\", Type: \"Int\", Format: \"#,##0\" }, ... ], RightCols:[ { Header: { Value: \"회사명\" }, Name: \"sCompany\", Type: \"Text\", }, ... ] }; ```",
              "see": [
                {
                  "label": "LeftWidth cfg",
                  "url": "./left-width"
                },
                {
                  "label": "MidWidth cfg",
                  "url": "./mid-width"
                },
                {
                  "label": "RightWidth cfg",
                  "url": "./right-width"
                },
                {
                  "label": "setFixedCols method",
                  "url": "/docs/funcs/core/set-fixed-cols"
                },
                {
                  "label": "setFixedLeft method",
                  "url": "/docs/funcs/core/set-fixed-left"
                },
                {
                  "label": "setFixedRight method",
                  "url": "/docs/funcs/core/set-fixed-right"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/section-can-resize.html"
          },
          {
            "cid": 170,
            "sid": "sel-focus-color",
            "name": "sel-focus-color",
            "label": "SelFocusColor",
            "data": {
              "body": "> 시트 포커스 혹은 영역 선택시 헤더행과 SEQ 컬럼행의 배경색이 변경됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|기능 사용 안함 (`default`)| |`1`|헤더행과 SEQ 컬럼행의 배경색 변경 적용| ### Example ```javascript options.Cfg = { SelFocusColor : 1 // 헤더행과 SEQ 컬럼행의 배경색이 변경 }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.1.0.92|기능 추가|"
            },
            "url": "docs/props/cfg/sel-focus-color.html"
          },
          {
            "cid": 171,
            "sid": "select-mode",
            "name": "select-mode",
            "label": "SelectMode",
            "data": {
              "body": "> 마우스 조작으로 셀 또는 행을 선택 시 동작을 변경합니다. > `SelectMode: 1, 2`에서 shift + 드래그 시 기존에 선택된 영역들은 선택이 해제됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`| ctrl + 클릭, 마우스드래그 선택으로 포커스가 변경되지 않습니다. (default) 새로운 선택 영역 중 이미 선택된 셀이 포함된 경우 기존에 선택된 셀과 새로운 영역의 선택이 해제됩니다. | |`1`| ctrl + 클릭, 마우스 드래그 선택으로 포커스가 변경됩니다. shift + 클릭으로 선택 시 기존의 선택을 취소하고 새롭게 선택된 영역을 유지합니다.| |`2`| ctrl + 클릭, 마우스 드래그 선택으로 포커스가 변경됩니다. shift + 클릭으로 선택 시 기존의 선택과 새롭게 선택된 영역을 유지합니다.| ### Example ```javascript options.Cfg = { SelectMode: 1 }; ``` ### Since |product|version|desc| |---|---|---| |core|8.3.0.28|기능 추가|",
              "since": "|product|version|desc||---|---|---||core|8.3.0.28|기능 추가|"
            },
            "url": "docs/props/cfg/select-mode.html"
          },
          {
            "cid": 172,
            "sid": "selecting-cells",
            "name": "selecting-cells",
            "label": "SelectingCells",
            "data": {
              "body": "> 개별적인 셀 선택 혹은 셀 범위 선택이 가능한지 여부와 셀 선택시 행와 열 선택에 주는 영향에 대해 설정 합니다. > 옵션을 `1` 이상으로 설정하는 경우 **Row, Col, Cell** 별 `Selected` 속성값의 영향을 받습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|개별 셀 선택 불가. 행 단위로만 선택만 가능| |`1`|셀,행/열단위로 선택 가능 (`default`) Row 내의 선택된 셀이 없을때, Row의 `Selected = 0` 를 가짐 Row 내의 모든 셀이 선택된 경우, Row의 `Selected = 1` 를 가짐 Row 내의 일부 셀만 선택된 경우, Row 의 `Selected = 2` 를 가짐. 단, 개별 셀의 `Selected = 1` 로 설정해야 함 | |`2`|개별 셀만 선택 가능. Row 내의 모든 셀이 선택된 경우, Row의 `Selected = 1` 를 가지지 않음. Row 내의 선택된 셀이 없을때, Row의 `Selected = 0` 를 가짐 Row 내의 일부 셀만 선택된 경우, Row 의 `Selected = 2` 를 가짐. 단, 개별 셀의 `Selected = 1` 로 설정해야 함 | |`3`|개별 셀과 행/열선택이 상관 없이 독립적으로 선택 가능 Row 내 선택 셀이 없고, Row 도 선택 안된 경우. Row 의 `Selected = 0` Row 내 선택 셀이 없고, Row가 선택된 경우. Row 의 `Selected = 1` Row 내 일부 셀이 선택되고, Row가 선택 안된 경우. Row 의 `Selected = 2`. 단, 개별 셀의 `Selected = 1` 로 설정해야 함 Row 내 일부 셀이나 전체 셀이 선택되고, Row가 선택된 경우. Row 의 `Selected = 3`| |`4`|`SEQ` 컬럼을 선택할 경우에는 `SelectingCells:0`으로 동작. 그 외 컬럼을 선택할 경우에는 `SelectingCells:1`로 동작.| ### Example ```javascript options.Cfg = { SelectingCells: 0, // 개별 셀 선택 불가능 ... }; ```",
              "see": [
                {
                  "label": "CanSelect cfg",
                  "url": "./can-select"
                },
                {
                  "label": "Selected row",
                  "url": "/docs/props/row/selected"
                },
                {
                  "label": "Selected col",
                  "url": "/docs/props/col/selected"
                },
                {
                  "label": "Selected cell",
                  "url": "/docs/props/cell/selected"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/selecting-cells.html"
          },
          {
            "cid": 173,
            "sid": "selection-summary",
            "name": "selection-summary",
            "label": "SelectionSummary",
            "data": {
              "body": "> 드레그(혹은 키보드)를 통해 선택한 영역의 셀 개수 및 합계/평균 값을 보여주는 기준을 설정합니다. > 합계 정보가 표시될 위치는 [InfoRowConfig](/docs/props/cfg/info-row-config) 속성에 `Layout:[\"SummaryLabel\"]`를 설정하셔야 합니다. > **<mark>주의</mark> : 해당 기능은 MultiRecord 구조 시트에서는 사용할 수 없습니다.** > `EmptyCell`을 설정하지 않으면 해당 셀에 **값이 없는 경우** 선택 셀의 개수나 평균 계산에서 무시됩니다. > 단 주의하실 점은 여기서 **값이 없다**는 의미는 조회시 해당 셀에 대한 데이터가 없는 것을 의미, 조회된 데이터를 지우거나 0을 입력시에는 모두 계산에 포함됩니다. ### Type `object` ### Options |Value|Type|Description| |----------|-----|---| |`Mode`|`string`|빈 셀을 계산에 포함할지 여부(`EmptyCell`), 삭제행을 계산에 포함할지 여부(`DelRow`), 인접하지 않은 모든 선택 영역을 계산할지 여부(`AllRange`)를 구분자 \"\\|\"로 연결하여 설정 (ex: \"Mode\":\"EmptyCell\\|DelRow\\|AllRange\") 기본값은 `\"\"`(다 포함하지 않음)| |`Align`|`string`|합계 정보 정렬 (`Left, Center, Right` 중에 하나 설정, 기본값 `Left`)| |`Width`|`number`|합계 정보 영역의 크기 (pixcel단위 숫자, 기본값 `350`)| |`SumFormat`|`string`|합계 값 표현 포맷 설정 (`default: \"#,##0.00\"`)| |`AvgFormat`|`string`|평균 값 표현 포맷 설정 (`default: \"#,##0.00\"`)| ![selectionSummary](/assets/imgs/selectionSummary.png \"selectionSummary\") ### Example ```javascript options.Cfg = { InfoRowConfig: { //합계나 건수정보 Row 표시 \"Visible\": true, \"Layout\": [\"Count\", \"SummaryLabel\"], }, SelectionSummary:{ \"Mode\": \"DelRow\", \"Width\": 500, \"SumFormat\": \"#,##0\", \"AvgFormat\": \"#,##0.##\" } }; ```",
              "see": [
                {
                  "label": "InfoRowConfig cfg",
                  "url": "/docs/props/cfg/info-row-config"
                },
                {
                  "label": "setInfoRow method",
                  "url": "/docs/funcs/core/set-info-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.13|Mode `AllRange` 기능 추가||core|8.0.0.26|`SumFormat`, `AvgFormat` 기능 추가|"
            },
            "url": "docs/props/cfg/selection-summary.html"
          },
          {
            "cid": 174,
            "sid": "sheet-paste",
            "name": "sheet-paste",
            "label": "SheetPaste",
            "data": {
              "body": "> `IE` 전용 기능입니다. 설정시 복사기능 이용시 권한프롬프트가 나오지 않습니다. > 기본값은 `0(false)`이고 IE에서는 복사기능 사용시 `execCommand('copy')` 기능을 사용하고 있습니다. > `1(true)` 값을 사용할시 시트내부복사 기능을 사용합니다. > 단, `execCommand('copy')` 를 사용하면서 권한프롬프트를 끄고 싶다면 인터넷 옵션에서 보안에 들어가 권한을 허용하시면 됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|execCommand('copy') 를 사용합니다. (권한 프롬프트) (`default`)| |`1(true)`|시트 내부 복사 기능을 이용합니다. (권한 프롬프트x)| ### Example ``` options.Cfg = { SheetPaste: true // 시트 내부복사 기능을 사용합니다. }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
            },
            "url": "docs/props/cfg/sheet-paste.html"
          },
          {
            "cid": 175,
            "sid": "shift-hint",
            "name": "shift-hint",
            "label": "ShiftHint",
            "data": {
              "body": "> 셀 크기보다 셀 내용이 많을 때 마우스 호버시 셀 데이터를 `Hint` 로 보여줍니다. > 최우측 열의 셀들이 `Hint`로 나타날 때, `Hint` 위치를 왼쪽으로 이동하여 셀 데이터를 모두 표시하게 됩니다. > 이 때, `Hint` 위치를 왼쪽으로 이동시키지 않도록 설정 할 수 있으며, `false` 으로 설정시 `Hint` 로 보여질 데이터의 일부가 잘려서 노출되지 않을 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|`Hint` 생성 기준점에서 공간이 부족하더라도 현재위치에서 표시| |`1(true)`|`Hint` 생성 기준점에서 공간이 부족할 때 왼쪽으로 이동시켜 표시 (`default`)| ### Example ```javascript options.Cfg = { ShiftHint: false, // Hint 공간이 부족하더라도 셀 위에 표시 ... }; ```",
              "see": [
                {
                  "label": "ShowHint row",
                  "url": "/docs/props/row/show-hint"
                },
                {
                  "label": "ShowHint col",
                  "url": "/docs/props/col/show-hint"
                },
                {
                  "label": "ShowHint cell",
                  "url": "/docs/props/cell/show-hint"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/shift-hint.html"
          },
          {
            "cid": 176,
            "sid": "show-filter",
            "name": "show-filter",
            "label": "ShowFilter",
            "data": {
              "body": "> 시트 생성시 상단 고정행으로 필터행을 추가할지 여부를 설정합니다 > 필터행을 추가하는 경우 열별 데이터에 대한 필터링 기능을 사용할 수 있습니다. > `(0)false` 으로 설정시 필터행은 생성되지 않으며, 시트 생성 이후에 [showFilterRow](/docs/funcs/core/show-filter-row) 함수를 통해 동적으로 필터행을 생성시킬 수 있습니다. > 아래는 `ShowFilter:true` 를 이용하여 생성한 필터행의 사용 예시 입니다. > 문자열 컬럼에서는 `','(and검색)` 나 `';'(or검색)` 을 사용하실 수 있습니다. > - ex1. `사과;복숭아` ==> 사과나 복숭아 글자를 포함한 행만 남기고 감춤 > - ex2. `사과,복숭아` ==> 사과 복숭아가 함께 있는 행만 남기고 감춤 > 숫자나 날짜 컬럼에 대해서는 `'~'` 를 통해 범위를 설정 할 수 있습니다. 필터행의 기호(연산자) 1(같음), 2(같지않음) 에서만 사용 할 수 있고 다른 기호 에서는 사용 할 수 없습니다. > - ex1. `20170101~20181231` ==> 2017년 1월 1일 부터 2018년 12월 31일 까지만 남기고 모두 감춤 > - ex2. `20241022~20241025;20241031` ==> 2024년 10월 22일 부터 2024년 10월 25일 까지의 데이터와 2024년 10월 31일의 데이터만 남기고 모두 감춤 > - ex3. `199000~488000` ==> 199000 부터 488000 사이의 데이터만 남기고 모두 감춤 > - ex4. ` 99000;199000~488000` ==> 99000의 데이터와 199000 부터 488000 사이의 데이터만 남기고 모두 감춤 > 구분자는 메세지 파일에서 변경 가능합니다. > \"`ValueSeparator`\": \"`;`\" //or 구분자 > \"`ValueSeparatorHtml`\": \"`;`\" //or 구분자 > \"`ValueAndSeparator`\": \"`,`\" //and 구분자 > \"`RangeSeparator`\": \"`~`\" //범위 연산자 > \"`RangeSeparatorHtml`\": \"`~`\" //범위 연산자 ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|필터행을 추가하지 않는다. (`default`)| |`1(true)`|필터행을 추가한다.| ### Example ```javascript options = { Cfg :{ ShowFilter: true, // 시트 생성시 필터행도 추가해서 같이 생성한다. } }; ``` ### Try it - [True](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/ShowFilter-true/)",
              "see": [
                {
                  "label": "showFilterRow method",
                  "url": "/docs/funcs/core/show-filter-row"
                },
                {
                  "label": "hideFilterRow method",
                  "url": "/docs/funcs/core/hide-filter-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/show-filter.html"
          },
          {
            "cid": 177,
            "sid": "showImage",
            "name": "showImage",
            "label": "ShowImage",
            "data": {
              "body": "> 편집이 가능한 `Enum`컬럼에서 focus시 아이콘 이미지를 표시하는 기능입니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0`|항상 아이콘을 표시 합니다. (`default`)| |`1`|focus시 `Enum` 컬럼의 아이콘을 표시 합니다.| ### Example ```javascript options.Cfg = { ShowImage: 1 // Enum 컬럼의 아이콘을 focus시에만 표시 }; ```",
              "see": [
                {
                  "label": "Enum col",
                  "url": "/docs/props/col/enum"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.87|기능 추가|"
            },
            "url": "docs/props/cfg/showImage.html"
          },
          {
            "cid": 178,
            "sid": "size",
            "name": "size",
            "label": "Size",
            "data": {
              "body": "> 각 행의 최소 높이 및 아이콘 크기를 설정합니다. > 시트 생성시 기본적인 행의 높이는 `30px` 이며 이보다 줄이려면 `Size` 속성으로 통해 더 작은 디자인을 설정해야 합니다. > 아래의 행 높이는 최소 높이일 뿐 이보다 늘리는 것은 가능합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`Tiny`|최소 행 높이 `20px`| |`Small`|최소 행 높이 `22px`| |`Low`|최소 행 높이 `27px`| |`Normal`|최소 행 높이 `30px` (`default`)| |`High`|최소 행 높이 `42px`| |`Big`|최소 행 높이 `52px`| ### Example ```javascript options = { Cfg:{ Size: \"Small\", //기본보다 작게 설정 }, Def:{ Row:{ Height: 25 //원래 설정(22px)보다 약간 늘림 } } }; ``` ### Try it - [\"Normal\" by default with setSize](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/Size/)",
              "see": [
                {
                  "label": "Height row",
                  "url": "/docs/props/row/height"
                },
                {
                  "label": "setSize",
                  "url": "/docs/funcs/core/set-size"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.1|기능 추가|"
            },
            "url": "docs/props/cfg/size.html"
          },
          {
            "cid": 179,
            "sid": "sort-current-page",
            "name": "sort-current-page",
            "label": "SortCurrentPage",
            "data": {
              "body": "> 서버 페이징 사용 시([SearchMode](./search-mode): 4, 5) 현재 보여지는 페이지에 대해서만 정렬할지 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |---|---| |`0(false)`|Sort 정보를 서버에 보내고, 결과를 조회합니다. (`default`)| |`1(true)`|Sort 정보를 서버에 보내지 않고, 현재 보여지는 페이지에 대해서만 정렬합니다.| ### Example ```javascript options.Cfg = { SortCurrentPage: true }; ```",
              "see": [
                {
                  "label": "SearchMode cfg",
                  "url": "./search-mode"
                },
                {
                  "label": "doSearchPaging method",
                  "url": "/docs/funcs/core/do-search-paging"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/sort-current-page.html"
          },
          {
            "cid": 180,
            "sid": "sort-icons-num",
            "name": "sort-icons-num",
            "label": "SortIconsNum",
            "data": {
              "body": "> 다중 컬럼 소팅시 소팅 적용 순위를 소팅 아이콘 우측에 숫자로 표시합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|다중 컬럼 소팅시 소팅 적용 순위를 숫자로 표시하지 않습니다. (`default`)| |`1(true)`|다중 컬럼 소팅시 소팅 적용 순위를 숫자로 표시합니다.| ### Example ```javascript //다중 컬럼 소팅시 소팅 우선순위를 숫자로 표시합니다. options.Cfg = { SortIconsNum: true }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.1.0.102|기능 추가|"
            },
            "url": "docs/props/cfg/sort-icons-num.html"
          },
          {
            "cid": 181,
            "sid": "sort-icons",
            "name": "sort-icons",
            "label": "SortIcons",
            "data": {
              "body": "> 정렬 아이콘의 화면에 표시여부 와 정렬 기능 동작 위치를 설정합니다. > 아이콘에 대한 추가 설정 및 정렬 가능 여부는 [SortIcons(Header)](/docs/props/row/sort-icons) 에서 설정할 수 있습니다. > 단, 아이콘 클릭으로 정렬 할 수 있는 옵션 2 또는 3은 `Header.SortIcons:1` 을 설정하여 모든 정렬 아이콘 표시해야 사용할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|sort 아이콘 숨김, 셀 클릭시 오름차순 -> 내림차순 정렬| |`1`|sort 아이콘 표시, 셀 클릭시 오름차순 -> 내림차순 정렬 (`default`)| |`2`|sort 아이콘의 위쪽 클릭시 오름차순, 아래 클릭시 내림차순 정렬| |`3`|셀(sort 아이콘 포함) 위쪽 클릭시 오름차순, 셀 아래쪽 클릭시 내림차순 정렬| ### Example ```javascript options.Cfg = { CanSort: 1, // 정렬 기능 사용 SortIcons: 0 // 정렬 아이콘 표시 안함(셀 클릭으로 정렬 동작) }; ``` **또는** ```javascript options.Cfg = { CanSort: 1, // 정렬 기능 사용 SortIcons: 2 // sort 아이콘 클릭으로만 정렬 동작 }; options.Header = { SortIcons: 0, // 아이콘이 모두 숨겨지고 정렬 불가 SortIcons: 1, // 모든 정렬 아이콘 표시(정렬되기 전에는 .IBSort0Right 이미지가 표시) SortIcons: 2 // 정렬한 열에만 아이콘이 표시됨. }; ```",
              "see": [
                {
                  "label": "CanSort cfg",
                  "url": "./can-sort"
                },
                {
                  "label": "SortIcons row",
                  "url": "/docs/props/row/sort-icons"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/sort-icons.html"
          },
          {
            "cid": 182,
            "sid": "space-for-default-value",
            "name": "space-for-default-value",
            "label": "SpaceForDefaultValue",
            "data": {
              "body": "> 빈문자(\"\")인 데이터도 [DefaultValue](/docs/props/col/default-value)로 표시되도록 설정합니다. > 해당 속성이 `false`인 경우 [DefaultValue](/docs/props/col/default-value)는 셀에 값이 없는 경우(null, undefined,데이터 없음) 에만 적용됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|`null`, `undefined`, `데이터 없음`인 데이터만 [DefaultValue](/docs/props/col/default-value)로 설정한 값으로 출력 (`default`)| |`1(true)`|빈문자(\"\")인 데이터도 [DefaultValue](/docs/props/col/default-value)로 설정한 값으로 출력| ### Example ```javascript options.Cfg = { SpaceForDefaultValue: true, // 공백(\"\")인 데이터도 \"확인\"으로 표시 }; options.Cols = [ {Header: \"상세정보\", Type: \"Button\", Name: \"DetailBnt\", Button: \"Button\", DefalutValue: \"확인\"}, ... ]; ```",
              "see": [
                {
                  "label": "DefaultValue col",
                  "url": "/docs/props/col/default-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.8|기능 추가|"
            },
            "url": "docs/props/cfg/space-for-default-value.html"
          },
          {
            "cid": 183,
            "sid": "standard-filter",
            "name": "standard-filter",
            "label": "StandardFilter",
            "data": {
              "body": "> 트리에서 필터 기능 사용시 하위 노드에 대한 보임 감춤 여부를 설정합니다.. ### Type `number` ### Options |Value|Description| |-----|-----| |0|부모 행부터 자식행 순으로 검색하여 필터링합니다. (찾고자 하는 값을 자식행만 갖고 있는 경우에는 표시되지 않습니다.)| |1|사용금지 (depreated)| |2|찾고자 하는 값이 자식행에 있는 경우, 해당 행과, 부모 행을 모두 표시 합니다. (`default`)| |3|찾고자 하는 값이 자식행에 있는 경우, 해당 행의 부모 행과 자식을 모두 표시 합니다.| ### Example ```javascript options = { Cfg:{ StandardFilter: 3 // 트리에서 필터기능 사용시 찾은 행의 자식행까지 표시 }, Cols: [...] }; ```",
              "see": [
                {
                  "label": "showFilter method",
                  "url": "/docs/props/cfg/show-filter"
                },
                {
                  "label": "showFilterRow method",
                  "url": "/docs/funcs/core/show-filter-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.47|기능 추가|"
            },
            "url": "docs/props/cfg/standard-filter.html"
          },
          {
            "cid": 184,
            "sid": "standard-tip",
            "name": "standard-tip",
            "label": "StandardTip",
            "data": {
              "body": "> 툴팁을 시트 내장 다이얼로그로 보여줄지, 브라우저의 툴팁으로 보여줄지 설정합니다. > 시트 내장 다이얼로그로 설정한 경우 [TipPosition](/docs/props/col/tip-position), [TipClass](/docs/props/col/tip-class) 들을 적용할 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|시트 내장 다이얼로그로 툴팁 표시 (`default`)| |`1(true)`|표준 브라우저 툴팁으로 표시| ### Example ```javascript options.Cfg = { StandardTip: true }; ```",
              "see": [
                {
                  "label": "TipPosition col",
                  "url": "/docs/props/col/tip-position"
                },
                {
                  "label": "TipClass col",
                  "url": "/docs/props/col/tip-class"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/standard-tip.html"
          },
          {
            "cid": 185,
            "sid": "static-cursor",
            "name": "static-cursor",
            "label": "StaticCursor",
            "data": {
              "body": "> 시트 이외의 요소를 클릭했을 때 포커스 커서의 유지여부를 설정합니다. > 만약 다른 시트나 시트 이외의 요소를 클릭할 때 현재시트의 선택 색상 및 윤곽선을 없애고자 하는 경우 `0(false)` 으로 설정하면 됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|시트 이외의 요소를 클릭할 때 선택된 시트 행 또는 셀의 색상 및 윤곽선 제거. 다른 시트 클릭시 해당 시트로 선택 처리| |`1(true)`|시트 이외의 요소를 클릭하더라도 선택된 시트 행 또는 셀의 색상 및 윤곽선 유지 (`default`) ### Example ```javascript options.Cfg = { StaticCursor: 0 // 포커스를 잃을 때 선택 색상도 제거. }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/static-cursor.html"
          },
          {
            "cid": 186,
            "sid": "storage-compress-mode",
            "name": "storage-compress-mode",
            "label": "StorageCompressMode",
            "data": {
              "body": "> 로컬 스토리지 혹은 세션 스토리지에 현재 시트의 정보가 저장되는 값의 내용을 압축하는 방식에 대한 옵션입니다. > [StorageSession](./storage-session) 값이 없으면 동작하지 않습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|UTF16 압축, 압축률 상| |`1`|Base64 압축, 압축률 중 (`default`)| |`2`|Uint8Array 압축, 압축률 하| ### Example ```javascript options.Cfg = { StorageSession: 1, // 로컬 스토리지에 현재 시트 정보를 저장할 수 있고 가져올 수 있도록 설정 StorageCompressMode: 0 // UTF16 압축으로 로컬 스토리지에 저장 }; sheet.saveCurrentInfo(); // 로컬 스토리지에 현재 시트 정보를 저장 ```",
              "see": [
                {
                  "label": "StorageSession cfg",
                  "url": "./storage-session"
                },
                {
                  "label": "StorageKeyPrefix cfg",
                  "url": "./storage-key-prefix"
                },
                {
                  "label": "saveCurrentInfo method",
                  "url": "/docs/funcs/core/save-current-info"
                },
                {
                  "label": "clearCurrentInfo method",
                  "url": "/docs/funcs/core/clear-current-info"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/storage-compress-mode.html"
          },
          {
            "cid": 187,
            "sid": "storage-key-id",
            "name": "storage-key-id",
            "label": "StorageKeyId",
            "data": {
              "body": "> 로컬 스토리지 혹은 세션 스토리지에 현재 시트의 정보가 저장될 때 시트의 Id를 대신해 Key 값의 `postFix`로 설정할 커스텀 Id를 설정하는 옵션입니다. > 해당 옵션을 설정하시면 Key값이 `StorageKeyPrefix+\"^시트id\"`와 같이 설정되지 않으며, 그 대신 `StorageKeyPrefix+\"^설정값\"`으로 설정됩니다. > [StorageSession](./storage-session) 값이 없으면 동작하지 않습니다. ### Type `string` ### Example ```javascript options.Cfg = { StorageSession: 1, // 로컬 스토리지에 현재 시트 정보를 저장할 수 있고 가져올 수 있도록 설정 StorageKeyId: \"customId\", // `StorageKeyPrefix+\"^customId\"`를 키 값으로 하여 로컬 스토리지에 현재 시트 정보를 저장합니다. }; sheet.saveCurrentInfo(); // 로컬 스토리지에 현재 시트 정보를 저장 sheet.clearCurrentInfo(); // 로컬 스토리지에 현재 시트 정보를 제거 ```",
              "see": [
                {
                  "label": "StorageSession cfg",
                  "url": "./storage-session"
                },
                {
                  "label": "StorageCompressMode cfg",
                  "url": "./storage-compress-mode"
                },
                {
                  "label": "saveCurrentInfo method",
                  "url": "/docs/funcs/core/save-current-info"
                },
                {
                  "label": "clearCurrentInfo method",
                  "url": "/docs/funcs/core/clear-current-info"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.7|기능 추가|"
            },
            "url": "docs/props/cfg/storage-key-id.html"
          },
          {
            "cid": 188,
            "sid": "storage-key-prefix",
            "name": "storage-key-prefix",
            "label": "StorageKeyPrefix",
            "data": {
              "body": "> 로컬 스토리지 혹은 세션 스토리지에 현재 시트의 정보가 저장될 때 사용되는 Key값의 `prefix`를 설정하는 옵션입니다. > 기본적으로 Key값은 `StorageKeyPrefix+\"^시트id\"` 로 설정되고 `StorageKeyPrefix` 옵션에 값이 없을 때 는 현재 페이지의 경로를 `StorageKeyPrefix`의 기본값으로 설정합니다. > [StorageSession](./storage-session) 값이 없으면 동작하지 않습니다. ### Type `string` ### Example ```javascript options.Cfg = { StorageSession: 1, // 로컬 스토리지에 현재 시트 정보를 저장할 수 있고 가져올 수 있도록 설정 StorageKeyPrefix: \"IBSheet/product/intro\" // 스토리지에 저장할 내용의 Key 값의 prefix를 설정 IBSheet/product/intro^sheet 로 설정됨 }; sheet.saveCurrentInfo(); // 로컬 스토리지에 현재 시트 정보를 저장 sheet.clearCurrentInfo(); // 로컬 스토리지에 현재 시트 정보를 제거 ```",
              "see": [
                {
                  "label": "StorageSession cfg",
                  "url": "./storage-session"
                },
                {
                  "label": "StorageCompressMode cfg",
                  "url": "./storage-compress-mode"
                },
                {
                  "label": "saveCurrentInfo method",
                  "url": "/docs/funcs/core/save-current-info"
                },
                {
                  "label": "clearCurrentInfo method",
                  "url": "/docs/funcs/core/clear-current-info"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/storage-key-prefix.html"
          },
          {
            "cid": 189,
            "sid": "storage-session",
            "name": "storage-session",
            "label": "StorageSession",
            "data": {
              "body": "> 시트의 정보를 로컬 스토리지 혹은 세션 스토리지에 저장 시킬 수 있도록 설정하는 옵션입니다. 로컬 스토리지 혹은 세션 스토리지에 저장이 되어 있으면 시트가 로드되는 시점에서 정보를 가져와서 시트에 반영합니다. > **`주의`** : 시트 초기화 시점 컬럼 정보와 저장된 시트 컬럼 정보가 다를 경우 로컬 스토리지 혹은 세션 스토리지에 저장된 정보가 지워집니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|사용안함 (`default`)| |`1`|로컬 스토리지에 저장| |`2`|세션 스토리지에 저장| ### Example ```javascript options.Cfg = { StorageSession: 1 // 로컬 스토리지에 현재 시트 정보를 저장할 수 있고 가져올 수 있도록 설정 }; sheet.saveCurrentInfo(); // 로컬 스토리지에 현재 시트 정보를 저장 sheet.clearCurrentInfo(); // 로컬 스토리지에 현재 시트 정보를 제거 ```",
              "see": [
                {
                  "label": "StorageKeyPrefix Cfg",
                  "url": "./storage-key-prefix"
                },
                {
                  "label": "StorageCompressMode Cfg",
                  "url": "./storage-compress-mode"
                },
                {
                  "label": "saveCurrentInfo method",
                  "url": "/docs/funcs/core/save-current-info"
                },
                {
                  "label": "clearCurrentInfo method",
                  "url": "/docs/funcs/core/clear-current-info"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/storage-session.html"
          },
          {
            "cid": 190,
            "sid": "strict-parse",
            "name": "strict-parse",
            "label": "StrictParse",
            "data": {
              "body": "> 조회 함수에서 JSON 데이터를 파싱할 때 파서를 선택합니다. > 설정을 안하거나 false로 설정시 유연한 파서를 통해 파싱되고, true로 설정시 브라우져가 제공하는 JSON.parse()를 통해 파싱됩니다. 유연한 파서란 일반적인 JSON.parse()를 통해 파싱하는 경우 허용하지 않는 몇가지를 허용합니다. 1. 여분의 콤마 허용 2. 프로퍼티 이름의 쌍따옴표가 없어도 됨. 참고 - [MDN:bad parsing](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Errors/JSON_bad_parse) - JSON.parse()가 유연한 파서보다 성능이 우수(약 5배)하지만 데이터 로딩과정에서 파싱이 차지하는 시간이 크지 않아 5만건 이내에서는 사용자가 느끼기 어려운 수준임. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|유연한 파서 사용 (`default`)| |`1(true)`|브라우저에서 제공하는 JSON.parse() 내장함수 사용| ### Example ```javascript options.Cfg = { StrictParse: 1, // 조회 함수를 JSON.parse()를 통해 데이터 파싱 }; ```",
              "see": [
                {
                  "label": "doSearch method",
                  "url": "/docs/funcs/core/do-search"
                },
                {
                  "label": "doSearchPaging method",
                  "url": "/docs/funcs/core/do-search-paging"
                },
                {
                  "label": "loadSearchData method",
                  "url": "/docs/funcs/core/load-search-data"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
            },
            "url": "docs/props/cfg/strict-parse.html"
          },
          {
            "cid": 191,
            "sid": "style-row-config",
            "name": "style-row-config",
            "label": "StyleRowConfig",
            "data": {
              "body": "> 시트 상단 혹은 하단에 별도의 행을 통해 시트의 스타일을 설정 할 수 있습니다. > `StorageType`을 통해 스타일 정보를 저장할 방법을 설정할 수 있습니다. ### Type `object` ### Options |Value|Type|Description| |----------|-----|---| |Visible|`boolean`| 화면 표시 여부 `true`: 표시 `false`: 표시하지 않음 | |StorageType|`number`|스타일 정보를 저장, 사용할 저장소 유형 `0`: 저장 기능 사용하지 않음(`default`) `1`: 로컬 스토리지 ([StorageSession](/docs/props/cfg/storage-session)을 설정해야 동작합니다.) `2`: 스타일 정보를 `ServerUrl`인자로 지정한 주소로 전송| |ServerUrl|`string`|`StorageType`: 2인 경우 스타일 정보를 통신할 주소 스타일을 불러올때는 GET, 스타일 저장할 때는 POST 방식으로 전송됩니다.| |AutoLoad|`boolean`|시트 생성 시 저장된 스타일을 불러올 지 여부 (`default`: true)| |Themes|`object`|스타일 행에 표시할 테마 목록 시트의 기본 테마 css 파일을 불러온 경우 자동적으로 포함됩니다.| |Extend|`boolean`| 처음 랜더링 시 '헤더행', '데이터행' 버튼의 펼쳐짐 여부 (`default`: true)| |Layout|`Array`|스타일 행에 버튼의 순서와 종류를 설정합니다. default: `[\"Init\", \"Save\", \"Load\", \"ApplyAll\"]` `Init`: 시트에 적용된 스타일을 초기화하고, 시트의 id에 해당하는 스타일 정보를 삭제합니다. `Save`: 시트의 id로 스타일 정보를 저장합니다. `Load`: 시트의 id에 해당하는 스타일 정보를 불러옵니다. `ApplyAll`: 동일한 `StorageType`으로 설정된 시트에 스타일을 적용 후 \"IB_Style\"의 id로 정보를 저장합니다. `InitAll`: 동일한 `StorageType`으로 설정된 시트의 스타일을 초기화 후 \"IB_Style\"에 해당하는 정보를 삭제합니다.| ![StyleRowConfig](/assets/imgs/styleRow.png \"StyleRowConfig\") ### Example ```javascript options.Cfg = { StyleRowConfig: { Visible: true, StorageType: 2, ServerUrl: \"./ibsheet/styleInfo.jsp\", AutoLoad: true, Themes: { Mono: \"./assets/ibsheet/css/mono/main.css\", // css 파일 내의 클래스를 key와 일치되도록 수정 필요 IBGY: \"./assets/ibsheet/css/gray/main.css\" } } }; ``` #### 서버 통신 데이터 구조 예시 > 서버와 저장/불러오기 시 주고받는 스타일 정보는 아래와 같은 JSON 구조입니다. ```js { \"AlternateColor\": \"#cfd3d1\", // 데이터 행의 교차 배경색 \"HeaderColor\": \"#b4e0e4\", // 헤더 배경색 \"HeaderTextColor\": \"#000000\", // 헤더 텍스트 색상 \"HeaderTextSize\": \"20\", // 헤더 텍스트 크기(px) \"RowTextSize\": \"14\", // 데이터 행 텍스트 크기(px) \"Theme\": \"IBMT\", // 적용 테마명 \"id\": \"sheet2\" // 시트 고유 ID } ```",
              "see": [
                {
                  "label": "StorageSession cfg",
                  "url": "/docs/props/cfg/storage-session"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.15|기능 추가||core|8.3.0.33|`Layout` 옵션 추가|"
            },
            "url": "docs/props/cfg/style-row-config.html"
          },
          {
            "cid": 192,
            "sid": "style",
            "name": "style",
            "label": "Style",
            "data": {
              "body": "> `기본 테마(/css/default/main.css)`외에 다른 테마를 적용하고자 할때, 사용할 테마에 정의한 `Prefix` 값을 설정합니다. > 해당 기능을 사용하기 위해서는 사용하고자 하는 css 파일이 화면에 `include` 되어 있어야 합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|사용하는 css 파일에 정의한 `Prefix 명`| **기본으로 제공하는 테마** |value|Prefix|Description| |---|---|---| |`default` 폴더|`IB`(`default`)|시트에서 사용하는 이미지를 svg 제공| |`default_img` 폴더|`IB`|시트에서 사용하는 이미지를 png, gif 제공| |`grace` 폴더|`IBGR`|시트에서 사용하는 이미지를 svg 제공| |`gray` 폴더|`IBGY`|시트에서 사용하는 이미지를 svg 제공| |`material` 폴더|`IBMR`|시트에서 사용하는 이미지를 svg 제공| |`mint` 폴더|`IBMT`|시트에서 사용하는 이미지를 svg 제공| |`simple` 폴더|`IBSP`|시트에서 사용하는 이미지를 svg 제공| ### Example ```javascript options = { Cfg: { //사용할 테마 prefix명 Style: \"IBMT\", ... } }; ```",
              "see": [
                {
                  "label": "setTheme method",
                  "url": "/docs/funcs/core/set-theme"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/style.html"
          },
          {
            "cid": 193,
            "sid": "suppress-export-message",
            "name": "suppress-export-message",
            "label": "SuppressExportMessage",
            "data": {
              "body": "> 서버 모듈, 클라이언트 모듈을 이용해 파일을 다운로드하거나 업로드할 때 대기 메시지를 띄울지 여부를 결정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|파일 다운로드, 업로드시 대기 이미지 띄움 (`default`)| |`1`|파일 다운로드, 업로드시 대기 이미지 띄우지 않음| ### Example ```javascript options.Cfg = { SuppressExportMessage : 1 // 서버 모듈, 클라이언트 모듈 파일 다운로드, 업로드시 대기 이미지 띄우지 않도록 설정 }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.1.0.95|기능 추가||excel|1.1.4|기능 추가|"
            },
            "url": "docs/props/cfg/suppress-export-message.html"
          },
          {
            "cid": 194,
            "sid": "suppress-message",
            "name": "suppress-message",
            "label": "SuppressMessage",
            "data": {
              "body": "> 시트에서 제공하는 상태 메시지들 중 표시하지 않을 메시지 종류에 대해 설정 합니다. > **<mark>주의</mark> : 시트 수가 많을 경우, `SuppressMessage: 0` 설정으로 인해 렌더링이 지연될 수 있습니다.** ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|시트 내에서 발생하는 모든 메세지 표시| |`1`|시트 로딩 및 업데이트시 생성되는 메시지 표시 안함. 렌더링 메세지는 표시됨.| |`2`|1번 옵션 + 정렬과 같이 시트 내부 계산에 대한 정보 메세지 표시 안함 | |`3`|2번 옵션 + 페이지 로딩 및 렌더링, 조회, 저장 메세지 표시 안함 (`default`)| |`4`|3번 옵션 + 시트가 정상적으로 보여지지 않을 때의 에러 메세지 표시 안함 | ### Example ```javascript options.Cfg = { SuppressMessage: 0, // 시트 내에서 발생하는 모든 메세지 표시 ... }; ```",
              "see": [
                {
                  "label": "showMessage method",
                  "url": "/docs/funcs/core/show-message"
                },
                {
                  "label": "showMessageTime method",
                  "url": "/docs/funcs/core/show-message-time"
                },
                {
                  "label": "showProgress method",
                  "url": "/docs/funcs/core/show-progress"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/suppress-message.html"
          },
          {
            "cid": 195,
            "sid": "sync",
            "name": "sync",
            "label": "Sync",
            "data": {
              "body": "> 시트의 스크롤을 동기화 하는 기능입니다. > 화면에 여러개의 시트가 존재하는 경우 `Sync` 설정 시 동시에 스크롤이 동작합니다. > > `제약사항` 다음의 경우에 정상적으로 동작하지 않습니다: > 1. 시트 간 `SearchMode`가 다른 경우 > 2. 시트 간 `AutoRowHeight` 설정 여부가 다른 경우 ### Type `string` ### Options |Value|Description| |-----|-----| | `Cols` | 컬럼 리사이즈 동기화 기능 설정 | | `Vert` | 세로 스크롤 동기화 기능 설정 | | `Horz` | 가로 스크롤 동기화 기능 설정 | ### Example ```javascript options.Cfg = { Sync: 'Vert,Horz' }; ``` ### Since |product|version|desc| |---|---|---| |core|8.3.0.16|기능 추가|",
              "since": "|product|version|desc||---|---|---||core|8.3.0.16|기능 추가|"
            },
            "url": "docs/props/cfg/sync.html"
          },
          {
            "cid": 196,
            "sid": "tab-index",
            "name": "tab-index",
            "label": "TabIndex",
            "data": {
              "body": "> `TabStop` 이 설정된 경우 시트의 탭 순서의 위치를 명시하기 위해 `Tabindex`를 설정할 수 있습니다. > ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|`TabIndex` 설정한 값| ### Example ```javascript options.Cfg = { TabIndex: 5, // 시트가 5번째 tabindex 를 갖도록 설정 }; ```",
              "see": [
                {
                  "label": "TabStop cfg",
                  "url": "./tab-stop"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/tab-index.html"
          },
          {
            "cid": 197,
            "sid": "tab-stop",
            "name": "tab-stop",
            "label": "TabStop",
            "data": {
              "body": "> 페이지 안의 요소들을 탭 키로 이동하는 순서에 시트를 포함할지 여부를 설정합니다. > 시트를 포함하는 경우 `TabIndex` 로 `Tab` 순서를 설정 할 수 있습니다. > ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|페이지 내에서 `Tab` 키로 시트 접근 안됨 | |`1`|페이지 내에서 `Tab` 키로 시트 접근 가능 (`default`)| ### Example ```javascript options.Cfg = { TabStop: 0, // 탭키로 시트 접근 허용 안함 ... }; ```",
              "see": [
                {
                  "label": "TabIndex cfg",
                  "url": "./tab-index"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/tab-stop.html"
          },
          {
            "cid": 198,
            "sid": "tabletmode",
            "name": "tabletmode",
            "label": "TabletMode",
            "data": {
              "body": "> 시트를 모바일 터치 모드로 동작하도록 설정합니다. ### Type `boolean` ### Example ```javascript options.Cfg = { // 모바일 터치 모드로 동작 TabletMode: 1 }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.2.0.26|기능 추가|"
            },
            "url": "docs/props/cfg/tabletmode.html"
          },
          {
            "cid": 199,
            "sid": "timeout",
            "name": "timeout",
            "label": "Timeout",
            "data": {
              "body": "> 시트에서 사용되는 서버통신의 최대 대기 시간 값을 설정합니다. > 입력 값은 `초(second)` 단위입니다. 기본값은 `60초` 입니다. > **[ajax (method)](./../../funcs/core/ajax), [doSave (method)](./../../funcs/core/do-save), [doSearch (method)](./../../funcs/core/do-search), [doSearchPaging (method)](./../../funcs/core/do-search-paging) 호출 시 timeout 인자가 설정되지 않았을 경우에 적용되며 API의 timeout 인자가 우선 적용됩니다.** ### Type `number` ### Example ```javascript options = { Cfg :{ Timeout: 20, // doSave, doSearch, doSearchPaging, ajax를 실행할때 최대 대기 시간을 20초로 설정 ... } }; ```",
              "see": [
                {
                  "label": "ajax method",
                  "url": "/docs/funcs/core/ajax"
                },
                {
                  "label": "doSave method",
                  "url": "/docs/funcs/core/do-save"
                },
                {
                  "label": "doSearch method",
                  "url": "/docs/funcs/core/do-search"
                },
                {
                  "label": "doSearchPaging method",
                  "url": "/docs/funcs/core/do-search-paging"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가|"
            },
            "url": "docs/props/cfg/timeout.html"
          },
          {
            "cid": 200,
            "sid": "tip-start",
            "name": "tip-start",
            "label": "TipStart",
            "data": {
              "body": "> `Tip`기능을 이용하여 풍선도움말을 기능 사용시, 마우스 커서가 멈춘 후 부터 풍선도움말이 보여지기까지 시간을 설정합니다.. > 단위는 `ms` 이며, 설정하지 않으면 500ms 후에 풍선도움말이 표시됩니다. > `0`으로 설정시 풍선도움말이 표시되지 않으며, `1`로 설정시 즉시 보여지게 됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`value`|커서가 멈춘 후, 풍선도움말이 표시될때까지 대기시간(ms단위) (`default: 500`)| ### Example ```javascript options = { Cfg:{ TipStart: 300 //0.3초 후에 풍선도움말이 표시됩니다. }, Def:{ Row:{ Tip: 1 // 데이터 모든 행에서 풍선도움말 표시 } } }; ```",
              "see": [
                {
                  "label": "Tip row",
                  "url": "/docs/props/row/tip"
                },
                {
                  "label": "Tip col",
                  "url": "/docs/props/col/tip"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가|"
            },
            "url": "docs/props/cfg/tip-start.html"
          },
          {
            "cid": 201,
            "sid": "touch-scroll-count",
            "name": "touch-scroll-count",
            "label": "TouchScrollCount",
            "data": {
              "body": "> `SearchMode: 0` 에서 모바일 터치 스크롤 시 이동할 행의 개수를 설정하는 기능 입니다. > 설정 하지 않으면 한번 스크롤 움직임 시 3개의 행만큼 움직입니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|모바일 터치 스크롤 시 이동할 행의 개수| ### Example ```javascript options.Cfg = { TouchScrollCount: 1 // 터치 스크롤 시 행의 개수가 1개씩 움직입니다. }; ```",
              "see": [
                {
                  "label": "SearchMode cfg",
                  "url": "/docs/props/cfg/search-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.52|기능 추가|"
            },
            "url": "docs/props/cfg/touch-scroll-count.html"
          },
          {
            "cid": 202,
            "sid": "touch-scroll",
            "name": "touch-scroll",
            "label": "TouchScroll",
            "data": {
              "body": "> 태블릿이나 모바일 기기에서 시트 내 스크롤바의 모양을 설정합니다. > 시트 섹션별 생성되는 가로 스크롤이나 전체 시트에 생성되는 가로/세로 스크롤바에 해당합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|스크롤바 영역만 있을 뿐 실제 스크롤바를 통한 이동은 불가 (`SearchMode: 0`에서는 동작하지 않습니다.)| |`1`|평범한 스타일의 스크롤바 사용 | |`2`|큰 스타일의 스크롤바 사용 (`default`)| |`3`|작은 스타일의 스크롤바 사용| |`4`|스크롤 바를 숨김처리| **`0`이나 `4` 설정시 마우스 휠 스크롤이나 바디(데이터)영역의 터치를 통해서만 이동 가능** ### Example ```javascript options.Cfg = { TouchScroll: 4 // 스크롤바 숨김 처리, 터치로만 이동함. }; ```",
              "see": [
                {
                  "label": "CustomScroll cfg",
                  "url": "./custom-scroll"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/touch-scroll.html"
          },
          {
            "cid": 203,
            "sid": "touch-scrolling",
            "name": "touch-scrolling",
            "label": "TouchScrolling",
            "data": {
              "body": "> 모바일 환경에서 시트 바디 영역 터치 스크롤이 동작할지 여부를 결정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| | `0` | 모바일 환경에서 시트 바디 영역 터치 스크롤이 동작하지 않습니다.| | `1` | 모바일 환경에서 시트 바디 영역 터치 스크롤이 동작합니다. (`default`)| ### Example ```javascript options = { Cfg :{ TouchScrolling: 0, // 모바일 환경에서 시트 바디 영역 터치 스크롤을 막습니다. ... } }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.3.0.38|기능 추가|"
            },
            "url": "docs/props/cfg/touch-scrolling.html"
          },
          {
            "cid": 204,
            "sid": "tree-check-sync",
            "name": "tree-check-sync",
            "label": "TreeCheckSync",
            "data": {
              "body": "> [MainCol](/docs/props/cfg/main-col)을 통해 트리기능을 사용하는 시트에서 `Icon: \"Check\"` 사용 시 부모자식 간의 관계에 따라 부모를 체크시 자동으로 자식노드도 체크 되게 할지 여부를 설정합니다. > 트리를 사용하는 경우, `Icon: \"Check\"` 가 설정된 모든 컬럼에서 유효하게 동작합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|일반모드(부모/자식 관계와 무관하게 체크)| |`1`|관계모드(부모/자식 관계에 따라 자동으로 체크/언체크, 자식이 일부분만 체크된 경우 부모의 체크 박스가 '?'로 체크됨) (`default`)| |`2`|관계모드(부모/자식 관계에 따라 자동으로 체크/언체크, 자식이 일부분만 체크된 경우 부모의 체크 박스가 'v'로 체크됨) | ### Example ```javascript options.Cfg = { \"TreeCheckSync\": 0 }; ```",
              "see": [
                {
                  "label": "MainCol cfg",
                  "url": "/docs/props/cfg/main-col"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.4|기능 추가||core|8.2.0.2|2 mode 추가|"
            },
            "url": "docs/props/cfg/tree-check-sync.html"
          },
          {
            "cid": 205,
            "sid": "undo",
            "name": "undo",
            "label": "Undo",
            "data": {
              "body": "> 사용자가 수정한 값이나 [setValue](/docs/funcs/core/set-value)를 통해 수정된 값을 `ctrl+z`를 통해 실행 취소하거나, `ctrl+y`를 통해 다시 실행하는 기능 허용 여부를 설정합니다. > 셀의 값을 수정하거나, 상태를 삭제로 변경하거나, 신규로 추가한 행에 대해서 취소 처리하는 등의 작업을 수행합니다. > 컬럼의 이동이나 소팅, 행의 완전삭제([removeRow](/docs/funcs/core/remove-row))등에 대해서는 취소기능을 지원하지 않습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|Undo 기능을 사용하지 않습니다. (`default`)| |`1(true)`|Undo 기능을 사용합니다.| ### Example ```javascript options.Cfg = { Undo: 1, // Undo기능 사용여부 ... }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/undo.html"
          },
          {
            "cid": 206,
            "sid": "unicode-byte-mode",
            "name": "unicode-byte-mode",
            "label": "UnicodeByteMode",
            "data": {
              "body": "> 한글 1자리의 바이트 수를 설정합니다. > 자바스크립트에서는 모든 글자를 1바이트로 인식합니다. 그러나 한글은 DB의 언어 설정에 따라 2바이트 이상으로 인식되어야 하는 경우가 있습니다. 이런 경우 이 속성을 사용하여 한글의 바이트 수를 설정할 수 있습니다. > `utf-8` 형식에서는 문자에 따라서 바이트 수가 달라지게 되는데 이런 경우 설정 인자를 `\"utf-8\"`로 설정하면 `utf-8` 형식에 맞게 처리 합니다. ### Type `number|string` ### Options |Value|Description| |-----|-----| |`number`|한글 1자리의 바이트 수 설정 (`default: 1`)| |`string`|`\"utf-8\"`로 설정, `utf-8` 형식에 맞게 바이트 수 계산 | ### Example ```javascript options.Cfg = { ... UnicodeByteMode: \"utf-8\" // 한글의 바이트 수를 utf-8 형식에 맞춰 처리 ... }; ``` ```js options.Cfg = { ... UnicodeByteMode: 3, // 한글 1자리의 바이트 사이즈를 3으로 설정 ... }; ```",
              "see": [
                {
                  "label": "Size col",
                  "url": "/docs/props/col/size"
                },
                {
                  "label": "Size cell",
                  "url": "/docs/props/cell/size"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.10|기능 추가|"
            },
            "url": "docs/props/cfg/unicode-byte-mode.html"
          },
          {
            "cid": 207,
            "sid": "use-button",
            "name": "use-button",
            "label": "UseButton",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Button`이고, [Button](/docs/props/col/button)의 속성값이 `Button`인 경우, 셀 안에 버튼이 생성됩니다. > 그런데 이 생성되는 버튼은 \\<u\\>태그를 이용하게 되는데 이를 \\<button\\>를 사용할지 여부를 선택합니다. ### ![u태그 버튼](/assets/imgs/useButton0.png \"u태그\") [`u태그`를 사용한 버튼] ![button태그 버튼](/assets/imgs/useButton1.png \"button태그\") [`button태그`를 사용한 버튼] ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|\\<u\\>태그를 통해 버튼 생성 (`default`)| |`1`|\\<button\\>태그를 통해 버튼 생성| ### Example ```javascript options.Cfg = { \"UseButton\": 1 // <button>태그를 사용하여 버튼 생성 }; ```",
              "see": [
                {
                  "label": "Button col",
                  "url": "/docs/props/col/button"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/use-button.html"
          },
          {
            "cid": 208,
            "sid": "use-cache",
            "name": "use-cache",
            "label": "UseCache",
            "data": {
              "body": "> `img` 파일의 브라우저 캐쉬 사용 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|브라우저 캐쉬 사용 안함 (`default`)| |`1(true)`|브라우저 캐쉬 사용함| ### Example ```javascript options.Cfg = { UseCache: 1 // 브라우저 캐쉬 사용 }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.19|기능 추가|"
            },
            "url": "docs/props/cfg/use-cache.html"
          },
          {
            "cid": 209,
            "sid": "use-extra-object-data",
            "name": "use-extra-object-data",
            "label": "UseExtraObjectData",
            "data": {
              "body": "> 조회 된 데이터에 시트에 설정한 열이 아닌 추가적인 `object` 형태의 정보가 있을 때 행 객체에 `object` 형태 그대로 저장합니다. > **object의 `key`가 시트의 설정된 열의 [Name](../col/name)과 동일한 경우에는 적용되지 않습니다.** > **따라서 시트에 표시하고자 하는 데이터에서는 적용되지 않습니다.** <!-- **[JsonDataSep](./json-data-sep)과 동시에 사용하실 수 없습니다. (`UseExtraObjectData`가 먼저 적용됩니다.)** --> ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|`object` 형태의 데이터가 열이름+속성명 형태로 행객체에 저장됩니다. (`default`)| |`1(true)`|`object` 형태의 데이터가 형태를 유지한 채 행객체에 저장합니다.| ### Example ```javascript options = { Cfg: { UseExtraObjectData: true, // ... }, Cols: [ { Header: '문자열(Text)', Type: 'Text', Name: 'TextData', Width: 100, Align: 'Center', CanEdit: 1 }, { Header: '줄넘김문자열(Lines)', Type: 'Lines', Name: 'LinesData', MinWidth: 250, Align: 'Center', CanEdit: 1, RelWidth: 1 } ] } // 조회 데이터 var data = [{ TextData: '장순연', LinesData: '전국이 대체로 흐리거나 구름많은 가운데 대기불안정으로 중부내륙은 아침과 오후 한때, 남부내륙은 오후 한때 소나기가 오는 곳이 있겠습니다.', ExtraInfo: { // 시트의 열로 설정되지 않은 추가적인 데이터 AddedDate: '2022-01-24', ChagedDate: '2024-06-17' } }]; var row = sheet.getFirstRow(); var info = sheet.getRowValue({row: row, saveExtraAttr: 1}).ExtraInfo; // {AddedDate: '2022-01-24', ChagedDate: '2024-06-17'} var newInfo = { DeletedDate: '2024-09-13' }; sheet.setValue(row, 'ExtraInfo', newInfo); sheet.getValue(row, 'ExtraInfo'); // {DeletedDate: '2024-09-13'} ```",
              "see": [
                {
                  "label": "getRowValue method",
                  "url": "/docs/funcs/core/get-row-value"
                },
                {
                  "label": "getValue method",
                  "url": "/docs/funcs/core/get-value"
                },
                {
                  "label": "setValue method",
                  "url": "/docs/funcs/core/set-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/use-extra-object-data.html"
          },
          {
            "cid": 210,
            "sid": "use-filter-dialog",
            "name": "use-filter-dialog",
            "label": "UseFilterDialog",
            "data": {
              "body": "> 필터 다이얼로그를 사용할지 여부를 결정합니다. > 설정시 헤더행에 필터 다이얼로그를 띄우는 아이콘이 생성되며, 버튼 클릭시 나오는 필터 다이얼로그를 이용해 필터링을 진행할 수 있습니다. > 더불어 필터 다이얼로그 사용시 필터행은 사용하실 수 없습니다. > **제약사항1: 필터 다이얼로그는 멀티레코드 시트에서는 사용하실 수 없습니다.** > **제약사항2: 필터 다이얼로그는 컬럼, 셀의 Icon 옵션 및 HeaderCheck 옵션과 함께 사용하실 수 없습니다.** > **제약사항3: 필터 다이얼로그는 피벗 다이얼로그와 함께 사용하실 수 없습니다.** ### ![UseFilterDialog](/assets/imgs/filterDialog.png \"FilterDialog\") [필터 다이얼로그 이미지] ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|기능 사용 안함 (`default`)| |`1(true)`|헤더행에 필터 다이얼로그를 띄우는 필터 다이얼로그 아이콘을 생성합니다.| |`object`|헤더행에 필터 다이얼로그를 띄우는 필터 다이얼로그 아이콘을 생성합니다. json 형태로 옵션을 설정하여 필터 다이얼로그를 바꿀 수 있습니다.| `UseFilterDialog`를 `object`를 설정할 때, 사용자가 설정할 수 있는 옵션으로는 아래와 같은 것들이 있습니다. ### UseFilterDialog Options |Value|Description| |-----|-----| |`HideInputFilter`| ![UseFilterDialogInputFilterArea](/assets/imgs/filterDialogInputfilterArea.png \"FilterDialogInputFilterArea\") 데이터 필터 다이얼로그 최상단의 입력 필터를 숨길지 여부를 설정합니다. `true`: 데이터 필터 다이얼로그를 오픈할 때, 다이얼로그 최상단에 입력 필터를 숨깁니다. `false`: 데이터 필터 다이얼로그를 오픈할 때, 다이얼로그 최상단에 입력 필터를 포함합니다. (default: `false`)| |`Height`| ![UseFilterDialogItemArea](/assets/imgs/filterDialogItemArea.png \"FilterDialogItemArea\") 데이터 필터 다이얼로그 아이템 영역의 높이를 조정합니다. (default: `180`)| |`ZIndex`|시트의 `(Cfg) ZIndex`와 무관하게 필터 다이얼로그의 `Zindex`를 조정합니다.| |`Mode`| 데이터 필터 목록에 포함될 데이터를 결정합니다. (`default: 1`) `1`: 현재 보여지는 데이터를 포함하여 목록을 표시합니다. `2`: 현재 적용된 필터에 해당하는 데이터를 포함하여 목록을 표시합니다. ### Example ```javascript //헤더행에 필터 다이얼로그를 띄우는 필터 다이얼로그 아이콘을 생성합니다. options.Cfg = { UseFilterDialog: true }; options.Cfg = { // 필터 다이얼로그를 띄울 때, 어떻게 띄울지 변경합니다. UseFilterDialog: { HideInputFilter: true, // 데이터 필터 다이얼로그를 띄울 때, 다이얼로 최상단의 입력 필터를 띄우지 않습니다. Height: 150, // 데이터 필터 다이얼로그를 띄울 때, 아이템 영역의 높이를 150px로 조정합니다. ZIndex: 1000, // 필터 다이얼로그의 `ZIndex`를 1000으로 설정합니다. }, }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.1.0.94|UseFilterDialog:1 옵션 추가||core|8.3.0.35|object 형태로 UseFilterDialog를 설정하는 옵션 추가. <br> UseFilterDialog.HideInputFilter, UseFilterDialog.Height, UseFilterDialog.ZIndex 옵션 추가.||core|8.3.0.40|Mode 옵션 추가|"
            },
            "url": "docs/props/cfg/use-filter-dialog.html"
          },
          {
            "cid": 211,
            "sid": "use-group-sub-total",
            "name": "use-group-sub-total",
            "label": "UseGroupSubTotal",
            "data": {
              "body": "> 시트를 그룹핑하여 사용하고 있을 경우, 각 그룹별 소계행을 시트에 추가합니다. > 해당 옵션 설정 시 그룹 기능을 사용하고 있어야 하고, 컬럼 속성의 [GroupSubTotal](/docs/props/col/group-sub-total) 옵션이 설정되어 있어야 사용 가능합니다. ### Type `Int` ### Options |Value|Description| |-----|-----| |`0`|그룹 소계 기능 사용하지 않습니다. (`default`)| |`1`|그룹 소계 기능을 사용하며, 소계행을 신규행으로 추가합니다.| |`2`|그룹 소계 기능을 사용하며, 소계를 그룹행에 표시합니다.| ### Example ```javascript options.Cfg = { UseGroupSubTotal: 1 // 그룹 소계 기능 사용 여부 }; ```",
              "see": [
                {
                  "label": "Group cfg",
                  "url": "./group"
                },
                {
                  "label": "GroupSubTotal col",
                  "url": "/docs/props/col/group-sub-total"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.8|기능 추가||core|8.3.0.42|`UseGroupSubTotal: 2` 기능 추가|"
            },
            "url": "docs/props/cfg/use-group-sub-total.html"
          },
          {
            "cid": 212,
            "sid": "use-header-context-menu",
            "name": "use-header-context-menu",
            "label": "UseHeaderContextMenu",
            "data": {
              "body": "> 헤더 컨텍스트 메뉴의 표시/비표시를 제어할 수 있는 기능입니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|헤더 컨텍스트 메뉴 표시 안함| |`1(true)`|헤더 컨텍스트 메뉴 표시 (`default`)| ### Example ```javascript options.Cfg = { UseHeaderContextMenu: false // 헤더 컨텍스트 메뉴 표시 안하도록 설정 ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.2.0.1|기능 추가|"
            },
            "url": "docs/props/cfg/use-header-context-menu.html"
          },
          {
            "cid": 213,
            "sid": "use-header-sort-cancel",
            "name": "use-header-sort-cancel",
            "label": "UseHeaderSortCancel",
            "data": {
              "body": "> 일반적으로 헤더 셀을 클릭하여 소팅하는 경우 오름차순, 내림차순이 번갈아가며 정렬되는데, > `UseHeaderSortCancel`을 `1(true)`로 설정하면, 오름차순, 내림차순 후 **정렬취소** 순서로 변경됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| | `0(false)` | 헤더클릭 정렬 순서가 오름차순, 내림차순 순서로 정렬 (`default`) | | `1(true)` | 헤더클릭 정렬 순서가 오름차순, 내림차순, 정렬취소 순서로 정렬 | ### Example ```javascript options = { Cfg :{ UseHeaderSortCancel: true, ... } }; ```",
              "see": [
                {
                  "label": "HeaderSortMode cfg",
                  "url": "/docs/props/cfg/header-sort-mode"
                },
                {
                  "label": "MaxSort cfg",
                  "url": "/docs/props/cfg/max-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가|"
            },
            "url": "docs/props/cfg/use-header-sort-cancel.html"
          },
          {
            "cid": 214,
            "sid": "use-pivot",
            "name": "use-pivot",
            "label": "UsePivot",
            "data": {
              "body": "> 현재 시트를 피벗 시트의 데이터 시트로 사용할지 여부를 설정합니다. > 해당 옵션 설정 시 피벗 시트의 행, 열, 데이터로 사용될 열 들을 설정 할 수 있는 행과 피벗 생성 / 삭제등의 컨트롤을 담당하는 행이 [Solid](/docs/appx/solid)영역에 추가됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|피벗 사용 안함 (`default`)| |`1(true)`|피벗 사용| ### Example ```javascript options.Cfg = { UsePivot: true // 피벗 사용 여부 }; ```",
              "see": [
                {
                  "label": "PivotFormat cfg",
                  "url": "./pivot-format"
                },
                {
                  "label": "PivotFunc cfg",
                  "url": "./pivot-func"
                },
                {
                  "label": "AcceptPivotRows cfg",
                  "url": "./accept-pivot-rows"
                },
                {
                  "label": "AcceptPivotCols cfg",
                  "url": "./accept-pivot-cols"
                },
                {
                  "label": "AcceptPivotData cfg",
                  "url": "./accept-pivot-data"
                },
                {
                  "label": "Solid appendix",
                  "url": "/docs/appx/solid"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/use-pivot.html"
          },
          {
            "cid": 215,
            "sid": "use-random-id",
            "name": "use-random-id",
            "label": "UseRandomId",
            "data": {
              "body": "> 시트 생성시 임의의 id로 생성하고, 글로벌 객체를 생성하지 않습니다. > IBSheet.create()를 통해 생성시 부여한 id의 유/무 무관하게 임의의 값으로 id가 생성됩니다. > 생성된 시트의 id는 create()함수 호출 후 리턴되는 객체를 받아서 확인 하실 수 있습니다. ### Type `boolean` or `string` ### Options |Value|Description| |-----|-----| |`0(false)`|IBSheet.create()에서 정의한 id값 사용 (`default`)| |`1(true)`|\"sheet\" + 6자리 숫자 형식으로 생성 (ex: sheet847314)| |`string`|\"입력값\" + 6자리 숫자 형식으로 생성 (ex: grid125263 (값을 \"grid\"로 입력시))| ### Example ```javascript options = { Cfg:{ UseRandomId: \"myGrid\" }, Cols: [...] }; grid = IBSheet.create({ // 시트 생성시 id를 넣지 않음 \"el\": \"grid_DIV\", \"options\": options }); console.log(grid.id); //myGrid123456 식으로 id가 생성됨. //함수에 접근 할때 grid.getValue(grid.getFocusedRow(),grid.getFocusedCol()); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.1.0.47|기능 추가|"
            },
            "url": "docs/props/cfg/use-random-id.html"
          },
          {
            "cid": 216,
            "sid": "use_class-style",
            "name": "use_class-style",
            "label": "UseClassStyle",
            "data": {
              "body": "> 시트에 class 속성이 설정되어 있는 경우, 해당 class에 지정된 CSS에서 height와 width 값을 읽어 시트 생성 시 너비와 높이에 적용합니다. > 너비와 높이가 적용되는 우선순위는 style속성 > class속성 > 기본 값 순으로 적용됩니다. > 각 항목에 설정된 값이 없을 경우, 다음 순서로 우선순위가 넘어갑니다. > <mark>*너비는 **100%**, 높이는 **800px**를 기본값으로 갖습니다.</mark>* > **<mark>주의</mark> : 이 기능은 `단일 Class` 정보만을 대상으로 동작합니다.** ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|기능 사용 안함 (`default`)| |`1(true)`|시트 div에 선언된 class 정보를 확인하여, 시트의 너비와 높이에 적용| ### Example ```javascript options.Cfg = { UseClassStyle: true, // 시트 div에 style 정보가 없을 경우, class에 선언된 css 클래스들을 확인하여 width와 height를 시트 너비와 높이에 적용 }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.3.0.37|기능 추가|"
            },
            "url": "docs/props/cfg/use_class-style.html"
          },
          {
            "cid": 217,
            "sid": "v-scroll-pad-mode",
            "name": "v-scroll-pad-mode",
            "label": "VScrollPadMode",
            "data": {
              "body": "> 세로 스크롤의 상단에 여백을 설정하는 옵션입니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|아무 여백도 설정하지 않음 (`default`)| |`1`|[Kind](/docs/appx/kind)가 `Header`인 Head 행만큼 여백을 설정| ### Example ```javascript options.Cfg = { VScrollPadMode: 1 }; ```",
              "see": [
                {
                  "label": "Kind appendix",
                  "url": "/docs/appx/kind"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/v-scroll-pad-mode.html"
          },
          {
            "cid": 218,
            "sid": "valid-check",
            "name": "valid-check",
            "label": "ValidCheck",
            "data": {
              "body": "> 저장 함수(doSave, getSaveString, getSaveJson) 호출시 유효성 검사를 수행하고, 유효성 검사 실패한 셀을 마킹합니다. > 유효성 검사에 실패한 첫 셀에 focus가 위치 하며, 편집 상태를 만듭니다. > 유효성 검사 항목은 다음과 같습니다. > - `EditMask` 유효성 검사 > - `ResultMask` 유효성 검사 > - `Required` 유효성 검사 > - `Size` 유효성 검사 ### Type `mixed`( `boolean` \\| `object` ) ### Options |Value|Description| |-----|-----| |`0(false)`|저장 함수(doSave, getSaveString, getSaveJson) 호출시 Required 유효성 검사만 수행합니다. (`default`)| |`1(true)` |저장 함수(doSave, getSaveString, getSaveJson) 호출시 유효성 검사를 수행합니다. | |`object` |유효성 검사에 실패한 첫셀에 `Focus`(`default :1`), `Edit`(`default :1`) 유무 설정 | ### Example ```javascript // 저장 함수(doSave, getSaveString, getSaveJson) 호출시 유효성 검사를 수행합니다. // 유효성 검사 실패한 제일 첫번째 셀에 Focus 이동, 셀을 편집 상태로 설정 합니다. options.Cfg = { ValidCheck: true }; // 저장 함수(doSave, getSaveString, getSaveJson) 호출시 유효성 검사를 수행합니다. // 유효성 검사 실패한 제일 첫번째 셀에 Focus 이동합니다. options.Cfg = { ValidCheck: { Focus : 1, Edit : 0 }, }; ```",
              "see": [
                {
                  "label": "ValidateMessage cfg",
                  "url": "/docs/props/cfg/validate-message"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.3|기능 추가||core|8.2.0.15|`object` 기능 추가|"
            },
            "url": "docs/props/cfg/valid-check.html"
          },
          {
            "cid": 219,
            "sid": "validate-message",
            "name": "validate-message",
            "label": "ValidateMessage",
            "data": {
              "body": "> `ValidCheck`를 설정했을 때, 유효성 검사 실패시 띄울 메시지를 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|`ValidCheck`를 설정했을 때, 유효성 검사 실패시 띄울 메시지를 설정합니다. | ### Example ```javascript options.Cfg = { ValidateMessage: \"유효성 검사에 실패했습니다.\", // 유효성 검사 실패시 띄울 메시지를 설정합니다. }; ```",
              "see": [
                {
                  "label": "ValidCheck cfg",
                  "url": "/docs/props/cfg/valid-check"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.3|기능 추가|"
            },
            "url": "docs/props/cfg/validate-message.html"
          },
          {
            "cid": 220,
            "sid": "weeks",
            "name": "weeks",
            "label": "Weeks",
            "data": {
              "body": "> 달력의 주차 표현 여부를 설정합니다. > 사용자가 직접 [showCalendar](/docs/static/show-calendar)를 호출하는 경우엔 적용되지 않습니다. (직접 호출하는 경우 메소드 인자에 따로 설정해야합니다). ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|주차 표현 안함 (`default`) ![\"기본값\"](/assets/imgs/weeks_0.png \"기본값\")| |`1`|주차 표현 ![\"주차 표현\"](/assets/imgs/weeks_1.png \"주차 표현\")| ### Example ```javascript options.Cfg = { \"Weeks\": 1 // 주차 표현 }; ```",
              "see": [
                {
                  "label": "showCalendar static",
                  "url": "/docs/static/show-calendar"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/weeks.html"
          },
          {
            "cid": 221,
            "sid": "wheel-scroll-count",
            "name": "wheel-scroll-count",
            "label": "WheelScrollCount",
            "data": {
              "body": "> `SearchMode` 와 상관없이, 휠 스크롤 시 이동할 행의 개수를 설정하는 기능 입니다. > 설정 하지 않으면, `SearchMode: 0` 은 3개, `SearchMode: 2` 은 `window.wheel.event` 의 `deltaY` 만큼 움직입니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|휠 스크롤 시 이동할 행의 개수| ### Example ```javascript options.Cfg = { WheelScrollCount: 1 // 스크롤 시 행의 개수가 1개씩 움직입니다. }; ```",
              "see": [
                {
                  "label": "SearchMode cfg",
                  "url": "/docs/props/cfg/search-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.20|기능 추가|"
            },
            "url": "docs/props/cfg/wheel-scroll-count.html"
          },
          {
            "cid": 222,
            "sid": "with-credentials",
            "name": "with-credentials",
            "label": "WithCredentials",
            "data": {
              "body": "> [doSearch](/docs/funcs/core/do-search), [doSearchPaging](/docs/funcs/core/do-search-paging), [doSave](/docs/funcs/core/do-save) 사용시 내부 Ajax 통신 모듈 동작에 대해서 [withCredentials](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials) 옵션을 설정합니다. > `SearchMode: 4` 서버페이징 기능 사용시에도 해당 옵션이 설정됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|내부 Ajax 통신 모듈 사용시 withCredentials 옵션 사용 안함 (`default`)| |`1(true)`|내부 Ajax 통신 모듈 사용시 withCredentials 옵션 사용| ### Example ```javascript options.Cfg = { WithCredentials: true // 내부 Ajax 통신 모듈 사용시 `withCredentials` 옵션을 true로 설정. }; ```",
              "see": [
                {
                  "label": "doSearch method",
                  "url": "/docs/funcs/core/do-search"
                },
                {
                  "label": "doSearchPaging method",
                  "url": "/docs/funcs/core/do-search-paging"
                },
                {
                  "label": "doSave method",
                  "url": "/docs/funcs/core/do-save"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.28|기능 추가|"
            },
            "url": "docs/props/cfg/with-credentials.html"
          },
          {
            "cid": 223,
            "sid": "xls-import-mode",
            "name": "xls-import-mode",
            "label": "XlsImportMode",
            "data": {
              "body": "> importData() 함수를 사용할 때, 파일선택창에서 xls 파일 선택시 서버모듈로 전환할지 여부를 결정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|클라이언트 모듈을 사용합니다. (`default`)| |`1(true)`|서버 모듈을 사용합니다.| ### Example ```javascript options.Cfg = { XlsImportMode: 1 }; // 파일 선택창에서 xls 파일 선택시 자동으로 서버모듈로 전환합니다. sheet.importData(); ```",
              "see": [
                {
                  "label": "importData method",
                  "url": "/docs/funcs/core/import-data"
                },
                {
                  "label": "loadExcel method",
                  "url": "/docs/funcs/excel/load-excel"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|8.2.0.16|기능 추가|"
            },
            "url": "docs/props/cfg/xls-import-mode.html"
          },
          {
            "cid": 224,
            "sid": "z-index",
            "name": "z-index",
            "label": "ZIndex",
            "data": {
              "body": "> 시트와 시트의 팝업 다이얼로그, 메세지, 커서들에 대한 `css z-index` 기준 값을 설정합니다. > 기준 값 설정 시 시트에 속한 객체들은 `Zindex ~ Zindex+20` 까지의 `css z-index` 를 가지게 됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|`ZIndex`로 가질 기준 값을 설정한다. | ### Example ```javascript options.Cfg = { // 시트와 시트 내부 객체들의 z-index 기준값을 300 으로 설정 // 내부 객체들은 최대 320 까지의 z-index 를 가짐 ZIndex: 300, ... }; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cfg/z-index.html"
          }
        ]
      },
      {
        "gid": 2,
        "name": "props-row",
        "label": "Row",
        "children": [
          {
            "cid": 225,
            "sid": "added",
            "name": "added",
            "label": "Added",
            "data": {
              "body": "> [addRow](/docs/funcs/core/add-row) 함수를 통해 추가된 행은 내부적으로 해당 속성 값을 1로 갖게 됩니다. > 별도로 [NoColor](./no-color) 속성을 설정하지 않으면, 신규로 추가된 행의 배경색상은 css/default(테마)/main.css파일에 `.IBColorAdded`로 설정한 색상 (`기본값:#eee6fa` 연한파랑색)으로 변경됩니다. > 이 속성은 직접값을 수정하기 보다는 신규행 여부를 확인하는 용도로 사용하실 것을 권합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`1(true)`|신규행| ### Example ```javascript //삭제 버튼 function delete(sheet){ var frow = sheet.getFocusedRow(); //신규행은 즉시 삭제하고, 그외에는 상태만 삭제로 바꾼다. if (frow.Added) { sheet.removeRow(frow); } else { sheet.deleteRow(frow, 1); } } ```",
              "see": [
                {
                  "label": "Changed row",
                  "url": "./changed"
                },
                {
                  "label": "Deleted row",
                  "url": "./deleted"
                },
                {
                  "label": "addRow method",
                  "url": "/docs/funcs/core/add-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/added.html"
          },
          {
            "cid": 226,
            "sid": "align",
            "name": "align",
            "label": "Align",
            "data": {
              "body": "> 행 전체의 문자열 정렬을 설정합니다. > 트리 또는 그룹에서 사용할 때는 기준으로 지정된 컬럼(**트리의 접힘/펼침 아이콘이 보이는 컬럼**)의 데이터영역은 `Align`이 먹지 않습니다. > 일반적으로 데이터 행보다는 헤더 행에서 사용됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`Left`|문자열 왼쪽 정렬 (Left, LEFT, left 허용)| |`Center`|문자열 가운데 정렬 (Center, CENTER, center 허용)| |`Right`|문자열 오른쪽 정렬 (Right, RIGHT, right 허용) ### Example ```javascript // 특정 행의 문자열을 가운데 정렬 var row = sheet.getFirstVisibleRow(); row[\"Align\"] = \"Center\"; sheet.refreshRow(row); // 전체 헤더 행에 대해 문자열을 가운데 정렬. options.Def.Header = {\"Align\": \"CENTER\"}; ```",
              "see": [
                {
                  "label": "Align col",
                  "url": "/docs/props/col/align"
                },
                {
                  "label": "Align cell",
                  "url": "/docs/props/cell/align"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/align.html"
          },
          {
            "cid": 227,
            "sid": "alternate-class",
            "name": "alternate-class",
            "label": "AlternateClass",
            "data": {
              "body": "> 가독성을 높이기 위해서 홀수행, 짝수행 행의 배경색상을 다르게 설정할 때, 짝수행에 적용될 `css 클래스명`을 설정합니다. > 이 속성은 [Alternate](/docs/props/cfg/alternate)에 영향을 받습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|css 클래스 명| ### Example ```css <style> .alternateRow{background-color:#EDEDED;color:#666666;} </style> ``` ```javascript //데이터 영역의 짝수행의 클래스를 지정한다. options.Def.Row = {\"AlternateClass\": \"alternateRow\"}; ```",
              "see": [
                {
                  "label": "Alternate cfg",
                  "url": "/docs/props/cfg/alternate"
                },
                {
                  "label": "AlternateColor row",
                  "url": "./alternate-color"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/alternate-class.html"
          },
          {
            "cid": 228,
            "sid": "alternate-color",
            "name": "alternate-color",
            "label": "AlternateColor",
            "data": {
              "body": "> 가독성을 높이기 위해서 홀수행, 짝수행 행의 배경색상을 다르게 설정할 때, 짝수행에 보여질 색상을 설정합니다. > 이 속성은 [Alternate](/docs/props/cfg/alternate)속성에 영향을 받습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|HEX형식 (ex: #FF00F0) rgb형식 (ex: rgb(244,200,40)| ### Example ```javascript //데이터 영역의 짝수행 배경색을 회색으로 지정한다. options.Def.Row = {\"AlternateColor\": \"#DEDEDE\"}; ```",
              "see": [
                {
                  "label": "Alternate cfg",
                  "url": "/docs/props/cfg/alternate"
                },
                {
                  "label": "AlternateClass row",
                  "url": "./alternate-class"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/alternate-color.html"
          },
          {
            "cid": 229,
            "sid": "attribute-formula",
            "name": "attribute-formula",
            "label": "attribute+Formula",
            "data": {
              "body": "> 행의 각종 속성(`CanEdit, TextColor 등`)을 `Formula`를 통해 설정할 수 있습니다. > 가령 `CanEdit나 Color` 등과 같은 속성을 `Formula`로 지정하여 설정한다는 것은 다음과 같이 선언될 수 있습니다. >```javascript > options.Def.Row = [ > { > \"CanFormula\": true, //formula를 쓰려면 항상 들어감. > \"CalcOrder\": \"Color\", //Color formula를 사용함. > \"ColorFormula\": function (param) { > //부서명이 \"총무\"이면 행 전체 배경색으로 노랑으로 표시한다. > if (param.Row[\"DeptNm\"] == \"총무\") { > return \"#FFFFDD\"; > } > } > } > ]; > ``` > `※**매우중요**` > 1. 모든 포뮬러 기능을 사용시에는 [**CanFormula** row](/docs/props/row/can-formula)가 1로 설정되어야 동작합니다. > 2. `attribute+Formula(row)` 사용시에는 반드시 [**CalcOrder** row](/docs/props/row/calc-order)에 `속성명`을 계산 순서대로 설정 해야 합니다. > 가령 `CanEdit`속성 포뮬러와 `Color`속성 포뮬러를 설정했다면, `CalcOrder`에는 `\"CanEdit,Color\"`로 명시하면 됩니다. > 3. **`CalcOrder` 설정시 이름들은 반드시 띄어쓰기 없이 서로 붙여 작성해주셔야 됩니다. 이름들 간에 띄어쓰기가 되어 있는 경우 Formula 동작이 정상적으로 이뤄지지 않습니다.** ### Type `function` ### Options |Value|Description| |-----|-----| |`Sheet`|해당 시트 객체| |`Row`|`formula`가 동작할 행 객체| |`Attr`|`formula`를 적용할 속성(`Color`, `CanEdit` 등)| ### Example ```javascript //formula 사용시 CanFormula:1이 설정 되어야 하고, attribute+Formula 사용시에는 CalcOrder도 설정되어야 함 options.Def.Row = { CanFormula: 1, //formula를 사용하려면 반드시 설정되어야 함. // CalcOrder 설정시 속성 이름 간에 띄어쓰지 말고 전부 붙여 쓰셔야 합니다. CalcOrder: \"Color,CanEdit\", //적용할 속성을 순서대로 설정 CanEditFormula: function (param) { //결산여부가 체크된 행에 대해서는 편집 불가 if (param.Row[\"FinishedYN\"]) { return 0; } }, ColorFormula:function(param) { //부서가 회계인 경우 배경색을 \"#FFFFDD\"로 설정 if(param.Row[\"DeptCd\"] == \"1B\"){ return \"#FFFFDD\"; } } }; options.Cols = [ ... {Header:\"결산완료 여부\", Type:\"Bool\", Name:\"FinishedYN\"}, {Header:\"부서\", Type:\"Enum\", Name:\"DeptCd\", Enum:\"|총무|회계|인사|영업|개발\", EnumKeys:\"|2A|1B|C9|B4|D0\"}, ... ]; ```",
              "see": [
                {
                  "label": "CanFormula row",
                  "url": "/docs/props/row/can-formula"
                },
                {
                  "label": "CalcOrder row",
                  "url": "/docs/props/row/calc-order"
                },
                {
                  "label": "attrbute+formula col",
                  "url": "/docs/props/col/attribute-formula"
                },
                {
                  "label": "Formula appendix",
                  "url": "/docs/appx/formula"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/attribute-formula.html"
          },
          {
            "cid": 230,
            "sid": "button-width",
            "name": "button-width",
            "label": "ButtonWidth",
            "data": {
              "body": "> [Type col](/docs/props/col/type)이 [Button col](/docs/props/col/button)이고, [Button row](./button)속성의 값이 `Button`인 경우, 셀에 생성되는 버튼 객체의 너비를 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|버튼 태그의 너비(pixel단위)| ### Example ```javascript //특정행의 들여쓰기 정도를 2로 설정 var rows = sheet.getDataRows(); rows[3][\"ButtonWidth\"] = \"16px\"; sheet.refreshRow(rows[3]); ```",
              "see": [
                {
                  "label": "Type col",
                  "url": "/docs/props/col/type"
                },
                {
                  "label": "Button col",
                  "url": "/docs/props/col/button"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/button-width.html"
          },
          {
            "cid": 231,
            "sid": "calc-order",
            "name": "calc-order",
            "label": "CalcOrder",
            "data": {
              "body": "> 포뮬러(`일반 혹은 attribute+Formula`)가 설정된 열들에 대해서 계산 순서를 구분자 \",\"로 연결한 문자열로 정의합니다. > > 열에 [attribute + Formula](/docs/props/col/attribute-formula)를 설정시에는 반드시 **CalcOrder** 에 `열이름+attribute명`(ex: \"SalaryCanEdit\") 로 설정해야 하며, 수식계산만 하는 열의 경우 열이름만 넣으면 됩니다. > > `**※매우중요**` > 1. 일반 Formula(수식계산)만 사용하는 시트에서는 **CalcOrder**를 사용하지 않아도 `Formula`가 동작하지만 [attribute + Formula](/docs/props/col/attribute-formula)를 일반 `Formula`와 같이 사용하는 경우엔, 일반 `Formula`도 반드시 **CalcOrder**에 정의(열이름을 명시)를 해야만 동작합니다. > 2. **`CalcOrder` 설정시 이름들은 반드시 띄어쓰기 없이 서로 붙여 작성해주셔야 됩니다. 이름들 간에 띄어쓰기가 되어 있는 경우 Formula 동작이 정상적으로 이뤄지지 않습니다.** ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|계산 순서에 맞게 열이름(또는 열이름+속성명)을 \",\"를 구분자로 연결한 문자열| ### Example ```javascript //SubTotal, Total에 대해 Formula가 동작하고, SubTotal의 ColorFormula와 Total에 TextColorFormula가 다음으로 동작됨. options.Def.Row = { CalcOrder: \"SubTotal,Total,SubTotalColor,TotalTextColor\" }; options.Cols = [ {Type:\"Int\", Name:\"QT1\"}, {Type:\"Int\", Name:\"QT2\"}, {Type:\"Int\", Name:\"SubTotal\", Formula:QT12SUM, ColorFormula:STColur}, {Type:\"Int\", Name:\"QT3\"}, {Type:\"Int\", Name:\"QT4\"}, {Type:\"Int\", Name:\"Total\", Formula:TOTSUM, TextColorFormula:TOTTextColur}, ]; function QT12SUM(fr){ return fr.Row[\"QT1\"] + fr.Row[\"QT2\"]; } function TOTSUM(fr){ return fr.Row[\"QT1\"] + fr.Row[\"QT2\"] + fr.Row[\"QT3\"] + fr.Row[\"QT4\"]; } function STColur(fr){ return fr.Value > 500 ? \"#FF0000\" : \"#333333\"; } function TOTTextColur(fr){ if (fr.Value > 1000) { return '#FF0000'; } else { return '#333333'; } } ```",
              "see": [
                {
                  "label": "CanFormula row",
                  "url": "./can-formula"
                },
                {
                  "label": "Formula col",
                  "url": "/docs/props/col/formula"
                },
                {
                  "label": "attribute+Formula col",
                  "url": "/docs/props/col/attribute-formula"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/calc-order.html"
          },
          {
            "cid": 232,
            "sid": "can-drag-2",
            "name": "can-drag",
            "label": "CanDrag",
            "data": {
              "body": "> 행의 Drag 가능여부를 설정합니다. > [CanDrag cfg](/docs/props/cfg/can-drag) 속성이 `1(true)`인 경우 사용 가능합니다 ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|드래그 불가| |`1(true)`|드래그 가능| ### Example ```javascript //특정 행에 대해서 드래그를 막는다. var row = sheet.getRowById(\"AR55\"); row[\"CanDrag\"] = 0; ```",
              "see": [
                {
                  "label": "CanDrag cfg",
                  "url": "/docs/props/cfg/can-drag"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/can-drag.html"
          },
          {
            "cid": 233,
            "sid": "can-edit-2",
            "name": "can-edit",
            "label": "CanEdit",
            "data": {
              "body": "> 행에 대한 편집 가능 여부를 설정합니다. > 이 속성은 기본값은 `1`인데, `0` 설정시 `Cell, Row, Col`순으로 우선 순위를 갖습니다. > 가령 `Cell`에서 `0`으로 설정시 `Row`나 `Col`에서 `1`을 설정해도 해당 셀은 편집이 불가능해 집니다. > `CanEdit: 4`를 제외하고는 편집불가 모드 사용시 `Enum` 컬럼의 아이콘과 `Date` 타입 컬럼의 달력 아이콘을 표현하지 않습니다. > `Cfg`를 이용하여 편집불가 사용시에는 우선순위가 가장 높아짐으로, `Cell, Row, Col`에 `CanEdit: 0`은 먹히지 않습니다. > `Button` 타입의 버튼 클릭 시 동작, `File` 타입의 아이콘 표시 여부에 대해서는 해당 속성의 영향을 **`받지 않습니다`**. ([Disabled col](/docs/props/col/disabled) 통하여 제어 가능.) ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|행을 편집 불가(읽기 전용)으로 설정합니다. ![CanEdit](/assets/imgs/canEdit0.png \"CanEdit\")| |`1`|행을 편집 가능으로 설정합니다. ![CanEdit](/assets/imgs/canEdit1.png \"CanEdit\")| |`2`|행의 내용은 편집 불가하지만, 편집 미리보기를 제공하여 셀의 모든 내용을 확인할 수 있습니다. ![CanEdit](/assets/imgs/canEdit2.png \"CanEdit\")| |`3`|행 편집 불가능(편집 가능 불가능에 대한 배경색을 표시하지 않음) [ColorState (cfg)](/docs/props/cfg/color-state)와 관계없이 배경색을 표현하지 않음.| |`4`|행 편집 불가능 + 배경색 표현안함 + 아이콘표시| ### Example ```javascript //특정 행의 Edit를 막는다. var row = sheet.getRowById(\"AR55\"); row[\"CanEdit\"] = 0; sheet.refreshRow(row); //조회 데이터에서 특정행에 편집을 막는다. {\"data\":[ {\"CanEdit\":0,\"ColName1\":\"Value1\",\"ColName2\":\"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "CanEdit col",
                  "url": "/docs/props/col/can-edit"
                },
                {
                  "label": "CanEdit cell",
                  "url": "/docs/props/cell/can-edit"
                },
                {
                  "label": "getCanEdit method",
                  "url": "/docs/funcs/core/get-can-edit"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.12|`CanEdit: 3, 4` 추가|"
            },
            "url": "docs/props/row/can-edit.html"
          },
          {
            "cid": 234,
            "sid": "can-filter",
            "name": "can-filter",
            "label": "CanFilter",
            "data": {
              "body": "> 특정행에 대한 필터 적용 여부를 설정합니다. > `0(false)`로 설정시 해당 행은 필터설정과 무관한게 보여지게 됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|필터 적용 제외| |`1(true)`|필터 적용| ### Example ```javascript // 특정행들은 필터와 무관하게 항상 보여지게 한다 {\"data\":[ ... {\"CanFilter\":0,\"ColName1\":\"Value1\",\"ColName2\":\"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "showFilterRow method",
                  "url": "/docs/funcs/core/show-filter-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/can-filter.html"
          },
          {
            "cid": 235,
            "sid": "can-focus",
            "name": "can-focus",
            "label": "CanFocus",
            "data": {
              "body": "> 행에 대한 포커스 가능 여부를 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|포커스가 불가능해 집니다| |`1`|포커스가 가능합니다| |`2`|마우스 클릭으로만 포커스가 가능해 집니다.| ### Example ```javascript //특정 행의 포커스를 막는다. var row = sheet.getRowById(\"AR55\"); row[\"CanFocus\"] = 0; ```",
              "see": [
                {
                  "label": "CanFocus col",
                  "url": "/docs/props/col/can-focus"
                },
                {
                  "label": "CanFocus cell",
                  "url": "/docs/props/cell/can-focus"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/can-focus.html"
          },
          {
            "cid": 236,
            "sid": "can-formula",
            "name": "can-formula",
            "label": "CanFormula",
            "data": {
              "body": "> 행에 `Formula` 동작 여부를 설정합니다. > `0(false)`으로 설정하면 `Formula` 설정된 셀 값에 변경이 있어도 계산이 이루어지지 않습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|`Formula` 동작 안함| |`1(true)`|`Formula` 동작 가능| ### Example ```javascript //전체 데이터행에 대해서 Formula를 수행하지 않는다. //(특정 행에 대해서 따로 CanFormula를 작성한 뒤, (method)calculate()함수를 통해 필요할때만 Formula를 수행할 수도 있음.) options.Def.Row = {CanFormula: 0}; or //전체 데이터행에 대해서 Formula을 허용한다. options.Def.Row = {CanFormula: 1}; ... 시트 생성 ... //조회 이후 특정 시점에서 특정 행에만 Formula동작 sheet.getRowById(\"AR3\")[\"CanFormula\"] = 1; sheet.getRowById(\"AR5\")[\"CanFormula\"] = 1; //formula를 계산한다. sheet.calculate(1, 1); ```",
              "see": [
                {
                  "label": "CalcOrder row",
                  "url": "./calc-order"
                },
                {
                  "label": "calculate method",
                  "url": "/docs/funcs/core/calculate"
                },
                {
                  "label": "Formula appendix",
                  "url": "/docs/appx/formula"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/can-formula.html"
          },
          {
            "cid": 237,
            "sid": "can-group",
            "name": "can-group",
            "label": "CanGroup",
            "data": {
              "body": "> 특정행에 대한 그룹핑 허용 여부를 설정합니다. > `0(false)`로 설정시 해당 행은 그룹에 포함되지 않고 독립적으로 위치하게 됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|그룹핑 불가| |`1(true)`|그룹핑 가능| ### Example ```javascript //특정행들은 그룹에서 제외 시킨다. {\"data\":[ ... {\"CanGroup\":0,\"ColName1\":\"Value1\",\"ColName2\":\"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "Group cfg",
                  "url": "/docs/props/cfg/group"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/can-group.html"
          },
          {
            "cid": 238,
            "sid": "can-print",
            "name": "can-print",
            "label": "CanPrint",
            "data": {
              "body": "> 행의 프린트 가능 여부. > [doPrint](/docs/funcs/core/do-print) 또는 [down2Pdf](/docs/funcs/excel/down-to-pdf)를 이용하여 프린트 할 경우 해당 행을 프린트 할지 여부를 설정할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|프린트 불가| |`1`|프린트 가능 (`default`)| ### Example ```javascript //특정 행에 대해서 프린트를 막는다. var row = sheet.getRowById(\"AR55\"); sheet.setAttribute(row, null, 'CanPrint', 0); ```",
              "see": [
                {
                  "label": "doPrint method",
                  "url": "/docs/funcs/core/do-print"
                },
                {
                  "label": "down2Pdf method",
                  "url": "/docs/funcs/excel/down-to-pdf"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/can-print.html"
          },
          {
            "cid": 239,
            "sid": "can-select-2",
            "name": "can-select",
            "label": "CanSelect",
            "data": {
              "body": "> 행의 선택 가능여부를 설정합니다.(드래그를 통한 영역선택) > 속성이 `0(false)`인 경우, 특정 행에 대해 선택(selecting)을 막을 수 있습니다. > 드래그를 통한 선택시 `CanSelect: 0`인 행은 건너 뛰고 선택됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|선택 불가| |`1(true)`|선택 가능| ### Example ```javascript //특정 행에 대해서 드래그를 막는다. var row = sheet.getRowById(\"AR55\"); row[\"CanSelect\"] = 0; ```",
              "see": [
                {
                  "label": "CanSelect cfg",
                  "url": "/docs/props/cfg/can-select"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/can-select.html"
          },
          {
            "cid": 240,
            "sid": "can-sort-2",
            "name": "can-sort",
            "label": "CanSort",
            "data": {
              "body": "> 트리사용시 자식행들에 대한 소팅 가능 불가능 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|소팅 불가| |`1(true)`|소팅 가능| ### Example ```javascript //특정행의 자식행에 대해 소팅을 허용한다. var row = sheet.getNextSiblingRow(true); row[\"CanSort\"] = 1; ```",
              "see": [
                {
                  "label": "SortPos row",
                  "url": "/docs/props/row/sort-pos"
                },
                {
                  "label": "CanSort col",
                  "url": "/docs/props/col/can-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/can-sort.html"
          },
          {
            "cid": 241,
            "sid": "changed",
            "name": "changed",
            "label": "Changed",
            "data": {
              "body": "> 행의 변경 여부를 나타냅니다. > 행의 값을 수정시 자동으로 `1(true)`로 수정되고, 값을 원래 값으로 복원하면 자동으로 속성이 제거됩니다. > 별도로 [NoColor](./no-color) 속성을 설정하지 않으면, 수정시 배경색상은 css/default(테마)/main.css파일에 `.IBColorChanged`로 설정한 색상 (`기본값:#FFFFD6` 연한노란색)으로 변경됩니다. > 이 속성은 직접 값을 변경하기 보다는 수정 여부를 확인하는 용도로 사용할 것을 권합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`1(true)`|수정됨| ### Example ```javascript // 전체 데이터 중에 수정된 행의 개수를 확인 // 아래 예제는 Changed 속성을 확인해보기 위해 작성되었으며, // 실제 수정된 행의 개수를 확인하려면 getRowsByStatus()함수를 사용하시면 됩니다. var rows = sheet.getDataRows(); var cnt = 0; for (var i = 0; i < rows.length; i++) { if (rows[i][\"Changed\"]) cnt++; } alert(cnt+\"개의 수정된 행이 존재합니다.\"); ```",
              "see": [
                {
                  "label": "Added row",
                  "url": "./added"
                },
                {
                  "label": "Deleted row",
                  "url": "./deleted"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/changed.html"
          },
          {
            "cid": 242,
            "sid": "class",
            "name": "class",
            "label": "Class",
            "data": {
              "body": "> 행에 포함된 각 셀에 `커스텀 css 클래스`를 설정합니다. > **<mark>주의</mark> : Class로 적용한 css는 엑셀 다운로드시 디자인 반영되지 않습니다.** ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|css에 지정한 클래스 명| ### Example ```css <style> .rowAlert {font-weight:700;animation:blinkingText 1s infinite;} @keyframes blinkingText{ 0%{ color: #FF0000; } 50%{ color: #FF0000; } 80%{ color:transparent; } 100%{ color: #FF0000; } } .subTitle{color:#EDEDED;background-color:#666666;} </style> ``` ```javascript // 특정행의 글자를 붉은색에 깜빡이게 변경한다. var row = sheet.getRowById(\"AR11\") row[\"Class\"] = \"rowAlert\"; sheet.refreshRow(row); // 헤더행의 타이틀과 배경 색상을 변경한다. options.Def.Header = {\"Class\": \"subTitle\"}; ```",
              "see": [
                {
                  "label": "AlternateClass row",
                  "url": "./alternate-class"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/class.html"
          },
          {
            "cid": 243,
            "sid": "color",
            "name": "color",
            "label": "Color",
            "data": {
              "body": "> 행의 배경색상을 설정합니다. > 행의 색상은 상태에 따른 배경색상의 영향을 받습니다. > rgb(255,255,255)는 투명색이 됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|HEX형식 (ex:#FF00F0) rgb형식 (ex:rgb(244,200,40)| ### Example ```javascript //특정행의 배경색상을 회색으로 설정한다. var row = sheet.getRowById(\"AR11\"); row[\"Color\"] = \"#ADADAD\"; sheet.refreshRow(row); //조회 데이터 중에 특정행의 배경색을 노란색으로 설정한다. {\"data\":[ ... {\"Color\":\"#FFFF00\",\"ColName1\":\"Value1\",\"ColName2\":\"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "AlternateColor row",
                  "url": "./alternate-color"
                },
                {
                  "label": "TextColor row",
                  "url": "./text-color"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/color.html"
          },
          {
            "cid": 244,
            "sid": "deleted",
            "name": "deleted",
            "label": "Deleted",
            "data": {
              "body": "> [DeleteRow](/docs/funcs/core/delete-row) 함수 호출시 해당 행에 속성값이 `1(true)`로 설정됩니다. > `Deleted` 값을 `1(true)`로 설정되면 향후 삭제할 행의 의미로 배경색상이 .`IBColorDeleted 클래스`에서 정의한 색상으로 변경됩니다. > 해당 속성은 직접 설정하기 보다는 설정값을 확인하는 용도로 사용하실 것을 권합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`1(true)`|삭제예정| ### Example ```javascript //전체 데이터 중에 삭제예정인 행의 개수를 확인 //아래 예제는 Deleted 속성을 확인해보기 위해 작성되었으며, //실제 삭제예정인 행의 개수를 확인하려면 getRowsByStatus()함수를 사용하시면 됩니다. var rows = sheet.getDataRows(); var cnt = 0; for(var i = 0; i < rows.length; i++){ if (rows[i][\"Deleted\"]) cnt++; } alert(cnt+\"개의 삭제예정인 행이 존재합니다.\"); ```",
              "see": [
                {
                  "label": "Added row",
                  "url": "./added"
                },
                {
                  "label": "Changed row",
                  "url": "./changed"
                },
                {
                  "label": "DeleteRow method",
                  "url": "/docs/funcs/core/delete-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/deleted.html"
          },
          {
            "cid": 245,
            "sid": "expanded",
            "name": "expanded",
            "label": "Expanded",
            "data": {
              "body": "> 트리 기능 사용시 행의 접힘/펼침 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|접힘| |`1(true)`|펼침| ### Example ```javascript //특정행의 접힘여부 확인 var ep = sheet.getAttribute(sheet.getFocusedRow(), null, \"Expanded\"); //특정행을 펼칩니다. setExpandRow api 사용 sheet.setExpandRow(sheet.getRowByIndex(4), null, 1); ```",
              "see": [
                {
                  "label": "showTreeLevel method",
                  "url": "/docs/funcs/core/show-tree-level"
                },
                {
                  "label": "setExpandRow method",
                  "url": "/docs/funcs/core/set-expand-row"
                },
                {
                  "label": "onBeforeExpand event",
                  "url": "/docs/events/on-before-expand"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/expanded.html"
          },
          {
            "cid": 246,
            "sid": "focus-row",
            "name": "focus-row",
            "label": "FocusRow",
            "data": {
              "body": "> 데이터 셀을 클릭시 보여지는 \"커서 포커스 행\"은 Table 객체 위에 DIV 객체가 떠있는 형태로 구성됩니다. > 특정 행에 포커스가 있을 때 보여질 \"커서 포커스 행\"의 디자인을 설정합니다. > 예약된 문자를 구분자 \",\" 연결하여 설정합니다. > 기본적으로는 \"Border, Background\"로 구성됩니다. ### ![FocusRow](/assets/imgs/focusRow1.png \"FocusRow default\") [**일반 FocusRow**] ![FocusRow](/assets/imgs/focusRow2.png \"FocusRow default\") [**border없이 Background로 설정시**] ### Type `string` ### Options |Value|Description| |-----|-----| |`Border`|커서 포커스 DIV의 테두리 사용 (.IBFocusRowBorder)| |`Background`|커서 포커스 DIV의 배경색 사용 (.IBFocusRowBackground) | |`Color`|커서 포커스 DIV를 사용하지 않고 Table 객체에 background-color를 부여 (성능이 저하될 수 있음, 포커스 셀은 제외) (.IBColorFocused) | |`Class`|css/default(테마)/main.css 파일에 .IBClassFocused 클래스에 정의한 디자인을 따릅니다. (포커스 셀은 제외)| ### Example ```javascript //특정 행에 대해서 포커스 행의 디자인을 border없이 배경색만 보이는 형태로 수정 var row = sheet.getRowById(\"AR55\"); row[\"FocusRow\"] = \"Background\"; //전체 행에 대해서 포커스 행의 디자인을 .IBClassFocused 클래스에 정의한 디자인으로 보이도록 수정 options.Def = { Row : { FocusRow: \"Class\" } }; ```",
              "see": [
                {
                  "label": "FocusRow col",
                  "url": "/docs/props/col/focus-row"
                },
                {
                  "label": "FocusRow cell",
                  "url": "/docs/props/cell/focus-row"
                },
                {
                  "label": "FocusCell col",
                  "url": "/docs/props/col/focus-cell"
                },
                {
                  "label": "FocusCell cell",
                  "url": "/docs/props/cell/focus-cell"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/focus-row.html"
          },
          {
            "cid": 247,
            "sid": "have-child",
            "name": "have-child",
            "label": "HaveChild",
            "data": {
              "body": "> 동적 로드를 할 행에 설정시 `MainCol` 이 있는 컬럼에 트리 아이콘을 추가합니다. > 해당 기능의 경우, 자식이 없어야 동작하고 `true` 로 설정시 접혀있는 아이콘이 생기게 됩니다. > `loadSearchData, doSearch` 에 `parent` 인자(데이터를 조회할 부모행 지정)를 이용해서 동적트리조회를 하면 됩니다. > `setAttribute` 를 사용해서 동적으로 제어할 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|트리아이콘 생성하지 않음.| |`1(true)`|접힌 트리아이콘 생성| ### Example ```javascript Items: [ { Cls: '콩류', HaveChild: true // 자식 없음으로 접힌 트리 아이콘 생성. }, ... ] // --------------------- sheet.setAttribute(row, null, 'HaveChild', true); ```",
              "see": [
                {
                  "label": "doSearch method",
                  "url": "/docs/funcs/core/do-search"
                },
                {
                  "label": "loadSearchData method",
                  "url": "/docs/funcs/core/load-search-data"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.25|기능 추가|"
            },
            "url": "docs/props/row/have-child.html"
          },
          {
            "cid": 248,
            "sid": "height",
            "name": "height",
            "label": "Height",
            "data": {
              "body": "> 행의 높이를 설정합니다. > `Height` 속성에 설정된 값보다 셀 높이가 커져야하는 경우(셀의 내용이 많아서) 셀 내용에 맞춰 행의 높이가 설정됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|행의 높이 (pixel 단위)| ### Example ```javascript options.Def.Row = { \"Height\": 50, } ```",
              "see": [
                {
                  "label": "Size cfg",
                  "url": "/docs/props/cfg/size"
                },
                {
                  "label": "MaxHeight row",
                  "url": "./max-height"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/height.html"
          },
          {
            "cid": 249,
            "sid": "hint-value",
            "name": "hint-value",
            "label": "HintValue",
            "data": {
              "body": "> 힌트는 열의 너비보다 셀의 내용이 많은 경우, 마우스 커서가 해당 셀 위에 오버시 해당 셀의 너비를 늘려 가려진 내용을 보여주는 기능입니다. > 이 기능은 행단위로 힌트 기능 활성화시 보여질 내용을 변경/설정합니다. ### ![HintValue](/assets/imgs/hintValue.png \"마우스 커서가 셀에 오버시 설정한 글자가 보여짐\") ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|힌트 활성화시 보여질 내용| ### Example ```javascript //10번 행에 대해서는 Hint기능 사용시 원래 내용과 다른 내용이 보여지게 끔 한다. var row = sheet.getRowById(\"AR10\"); row[\"HintValue\"] = \"해당 건은 결제가 완료되었습니다.\"; //조회 데이터에서 일부 행에 대해 원래 셀의 내용과 다른 내용이 보여지게 끔 한다. {\"data\":[ {\"HintValue\":\"의심거래항목입니다.\", \"ColName1\":\"Value1\", \"ColName2\":\"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "ShowHint row",
                  "url": "./show-hint"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/hint-value.html"
          },
          {
            "cid": 250,
            "sid": "html-postfix",
            "name": "html-postfix",
            "label": "HtmlPostfix",
            "data": {
              "body": "> 행 전체 각 셀의 문자열 뒤에 원하는 HTML 태그를 삽입합니다. > 이 속성은 행에서 사용되는 일은 거의 드물며, 보통 `Col`이나 `Cell`단위로 사용한다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|원하는 Html태그| ### Example ```javascript //헤더행의 각 셀 타이틀 끝에 특정 Icon을 추가한다 options.Def.Header = {\"HtmlPostfix\": '<i class=\"fas fa-apple-alt\"></i>'}; ```",
              "see": [
                {
                  "label": "HtmlPrefix row",
                  "url": "./html-prefix"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/html-postfix.html"
          },
          {
            "cid": 251,
            "sid": "html-prefix",
            "name": "html-prefix",
            "label": "HtmlPrefix",
            "data": {
              "body": "> 행 전체 각 셀의 문자열 앞에 원하는 HTML 태그를 삽입합니다. > 이 속성은 행에서 사용되는 일은 거의 드물며, 보통 `Col`이나 `Cell`단위로 사용한다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|원하는 Html태그| ### Example ```javascript //헤더행의 각 셀에 특정 Icon을 추가한다 options.Def.Header = {\"HtmlPrefix\": '<i class=\"far fa-angry\"></i>'}; ```",
              "see": [
                {
                  "label": "HtmlPostfix row",
                  "url": "./html-postfix"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/html-prefix.html"
          },
          {
            "cid": 252,
            "sid": "indent",
            "name": "indent",
            "label": "Indent",
            "data": {
              "body": "> 행 전체의 문자열 들여쓰기를 설정합니다. > 좌측정렬을 하는 셀은 좌측 끝부터, 우측정렬을 하는 셀은 우측 끝부터 들여쓰기가 적용됩니다. > 들여쓰기 1칸은 `10px` 입니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|들여쓰기 정도 (10px 단위)| ### Example ```javascript //특정행의 들여쓰기 정도를 2로 설정 var row = sheet.getRowById(\"AR11\"); row[\"Indent\"] = 2; sheet.refreshRow(row); //전체 데이터 행의 들여쓰기를 1로 설정 options.Def.Row = {\"Indent\": 1}; ```",
              "see": [
                {
                  "label": "Align row",
                  "url": "./align"
                },
                {
                  "label": "Align col",
                  "url": "/docs/props/col/align"
                },
                {
                  "label": "Align cell",
                  "url": "/docs/props/cell/align"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/indent.html"
          },
          {
            "cid": 253,
            "sid": "kind",
            "name": "kind",
            "label": "Kind",
            "data": {
              "body": "> 각 행이 갖고 있는 기능을 의미합니다. > 행 마다의 기능(헤더, 데이터, 필터, 그룹 등)을 확인할 때 사용됩니다. > 이 속성의 값은 동적으로 수정할 수 없으며, 확인용도로만 사용하실 것을 권합니다. > `Kind`의 자세한 종류는 **Appendix**에 [Kind attribute](/docs/appx/kind) 를 참고하세요. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|행의 기능| ### Example ```javascript //행의 Kind를 확인한다. var row = sheet.getRowById(\"CustRow\"); alert(row[\"Kind\"]); ```",
              "see": [
                {
                  "label": "Kind appendix",
                  "url": "/docs/appx/kind"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/kind.html"
          },
          {
            "cid": 254,
            "sid": "max-height",
            "name": "max-height",
            "label": "MaxHeight",
            "data": {
              "body": "> 행의 최대 높이를 설정합니다. > Wrap 설정시 데이터의 양에 따라 행의 높이가 늘어나게 되는데, 이때 최대 증가할 수 있는 높이를 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|행의 최대 높이 (pixel 단위)| ### Example ```javascript options.Def.Row = { \"MaxHeight\": 50, } ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/max-height.html"
          },
          {
            "cid": 255,
            "sid": "menu-2",
            "name": "menu",
            "label": "Menu",
            "data": {
              "body": "> 마우스 우측 버튼 클릭시 보여질 컨텍스트 메뉴를 설정합니다. ### Type mixed( `object` \\| `string` ) ### Options |Value|Description| |-----|-----| |`string`|첫글자를 구분자로 한 컨텍스트 메뉴스트링 지정 (ex: @저장@임시저장@취소 or *상신*취소) | |`object`|[Menu Object 설정 링크 참고](/docs/appx/menu) ### Example ```javascript //헤더행에서 마우스 우측 버튼 클릭시 엑셀 다운로드에 대한 설정 활성화. var rows = sheet.getHeaderRows(); for(var i = 0; i < rows.length; i++){ rows[i][\"Menu\"] = \"|엑셀다운로드|텍스트다운로드|PDF다운로드\"; } //조회 데이터에서 특정행에 컨텍스트 메뉴 기능 적용하기. {\"data\":[ {\"Menu\":\"|상신하기|보류하기\",\"ColName1\":\"Value1\",\"ColName2\":\"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "Menu appendix",
                  "url": "/docs/appx/menu"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/menu.html"
          },
          {
            "cid": 256,
            "sid": "no-calculate",
            "name": "no-calculate",
            "label": "NoCalculate",
            "data": {
              "body": "> 특정행에 대한 소계 또는 합계 계산 포함 여부를 설정합니다. > `1(true)`로 설정시 해당 행은 소계 또는 합계 계산에 포함되지 않습니다. > 동적으로 속성을 추가한 후 셀 값을 변경할 경우 `NoCalculate: 1(true)` 행을 제외하고 소계가 재계산됩니다 > **<mark>주의</mark> : 소계행을 [refreshRow](/docs/funcs/core/refresh-row) 하는 것으로는 소계 재계산이 이루어지지 않습니다** ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|소계/합계 계산 포함 (`default`)| |`1(true)`|소계/합계 계산 제외| ### Example ```javascript // 특정행들은 소계/합계 계산에 포함되지 않는다 {\"data\":[ ... {\"NoCalculate\":1,\"ColName1\":\"Value1\",\"ColName2\":\"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "makeSubTotal method",
                  "url": "/docs/funcs/core/make-sub-total"
                },
                {
                  "label": "setFormulaRow method",
                  "url": "/docs/funcs/core/set-formula-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
            },
            "url": "docs/props/row/no-calculate.html"
          },
          {
            "cid": 257,
            "sid": "no-color",
            "name": "no-color",
            "label": "NoColor",
            "data": {
              "body": "> 행의 기본 적용된 배경색이 무시됩니다. > 홀수, 짝수행에 대한 배경색상([AlternateColor](./alternate-color))나 상태(입력, 수정, 삭제) 및 선택에 대한 색상이 무시되고, `Color` 속성으로 통한 배경색도 적용되지 않게 할 수 있습니다. > [FormulaRow](/docs/props/col/formula-row)에 `NoColor`를 설정하여 해당 행의 배경색을 무시할 수 있습니다. > `NoColor`가 적용되는 우선 순위는 셀 > 행 > 열입니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|기능 사용 안함(`defualt`)| |`1`|모든 배경색 무시(단 Class속성을 통해 설정한 배경색을 적용)| |`2`|상태 및 선택에 대한 색상만 무시 |`3`|`Color` 설정 시 상태, `AlternateColor`에 대한 색상을 무시하고 `Color` 색상 적용 ### Example ```javascript //특정행의 배경색 변경을 막는다. var row = sheet.getRowById(\"AR11\") row[\"NoColor\"] = 1; sheet.refreshRow(row); //FomulaRow의 배경색 변경 기능을 제한한다. sheet.FormulaRow.NoColor = 2; sheet.refreshRow(sheet.FormulaRow); //다음과 같이 선언할 수도 있습니다. options.Def.FormulaRow = {NoColor: 2}; //데이터 행에 대해서 상태에 따른 배경색 변경 기능을 제한한다. options.Def.Header = {\"NoColor\":2}; ```",
              "see": [
                {
                  "label": "Alternate cfg",
                  "url": "/docs/props/cfg/alternate"
                },
                {
                  "label": "Color row",
                  "url": "./color"
                },
                {
                  "label": "AlternateColor row",
                  "url": "./alternate-color"
                },
                {
                  "label": "FormulaRow col",
                  "url": "/docs/props/col/formula-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.2.0.14|`NoColor: 3` 동작 추가|"
            },
            "url": "docs/props/row/no-color.html"
          },
          {
            "cid": 258,
            "sid": "no-upload",
            "name": "no-upload",
            "label": "NoUpload",
            "data": {
              "body": "> 지정한 행의 저장 여부를 설정합니다. > `1(true)`로 설정한 행의 경우 저장 함수([doSave](/docs/funcs/core/do-save), [getSaveString](/docs/funcs/core/get-save-string) 등) 호출시 상태와 무관하게 무시됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|서버로 전송 (데이터행 `default: 0(false)`)| |`1(true)`|서버로 전송 제외(필터나 합계행 `default: 1(true)`)| ### Example ```javascript function save(){ //특정행은 저장시 서버로 전송 제외하기 var rows = sheet.getDataRows(); for(var i = 0; i < rows.length; i++){ if (rows[i][\"CHK\"] == 0 && rows[i][\"UpYEAR\"] < 2018) { rows[i][\"NoUpload\"] = 1; } } //저장함수 호출 sheet.doSave(url); } ```",
              "see": [
                {
                  "label": "doSave method",
                  "url": "/docs/funcs/core/do-save"
                },
                {
                  "label": "getSaveString method",
                  "url": "/docs/funcs/core/get-save-string"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/no-upload.html"
          },
          {
            "cid": 259,
            "sid": "row-merge",
            "name": "row-merge",
            "label": "RowMerge",
            "data": {
              "body": "> 데이터 영역/헤더 영역에서 값 기준 병합 실행([DataMerge](/docs/props/cfg/data-merge), [HeaderMerge](/docs/props/cfg/header-merge))시 해당 행에 대해서 `병합할지 여부`를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|해당 행을 병합 대상에 포함하지 않습니다.| |`1(true)`|해당 행을 병합 대상에 포함합니다. (`default`)| ### Example ```javascript //특정행을 병합하지 않음. var row = sheet.getFirstVisibleRow(); row[\"RowMerge\"] = false; sheet.setAutoMerge( {dataMerge: 1, headerMerge: 0, prevColumnMerge: 0} ); // 첫번 째 헤더행을 병합하지 않음. var header = sheet.getHeaderRows()[0]; header[\"RowMerge\"] = false; ```",
              "see": [
                {
                  "label": "ColMerge col",
                  "url": "/docs/props/col/col-merge"
                },
                {
                  "label": "ColMerge cell",
                  "url": "/docs/props/cell/col-merge"
                },
                {
                  "label": "DataMerge cfg",
                  "url": "/docs/props/cfg/data-merge"
                },
                {
                  "label": "HeaderMerge cfg",
                  "url": "/docs/props/cfg/header-merge"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/row-merge.html"
          },
          {
            "cid": 260,
            "sid": "selected",
            "name": "selected",
            "label": "Selected",
            "data": {
              "body": "> 행을 선택합니다. > 속성을 `1(true)`로 설정하면 [getSelectedRows()](/docs/funcs/core/get-selected-rows)를 통해 선택한 행을 얻을 수 있습니다. > [SelectingCells cfg](/docs/props/cfg/selecting-cells) 속성에 따라 선택한 행을 표시하거나 무시할 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|선택 해제| |`1(true)`|<span class='optional'>선택</span>| ### Example ```javascript //특정 행을 선택한다. var row = sheet.getRowById(\"AR55\"); row[\"Selected\"] = 1; ```",
              "see": [
                {
                  "label": "SelectingCells cfg",
                  "url": "/docs/props/cfg/selecting-cells"
                },
                {
                  "label": "getSelectedRows method",
                  "url": "/docs/funcs/core/get-selected-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/selected.html"
          },
          {
            "cid": 261,
            "sid": "show-hint",
            "name": "show-hint",
            "label": "ShowHint",
            "data": {
              "body": "> 힌트는 열의 너비보다 셀의 내용이 많은 경우, 마우스 커서가 해당 셀 위에 오버시 해당 셀의 너비를 늘려 내용을 보여주는 기능입니다. > 행 단위로 힌트기능을 활성화 할지 여부를 설정하며, 체크박스나 라디오 형태의 열에서는 작동하지 않습니다. ### ![힌트활성화](/assets/imgs/hint1.png \"마우스 커서가 셀에 올라갔을때 힌트를 통해 감춰진 부분이 보여짐\") ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|힌트 기능을 사용안함| |`1`|셀의 크기가 작아 셀의 내용의 일부만 보여질때 동작 (`default`)| |`2`|1번 옵션과 더불어 스크롤이 있는 시트에서 셀이 하단에 있어 내용의 아래부분이 안보여질때 힌트 동작| |`3`|일반적으로는 힌트 기능이 동작하지 않고 [onShowHint](/docs/events/on-show-hint) 이벤트를 통해서만 동작(이벤트를 통해 힌트에 어떤 내용이 보여지게 할지 설정 가능)| ### Example ```javascript //10번 행에 대해서는 Hint 기능 제거. var row = sheet.getRowById(\"AR10\"); row[\"ShowHint\"] = 0; sheet.refreshRow(row); //조회 데이터에서 일부 행에 대해 Hint 기능 제거 {\"data\":[ {\"ShowHint\": 0, \"ColName1\": \"Value1\", \"ColName2\": \"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "onShowHint event",
                  "url": "/docs/events/on-show-hint"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/show-hint.html"
          },
          {
            "cid": 262,
            "sid": "sort-icons-2",
            "name": "sort-icons",
            "label": "SortIcons",
            "data": {
              "body": "> 정렬 아이콘의 화면 표시여부와 동작을 설정합니다. > 해당 기능과 [SortIcons cfg](/docs/props/cfg/sort-icons)를 같이 사용하는 경우 옵션 `0`은 해당 옵션이 적용되고, 옵션 `1, 2`는[SortIcons cfg](/docs/props/cfg/sort-icons)이 적용됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`| 아이콘이 모두 숨겨지고 정렬 불가 | |`1`| 모든 정렬 아이콘 표시(정렬되기 전에는 .IBSort0Right 이미지가 표시) , `MultiRecord`에서는 사용 불가 | |`2`| 정렬한 열에만 아이콘이 표시됨 (`default`) | ### Example ```javascript options.Def.Header = { SortIcons: 1 // 모든 정렬 아이콘 표시 }; ```",
              "see": [
                {
                  "label": "SortIcons cfg",
                  "url": "/docs/props/cfg/sort-icons"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/sort-icons.html"
          },
          {
            "cid": 263,
            "sid": "sort-pos",
            "name": "sort-pos",
            "label": "SortPos",
            "data": {
              "body": "> 소팅시 지정한 행의 위치를 고정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`양수`|위에서부터 순서대로 원하는 `SortPos`가 지정된 행들 가운데 지정한 순번에 위치하게 됩니다. 가령 `2`로 설정하면 헤더 아래 `SortPos`가 설정된 행들 중에 두번째 행에 고정됩니다. 만약 `SortPos`를 지정한 행이 하나밖에 없다면 첫번째 행에 위치하게 됩니다.| |`음수`|아래에서부터 순서대로 원하는 인덱스에 위치하게 됩니다. 가령 `1`로 설정하면 맨 아래 행에 고정됩니다.| ### Example ```javascript //지정한 행들을 소팅시 최상단에 위치시킨다. var row = sheet.getFocusedRow(); row[\"SortPos\"] = 1; ```",
              "see": [
                {
                  "label": "CanSort col",
                  "url": "/docs/props/col/can-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/sort-pos.html"
          },
          {
            "cid": 264,
            "sid": "spanned",
            "name": "spanned",
            "label": "Spanned",
            "data": {
              "body": "> 행 내에서 좌우 열간에 병합을 허용할지 여부를 설정합니다.(좌우로 머지) > `Def.Row` 나 `Def.Header`에서 설정하시면 헤더 영역이나 데이터 영역에서 Span 속성을 통해 좌우의 셀을 병합하실 수 있습니다. > 셀머지 기능 사용시 자동머지 기능과는 별도로 움직임으로 자동머지 기능을 꺼주셔야합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|Span(좌우병합) 허용하지 않음 (`default`)| |`1(true)`|Span(좌우병합) 허용| ### Example ![Spanned](/assets/imgs/headerMerge.png \"Spanned\") ```javascript //헤더 행에 대해 좌우로 병합 options.Def.Header = {Spanned:true}; opiotns.Cfg = { HeaderMerge: 0 // 자동머지 끔 }; options.Cols = [ {Header:[{Value:\"(행사)매출실적\",Span:4,Align:\"Center\"},{Value:\"1월\"}],Name:\"Col1\"}, {Header:[{},{Value:\"2월\"}],Name:\"Col2\"}, {Header:[{},{Value:\"3월\"}],Name:\"Col3\"}, {Header:[{},{Value:\"4월\"}],Name:\"Col4\"}, ]; ```",
              "see": [
                {
                  "label": "Spanned col",
                  "url": "/docs/props/col/spanned"
                },
                {
                  "label": "Span cell",
                  "url": "/docs/props/cell/span"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/spanned.html"
          },
          {
            "cid": 265,
            "sid": "text-color",
            "name": "text-color",
            "label": "TextColor",
            "data": {
              "body": "> 지정한 행의 글자색을 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|HEX형식 (ex:#FF00F0) rgb형식 (ex:rgb(244,200,40)| ### Example ```javascript //특정행의 글자를 붉은색으로 지정합니다.. var row = sheet.getRowById(\"AR33\"); row[\"TextColor\"] = \"#FF0000\"; sheet.refreshRow(row); //조회 데이터에서 특정행에 대해 글자를 파란색으로 표시한다. {\"data\":[ ... {\"TextColor\": \"#0000FF\", \"ColName1\": \"Value1\", \"ColName2\": \"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "TextStyle row",
                  "url": "./text-style"
                },
                {
                  "label": "TextSize row",
                  "url": "./text-size"
                },
                {
                  "label": "TextFont row",
                  "url": "./text-font"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/text-color.html"
          },
          {
            "cid": 266,
            "sid": "text-font",
            "name": "text-font",
            "label": "TextFont",
            "data": {
              "body": "> 특정행의 `font-family`를 설정합니다. > 여러개 폰트를 지정하거나 폰트에 띄어씌기가 들어가는 경우에는 `single(')/double quotation(\"\")`으로 지정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|글자체| ### Example ```javascript //특정행의 글자체를 수정합니다. var row = sheet.getRowById(\"AR33\"); row[\"TextFont\"] = '\"Times New Roman\", \"Gungsuh\", \"Helvetica\"'; sheet.refreshRow(row); //조회 데이터에서 특정행에 대해 글자체를 변경합니다. {\"data\":[ ... {\"TextFont\": \"Gulim\", \"ColName1\": \"Value1\", \"ColName2\": \"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "TextStyle row",
                  "url": "./text-style"
                },
                {
                  "label": "TextColor row",
                  "url": "./text-color"
                },
                {
                  "label": "TextSize row",
                  "url": "./text-size"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/text-font.html"
          },
          {
            "cid": 267,
            "sid": "text-size",
            "name": "text-size",
            "label": "TextSize",
            "data": {
              "body": "> 지정한 행의 글자 크기를 설정합니다. > `px, pt, em` 단위를 사용할 수 있으며, 단위를 지정하지 않으면 px기준으로 설정됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|크기숫자와 단위로 이루어진 문자열(ex: 25px)| ### Example ```javascript //특정행의 글자를 1.2em 지정합니다. var row = sheet.getRowById(\"AR33\"); row[\"TextSize\"] = \"1.2em\"; sheet.refreshRow(row); //조회 데이터에서 특정행에 대해 글자를 27px로 지정합니다. {\"data\":[ ... {\"TextSize\": \"27px\", \"ColName1\": \"Value1\", \"ColName2\": \"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "TextStyle row",
                  "url": "./text-style"
                },
                {
                  "label": "TextColor row",
                  "url": "./text-color"
                },
                {
                  "label": "TextFont row",
                  "url": "./text-font"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/text-size.html"
          },
          {
            "cid": 268,
            "sid": "text-style",
            "name": "text-style",
            "label": "TextStyle",
            "data": {
              "body": "> 지정한 행의 글자에 대한 `font-weight, font-style, font-variant, text-decoration`를 숫자로 설정합니다. > 숫자를 서로 더해서 여러 속성을 동시에 적용하 실 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`1`| 굵게 Bold| |`2`| 기울임 Italic| |`4`| 밑줄 Underline| |`8`| 취소선 Strike| |`16`| 윗줄 Overline| |`32`| 작은 대문자 Small Caps| ### Example ```javascript //특정행의 글자를 굵고 취소선이 들어가게 수정한다. var row = sheet.getRowById(\"AR33\"); row[\"TextStyle\"] = 9; sheet.refreshRow(row); //조회 데이터에서 특정행에 대해 기울임이면서 밑줄을 표시한다. {\"data\":[ {\"TextStyle\": 6, \"ColName1\": \"Value1\", \"ColName2\": \"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "TextColor row",
                  "url": "./text-color"
                },
                {
                  "label": "TextSize row",
                  "url": "./text-size"
                },
                {
                  "label": "TextFont row",
                  "url": "./text-font"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/text-style.html"
          },
          {
            "cid": 269,
            "sid": "tip-class",
            "name": "tip-class",
            "label": "TipClass",
            "data": {
              "body": "> 풍선도움말 객체에 원하는 `css클래스`를 적용하여 디자인을 설정 합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|풍선도움말 객체에 적용할 css클래스 명| ### Example ```css <style> .RedBold{color:red;font-weight:700;} .deepblue{color:#020079;} </style> ``` ```javascript //특정 행에 풍선도움말 표시시 사용될 클레스를 설정. var row = sheet.getRowById(\"AR55\"); row[\"TipClass\"] = \"RedBold\"; //조회 데이터에서 일부 행에 대해 풍선도움말 클레스를 설정. {\"data\":[ {\"TipClass\":\"deepblue\",\"ColName1\":\"Value1\",\"ColName2\":\"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "Tip row",
                  "url": "./tip"
                },
                {
                  "label": "TipPosition row",
                  "url": "./tip-position"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/tip-class.html"
          },
          {
            "cid": 270,
            "sid": "tip-position",
            "name": "tip-position",
            "label": "TipPosition",
            "data": {
              "body": "> 풍선도움말 객체의 위치나 크기, 정렬을 설정합니다. ### Type `object` ### Options |Value|Description| |-----|-----| |`X`|풍선도움말의 X축 가감 위치| |`Y`|풍선도움말의 Y축 가감 위치| ### Example ```javascript //마지막 행에 풍선도움말 위치 변경 var row = sheet.getLastVisibleRow(); row[\"TipPosition\"] = {Y:-100}; ```",
              "see": [
                {
                  "label": "Tip row",
                  "url": "./tip"
                },
                {
                  "label": "TipClass row",
                  "url": "./tip-class"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/tip-position.html"
          },
          {
            "cid": 271,
            "sid": "tip",
            "name": "tip",
            "label": "Tip",
            "data": {
              "body": "> 행 위에 마우스 커서 오버시 풍선도움말을 표시합니다. > 설정을 통해 풍선도움말 사용 여부와 풍선도움말에서 표시될 내용까지 설정할 수 있습니다. ### ![Tip](/assets/imgs/tip.png \"Tip 사용\") ### Type `mixed`( `boolean` \\| `string`) ### Options |Value|Description| |-----|-----| |`0(false)`|풍선도움말 사용 안함| |`1(true)`|풍선도움말 사용| |`string`|풍선도움말에서 표시 될 내용 설정| ### Example ```javascript //55번 행에 마우스 커서 오버시 풍선 도움말에 표시될 내용을 변경. var row = sheet.getRowById(\"AR55\"); row[\"Tip\"] = \"해당 건은 결제가 완료되었습니다.\"; //조회 데이터에서 일부 행에 대해 풍선도움말 기능을 제거. {\"data\":[ {\"Tip\": 0, \"ColName1\": \"Value1\", \"ColName2\": \"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "TipClass row",
                  "url": "./tip-class"
                },
                {
                  "label": "TipPosition row",
                  "url": "./tip-position"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/tip.html"
          },
          {
            "cid": 272,
            "sid": "v-align",
            "name": "v-align",
            "label": "VAlign",
            "data": {
              "body": "> 행 전체의 문자열 상하 정렬을 설정합니다. > 좌우 정렬과 관련해서는 [Align](./align)속성을 참고하세요. ### Type `string` ### Options |Value|Description| |-----|-----| |`Top`|문자열 상단 정렬 (Top, TOP, top 허용)| |`Middle`|문자열 중단 정렬 (Middle, MIDDLE, middle 허용)| |`Bottom`|문자열 하단 정렬 (Bottom, BOTTOM, bottom 허용) ### Example ```javascript //특정행의 문자열을 상단 정렬 var row = sheet.getFirstVisibleRow(); row[\"VAlign\"] = \"Top\"; sheet.refreshRow(row); //합계 행의 문자열을 하단 정렬. options.Def.Footer = {\"VAlign\": \"Bottom\"}; ```",
              "see": [
                {
                  "label": "Align row",
                  "url": "./align"
                },
                {
                  "label": "VAlign col",
                  "url": "/docs/props/col/v-align"
                },
                {
                  "label": "VAlign cell",
                  "url": "/docs/props/cell/v-align"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/v-align.html"
          },
          {
            "cid": 273,
            "sid": "visible",
            "name": "visible",
            "label": "Visible",
            "data": {
              "body": "> 행의 보임/감춤 여부를 설정합니다. > 필터를 통해 감춰지는 행은 자동으로 `Visible: (0)false` 속성이 설정됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|감춰짐| |`1(true)`|보임| ### Example ```javascript //Chk열의 값이 1인 행들을 감춘다. var rows = sheet.getDataRows(); for(var i = 0; i < rows.length; i++){ if (rows[i][\"Chk\"] == 1) { //속성 값을 바꾼다고 즉시 행이 감춰지는 것은(렌더링이 일어나는 것은) 아님. rows[i][\"Visible\"] = 0; } } sheet.renderBody(); //감춘 행을 화면에 반영(렌더링) //조회 데이터에서 특정행을 감춘다. {\"data\":[ ... {\"Visible\": 0, \"ColName1\": \"Value1\", \"ColName2\": \"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "Hidden row",
                  "url": "./hidden"
                },
                {
                  "label": "hideRow method",
                  "url": "/docs/funcs/core/hide-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/visible.html"
          },
          {
            "cid": 274,
            "sid": "wrap",
            "name": "wrap",
            "label": "Wrap",
            "data": {
              "body": "> 셀의 내용이 열의 너비보다 많은 경우 줄넘김을 통해 표현할지 여부를 설정합니다.(css의 white-space속성) > 줄넘김이 발생할때 행의 높이가 자동으로 조절됩니다. > 일반적으로 `Text` 타입에서 사용하며, `Radio` 타입에서도 사용하실 수 있습니다. > [Lines 타입](/docs/appx/type) 컬럼에서는 `default: 1(true)`로 설정됩니다. ### ![Wrap:0(false)](/assets/imgs/wrap0.png \"Wrap:0(false) 설정시\") [`Wrap:0(false)` 설정시] ![Wrap:1(true)](/assets/imgs/wrap1.png \"Wrap:1(true) 설정시\") [`Wrap:1(true)` 설정시] ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|줄넘김 사용 안함 (`white-space:nowrap`)| |`1(true)`|줄넘김 사용 (`white-space:normal`)| ### Example ```javascript //특정행에 Wrap를 허용 var row = sheet.getRowById(\"AR33\"); row[\"Wrap\"] = 1; sheet.refreshRow(row); //전체 데이터 행에 대해 줄넘김 허용. options.Def.Row = {\"Wrap\": 1}; ```",
              "see": [
                {
                  "label": "TextStyle row",
                  "url": "./text-style"
                },
                {
                  "label": "TextColor row",
                  "url": "./text-color"
                },
                {
                  "label": "TextFont row",
                  "url": "./text-font"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/row/wrap.html"
          }
        ]
      },
      {
        "gid": 3,
        "name": "props-col",
        "label": "Col",
        "children": [
          {
            "cid": 275,
            "sid": "accept-enters",
            "name": "accept-enters",
            "label": "AcceptEnters",
            "data": {
              "body": "> `Lines` 타입에서 편집중 `Enter키` 입력시 동작에 대해 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|값 변경 마치고, 편집모드 종료 (`default`)| |`1`|줄넘김문자가 삽입되고 편집모드 유지 `Ctrl or Shift or Alt + Enter`를 입력하거나 `tab키`를 입력 시 편집 종료| |`2`|값 변경을 마치고, 편집모드 종료 `Ctrl or Shift or Alt + Enter`를 입력하여 줄넘김 가능| |`3`|`Ctrl or Shift or Alt + Enter` 나 그냥 `Enter`나 모두 줄넘김문자가 삽입됨 `tab키`를 누르거나 마우스로 `다른 셀을 클릭` 시 편집 종료| ### Example ```javascript //편집중 Enter키 입력시 줄넘김으로 동작 options.Cols = [ ... {Type: \"Lines\", AcceptEnters: 1, Name: \"CarName\", Width: 120, ...}, ... ]; ```",
              "see": [
                {
                  "label": "EnterMode cfg",
                  "url": "/docs/props/cfg/enter-mode"
                },
                {
                  "label": "AcceptEnters cell",
                  "url": "/docs/props/cell/accept-enters"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/accept-enters.html"
          },
          {
            "cid": 276,
            "sid": "accept",
            "name": "accept",
            "label": "Accept",
            "data": {
              "body": "> [File Type](/docs/appx/file-type-upload) 컬럼에 업로드를 허용할 파일 형식을 지정하는 속성입니다. > `input type=\"file\"` 의 accept 속성과 동일하게 동작합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|[File Type](/docs/appx/file-type-upload) 컬럼에 업로드를 허용할 파일 형식을 지정| ### Example ```javascript // Type: File인 컬럼에 이미지 파일만 업로드 하도록 설정 options.Cols = [ ... {Type: \"File\", Name: \"CarName\", Width: 120, Accept: 'image/*' ...}, ... ]; ```",
              "see": [
                {
                  "label": "File Type 업로드",
                  "url": "/docs/appx/file-type-upload"
                },
                {
                  "label": "Accept Cell",
                  "url": "/docs/props/cell/accept"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/accept.html"
          },
          {
            "cid": 277,
            "sid": "add-edit",
            "name": "add-edit",
            "label": "AddEdit",
            "data": {
              "body": "> 행의 상태가 추가([Added](/docs/props/row/added))인 행의 컬럼의 편집([CanEdit](/docs/props/row/can-edit)) 가능 여부를 설정합니다. > 조회시에는 편집 불가, 행 추가 후 데이터 편집 가능, 저장 후 편집 불가를 설정하고 싶다면 [ChangeEdit](/docs/props/col/change-edit) 를 함께 설정해주어야 합니다. > `주의` 해당 속성을 설정하게 되면, `(Cell,Row,Col)CanEdit` 설정 속성은 무시됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|행의 상태가 Added(추가) 일 경우 해당 컬럼 편집 불가| |`1(true)`|행의 상태가 Added(추가) 일 경우 해당 컬럼 편집 가능| ### Example ```javascript //addRow 를 통하여 추가된 행에 대해서는 AMT 컬럼의 편집을 막음 options.Cols = [ ... {Type: \"Int\", AddEdit: 0, Name: \"AMT\", Width: 120 ...}, ... ]; // 데이터 조회시 AMT 컬럼의 편집을 막고, addRow 를 통하여 추가한 경우에는 편집 가능, 저장 후 편집 불가로 설정 options.Cols = [ ... {Type: \"Int\", AddEdit: 1, ChangeEdit:0, Name: \"AMT\", Width: 120 ...}, ... ]; ``` ### Try it - [Demo of AddEdit](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Col/AddEdit/)",
              "see": [
                {
                  "label": "CanEdit col",
                  "url": "/docs/props/col/can-edit"
                },
                {
                  "label": "CanEdit row",
                  "url": "/docs/props/row/can-edit"
                },
                {
                  "label": "ChangeEdit col",
                  "url": "/docs/props/col/change-edit"
                },
                {
                  "label": "Added row",
                  "url": "/docs/props/row/added"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.87|기능 추가|"
            },
            "url": "docs/props/col/add-edit.html"
          },
          {
            "cid": 278,
            "sid": "align-2",
            "name": "align",
            "label": "Align",
            "data": {
              "body": "> 문자열 좌우 정렬을 설정합니다. > 트리 또는 그룹에서 사용할 때는 기준으로 지정된 컬럼(**트리의 접힘/펼침 아이콘이 보이는 컬럼**)의 데이터영역은 `Align`이 먹지 않습니다. > 상하 정렬과 관련해서는 [VAlign](./v-align)속성을 참고하세요. ### Type `string` ### Options |Value|Description| |-----|-----| |`Left`|문자열 좌측 정렬| |`Center`|문자열 가운데 정렬| |`Right`|문자열 우측 정렬| ### Example ```javascript //특정 열의 문자열을 가운데 정렬로 설정 options.Cols = [ {Type: \"Int\", Name: \"Seq\", Align: \"Center\", Width: 70, ...}, {Type: \"Date\", Name: \"enterDate\", Align: \"Center\", Width: 120, ...}, {Type: \"Text\", Name: \"sa_Nm\", Align: \"Center\", Width: 100, ...}, ... ]; ```",
              "see": [
                {
                  "label": "VAlign col",
                  "url": "./v-align"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/align.html"
          },
          {
            "cid": 279,
            "sid": "all-check-ignore-event",
            "name": "all-check-ignore-event",
            "label": "AllCheckIgnoreEvent",
            "data": {
              "body": "> Type: \"Bool\" 헤더 전체 체크/언체크 시에 `onAfterChange` 이벤트를 호출할지 말지 설정하는 옵션입니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|`onAfterChange` 이벤트가 발생합니다. (`default`)| |`1(true)`|`onAfterChange` 이벤트가 발생하지 않습니다.| ### Example ```javascript options.Cols = [ ... //헤더의 전체 체크박스를 클릭할시 onAfterChange이벤트가 발생하지 않습니다. {Header: {Value: \"주관부서\", HeaderCheck: 1}, Type: \"Bool\", Width: 80, Align: \"Center\", Name:\"ORG_NM\", AllCheckIgnoreEvent:1} ... ]; ```",
              "see": [
                {
                  "label": "setAllCheck method",
                  "url": "/docs/funcs/core/set-all-check"
                },
                {
                  "label": "onAfterChange event",
                  "url": "/docs/events/on-after-change"
                },
                {
                  "label": "onCheckAllFinish event",
                  "url": "/docs/events/on-check-all-finish"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.15|기능 추가|"
            },
            "url": "docs/props/col/all-check-ignore-event.html"
          },
          {
            "cid": 280,
            "sid": "attribute-formula-2",
            "name": "attribute-formula",
            "label": "attribute+Formula",
            "data": {
              "body": "> 열의 각종 속성(`CanEdit, TextColor` 등)을 `Formula`를 통해 설정할 수 있습니다. > 가령 `CanEdit, Color` 등과 같은 속성을 `Formula`로 지정하여 설정한다는 것은 다음과 같이 선언될 수 있습니다. > ```js > options.Cols = [ > {Type:\"Text\", Name:\"Total\", > CanEditFormula:\"CHK==1&&AMT>10?1:0\", > ColorFormula:\"Value>10000 ? '#FF0000':'#FFFF00'\", > FormatFormula:function(param){ > if(param.Row[\"SaupJuminNo\"].length == 10){ > return \"###-##-#####\"; > }else{ > return \"######-#######\"; > } > } > } > ]; > ``` > `※**매우중요**` > 1. 모든 포뮬러 기능을 사용시에는 (row)[**CanFormula**](/docs/props/row/can-formula)가 1로 설정되어야 동작합니다. > 2. `attribute+Formula` 사용시에는 반드시 (row)[**CalcOrder**](/docs/props/row/calc-order)에 `열이름+기능명` 형식으로 포뮬러별 계산 순서가 정의되어야 합니다. >가령 \"A\"열에 대해 `CanEdit`속성 포뮬러를 설정하고 \"B\"열에 대해 `Color`속성 포뮬러를 설정했다면, [**CalcOrder**](/docs/props/row/calc-order)에는 \"ACanEdit,BColor\"로 명시하면 됩니다. > 3. **`CalcOrder` 설정시 이름들은 반드시 띄어쓰기 없이 서로 붙여 작성해주셔야 됩니다. 이름들 간에 띄어쓰기가 되어 있는 경우 Formula 동작이 정상적으로 이뤄지지 않습니다.** ### Type mixed( `function` \\| `string` ) ### Options |Value|Description| |-----|-----| |`string`|열이름을 기준으로 한 계산 로직 (ex: `\"sCount \\* sPrice - ( Discount \\* Rate ) \\* 1.24\"`)| |`function`|별도 함수를 통해 계산 가능(함수 내에서는 `Sheet`,`Row`,`Col`,`Attr` 예약어를 통해 접근 가능)| ### Example ```javascript // formula 사용시 CanFormula:1이 설정 되어야 하고, attribute+Formula사용시에는 CalcOrder도 설정되어야 함 options.Def.Row = { CanFormula: 1, CalcOrder: \"yearSumColor,rateCanEdit\" // 열이름 간에 띄어쓰지말고 전부 붙여쓰셔야 합니다. }; options.Cols = [ ... {Type: \"Bool\" Name: \"CHK\"}, // 해당 열의 값이 100보다 큰 경우 붉은색 그렇지 않은 경우 옅은노란색으로 배경색이 자동 변경 {Type: \"Int\", Name: \"yearSum\", ColorFormula:function(fr){ return fr.Value>100?'#FF0000':'#FFFFAA'; } }, // CHK 열이 체크되어있고, yearSum열의 값이 150보다 큰 경우에만 편집이 가능 {Type: \"Float\", Name: \"rate\", CanEditFormula:function(fr) { if (fr.Row[\"CHK\"] == 1 && fr.Row[\"yearSum\"] > 150) return true; else return false; } }, ... ]; ``` ### Try it - [Demo of attribute+Formula](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Col/attributeFormula/)",
              "see": [
                {
                  "label": "CanFormula row",
                  "url": "/docs/props/row/can-formula"
                },
                {
                  "label": "CalcOrder row",
                  "url": "/docs/props/row/calc-order"
                },
                {
                  "label": "attribute+formula row",
                  "url": "/docs/props/row/attribute-formula"
                },
                {
                  "label": "Formula appendix",
                  "url": "/docs/appx/formula"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/attribute-formula.html"
          },
          {
            "cid": 281,
            "sid": "auto-calendar-2",
            "name": "auto-calendar",
            "label": "AutoCalendar",
            "data": {
              "body": "> [Type](/docs/appx/type)이 Date인 셀에 대해 사용자가 편집모드로 들어갈때 달력을 띄울지 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|기능 사용 안함 (`default`)| |`1(true)`|편집시 달력을 띄움| ### Example ```javascript //AutoCalendar적용 options.Cols = [ ... {Type: \"Date\", Name: \"sa_enterDate\", Format: 'MM-dd-yyyy HH:mm', AutoCalendar: 1, ...}, ... ]; ```",
              "see": [
                {
                  "label": "AutoCalendar cfg",
                  "url": "/docs/props/cfg/auto-calendar"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/auto-calendar.html"
          },
          {
            "cid": 282,
            "sid": "bool-group",
            "name": "bool-group",
            "label": "BoolGroup",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Bool`인 열 내에서 동일 그룹으로 묶을지 여부를 설정합니다. > 입력하는 숫자가 그룹에 인덱스가 되어 같은 값을 갖고있는 셀 간에는 하나만 체크가 됩니다.(마치 라디오처럼 체크될때 따른 셀은 자동으로 언체크 됩니다.) > 따라서 컬럼에 `BoolGroup`을 설정할 경우 컬럼 전체가 같은 `BoolGroup` 값을 가지게 되면서 컬럼 전체 중 하나의 셀만 체크됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|라디오처럼 하나로 묶을 그룹 인덱스| ### Example ```javascript //열 내에서 단일 셀만 체크 가능하게 합니다. options.Cols = [ ... {Type: \"Bool\", Name: \"st1\", BoolGroup: 1, ...}, ... ]; ```",
              "see": [
                {
                  "label": "BoolGroup cell",
                  "url": "/docs/props/cell/bool-group"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/bool-group.html"
          },
          {
            "cid": 283,
            "sid": "bool-icon",
            "name": "bool-icon",
            "label": "BoolIcon",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Bool`인 열에서 체크/언체크 아이콘을 다른 이미지나 Html 객체로 설정합니다. > 임의의 이미지를 체크박스 아이콘으로 사용하고자 하는 경우에는, 언체크 이미지와 체크 이미지를 첫글자를 구분자로 하여 연결된 문자열로 설정하시면 됩니다. (ex:\"|Off.gif|On.gif\") > > 임의의 이미지를 체크박스 아이콘으로 사용할 때, 해당 열내의 셀이 편집불가([CanEdit](./can-edit))인 경우가 있다면 편집 불가일때의 이미지까지해서 총 4개의 이미지를 설정하시면 됩니다. (ex:\"|Off.gif|On.gif|OffReadOnly.gif|OnReadOnly.gif\") > > 여러개의 라디오 아이콘을 사용하고자 하는 경우에는 언체크 이미지와 체크이미지를 이어서 설정하시면 됩니다. (ex:\"|Off1.gif|On1.gif|Off2.gif|On2.gif|Off3.gif|On3.gif\") > > 그 외에 일반적인 숫자형식으로 아래 `Options`에서와 같이 기능을 설정하실 수 있습니다. ### Type mixed( `string` \\| `number`) ### Options |Value|Description| |-----|-----| |`0`|기본적인 내장 체크박스 이미지를 사용 (`default`) |`1`|내장 라디오 이미지를 사용| |`2`|무조건 middle 정렬되는 체크박스 이미지를 사용(**성능이 0번 옵션보다 느림**)| |`3`|무조건 middle 정렬되는 라디오 이미지를 사용(**성능이 1번 옵션보다 느림**)| |`4`|\\<input type=\"checkbox\">객체를 사용(**IE에서 성능이 좋음**)| |`5`|\\<input type=\"radio\">객체를 사용(**IE에서 성능이 좋음**)| |`6`|div객체를 이용하여 체크박스를 구현(**IE 호환성 보기에서 성능이 좋음**)| ### Example ```javascript //html객체로 체크박스 표현 options.Cols = [ ... {Type: \"bool\", Name: \"accept\", BoolIcon: 4 ...}, ... ]; ```",
              "see": [
                {
                  "label": "BoolIconWidth col",
                  "url": "./bool-icon-width"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/bool-icon.html"
          },
          {
            "cid": 284,
            "sid": "break-point",
            "name": "break-point",
            "label": "BreakPoint",
            "data": {
              "body": "> 언어팩에 있는 `BreakPoints` 수치 기준보다 더 작을시 hide 할지 말지 정하는 기능입니다. > 설정한 `BreakPoint` 와 시트 태그 사이즈를 비교하여 태그 사이즈 보다 작을시 `hide`, 클시 `show` 되는 기능입니다. > 해당 기능 설정시 설정되는 `Visible` 속성은 무시됩니다. 사이즈 변경이 필요할시에는 언어팩에 수치를 직접 변경하시면 됩니다. **아래는 언어팩에서 제공하는 BreakPoints 에 기본 수치입니다.** ```js \"BreakPoints\": { \"xs\": 0, \"sm\": 576, \"md\": 768, \"lg\": 992, \"xl\": 1200, \"xxl\": 1400 } ``` ### Type `string` ### Options |Value|Description| |-----|-----| |`xs`|태그 사이즈가 `xs` 수치보다 작으면 `hide`, 크면 `show`| |`sm`|태그 사이즈가 `sm` 수치보다 작으면 `hide`, 크면 `show`| |`md`|태그 사이즈가 `md` 수치보다 작으면 `hide`, 크면 `show`| |`lg`|태그 사이즈가 `lg` 수치보다 작으면 `hide`, 크면 `show`| |`xl`|태그 사이즈가 `xl` 수치보다 작으면 `hide`, 크면 `show`| |`xxl`|태그 사이즈가 `xxl` 수치보다 작으면 `hide`, 크면 `show`| ### Example ```javascript //html객체로 체크박스 표현 options.Cols = [ ... {Type: \"Text\", Name: \"BreakColA\", BreakPoint: \"md\" ...}, ... ]; ```",
              "see": [
                {
                  "label": "HideMobile col",
                  "url": "/docs/props/col/hide-mobile"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.24|기능 추가|"
            },
            "url": "docs/props/col/break-point.html"
          },
          {
            "cid": 285,
            "sid": "button-text",
            "name": "button-text",
            "label": "ButtonText",
            "data": {
              "body": "> [Button](./button)속성의 값이 `Button`이거나 `Html`인 경우, 셀 버튼에 표시할 문자를 설정합니다. > [Button](./button)속성의 값이 `Button`인 경우에는 설정한 문자가 \\<u>나 \\<button>태그로 표시되며, `Html`인 경우에는 <span>입력</span>식의 Html 문자가 해석되어 셀에 표시됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|버튼에 들어갈 문자열| ### Example ```javascript options.Cols = [ ... //셀 우측에 \"확인\"버튼을 표시한다. {Type: \"Text\", Button: \"Button\", ButtonText: \"확인\", Name: \"conf_btn\", Width: 120, ... }, ... //버튼 타입에 \"BTN\"버튼을 표시한다. { Type: \"Button\", ButtonText: \"BTN\", Name: \"type_btn\", Width: 120, ... }, ]; ```",
              "see": [
                {
                  "label": "Button col",
                  "url": "./button"
                },
                {
                  "label": "UseButton cfg",
                  "url": "/docs/props/cfg/use-button"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/button-text.html"
          },
          {
            "cid": 286,
            "sid": "button-width-2",
            "name": "button-width",
            "label": "ButtonWidth",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Button`이고, [Button](./button)속성의 값이 `Button`인 경우, 셀에 생성되는 버튼 객체의 너비를 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|버튼 객체의 너비| ### Example ```javascript //버튼의 너비를 80px로 설정 options.Cols = [ ... {Type: \"Button\", Button: \"Button\", Name: \"btn1\", ButtonWidth: 80 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Button col",
                  "url": "./button"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/button-width.html"
          },
          {
            "cid": 287,
            "sid": "button",
            "name": "button",
            "label": "Button",
            "data": {
              "body": "> 셀의 우측에 원하는 아이콘 이미지,체크박스 혹은 버튼을 표시하는 기능입니다. > 열의 [Type](/docs/appx/type)이 `Date`거나 `Enum`인 경우에는 설정과 상관없이 달력이나 드롭다운 모양의 버튼이 표시됩니다. > 열의 타입이 `Button`인 경우에는 셀 버튼에 대한 기능으로 동작하게 됩니다. > *셀의 좌측에 버튼을 설정하고자 할때는 [Icon](./icon)속성을 확인하세요.* ### ![Button속성](/assets/imgs/button1.png \"Button속성\") [그림1] ![Button속성](/assets/imgs/button2.png \"Button속성\") [그림2] ![Button속성](/assets/imgs/button3.png \"Button속성\") [그림3] ![Button속성](/assets/imgs/buttonDefaults.png \"Button속성\") [그림4] ### Type `string` ### Options **열의 Type이 Button이 아닌 경우** |Value|Description| |-----|-----| |`Button`|[ButtonText](./button-text) 속성을 통해 설정한 문자를 \\<u>태그를 통해 보여줍니다.| |`Clear`|셀 우측에 셀 내용을 지우기위한 버튼이 표시됩니다. [그림1] 참고| |`Check`|셀 우측에 체크박스를 표시합니다. [그림2] 참고| |`Html`|[ButtonText](./button-text) 속성으로 원하는 HTML태그를 넣으면 셀 우측에 표시됩니다.| |`공백`|원래 보여져야 하는 버튼 이미지를 감춥니다. 가령 `Date` 타입 열은 기본적으로 달력버튼이 표시되는데 이 속성을 이용하여 버튼을 감출수 있습니다.| |`기타`|이미지 파일에 대한 url을 넣으면 버튼 셀의 배경으로 이미지가 표시됩니다. [그림3] 참고 (이미지는 gif, png, jpg만 가능 / 클릭시 onButtonClick이벤트가 호출)| |`Defaults`|셀 우측에 [Defaults](./defaults) 버튼을 표시합니다. [그림4] 참고| ***Html이나 이미지 버튼을 사용시 버튼의 너비는 [WidthPad](./width-pad)속성을 통해 설정할수 있습니다.*** **열의 Type이 Button인 경우** |value|desc| |---|---| |`Button`|일반적인 버튼 형태로 보여줍니다. [UseButton](/docs/props/cfg/use-button)속성의 값에 따라 셀의 값을 \\<u>태그 또는 \\<button>태그로 만들어 줍니다.| |`Html`|속성을 `Html`로 설정하고 셀의 값을 `Html` 형태로 사용하실 수 있습니다. (ex: <div class=\"button>버튼\\</div>)| ### Example ```javascript options.Cols = [ ... //셀의 우측에 체크박스를 표시 {Type: \"Text\", Name: \"product_name\", Button: \"Check\", Width: 120 ...}, //셀의 우측에 이미지로 버튼을 추가합니다. {Type: \"Text\", Name: \"brnSaleAmt\", Button: \"/pcd/img/popIcon.png\", Width: 120 ...}, ... //타입에 버튼을 설정 {Type: \"Button\", Name: \"btn_type\", ButtonText: \"Btn\", Width: 120, \"WidthPad\": 50 ...}, ... ]; ``` ### Try it - [Demo of Button](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Col/Button/)",
              "see": [
                {
                  "label": "WidthPad col",
                  "url": "./width-pad"
                },
                {
                  "label": "ButtonText col",
                  "url": "./button-text"
                },
                {
                  "label": "Defaults col",
                  "url": "./defaults"
                },
                {
                  "label": "UseButton cfg",
                  "url": "/docs/props/cfg/use-button"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/button.html"
          },
          {
            "cid": 288,
            "sid": "calendar-buttons",
            "name": "calendar-buttons",
            "label": "CalendarButtons",
            "data": {
              "body": "> 달력이 표시될때 달력 하단에 보여질 버튼을 설정합니다. > 설정값의 합을 통해 여러 개 버튼을 표시할 수도 있습니다. > 년월 달력의 경우 [AutoSelectYm](/docs/props/cfg/auto-select-Ym) 값에 따라 `\"확인\"` 버튼 보여짐 여부가 달라집니다. ### 1. 년월일 달력 ![CalendarButtons](/assets/imgs/calendarButtons.png \"CalendarButtons\") 2. 년월 달력 ![MonthCalendarButtons](/assets/imgs/monthCalendar.png \"MonthCalendarButtons\") ### Type `number` ### Options * 년월일 달력 (`default: 0`) |Value|Description| |-----|-----| |`1`|\"오늘\" 버튼| |`2`|\"취소\" 버튼| |`4`|\"확인\" 버튼| |`8`|\"어제\" 버튼| * 년월 달력 (`default: 4`) |Value|Description| |-----|-----| |`1`|\"이번달\" 버튼| |`2`|\"취소\" 버튼| |`4`|\"확인\" 버튼| * 년 달력 (`default: 4`) |Value|Description| |-----|-----| |`2`|\"취소\" 버튼| |`4`|\"확인\" 버튼| ### Example ```javascript options.Cols = [ ... // 년월일 달력에 어제, 오늘 버튼을 표시한다. {Type: \"Date\", Name: \"sa_enterDate\", CalendarButtons: 9 ...}, ... // 년월 달력에 이번달, 취소, 확인 버튼을 표시한다. {Type: \"Date\", Name: \"sa_monthDate\", CalendarButtons: 7, Format: \"yyyy/MM\" ...} ]; ```",
              "see": [
                {
                  "label": "AutoSelectYm cfg",
                  "url": "/docs/props/cfg/auto-select-Ym"
                },
                {
                  "label": "AutoCalendar col",
                  "url": "./auto-calendar"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/calendar-buttons.html"
          },
          {
            "cid": 289,
            "sid": "can-copy-paste",
            "name": "can-copy-paste",
            "label": "CanCopyPaste",
            "data": {
              "body": "> 열에 대한 `ctrl+c`, `ctrl+x`를 통한 복사와 `ctrl+v`를 통한 붙여넣기를 제한합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|복사/붙여넣기 불가 `CanCopyPaste: 0` 이 설정된 열에서는 `ctrl+c`, `ctrl+x` 를 하는 경우 빈셀이 복사되고 `ctrl+v`는 무시됩니다. 시트 내에서 드래그를 통해 영역을 복사/붙여넣기 할때는 `CanCopyPaste: 0` 이 설정된 열은 ,마치 없는거 처럼 건너뛰고 클립보드에 복사됩니다. | |`1(true)`|복사/붙여넣기 가능 (`default`)| ### Example ```javascript //특정 열의 데이터는 복사 불가 options.Cols = [ ... {Type: \"Int\", Name: \"Rank_Sales\", CanCopyPaste: false ...}, ... ]; ```",
              "see": [
                {
                  "label": "CanEdit col",
                  "url": "./can-edit"
                },
                {
                  "label": "CanMove col",
                  "url": "./can-move"
                },
                {
                  "label": "CanResize col",
                  "url": "./can-resize"
                },
                {
                  "label": "CanSort col",
                  "url": "./can-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/can-copy-paste.html"
          },
          {
            "cid": 290,
            "sid": "can-drag-3",
            "name": "can-drag",
            "label": "CanDrag",
            "data": {
              "body": "> 열의 Drag 가능여부를 설정합니다. > [CanDrag cfg](/docs/props/cfg/can-drag) 속성이 `1(true)`인 경우 사용 가능합니다 ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|드래그 불가| |`1(true)`|드래그 가능 (`default`)| ### Example ```javascript //특정 열에 대해서 드래그를 막습니다. options.Cols = [ ... {Type: \"Text\", Name: \"sName\", CanDrag: 0 ...}, ... ]; ```",
              "see": [
                {
                  "label": "CanDrag cfg",
                  "url": "/docs/props/cfg/can-drag"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/can-drag.html"
          },
          {
            "cid": 291,
            "sid": "can-edit-3",
            "name": "can-edit",
            "label": "CanEdit",
            "data": {
              "body": "> 열에 대한 편집 가능 여부를 설정합니다. > 이 속성은 기본값은 `1`인데, `0`설정시 `Cell, Row, Col`순으로 우선 순위를 갖습니다. > 가령 `Cell`에서 `0`으로 설정시 `Row`나 `Col`에서 `1`을 설정해도 해당 셀은 편집이 불가능해 집니다. > `CanEdit: 4`를 제외하고는 편집불가 모드 사용시 `Enum` 컬럼의 아이콘과 `Date` 타입 컬럼의 달력 아이콘을 표현하지 않습니다. > `Cfg`를 이용하여 편집불가 사용시에는 우선순위가 가장 높아짐으로, `Cell, Row, Col`에 `CanEdit: 0`은 먹히지 않습니다. > `Button` 타입의 버튼 클릭 시 동작, `File` 타입의 아이콘 표시 여부에 대해서는 해당 속성의 영향을 **`받지 않습니다`**. ([Disabled col](/docs/props/col/disabled) 통하여 제어 가능.) ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|열을 편집 불가(읽기 전용)으로 설정합니다. ![CanEdit](/assets/imgs/canEdit0.png \"CanEdit\")| |`1`|열을 편집 가능으로 설정합니다. ![CanEdit](/assets/imgs/canEdit1.png \"CanEdit\")| |`2`|열의 내용은 편집 불가하지만, 편집 미리보기를 제공하여 셀의 모든 내용을 확인할 수 있습니다. ![CanEdit](/assets/imgs/canEdit2.png \"CanEdit\")| |`3`|열 편집 불가능(편집 가능 불가능에 대한 배경색을 표시하지 않음) [ColorState (cfg)](/docs/props/cfg/color-state)와 관계없이 배경색을 표현하지 않음. |`4`|열 편집 불가능 + 배경색 표현안함 + 아이콘표시| ### Example ```javascript //AMT 열에 대해 편집불가로 설정 options.Cols = [ ... {Type: \"Int\", CanEdit: 0, Name: \"AMT\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "CanEdit row",
                  "url": "/docs/props/row/can-edit"
                },
                {
                  "label": "CanEdit cell",
                  "url": "/docs/props/cell/can-edit"
                },
                {
                  "label": "getCanEdit method",
                  "url": "/docs/funcs/core/get-can-edit"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.12|`CanEdit: 3, 4` 추가|"
            },
            "url": "docs/props/col/can-edit.html"
          },
          {
            "cid": 292,
            "sid": "can-empty",
            "name": "can-empty",
            "label": "CanEmpty",
            "data": {
              "body": "> `Int`, `Float`, `Bool`, `Date` 타입에서 데이터의 값이 없을 경우, 빈값으로 표시될 수 있도록 하는 설정입니다. `CanEmpty: 0`으로 설정된 열에 대해서는 값을 지우거나 빈 값으로 설정할 수 없습니다. > 해당 속성에 영향을 받는 데이터는 아래와 같습니다. ```javascript {Type: \"Int\", Name: \"sInt\", CanEmpty: 1} data: [ {\"sInt\": null}, //null 데이터 {\"sInt\": undefined}, //undefined 데이터 {} //데이터 없음 ] ``` <!-- `Bool` 타입의 경우 1번부터 4번까지 값 사이클은 다음과 같습니다. 1 인 경우 `[\"\" => 1 => 0 ...]` , 2 인 경우 `[\"\" => 0 => 1 ...]`, 3 인 경우 `\"\" => [1 => 0 => 1 => 0 ...]`, 4 인 경우 `\"\" => [0 => 1 => 0 => 1 ...]` 형태로 `Bool` 타입의 값이 싸이클을 돕니다. --> ### 빈데이터 기본값 표시 | | Bool| Int| Float| Date| |-- | -- | -- |-- |-- | |CanEmpty : 0| 0(unCheck) | 0 |0 |19700101| |CanEmpty : 1| \"\" | \"\" |\"\" |\"\"| **CanEmpty : 0** ![CanEmpty0](/assets/imgs/CanEmpty0.gif \"CanEmpty0\") **CanEmpty : 1** ![CanEmpty1](/assets/imgs/CanEmpty1.gif \"CanEmpty1\") <!-- **CanEmpty : 2** ![CanEmpty2](/assets/imgs/CanEmpty2.gif \"CanEmpty2\") **CanEmpty : 3** ![CanEmpty3](/assets/imgs/CanEmpty3.gif \"CanEmpty3\") **CanEmpty : 4** ![CanEmpty4](/assets/imgs/CanEmpty4.gif \"CanEmpty4\") --> ### ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|빈 값 설정 불가 (default: `Int`, `Float`, `Bool`)| |`1`|빈 값 설정 가능 (default: `Date`)| ### Example ```javascript // 특정 열에 대해 빈 값이 설정되도록 수정 options.Cols = [ {Type: \"Int\", Name: \"sPoint\", CanEmpty: 1 ...}, {Type: \"Bool\", Name: \"sBool1\", CanEmpty: 1 ...}, ... ]; ```",
              "see": [
                {
                  "label": "CanEdit col",
                  "url": "./can-edit"
                },
                {
                  "label": "CanMove col",
                  "url": "./can-move"
                },
                {
                  "label": "CanResize col",
                  "url": "./can-resize"
                },
                {
                  "label": "CanSort col",
                  "url": "./can-sort"
                },
                {
                  "label": "EmptyValue col",
                  "url": "./empty-value"
                },
                {
                  "label": "Type col",
                  "url": "/docs/props/col/type"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/can-empty.html"
          },
          {
            "cid": 293,
            "sid": "can-export",
            "name": "can-export",
            "label": "CanExport",
            "data": {
              "body": "> 열의 다운로드 가능 여부. > 사용자가 엑셀/텍스트 다운로드 시 해당 열을 다운로드 할지 여부를 설정할 수 있습니다. > Export API([down2Excel](/docs/funcs/excel/down-to-excel), [exportData](/docs/funcs/core/export-data) 등) 호출 시 사용하는 `downCols`와 같이 사용하는 경우 `downCols`의 우선순위가 더 높게 적용됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|다운로드 불가| |`1(true)`|다운로드 가능 (`default`)| ### Example ```javascript //특정 열에 대해 다운로드를 막음 options.Cols = [ ... { Type: \"Int\", Name: \"Rank_Sales\", CanExport: 0 ... }, ... ]; ```",
              "see": [
                {
                  "label": "down2Excel method",
                  "url": "/docs/funcs/excel/down-to-excel"
                },
                {
                  "label": "exportData method",
                  "url": "/docs/funcs/core/export-data"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/can-export.html"
          },
          {
            "cid": 294,
            "sid": "can-filter-2",
            "name": "can-filter",
            "label": "CanFilter",
            "data": {
              "body": "> 특정 열에 대해 필터기능을 사용하지 못하게 설정합니다. > 이 속성을 사용하면 해당 열은 필터셀이 입력불가가 됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|필터 사용 불가| |`1`|필터 사용 가능 (`default`)| |`2`|트리에서 사용시 하위 노트가 모두 감춰지면 부모도 감춥니다.| ### Example ```javascript //특정 열에 필터링 하지 못하게 막음 options.Cols = [ ... {Type: \"Int\", Name: \"Rank_Sales\", CanFilter: 0 ...}, ... ]; ```",
              "see": [
                {
                  "label": "showFilter cfg",
                  "url": "/docs/props/cfg/show-filter"
                },
                {
                  "label": "CanMove col",
                  "url": "./can-move"
                },
                {
                  "label": "CanResize col",
                  "url": "./can-resize"
                },
                {
                  "label": "CanSort col",
                  "url": "./can-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/can-filter.html"
          },
          {
            "cid": 295,
            "sid": "can-focus-2",
            "name": "can-focus",
            "label": "CanFocus",
            "data": {
              "body": "> 열에 클릭이나 키보드를 통한 이동시 포커스 가능 여부를 설정합니다. > `CanFocus: 0`으로 설정된 열에 대해서는 클릭을 통한 포커스 진입이 불가능하고, 키보드의 Tab 키를 이용한 이동시 열을 건너뛰게 됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|포커스 진입 불가| |`1(true)`|포커스 집입 가능 (`default`)| ### Example ```javascript //특정 열에 대해 포커스가 이루어지지 않게끔 설정 options.Cols = [ ... {Type: \"Text\", Name: \"EM_DC\", CanFocus: 0 ...}, ... ]; ```",
              "see": [
                {
                  "label": "CanEdit col",
                  "url": "./can-edit"
                },
                {
                  "label": "CanMove col",
                  "url": "./can-move"
                },
                {
                  "label": "CanResize col",
                  "url": "./can-resize"
                },
                {
                  "label": "CanSort col",
                  "url": "./can-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/can-focus.html"
          },
          {
            "cid": 296,
            "sid": "can-group-2",
            "name": "can-group",
            "label": "CanGroup",
            "data": {
              "body": "> 열의 그룹핑 가능여부를 설정합니다. > 사용자가 헤더 셀을 드래그 하여 동적으로 구성하는 그룹핑 기능에 대해서 특정 열은 그룹핑이 불가능하게끔 설정하실 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|그룹핑 불가| |`1(true)`|그룹핑 가능 (`default`)| ### Example ```javascript //특정 열에 대해 그룹핑 불허 options.Cols = [ ... {Type: \"Text\", Name: \"SA_DEPTID\", CanGroup: 0, ...}, ... ]; ```",
              "see": [
                {
                  "label": "GroupFormat cfg",
                  "url": "/docs/props/cfg/group-format"
                },
                {
                  "label": "GroupDef col",
                  "url": "./group-def"
                },
                {
                  "label": "GroupWidth col",
                  "url": "./group-width"
                },
                {
                  "label": "GroupEmpty col",
                  "url": "./group-empty"
                },
                {
                  "label": "GroupSole col",
                  "url": "./group-sole"
                },
                {
                  "label": "GroupSingle col",
                  "url": "./group-single"
                },
                {
                  "label": "GroupDeleted col",
                  "url": "./group-deleted"
                },
                {
                  "label": "GroupChar col",
                  "url": "./group-char"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/can-group.html"
          },
          {
            "cid": 297,
            "sid": "can-move",
            "name": "can-move",
            "label": "CanMove",
            "data": {
              "body": "> 사용자의 열 이동 가능 여부를 설정합니다. > 사용자가 헤더 셀을 드래그하여 열의 위치를 변경하는 기능을 허용할지 여부를 설정합니다.. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|사용자 열 이동 불가| |`1(true)`|사용자 열 이동 가능 (`default`)| ### Example ```javascript //모든 열의 사용자 위치 변경을 불허 options.Def.Col = {CanMove: 0}; ```",
              "see": [
                {
                  "label": "CanColMove cfg",
                  "url": "/docs/props/cfg/can-col-move"
                },
                {
                  "label": "moveCol method",
                  "url": "/docs/funcs/core/move-col"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/can-move.html"
          },
          {
            "cid": 298,
            "sid": "can-print-2",
            "name": "can-print",
            "label": "CanPrint",
            "data": {
              "body": "> 열의 프린트 가능 여부. > [doPrint](/docs/funcs/core/do-print) 또는 [down2Pdf](/docs/funcs/excel/down-to-pdf)를 이용하여 프린트 할 경우 해당 열을 프린트 할지 여부를 설정할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|프린트 불가| |`1`|프린트 가능 (`default`)| ### Example ```javascript //특정 열에 대해 프린트를 막음 options.Cols = [ ... { Type: \"Int\", Name: \"Rank_Sales\", CanPrint: 0 ... }, ... ]; ```",
              "see": [
                {
                  "label": "doPrint method",
                  "url": "/docs/funcs/core/do-print"
                },
                {
                  "label": "down2Pdf method",
                  "url": "/docs/funcs/excel/down-to-pdf"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/can-print.html"
          },
          {
            "cid": 299,
            "sid": "can-resize",
            "name": "can-resize",
            "label": "CanResize",
            "data": {
              "body": "> 열의 너비 변경 가능여부를 설정합니다. > 사용자가 헤더 영역에서 열과 열 사이를 드래그 하여 열의 너비를 변경할 수 있는데, 이 기능에 대한 허용 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|사용자 열 너비 변경 불가| |`1(true)`|사용자 열 너비 변경 가능 (`default`)| ### Example ```javascript //특정 열에 대한 너비 조정 불허 options.Cols = [ ... {Type: \"Date\", Name: \"kDate\", Width: 110, CanResize: 0 ...}, ... ]; ```",
              "see": [
                {
                  "label": "CanMove col",
                  "url": "./can-move"
                },
                {
                  "label": "CanSort col",
                  "url": "./can-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/can-resize.html"
          },
          {
            "cid": 300,
            "sid": "can-search",
            "name": "can-search",
            "label": "CanSearch",
            "data": {
              "body": "> findRows, 찾기 다이얼로그 등을 통해 검색할 때 해당 컬럼을 검색 대상에 포함시킬지 여부를 결정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|검색 대상 미포함| |`1(true)`|검색 대상 포함 (`default`)| ### Example ```javascript //해당 컬럼을 검색 대상에서 제외합니다. options.Cols = [ ... {Type: \"Text\", Name: \"sName\", CanSearch: 0 ...}, ... ]; ```",
              "see": [
                {
                  "label": "SearchCount cfg",
                  "url": "/docs/props/cfg/search-count"
                },
                {
                  "label": "SearchCaseSensitive cfg",
                  "url": "/docs/props/cfg/search-case-sensitive"
                },
                {
                  "label": "findRows method",
                  "url": "/docs/funcs/core/find-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/can-search.html"
          },
          {
            "cid": 301,
            "sid": "can-select-3",
            "name": "can-select",
            "label": "CanSelect",
            "data": {
              "body": "> 사용자가 마우스 드래그를 통해 데이터 영역의 일부데이터를 선택할때, 열에 대한 선택 가능 여부를 설정합니다. > `CanSelect: 0`으로 설정된 열은 드래그시 건너뛰어 선택됩니다. ### ![canSelect](/assets/imgs/canSelect.png \"드래그하여 선택시 선택 가능여부\") 위와 같이 선택시 `ctrl+c`를 하면 2, 3, 5월 열의 데이터만 클립보드로 복사됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|열 선택 불가| |`1(true)`|열 선택 가능 (`default`)| ### Example ```javascript //AMT 열에 대해 선택 불가하게 설정 options.Cols = [ ... {Type: \"Int\", CanEdit: 0, Name: \"AMT\", CanSelect: 0, Width: 120, ...}, ... ]; ```",
              "see": [
                {
                  "label": "CanFocus col",
                  "url": "./can-focus"
                },
                {
                  "label": "CanCopyPaste col",
                  "url": "./can-copy-paste"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/can-select.html"
          },
          {
            "cid": 302,
            "sid": "can-sort-3",
            "name": "can-sort",
            "label": "CanSort",
            "data": {
              "body": "> 열의 소팅 가능 여부를 설정합니다. > 사용자가 헤더 영역의 셀을 클릭시 소팅이 이루어지는데, 이를 허용할지 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|사용자 소팅 불가| |`1(true)`|사용자 소팅 가능 (`default`)| ### Example ```javascript //특정 열에 대해 소팅하지 못하게 막음 options.Cols = [ ... {Type: \"Int\", Name: \"Rank_Sales\", CanSort: 0 ...}, ... ]; ```",
              "see": [
                {
                  "label": "CanMove col",
                  "url": "./can-move"
                },
                {
                  "label": "CanResize col",
                  "url": "./can-resize"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/can-sort.html"
          },
          {
            "cid": 303,
            "sid": "case-sensitive",
            "name": "case-sensitive",
            "label": "CaseSensitive",
            "data": {
              "body": "> 열 소팅시(혹은 필터 사용시) 대소문자 구분 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|대소문자 구분 안함| |`1(true)`|대소문자 구분 사용 (`default`)| ### Example ```javascript //특정 열 소팅시 대소문자를 구분. options.Cols = [ ... {Type: \"Text\", Name: \"SA_DEPTID\", CaseSensitive: 1, ...}, ... ]; ```",
              "see": [
                {
                  "label": "RawSort col",
                  "url": "./raw-sort"
                },
                {
                  "label": "CanSort col",
                  "url": "./can-sort"
                },
                {
                  "label": "NumberSort col",
                  "url": "./number-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/case-sensitive.html"
          },
          {
            "cid": 304,
            "sid": "change-edit",
            "name": "change-edit",
            "label": "ChangeEdit",
            "data": {
              "body": "> 행의 상태가 수정([Changed](/docs/props/row/changed)) 또는 조회인 상태인 행의 컬럼의 편집([CanEdit](/docs/props/row/can-edit)) 가능 여부를 설정합니다. > 조회시에는 편집 불가, 행 추가 후 데이터 편집 가능, 저장 후 편집 불가를 설정하고 싶다면 [AddEdit](/docs/props/col/add-edit) 를 함께 설정해주어야 합니다. > `주의` 해당 속성을 설정하게 되면, `(Cell,Row,Col)CanEdit` 설정 속성은 무시됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|행의 상태가 Changed(수정) / 조회 일 경우 해당 컬럼 편집 불가| |`1(true)`|행의 상태가 Changed(수정) / 조회 일 경우 해당 컬럼 편집 가능| ### Example ```javascript //Changed(수정) 또는 조회 행에 대해서는 AMT 컬럼의 편집을 막음 options.Cols = [ ... {Type: \"Int\", ChangeEdit: 0, Name: \"AMT\", Width: 120 ...}, ... ]; // 조회시 AMT 컬럼의 편집을 막고, addRow 를 통하여 추가한 경우에는 편집 가능, 저장 후 편집 불가로 설정 options.Cols = [ ... {Type: \"Int\", AddEdit: 1, ChangeEdit:0, Name: \"AMT\", Width: 120 ...}, ... ]; ``` ### Try it - [Demo of ChangeEdit](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Col/ChangeEdit/)",
              "see": [
                {
                  "label": "CanEdit col",
                  "url": "/docs/props/col/can-edit"
                },
                {
                  "label": "CanEdit row",
                  "url": "/docs/props/row/can-edit"
                },
                {
                  "label": "AddEdit col",
                  "url": "/docs/props/col/add-edit"
                },
                {
                  "label": "Changed row",
                  "url": "/docs/props/row/changed"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.87|기능 추가|"
            },
            "url": "docs/props/col/change-edit.html"
          },
          {
            "cid": 305,
            "sid": "class-2",
            "name": "class",
            "label": "Class",
            "data": {
              "body": "> 열에 적용할 커스텀 `css class명`을 설정합니다. > **<mark>주의</mark> : Class로 적용한 css는 엑셀 다운로드시 디자인 반영되지 않습니다.** ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|열에 적용할 css class 명| ### Example ```css <style> .RedBold{color:#FF0000;font-weight:700} </style> ``` ```javascript //특정 열에 \"RedBold\" 클래스를 적용 options.Cols = [ ... {Type: \"Text\", Name: \"Dept\", Class: \"RedBold\", Width: 100 ...}, ... ]; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/class.html"
          },
          {
            "cid": 306,
            "sid": "clear",
            "name": "clear",
            "label": "Clear",
            "data": {
              "body": "> 열간에 관계형 콤보를 사용할때, 상위 콤보에 값이 바뀌었을때 클리어 되어야 하는 하위 열을 정의 합니다. > 관계형 콤보 구성과 관련해서는 [Related](./related) 속성을 참고해 주세요. > [CanEmpty](./can-empty) 속성에 영향을 받아 `CanEmpty: 0` 일 경우에는 Enum의 첫 번째 값으로 설정이 됩니다. > `CanEmpty: 1` 일 경우에는 빈 문자열로 설정 됩니다. > `참고` : 관계형 콤보의 `(Col)Clear, (Col)CanEmpty` 는 사용자의 action(change 이벤트가 발생하는) 에 의해서만 동작합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|자신의 하위관계 열이름 (여러개인 경우 \",\"구분자로 지정)| ### Example ```javascript options.Cols = [ ... //열의 값이 변경될때 cls2,cls3 열의 값이 클리어 됨 {Type: \"Enum\", Clear: \"cls2, cls3\", Name: \"cls1\", Enum: \"|A회사|B회사\",EnumKeys: \"|AA|BB\" ... }, //열의 값이 변경될때 cls3 열의 값이 클리어 됨 {Type: \"Enum\", Clear: \"cls3\", Name: \"cls2\", Related: \"cls1\", EnumAA: \"|해외사업부|국내사업부|영업지원부\", EnumKeysAA: \"|A0|A1|A2\", EnumBB: \"|개발부|기술지원부\", EnumKeysBB: \"|B0|B1\" ... }, //소분류 {Type: \"Enum\", Name: \"cls3\", Related: \"cls2\", EnumAA_A0: \"|미주사업|동남아사업팀|유럽사업팀\", EnumKeysAA_A0: \"|AB0|AB1|AB2\", EnumAA_A1: \"|경부|전라|수도권\", EnumKeysAA_A1: \"|K0|K1|K2\", EnumAA_A2: \"|지원1팀|지원2팀\", EnumKeysAA_A2: \"|SE0|SE1\", EnumBB_B0: \"|개발1팀|개발2팀|개발3팀\", EnumKeysBB_B0: \"|DEV0|DEV1|DEV2\", EnumBB_B1: \"|지원1팀|지원2팀|지원3팀\", EnumKeysBB_B1: \"|SU0|SU1|SU3\", ... }, ... ]; ```",
              "see": [
                {
                  "label": "Related col",
                  "url": "./related"
                },
                {
                  "label": "Enum col",
                  "url": "./enum"
                },
                {
                  "label": "EnumKeys col",
                  "url": "./enum-keys"
                },
                {
                  "label": "CanEmpty",
                  "url": "./can-empty"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/clear.html"
          },
          {
            "cid": 307,
            "sid": "col-merge",
            "name": "col-merge",
            "label": "ColMerge",
            "data": {
              "body": "> 데이터 영역에서 값 기준 병합 실행([DataMerge](/docs/props/cfg/data-merge), [HeaderMerge](/docs/props/cfg/header-merge))시 열을 포함할지 여부를 설정합니다. > 해당 속성은 지정한 컬럼 내에 `병합할지 여부`를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|해당 컬럼을 병합하지 않습니다. | |`1(true)`|해당 컬럼을 병합 대상에 포함합니다. (`default`)| ### Example ```javascript options.Cols = [ ... {Type: \"Text\", Name: \"Dept\", ColMerge: false, Width: 100 ...}, ... ]; ```",
              "see": [
                {
                  "label": "RowMerge row",
                  "url": "/docs/props/row/row-merge"
                },
                {
                  "label": "ColMerge cell",
                  "url": "/docs/props/cell/col-merge"
                },
                {
                  "label": "DataMerge cfg",
                  "url": "/docs/props/cfg/data-merge"
                },
                {
                  "label": "HeaderMerge cfg",
                  "url": "/docs/props/cfg/header-merge"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/col-merge.html"
          },
          {
            "cid": 308,
            "sid": "color-2",
            "name": "color",
            "label": "Color",
            "data": {
              "body": "> 열의 배경색상을 설정합니다. > 열의 색상은 상태에 따른 배경 색상의 영향을 받습니다. > rgb(255,255,255)는 투명색이 됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|HEX형식 (ex:#FF00F0) rgb형식 (ex:rgb(244,200,40)| ### Example ```javascript //특정 열에 배경색을 \"#ADADAD\"로 설정 options.Cols = [ ... {Type: \"Text\", Name: \"Dept\", Color: \"#ADADAD\", Width: 100 ...}, ... ]; ```",
              "see": [
                {
                  "label": "TextColor col",
                  "url": "./text-color"
                },
                {
                  "label": "TextStyle col",
                  "url": "./text-style"
                },
                {
                  "label": "TextSize col",
                  "url": "./text-size"
                },
                {
                  "label": "TextFont col",
                  "url": "./text-font"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/color.html"
          },
          {
            "cid": 309,
            "sid": "cursor",
            "name": "cursor",
            "label": "Cursor",
            "data": {
              "body": "> 열 위에 마우스 커서가 호버시 커서의 모양을 설정합니다. > 설정가능한 커서의 모양은 css를 따릅니다. > ex) auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, w-resize, text, wait, help ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|원하는 커서 모양| ### Example ```javascript //열에 커서가 들어갔을때 커서 모양을 클릭가능한 손가락 모양으로 변경. options.Cols = [ ... {Type: \"Text\", Name: \"sa_nm\", Cursor: 'pointer', TextStyle: 4}, ... ]; ```",
              "see": [
                {
                  "label": "TextStyle col",
                  "url": "./text-style"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/cursor.html"
          },
          {
            "cid": 310,
            "sid": "custom-format",
            "name": "custom-format",
            "label": "CustomFormat",
            "data": {
              "body": "> 원본 데이터에 대한 마스킹을 정의합니다. > <mark>Type이 Text또는 Lines인 경우</mark> 사용 가능한 사용자 정의 포맷으로, 사용자가 선언한 커스텀 포맷 함수도 지정가능합니다. > `|`구분자로 여러개 포맷 지정 가능 합니다. > `CustomFormat`에서 사용 가능한 예약어는 다음과 같습니다. > |Value|Description| > |-----|-----| > |`#`|그대로 보여지는 글자| > |`*`| *(별표)로 처리되는 글자| > |`PostNo`| 우편번호 | > |`IdNoMask`| 주민등록번호(뒤 6자리 *(별표)로 처리) | > |`IdNo`| 주민등록번호(full text) | > |`SaupNo`| 사업자 등록번호 | > |`CardNo`| 카드번호 | > |`PhoneNo`| 전화번호(휴대폰번호) | ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|열의 Type에 따른 다양한 포맷설정 문자열| ### Example ```javascript options.Cols = [ ... //전화번호 포맷을 정의합니다. {Type: \"Text\", Name: \"sPhone\", CustomFormat: 'PhoneNo' ...}, //0226212288 입력시 02-2621-2288로 표시, 01073213834 입력시 010-7321-3834 로 표시 //임의의 포멧을 정의합니다. {Type: \"Text\", Name: \"sawonNo\", CustomFormat: '###-#####' ...}, //12345678 입력시 123-45678로 표시 //주민번호에 뒷자리를 감추는 형식 {Type: \"Text\", Name: \"cNo\", CustomFormat: 'IdNoMask' ...}, //8501242384211 입력시 850124-2******로 표시 //데이터의 자릿수에 따라 지정 {Type: \"Text\", Name: \"cNo\", CustomFormat: 'IdNoMask|SaupNo' ...}, //8501242384211(주민번호) 입력시 850124-2******로 표시, 6258412458(사업자번호) 입력시 625-84-12458로 표시 //임의의 함수로 처리 {Type: \"Text\", Name: \"ISDNS\", CustomFormat: function(v, sheet, col){ //값의 글자수에 따라 다른 포멧으로 보여지게 끔 표시 if (v.length > 10) { //######-####### return v.substr(0,6) + \"-\" + v.substr(6); } else { //#####-##### return v.substr(0,5) + \"-\" + v.subst(5); } }}, ... ]; ```",
              "see": [
                {
                  "label": "Format appendix",
                  "url": "/docs/appx/format"
                },
                {
                  "label": "Format col",
                  "url": "./format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.87|function 사용시 시트객체, 컬럼명 인자 추가|"
            },
            "url": "docs/props/col/custom-format.html"
          },
          {
            "cid": 311,
            "sid": "data-format",
            "name": "data-format",
            "label": "DataFormat",
            "data": {
              "body": "> 날짜 타입의 열에서 로딩할 데이터의 포멧을 설정합니다. > 가령 조회 데이터의 날짜가 \"25012017\" 와 같다면 DataFormat에는 \"ddMMyyyy\" 로, > 데이터가 \"20171225\" 와 같다면 DataFormat에는 \"yyyyMMdd\" 로 설정되어야 합니다. > 해당 열에 데이터가 서버로 전송되기 위해 추출 될 때, ([doSave](/docs/funcs/core/do-save), [getSaveString](/docs/funcs/core/get-save-string))도 지정한 포멧으로 전송됩니다. **날짜 예약어** |표시|의미| |---|---| |`yyyy`|년도(4자리)| |`MM`|월(2자리)| |`dd`|일(2자리)| |`HH`|시간(2자리)| |`mm`|분(2자리)| |`ss`|초(2자리)| ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|yyyyMMdd 등 정해진 문자열| ### Example ```javascript //특정 열에서 년월일 데이터 구조를 설정합니다. options.Cols = [ ... {Type: \"Date\", Format: \"yyyy.MM.dd HH:ss\", DataFormat: \"yyyyMMddHHmmss\", Name: \"enterDate\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Format col",
                  "url": "/docs/props/col/format"
                },
                {
                  "label": "EditFormat col",
                  "url": "/docs/props/col/edit-format"
                },
                {
                  "label": "Format appendix",
                  "url": "/docs/appx/format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/data-format.html"
          },
          {
            "cid": 312,
            "sid": "date-strict-mode-2",
            "name": "date-strict-mode",
            "label": "DateStrictMode",
            "data": {
              "body": "> 조회시 날짜 타입의 열에서 `DataFormat`이 설정된 경우 설정된 포맷과 길이가 일치하지 않거나 잘못된 날짜가 조회되는 경우 공백으로 처리합니다. > `DataFormat`을 \"yyyyMMdd\" 로 설정한 후 \"88\" 이라는 값이 조회되는 경우 해당 셀 값은 공백으로 처리됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|정밀검사하지 않음 (`default`)| |`1(true)`|`DataFormat`에 설정된 포맷에 대한 정밀 검사| ### Example ```javascript //특정 열에서 잘못된 날짜 데이터 조회시 공백처리 합니다. options.Cols = [ ... {Type: \"Date\", DateStrictMode: 1 Format: \"yyyy.MM.dd\", DataFormat: \"yyyyMMdd\", Name: \"enterDate\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "DataFormat col",
                  "url": "/docs/props/col/data-format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.12|기능 추가|"
            },
            "url": "docs/props/col/date-strict-mode.html"
          },
          {
            "cid": 313,
            "sid": "decimal-adjust-2",
            "name": "decimal-adjust",
            "label": "DecimalAdjust",
            "data": {
              "body": "> Int, Float 타입 컬럼 데이터의 근사값 처리방식을 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`round`|근사값을 반올림으로 처리합니다. (`default`)| |`floor`|근사값을 내림으로 처리합니다.| |`ceil`|근사값을 올림으로 처리합니다.| ### Example ```javascript options.Cfg = { DecimalAdjust: \"floor\" // Int, Float 타입 컬럼의 근사값 처리방식을 내림으로 설정 }; ``` ### Since |product|version|desc| |---|---|---| |core|8.0.0.11|기능 추가|",
              "since": "|product|version|desc||---|---|---||core|8.0.0.11|기능 추가|"
            },
            "url": "docs/props/col/decimal-adjust.html"
          },
          {
            "cid": 314,
            "sid": "default-image",
            "name": "default-image",
            "label": "DefaultImage",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Img` 인 컬럼에서 이미지를 로드할때 서버에 이미지가 없는 경우 대체할 이미지를 설정합니다. > **<mark>주의</mark> : Img 데이터에 Left, Top이 설정된 경우엔 DefaultImage가 적용되지 않습니다** ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|이미지 로드 실패시 대체할 이미지의 url| ### Example ```javascript options.Cols = [ ... // 대체 이미지 경로를 설정한다. { Header: \"이미지\", Type: \"Img\", Name: \"sImgData\", Width: 120, DefaultImage: \"./image/defaultImage.png\", ... }, ]; ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.18|기능 추가|"
            },
            "url": "docs/props/col/default-image.html"
          },
          {
            "cid": 315,
            "sid": "default-value",
            "name": "default-value",
            "label": "DefaultValue",
            "data": {
              "body": "> 컬럼에 기본 값을 설정합니다. > 신규행을 추가하거나 조회데이터 안에 해당 열에 대한 데이터가 없는 경우, 지정한 값이 자동으로 표시됩니다. > 특히 `Button` 타입 사용시 버튼에 기본적으로 표시될 내용을 설정하면, 별도로 버튼 컬럼에 대한 조회가 없어도 해당 값이 표시됩니다. > 값을 읽거나(getValue) 저장하거나 엑셀로 다운로드할 때는 DefaultValue 값으로 처리됩니다. > `EmptyValue` 속성과 같이 설정 하였을 경우 DefaultValue가 우선 순위가 높습니다. > 해당 속성에 영향을 받는 데이터는 아래와 같습니다. ```javascript {Type: \"Text\", Name: \"sText\", DefaultValue : \"홍길동\"} data: [ {\"e\": null}, //null 데이터 {\"e\": undefined}, //undefined 데이터 {} //데이터 없음 ] ``` ### Type `mixed` ### Options |Value|Description| |-----|-----| |`mixed`|신규 행이나 조회시 값이 없을때 기본값으로 표시할 내용| ### Example ```javascript //버튼 컬럼에 기본 타이틀 지정 options.Cols = [ {Header: \"상세정보\", Type: \"Button\", Name: \"DetailBnt\", Button: \"Button\", DefaultValue: \"확인\"}, ... ]; ``` ![Default](/assets/imgs/button5.png) 상세보기 컬럼에 조회 데이터가 없어도 \"확인\"이 표시됩니다.",
              "see": [
                {
                  "label": "EmptyValue col",
                  "url": "./empty-value"
                },
                {
                  "label": "SpaceForDefaultValue cfg",
                  "url": "/docs/props/cfg/space-for-default-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/default-value.html"
          },
          {
            "cid": 316,
            "sid": "defaults",
            "name": "defaults",
            "label": "Defaults",
            "data": {
              "body": "> 사용자가 설정할 수 있는 값을 첫글자를 구분자로 연결한 문자열 형식으로 정의하여 입력 편의를 돕습니다. > 열에 [Button](./button) 속성이나 [Icon](./icon) 속성값이 `Defaults`인 경우에만 사용하실 수 있습니다. > `*`문자로 시작하는 몇가지 예약어를 통해 특수한 기능을 추가적으로 사용하실 수 있습니다. > `Text` 타입에서 사용시 [Format](./format), [EditFormat](./edit-format) 속성을 같이 사용하여 `Html`의 \\<select\\>처럼 보여지는 값과 서버로 전송되는 값을 다르게 사용하실 수도 있습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|첫글자를 구분자로 하는 입력 가능한 값 문자열 ex) `Defaults: \"\\|딸기\\|바나나\\|오렌지\\|포도\\|파인애플\\|*All\\|*None\"` ![Defaults](/assets/imgs/defaults1.png)| ### 특수 기능 (예약어) |예약문자|기능| |---|---| |`*Date`|\"일자선택 ...\"이라는 문구가 리스트 아이템에 표시되고 선택시 달력이 오픈됩니다.| |`*Button`|\"선택 ...\"이라는 문구가 리스트 아이템에 표시되고 선택시 [onButtonClick](/docs/events/on-button-click)이벤트를 발생시킵니다.| |`*FilterOff`|필터행에서만 \"전체\"라는 문구가 리스트에 표시되고 선택시 필터셀의 값을 지웁니다.| |`*All`|[Range](./range) 속성을 `1`로 설정한 경우 리스트의 각 아이템 우측에 체크박스가 표시되어 여러개 아이템을 선택할 수 있습니다. 이때 이 값을 갖은 아이템에는 \"모두 선택\"이라는 문구가 표시되고 선택시 모든 아이템이 체크됩니다.| |`*None`|[Range](./range) 속성을 `1`로 설정한 경우 리스트의 각 아이템 우측에 체크박스가 표시되어 여러개 아이템을 선택할 수 있습니다. 이때 이 값을 갖은 아이템에는 \"모두 지우기\"이라는 문구가 표시되고 선택시 모든 아이템이 체크해제 됩니다.| |`*Rows`|값이 포함되면 별도의 아이템이 생기는게 아니라 해당 열에 모든 값이 리스트에 추가됩니다. 보여지는 행만 리스트에 추가하고 싶으면 `*Rows` 뒤에 `Visible` 키워드를 붙여주시면 됩니다. (`*RowsVisible`)| ### Example ```javascript // Default를 이용한 드롭 다운 리스트 (복수개 선택가능) options.Cols = [ { Header: \"여행지\", Type: \"Text\", Name: \"Nation\", Range: 1, Button: \"Defaults\", // 시트 우측 영역에 Default 버튼 생성 Defaults: \"|LOC|USA|EST|CHN|JPN|*None\", Format: \"{'LOC':'국내','USA':'미국','EST':'동남아','CHN':'중국','JPN':'일본'}\", EditFormat: \"{'LOC':'국내','USA':'미국','EST':'동남아','CHN':'중국','JPN':'일본'}\", }, ... ]; ``` ![Default](/assets/imgs/defaults2.png) Example과 같이 설정시 보여지는 리스트 (저장시 서버로는 **\"LOC;EST\"** 전송됨)",
              "see": [
                {
                  "label": "Button col",
                  "url": "./button"
                },
                {
                  "label": "Icon col",
                  "url": "./icon"
                },
                {
                  "label": "Range col",
                  "url": "./range"
                },
                {
                  "label": "Format col",
                  "url": "./format"
                },
                {
                  "label": "EditFormat col",
                  "url": "./edit-format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.25|`Visible` 키워드 추가|"
            },
            "url": "docs/props/col/defaults.html"
          },
          {
            "cid": 317,
            "sid": "disabled",
            "name": "disabled",
            "label": "Disabled",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Button`, `File`인 컬럼에 대해 버튼 사용 가능 여부를 설정합니다. > `Type:\"Button\", Disabled:1` : 버튼 컬럼이 비활성화 색으로 변경되며, click 이벤트 발생하지 않는다 > `Type:\"File\", Disabled:1` : 파일 추가, 제거 버튼이 표시되지 않는다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|버튼 기능 사용 가능 (`default`)| |`1(true)`|버튼 기능 사용 불가| ### Example ```javascript //특정 열의 버튼을 사용불가로 설정 options.Cols = [ ... {Type: \"Button\", Button: \"Button\", Disabled: 1, Name: \"btn1\" ...}, ... ]; ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/disabled.html"
          },
          {
            "cid": 318,
            "sid": "edit-enum",
            "name": "edit-enum",
            "label": "EditEnum",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Enum`인 열에서 드랍리스트가 펼쳐졌을때 보여지는 아이템의 `Text`를 [Enum](./enum)에서 설정한 값과 다르게 하고자 할때 사용합니다. > '\\t'구분자를 이용하여 아이템을 여러개의 컬럼으로 표현할 수 있습니다. ### **1. 일반적인 EditEnum 사용** ![EditEnum](/assets/imgs/editEnum.png \"EditEnum\") **2. '\\t' 구분자를 사용한 EditEnum 사용** ![EditEnum2](/assets/imgs/editEnum2.png \"EditEnum2\") ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|첫번째 글자를 구분자로 하는 문자열 (ex:\"#사장#부사장#전무#상무#이사#부서장#차장#과장#대리#주임#사원\")| ### Example ```javascript //Enum 열에 item을 설정한다. options.Cols = [ ... { Type: \"Enum\", Name: \"relation1\", Enum: \"|시흥현장|안산현장|화성현장\", EditEnum: \"|경기도 시흥시 은행로216번길 26|경기도 안산시 단원구 안산천남로 245|경기도 화성시 동탄반석로 96\", ... }, { Type: \"Enum\", Name: \"relation2\", Enum: \"|시흥현장|안산현장|화성현장\", EditEnum: \"|경기도\\t시흥시\\t은행로216번길 26|경기도\\t안산시 단원구\\t안산천남로 245|경기도\\t화성시\\t동탄반석로 96\", ... }, ... ]; ```",
              "see": [
                {
                  "label": "Enum col",
                  "url": "./enum"
                },
                {
                  "label": "EnumKeys col",
                  "url": "./enum-keys"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/edit-enum.html"
          },
          {
            "cid": 319,
            "sid": "edit-format",
            "name": "edit-format",
            "label": "EditFormat",
            "data": {
              "body": "> 사용자가 셀을 더블클릭하여 편집모드로 들어갔을때 보여 줄 포맷을 설정합니다 > 각 열의 [Type](/docs/appx/type)에 따라 설정 방법이나 동작이 달라집니다. > 가장 쉽게 이해하자면 날짜 유형 포맷을 사용하는 열에서 \"EditFormat\":\"ddMMyyyy\"로 설정하면, 셀에 보여질때는 \"2019-12-31\"형식으로 보여지다가, 사용자가 셀의 데이터를 편집하려 할때는 \"31122019\"로 나타나게 됩니다. > 포맷에 대한 자세한 내용은 [Format appendix](/docs/appx/format)을 참고해 주세요. > `Int`나 `Float` 타입에선 %는 `EditFormat`에서 사용할 수 없습니다. ### Type mixed( `string` \\| `object`) ### Options |타입|유형|사용방법 | |---|---|---| |`Text, Lines`|`object`|셀에서 더블클릭을 통해 편집모드로 들어갈때 원래의 값을 어떤 형식으로 보여줄지 설정합니다. ex) \"EditFormat\":{\"KOR\":\"대한민국\", \"JPN\":\"일본\", \"USA\":\"미국\"} 셀의 값이 KOR일때 편집모드로 들어가면 대한민국으로 보여줌 ![EditFormat Text](/assets/imgs/editFormatText.png)| |`Date`|`string`|편집시 보여질 년,월,일의 순서 ex) \"EditFormat\":\"ddMMyyyy\" ![EditFormat Date](/assets/imgs/editFormatDate.png)| ### Example ```javascript //특정 열에서 편집시 일월년 순으로 보여지게끔 설정 options.Cols = [ ... {Type: \"Date\", Format: \"yyyy-MM-dd\", EditFormat: \"ddMMyyyy\", Name: \"enterDate\",Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Format col",
                  "url": "./format"
                },
                {
                  "label": "DataFormat col",
                  "url": "./data-format"
                },
                {
                  "label": "EditFormat cell",
                  "url": "/docs/props/cell/edit-format"
                },
                {
                  "label": "Format appendix",
                  "url": "/docs/appx/format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/edit-format.html"
          },
          {
            "cid": 320,
            "sid": "edit-mask",
            "name": "edit-mask",
            "label": "EditMask",
            "data": {
              "body": "> 셀에 입력가능한 문자를 자바스크립트 정규식을 이용하여 설정합니다. > 여기서 입력한 글자는 정규식의 `search()함수`를 사용하여 입력허용 여부가 결정됩니다. > > \"입력값\".search(EditMask)>=0 > `true` 인 경우 입력 허용 > `false` 인 경우 입력 제한 > > 띄어쓰기를 제외한 모든 글자만 입력허용 : \"^\\\\\\\\S\\*\\$\" > 숫자만 입력 가능 : \"^\\\\\\\\d\\*\\$\" > 알파벳 만 가능 : \"^\\\\\\\\w\\*\\$\" > 열개 숫자만 가능 : \"^\\\\\\\\d{0,10}$\" > > 정규식에 맞지 않은 글자는 입력되지 않습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|자바스크립트 정규식 문자| ### Example ```javascript //띄어쓰기를 제외한 모든 글자 입력 가능 options.Cols = [ ... {Type: \"Text\", EditMask: \"^\\\\S*$\", Name: \"CN_Code\", Width: 120, ...}, ... ]; ```",
              "see": [
                {
                  "label": "ResultMask col",
                  "url": "./result-mask"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/edit-mask.html"
          },
          {
            "cid": 321,
            "sid": "empty-value",
            "name": "empty-value",
            "label": "EmptyValue",
            "data": {
              "body": "> 셀에 값이 없을때 보여질 글자를 설정합니다. > `Html` input 객체의 `placeholder`속성과 비슷한 기능으로, 값을 읽거나(getValue) 저장하거나 엑셀로 다운로드할 때는 값이 없는 상태로 처리됩니다. > 해당 속성에 영향을 받는 데이터는 아래와 같습니다. ```javascript {Type: \"Text\", Name: \"sText\", EmptyValue : \"값이 없습니다.\"} data: [ {\"e\": null}, //null 데이터 {\"e\": undefined}, //undefined 데이터 {\"e\": \"\"}, //빈문자 데이터 {} //데이터 없음 ] ``` ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|신규 행이나 조회시 값이 없을때 보여질 내용| ### Example ```javascript //필수 입력에 대한 안내를 설정 options.Cols = [ ... {Type: \"Text\", Name: \"sa_point\", EmptyValue: \"필수 입력항목 입니다.\", ...}, ... ]; ```",
              "see": [
                {
                  "label": "CanEmpty col",
                  "url": "./can-empty"
                },
                {
                  "label": "DefaultValue col",
                  "url": "./default-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/empty-value.html"
          },
          {
            "cid": 322,
            "sid": "enum-disabled",
            "name": "enum-disabled",
            "label": "EnumDisabled",
            "data": {
              "body": "> [Enum](./enum) 속성을 통해 설정한 아이템들의 선택 불가능 여부를 설정합니다. > 첫번째 글자를 구분자로 설정하게 됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|첫번째 글자를 구분자로 하는 문자열 (ex:\"#1#0\")| ### Example ```javascript //Enum 열에 item의 선택 불가능 여부를 설정한다. options.Cols = [ { \"Header\": \"대분류\", \"Type\": \"Enum\", \"Name\": \"Category1\", \"Enum\": \"|가정/살림|경제 경영|국어 외국어 사전|만화/라이트노벨|소설/시/희곡|어린이|역사|예술|인문|자기계발|자연과학\", \"EnumKeys\": \"|A0|A1|A2|A3|A4|A5|A7|A8|A9|A10|A11\", \"EnumDisabled\": \"|1|0|0|0|0|1|0|1|1|0|0\" } ]; ```",
              "see": [
                {
                  "label": "Enum col",
                  "url": "./enum"
                },
                {
                  "label": "EnumKeys col",
                  "url": "./enum-keys"
                },
                {
                  "label": "EnumMenu col",
                  "url": "./enum-menu"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.16|기능 추가|"
            },
            "url": "docs/props/col/enum-disabled.html"
          },
          {
            "cid": 323,
            "sid": "enum-format",
            "name": "enum-format",
            "label": "EnumFormat",
            "data": {
              "body": "> Enum 컬럼 데이터에 대한 마스킹을 정의합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`function`|return 값을 기준으로 Enum 컬럼 데이터에 관한 마스킹 표시| ### Example ```javascript options.Cols = [ ... //임의의 함수로 처리 {Type: \"Enum\", Name: \"EnumData\", Enum: \"|토마토|감자|옥수수\", Range: 1, EnumFormat: function (param, sheet, col) { if (param.indexOf(\";\") == -1 || param == \"&#160;\") return param; var valArr = param.split(\";\"); var length = valArr.length - 1 + \"\"; // '토마토;감자'로 val 값이 들어올 경우, '토마토 외 1건'과 같은 형식으로 표시한다. return valArr[0] + \" 외 \" + length + \"건\"; }}, ... ]; ```",
              "see": [
                {
                  "label": "Enum",
                  "url": "./enum"
                },
                {
                  "label": "Format appendix",
                  "url": "/docs/appx/format"
                },
                {
                  "label": "Format col",
                  "url": "./format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.9|기능 추가|"
            },
            "url": "docs/props/col/enum-format.html"
          },
          {
            "cid": 324,
            "sid": "enum-keys",
            "name": "enum-keys",
            "label": "EnumKeys",
            "data": {
              "body": "> [Enum](./enum) 속성을 통해 설정한 아이템 들의 값을 설정합니다. > 첫번째 글자를 구분자로 설정하게 됩니다. > 이 속성을 설정하면, 실제 조회나 저장시 `EnumKey`로 설정한 값이 서버로 전송됩니다. > **<mark>주의</mark> : EnumKeys는 [Enum](./enum) 당 유일한 하나의 Key로 동일한 값을 중복해서 사용하면 안됩니다.** > **<mark>주의</mark> : [Type](/docs/appx/type)이 `Radio`인 컬럼에서는 [Enum](./enum)과 `EnumKeys`의 길이를 동일하게 사용해야 체크 동작이 정상적으로 이뤄집니다.** ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|첫번째 글자를 구분자로 하는 문자열 (ex:\"#01#02#03#04\")| ### Example ```javascript //Enum 열에 item을 설정한다. options.Cols = [ ... {Type: \"Enum\", Name: \"relation\", Enum: \"|직계존속|직계비속|배우자|자녀\",EnumKeys: \"|A0|A1|B0|C0\" ...}, ... ]; ```",
              "see": [
                {
                  "label": "Enum col",
                  "url": "./enum"
                },
                {
                  "label": "MenuHSeparator cfg",
                  "url": "/docs/props/cfg/menu-h-separator"
                },
                {
                  "label": "Related col",
                  "url": "./related"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/enum-keys.html"
          },
          {
            "cid": 325,
            "sid": "enum-menu",
            "name": "enum-menu",
            "label": "EnumMenu",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Enum`인 열에서 드랍리스트 대신 메뉴가 보여지게 끔 설정하고자 할때 사용합니다. > `Menu`에 대한 자세한 내용은 [Menu appendix](/docs/appx/menu)속성을 참고해 주세요. ### ![EnumMenu](/assets/imgs/enumMenu.png \"EnumMenu\") ### Type `object` ### Options |Value|Description| |-----|-----| |`object`|메뉴를 구성하는 json 객체| ### Example ```javascript //Enum 열에 item을 설정한다. options.Cols = [ ... {Type: \"Enum\", Name: \"relation\", Enum: \"|안산1|안산2|화성1|화성2|화성3|일산1|일산2\", EnumMenu : { Items: [ { Menu: 1, Name: \"안산현장\", Items: [ {Name: \"[안산1] 경기도 안산시 단원구 광덕3로 201\",Value: \"안산1\"}, {Name: \"[안산2] 경기도 안산시 단원구 신길동 1509\",Value: \"안산2\"} ] }, { Menu: 1, Name: \"화성현장\", Items: [ {Name: \"[화성1] 경기도 화성시 반송동\", Value: \"화성1\"}, {Name: \"[화성2] 경기도 화성시 동탄대로22길 30\", Value: \"화성2\"}, {Name: \"[화성3] 경기도 화성시 산척동 283\", Value: \"화성3\"}, ] }, { Menu: 1, Name: \"일산현장\", Items: [ {Name: \"[일산1] 경기도 고양시 일산동구 정발산로82번길 10\", Value: \"일산1\"}, {Name: \"[일산2] 경기도 고양시 일산동구 장항동 1761\", Value: \"일산2\"}, ] } ] } ... }, ... ]; ```",
              "see": [
                {
                  "label": "Enum col",
                  "url": "/docs/props/col/enum"
                },
                {
                  "label": "EnumKeys col",
                  "url": "/docs/props/col/enum-keys"
                },
                {
                  "label": "Menu appendix",
                  "url": "/docs/appx/menu"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/enum-menu.html"
          },
          {
            "cid": 326,
            "sid": "enum-no-match-text",
            "name": "enum-no-match-text",
            "label": "EnumNoMatchText",
            "data": {
              "body": "> `EnumStrictMode` 를 1 로 설정했을 때 셀에 적용할 대체 텍스트를 설정합니다. > 해당 옵션은 `EnumStrictMode` : 1 에서만 사용할 수 있습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|`EnumStrictMode`: 1 을 사용할 때 셀에 표시할 대체 텍스트 설정| ### Example ```javascript options.Cols = [ // EnumStrictMode 설정 { \"Header\": \"Enum1\", \"Type\": \"Enum\", \"MinWidth\": 80, \"Name\": \"sEnum\", \"ColMerge\": 0, \"Align\": \"Center\", \"Enum\": \"|한국|중국|일본\", \"EnumKeys\": \"|KOR|CHA|JAP\", \"EnumStrictMode\" : 1, \"EnumNoMatchText\" : \"대체 텍스트\", \"RelWidth\": 1 } ]; var data = [ // Enum, EnumKeys 에 아래 데이터가 없으므로 셀에는 \"대체 텍스트\" 라는 문구가 표시 됩니다. {sEnum: \"USA\"}, ... ]; ```",
              "see": [
                {
                  "label": "EnumStrictMode",
                  "url": "/docs/props/col/enum-strict-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.26|기능 추가|"
            },
            "url": "docs/props/col/enum-no-match-text.html"
          },
          {
            "cid": 327,
            "sid": "enum-strict-mode",
            "name": "enum-strict-mode",
            "label": "EnumStrictMode",
            "data": {
              "body": "> `Enum, EnumKeys`에 설정되지 않은 값은 조회 시 무시되고 `EnumStrictMode`를 `1`로 설정하게 되면 > 설정되지 않은 값을 셀에 적용 할 수 있습니다. ### ![EnumStrictMode](/assets/imgs/EnumStrictModes.png \"EnumStrictMode\") ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|`Enum, EnumKeys` 에 설정되지 않은 값을 셀에 적용하지않음. (`default`)| |`1`|`Enum, EnumKeys` 에 설정되지 않은 값을 셀에 적용.| |`2`|`Enum, EnumKeys` 에 설정되지 않은 값을 셀에 적용하고, Enum의 List에 해당 값을 추가합니다.| ### Example ```javascript options.Cols = [ ... // EnumStrictMode 설정 { \"Header\": \"Enum1\", \"Type\": \"Enum\", \"MinWidth\": 80, \"Name\": \"sEnum\", \"ColMerge\": 0, \"Align\": \"Center\", \"Enum\": \"|한국|중국|일본\", \"EnumKeys\": \"|KOR|CHA|JAP\", \"EnumStrictMode\" : 1, \"RelWidth\": 1 }, // EnumStrictMode 미설정 { \"Header\": \"Enum2\", \"Type\": \"Enum\", \"MinWidth\": 80, \"Name\": \"aEnum\", \"ColMerge\": 0, \"Align\": \"Center\", \"Enum\": \"|한국|중국|일본\", \"EnumKeys\": \"|KOR|CHA|JAP\", \"RelWidth\": 1 }, ... ]; var data = [ {sEnum: \"USA\", aEnum: \"USA\"}, ... ]; ```",
              "see": [
                {
                  "label": "Enum col",
                  "url": "/docs/props/col/enum"
                },
                {
                  "label": "EnumKeys col",
                  "url": "/docs/props/col/enum-keys"
                },
                {
                  "label": "Menu appendix",
                  "url": "/docs/appx/menu"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.3|기능 추가||core|8.2.0.26|`EnumStrictMode : 2` 추가|"
            },
            "url": "docs/props/col/enum-strict-mode.html"
          },
          {
            "cid": 328,
            "sid": "enum",
            "name": "enum",
            "label": "Enum",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Enum`이나 `Radio`일 때 보여질 item을 설정합니다. > 첫번째 글자를 구분자로 설정하게 됩니다. > [EnumKeys](./enum-keys) 속성을 통해 item의 실제값을 설정할 수 있습니다. ### ![Enum타입](/assets/imgs/enum1.png \"Enum\") [그림1] ![Radio타입](/assets/imgs/radioEnum.png \"Radio\") [그림2] ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|첫번째 글자를 구분자로 하는 문자열 (ex:\"#사장#부사장#전무#상무#이사#부서장#차장#과장#대리#주임#사원\")| ### Example ```javascript //Enum 열에 item을 설정한다. options.Cols = [ ... {Type: \"Enum\", Name: \"relation\", Enum: \"|직계존속|직계비속|배우자|자녀\" ...}, 또는 {Type: \"Enum\", Name: \"relation\", Enum: \"#직계존속#직계비속#배우자#자녀\" ...}, ... ]; ```",
              "see": [
                {
                  "label": "EnumKeys col",
                  "url": "./enum-keys"
                },
                {
                  "label": "IconAlign col",
                  "url": "./icon-align"
                },
                {
                  "label": "MenuHSeparator cfg",
                  "url": "/docs/props/cfg/menu-h-separator"
                },
                {
                  "label": "Related col",
                  "url": "./related"
                },
                {
                  "label": "ShowImage cfg",
                  "url": "/docs/props/cfg/showImage"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/enum.html"
          },
          {
            "cid": 329,
            "sid": "exclude-empty",
            "name": "exclude-empty",
            "label": "ExcludeEmpty",
            "data": {
              "body": "> [FormulaRow](/docs/props/col/formula-row) 및 소계 / 누계행의 평균 또는 건수 등의 계산시 0 또는 빈 값을 포함 할지 여부를 설정합니다. ### > **적용되는 기능** > [makeSubTotal](/docs/funcs/core/make-sub-total) 소계/누계 평균/카운트 > [FormulaRow](/docs/props/col/formula-row) 평균/카운트/최소 > [GroupSubTotal](/docs/props/col/group-sub-total) 평균/카운트/최소 ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|0 또는 빈 값 포함 (`default`)| |`1(true)`|0 또는 빈 값 포함 안 함| ### Example ```javascript options.Cols = [ ... {Type: \"Int\", Name: \"Pvt_TSum\", ExcludeEmpty: 1, ...}, ... ]; ```",
              "see": [
                {
                  "label": "makeSubTotal method",
                  "url": "/docs/funcs/core/make-sub-total"
                },
                {
                  "label": "FormulaRow col",
                  "url": "/docs/props/col/formula-row"
                },
                {
                  "label": "UseGroupSubTotal cfg",
                  "url": "/docs/props/cfg/use-group-sub-total"
                },
                {
                  "label": "GroupSubTotal col",
                  "url": "/docs/props/col/group-sub-total"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.45|기능 추가||core|8.1.0.46|빈 값 포함 추가||core|8.1.0.49|누계 계산 버그 수정 **(해당 버전부터 사용해주세요.)**|"
            },
            "url": "docs/props/col/exclude-empty.html"
          },
          {
            "cid": 330,
            "sid": "extend",
            "name": "extend",
            "label": "Extend",
            "data": {
              "body": "> 시트 생성시 Cols에 들어가는 열 설정([Type (col)](/docs/props/col/type), [Format (col)](/docs/props/col/format) 등)을 다른 변수로부터 가져와 적용합니다. > > 가령 프로젝트에서 달러를 표시하는 열에 대한 공통 규격을 아래와 같이 정했다고 가정합니다. > > 1. 숫자 앞에 \"$\"기호를 표시. > 2. 3자리 숫자 마다 \",\"가 보여지고, 소숫점 이하 1번째 자리까지만 표현. > 3. 열의 너비는 120px 이고 열의 너비는 사용자가 조절하지 못하게 끔 할 것. > 4. 배경색을 \"#FFFF88\"으로 표현. > > 이 경우 모든 프로젝트의 개발자가 위 내용을 숙지하여 달러가 표현되야 하는 모든 열에 대해서 [Type (col)](/docs/props/col/type), [Format (col)](/docs/props/col/format), [Width (col)](/docs/props/col/width) 등을 설정하는 것보다, 이러한 설정 정보를 미리 변수에 담아두고 해당 열을 만들때 변수의 내용을 적용하게 끔 한다면 훨신 쉽게 동일한 형태의 열을 만들 수 있습니다. > > 이렇게 `Extend` 속성은 공통 변수에 담긴 열 설정 정보를, 해당열에 적용시키는 기능을 합니다. > `Extend` 속성은 시트 생성시(create)에만 설정 가능하며, 이미 생성된 시트에는 적용되지 않습니다. > **<mark>주의</mark> : `Extend`을 통해 설정하는 속성과 동일한 속성을 시트 생성시 설정했을 경우에는, 어느 속성을 앞에 설정하느냐에 따라 우선순위가 결정됩니다(헤더 설정은 제외됩니다. 헤더의 경우 Cols 속성이 우선 순위가 더 높습니다).** ```javascript var defaultWidth = {Width: 100, MinWidth: 70}; var options = { Cols:[ {Width: 300, Extend: defaultWidth}, //너비가 100px로 설정됨 {Extend: defaultWidth, Width: 300} //너비가 300px로 설정됨 ] } ``` ### Type `object` ### Options |Value|Description| |-----|-----| |`object`|[LeftCols, Cols, RightCols](/docs/appx/init-structure)에 들어가는 설정값 들| ### Example ```javascript //프로젝트 공통으로 사용할 열 설정 정보를 변수에 정의해 둡니다.(ibsheet-common.js파일 참고) var IB_Preset = { USD:{Type: \"Float\", Format: \"$ #,##0.#\", Width: 120, CanResize: 0,Color: \"#FFFF88\"}, //미화 표시 YMD:{Type: \"Date\", Format: \"yyyy-MM-dd\", EditFormat: \"yyyyMMdd\", Width: 110}, //년월일 기본 표시 REGD:{Type: \"Date\", Format: \"yyyy-MM-dd HH:mm\", DataFormat: \"yyyyMMddHHmm\",CanEdit: 0, Width: 150}, //작성일시 ... 여러가지 열 형식을 미리 정의해 둔다 ... }; //시트 생성시 Extend를 이용하여 열 생성 //(Name속성만 설정하고 나머지 설정은 Extend로 반영받는다.) options.Cols = [ //Type,Format 등이 모두 한꺼번에 적용된다. {Name: \"exportIncom\", Extend: IB_Preset.USD}, {Name: \"birthDate\", Extend: IB_Preset.YMD, CanEdit: 1}, {Name: \"ModiDate\", Extend: IB_Preset.REGD}, ... ]; ``` ### Try it - [Demo of Extend](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Col/Extend/)",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/extend.html"
          },
          {
            "cid": 331,
            "sid": "false-value",
            "name": "false-value",
            "label": "FalseValue",
            "data": {
              "body": "> `Bool타입` 열에는 기본적으로 `1(true)/0(false)`값만 입력이 가능합니다. > 하지만 디비에 저장된 값이 `1(true)/0(false)`가 아닌 별도의 값인 경우를 대비하여 `0(false)`값에 해당하는 값을 해당 속성을 통해 설정합니다. > 해당 속성을 통해 설정된 값은 데이터를 조회([doSearch](/docs/funcs/core/do-search),[loadSearchData](/docs/funcs/core/load-search-data)등)하거나 저장([doSave](/docs/funcs/core/do-save),[getSaveJson](/docs/funcs/core/get-save-json)등)할때 사용됩니다. > 이 속성 값은 단지 서버와 데이터를 주고 받을때만 사용될 뿐, 해당 셀의 값을 [getValue](/docs/funcs/core/get-value)함수를 통해 확인시에는 `1(true)/0(false)`로 리턴됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|`Bool타입`의 열에 대해 `0(false)`(언체크)에 해당하는 값| ### Example ```javascript //Bool Type 열에 대해서 서버에서 주고 받는 값을 Y/N으로 설정 options.Cols = [ ... { Type: \"Bool\", Name: \"ConfirmYN\", Align: \"Center\", Width: 70, TrueValue: \"Y\", FalseValue: \"N\" }, ... ]; ``` ### Try it - [Set to \"N\" With Set to \"Y\" by TrueValue](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Col/TrueValue-FalseValue/)",
              "see": [
                {
                  "label": "TrueValue col",
                  "url": "./true-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/false-value.html"
          },
          {
            "cid": 332,
            "sid": "focus-cell",
            "name": "focus-cell",
            "label": "FocusCell",
            "data": {
              "body": "> 특정 열에 포커스가 들어갔을때 \"포커스 셀\"의 디자인을 정의 합니다. > 예약된 문자를 구분자 \",\"연결하여 설정합니다. > 기본적으로는 `\"Border,Class\"`로 구성됩니다. ### ```css .IBColorFocusedCell{background-color:#FFFFDD;} .IBClassFocusedCell{background-color:#DDDDDD;} ``` 위와 같이 클레스가 정의 되었을 경우 보여지는 모습은 다음과 같습니다. |설정값|보여지는 모습| |---|---| |Default 설정 (Border,Class)|![FocusCell](/assets/imgs/FocusCell3.png \"포커스된 셀의 모양\")| |Class 만 설정|![FocusCell](/assets/imgs/FocusCell2.png \"포커스된 셀의 모양\")| |Border,Color 로 설정|![FocusCell](/assets/imgs/FocusCell1.png \"포커스된 셀의 모양\")| ### Type `string` ### Options |Value|Description| |-----|-----| |`Border`|포커스된 셀의 테두리를 적용| |`Color`|포커스된 셀의 td 태그에 배경색으로 css/default(테마)/main.css 파일에 IBColorFocusedCell 클레스에서 정의한 색상이 적용(성능 저하가 있을 수 있음)| |`Class`|css/default(테마)/main.css 파일에 IBClassFocusedCell 클레스에 정의한 디자인을 따릅니다.| ### Example ```javascript //열에 포커스가 들어갔을때 셀의 테두리만 보여줌. options.Cols = [ ... {Type: \"Text\", Name: \"EM_DC\", FocusRow: \"\", FocusCell: \"Border\" ...}, ... ]; ```",
              "see": [
                {
                  "label": "FocusCell cell",
                  "url": "/docs/props/cell/focus-cell"
                },
                {
                  "label": "FocusRow row",
                  "url": "/docs/props/row/focus-row"
                },
                {
                  "label": "FocusRow col",
                  "url": "./focus-row"
                },
                {
                  "label": "FocusRow cell",
                  "url": "/docs/props/cell/focus-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/focus-cell.html"
          },
          {
            "cid": 333,
            "sid": "focus-row-2",
            "name": "focus-row",
            "label": "FocusRow",
            "data": {
              "body": "> 셀을 클릭시 보여지는 \"커서 포커스 행\"은 Table 객체 위에 DIV 객체가 떠있는 형태로 구성됩니다. > 특정 셀에 포커스가 있을때 보여질 \"커서 포커스 행\"의 디자인을 설정합니다. > 예약된 문자를 구분자 \",\"연결하여 설정합니다. > 기본적으로는 \"Border, Background\"로 구성됩니다. ### ![FocusRow](/assets/imgs/focusRow1.png \"FocusRow default\") [일반 `FocusRow`] ![FocusRow](/assets/imgs/focusRow2.png \"FocusRow default\") [`border`없이 `Background`로 설정시] ### Type `string` ### Options |Value|Description| |-----|-----| |`Border`|커서 포커스 DIV의 테두리 사용 (.IBFocusRowBorder)| |`Background`|커서 포커스 DIV의 배경색 사용 (.IBFocusRowBackground) | |`Color`|커서 포커스 DIV를 사용하지 않고 Table 객체에 background-color를 부여 (성능이 저하될수 있음,포커스 셀은 제외) (.IBColorFocused) | |`Class`|css/default(테마)/main.css 파일에 .IBClassFocused 클레스에 정의한 디자인을 따릅니다. (포커스 셀은 제외)| ### Example ```javascript //열에 포커스가 들어갔을때 포커스행에 대해 테두리만 보여주고 배경색을 사용 안함. options.Cols = [ ... {Type: \"Text\", Name: \"EM_DC\", FocusRow: \"Border\" ...}, ... ]; ```",
              "see": [
                {
                  "label": "FocusRow row",
                  "url": "/docs/props/row/focus-row"
                },
                {
                  "label": "FocusRow cell",
                  "url": "/docs/props/cell/focus-row"
                },
                {
                  "label": "FocusCell col",
                  "url": "./focus-cell"
                },
                {
                  "label": "FocusCell cell",
                  "url": "/docs/props/cell/focus-cell"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/focus-row.html"
          },
          {
            "cid": 334,
            "sid": "format-fix",
            "name": "format-fix",
            "label": "FormatFix",
            "data": {
              "body": "> 저장 함수([getSaveJson](/docs/funcs/core/get-save-json), [getSaveString](/docs/funcs/core/get-save-string), [doSave](/docs/funcs/core/do-save)) 호출시 `Format` 적용된 문자열로 추출하는 기능. > [getString](/docs/funcs/core/get-string)으로 출력하는 값과 동일함. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|본래 저장 함수 호출시 데이터 출력 (`default`)| |`1(true)`|`Format`이 적용된 데이터 출력 (`getString과 동일`)| ### Example ```javascript // 해당 Money Col은 getString 과 동일한 데이터가 출력되도록 한다. options.Cols = [ {Type: \"Int\", Name: \"Money\", Align: \"Center\", Format: \"#,### 만원\", FormatFix: true}, {Type: \"Float\", Name: \"Grow\", Align: \"Center\", Format: \"#,##0.##%\"} ... ]; ```",
              "see": [
                {
                  "label": "doSave method",
                  "url": "/docs/funcs/core/do-save"
                },
                {
                  "label": "getSaveJson method",
                  "url": "/docs/funcs/core/get-save-json"
                },
                {
                  "label": "getSaveString method",
                  "url": "/docs/funcs/core/get-save-string"
                },
                {
                  "label": "getString method",
                  "url": "/docs/funcs/core/get-string"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
            },
            "url": "docs/props/col/format-fix.html"
          },
          {
            "cid": 335,
            "sid": "format",
            "name": "format",
            "label": "Format",
            "data": {
              "body": "> 원본 데이터에 대한 마스킹된 데이터를 정의합니다. > 원본 데이터와 무관하게 사용자에게 마스크를 적용한 데이터를 보여줍니다. > `Format`은 열의 [Type](./type)에 따라 다양하게 정의될 수 있습니다. > **자세한 내용은 7장 appendix의 [Format](/docs/appx/format)을 참고해 주세요.** ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|열의 `Type`에 따른 다양한 포맷설정 문자열| ### Example ```javascript //날짜 포맷을 정의합니다. options.Cols = [ ... {Type: \"Date\", Name: \"sa_enterDate\", Format: 'MM-dd-yyyy' ...}, ... ]; ```",
              "see": [
                {
                  "label": "Format appendix",
                  "url": "/docs/appx/format"
                },
                {
                  "label": "EditFormat col",
                  "url": "./edit-format"
                },
                {
                  "label": "DataFormat col",
                  "url": "./data-format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/format.html"
          },
          {
            "cid": 336,
            "sid": "formula-row",
            "name": "formula-row",
            "label": "FormulaRow",
            "data": {
              "body": "> `Foot` 영역에 고정된 행을 생성하여 열의 합계나 평균값을 보여줍니다. > `id`는 `FormulaRow`로 생성되며, `NoColor:2` 속성이 기본으로 들어갑니다. > `SearchMode:3, 4, 5` 일 경우에는 사용 할 수 없습니다. > 숫자형 컬럼(`Int`, `Float`)를 제외한 다른 컬럼은 `\"Count\"`만 사용 가능합니다. ### ![FormulaRow](/assets/imgs/formulaRow.png) ![FormulaRow](/assets/imgs/formulaRow1.png) ### Type `mixed`( `string` \\| `function` ) ### Options |Value|Description| |-----|-----| |`'Sum'` 또는 `'합계 {Sum} 원'`|열의 합계값| |`'Avg'` 또는 `'평균 {Avg}'`|열의 평균값| |`'Max'` 또는 `'최대값 {Max}'`|열의 최대값| |`'Min'` 또는 `'최소값 {Min}'`|열의 최소값| |`'Count'` 또는 `'{Count} 건'`|행의 개수| |`function`|사용자 정의 함수| ### Example ```javascript options.Cols = [ // ... { Type: \"Int\", Name: \"qt\", FormulaRow: \"Sum\", Width: 120, // ... }, { Type: \"Int\", Name: \"rate\", FormulaRow: \"Avg\", Width: 120, // ... }, { Type: \"Int\", Name: \"brnSaleAmt\", FormulaRow: \"최대값 {Max}\", //FormulaRow 행에 text+값 형태로 표현 Width: 120, // ... }, { //사용자 정의 함수(글자색이 \"#FF0000\"인 행의 수 리턴) Type: \"Text\", Name: \"user\", FormulaRow: function(fr){ var rows = fr.Sheet.getDataRows(); var count = 0; for(var i = 0; i < rows.length; i++){ //row의 TextColor 색상이 빨간색만 count if( rows[i].TextColor == \"#FF0000\"){ count++; } } return \"경고 :\" + count + \"건\"; }, Width: 120, // ... }, // ... ]; // 객체 직접 접근하여 FormulaRow 행의 sDetail셀 값 교체 sheet.getRowById(\"FormulaRow\")[\"sDetailVisible\"] = 1; // 셀의 Visible 속성변경. sheet.getRowById(\"FormulaRow\")[\"sDetail\"] = \"가나다\"; sheet.refreshRow(sheet.getRowById(\"FormulaRow\")); //setValue로 값 교체 sheet.setValue(sheet.getRowById(\"FormulaRow\"),\"sDetail\",\"가나다\"); ```",
              "see": [
                {
                  "label": "NoCalculate row",
                  "url": "/docs/props/row/no-calculate"
                },
                {
                  "label": "NoColor row",
                  "url": "/docs/props/row/no-color"
                },
                {
                  "label": "Formula appendix",
                  "url": "/docs/appx/formula"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.2.0.3|{Sum, Avg, Max, Min, Count} 기능 추가|"
            },
            "url": "docs/props/col/formula-row.html"
          },
          {
            "cid": 337,
            "sid": "formula",
            "name": "formula",
            "label": "Formula",
            "data": {
              "body": "> 열 간에 계산 로직을 문자열이나 함수를 통해 설정합니다. > 함수 형태로 `Formula`를 설정시에는 반드시 `return값`이 있어야 반영됩니다. > > ※**매우중요** > 1. 모든 포뮬러 기능을 사용시에는 (row)[**CanFormula**](/docs/props/row/can-formula)가 1로 설정되어야 동작합니다. > 2. 열 간의 계산의 순서를 정하기 위해 반드시 (row)[**CalcOrder**](/docs/props/row/calc-order)를 정의해야 합니다. > > `Formula`로 설정한 기능은 조회되거나, 연관된 열의 값이 사용자의 편집에 의해 변경될 때 자동으로 계산,적용됩니다. > 특히 Formula를 통해 값이 변경되는 것도 Formula를 일으키므로 자신의 컬럼값을 Formula를 통해 수정하는 것은 권장하지 않습니다.(Formula에 의해 수정되면서 다시 Formula가 발생하여 무한루프에 빠질수 있음) > 자세한 내용은 7장 [Formula appendix](/docs/appx/formula)를 참고하세요. ### Type `mixed`( `function` \\| `string` ) ### Options |Value|Description| |-----|-----| |`string`|열이름을 기준으로 한 계산 로직 (ex: \"sCount \\* sPrice - ( Discount \\* Rate ) \\* 1.24\")| |`function`|별도 함수를 통해 계산 가능(함수 내에서는 `Sheet, Row, Col` 예약어를 통해 접근 가능)| ### Example ```javascript // yearSum열이 먼저 계산되고 total열이 계산됨. options.Def.Row = {CanFormula: 1, CalcOrder: \"yearSum,total\"}; options.Cols = [ ... {Type: \"Int\", Name: \"qt1\", Width: 120 ...}, {Type: \"Int\", Name: \"qt2\", Width: 120 ...}, {Type: \"Int\", Name: \"qt3\", Width: 120 ...}, {Type: \"Int\", Name: \"qt4\", Width: 120 ...}, {Type: \"Int\", Name: \"yearSum\", Formula:function(fr){ return fr.Row[\"qt1\"] + fr.Row[\"qt2\"] + fr.Row[\"qt3\"] + fr.Row[\"qt4\"]; } }, {Type: \"Float\", Name: \"rate\"}, {Type: \"Float\", Name: \"total\", Formula:function(fr){ return fr.Row[\"yearSum\"] * fr.Row[\"rate\"]; } }, ... ]; ``` ### Try it - [Demo of Formula](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Col/Formula/)",
              "see": [
                {
                  "label": "CanFormula row",
                  "url": "/docs/props/row/can-formula"
                },
                {
                  "label": "CalcOrder row",
                  "url": "/docs/props/row/calc-order"
                },
                {
                  "label": "attribute+Formula appendix",
                  "url": "/docs/props/col/attribute-formula"
                },
                {
                  "label": "Formula appendix",
                  "url": "/docs/appx/formula"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/formula.html"
          },
          {
            "cid": 338,
            "sid": "gmt",
            "name": "gmt",
            "label": "GMT",
            "data": {
              "body": "> 열의 [Type](/docs/appx/type)이 `Date`일 때 기준 시간대를 설정합니다. > 조회된 시간을 기준으로 UTC시간으로 변경하여 보여줍니다. > 이는 시트에 보여지는 값일뿐 실제 값과는 무관합니다. 가령 조회데이터가 \"2017-05-25 14:30\" 인 경우, 이 속성의 값을 1로 설정하면 실제 시트상에는 \"2017-05-25 05:30\"으로 표시됩니다.(한국은 GMT +9 이기 때문) > 하지만 값을 \"2017-05-25 06:30\"으로 수정하여 저장하면, 실제로 전송되는 데이터는 \"2017-05-25 15:30\"이 전송됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|사용자 피시의 시간대 (`default`)| |`1(true)`|GMT/UTC 시간대| ### Example ```javascript //UTC로 보기 options.Cols = [ ... {Type: \"Date\", Name: \"sa_enterDate\", Format: 'MM-dd-yyyy HH:mm',DataFormat: \"yyyyMMddHHmmss\", GMT: 1 ...}, ... ]; ``` ### Try it - [Set to 1](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Col/GMT-1/)",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/gmt.html"
          },
          {
            "cid": 339,
            "sid": "group-char",
            "name": "group-char",
            "label": "GroupChar",
            "data": {
              "body": "> 그룹 기준 열 내에서 특정 문자를 기준으로 Split하여 하위 노드로 만들어주는 기능입니다. > 가령 열에 \"ABCD-EF12\",\"ABCD-EF22\"와 같은 값이 있고, `GroupChar: \"-\"` 로 선언하면 실제 값은 다음과 같이 보여지게 됩니다. ### ![GroupChar](/assets/imgs/groupChar.png \"내용 내에서 특정 문자를 기준으로 다시 그룹핑한다.\") ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|그룹 데이터 내에서 나눌 기준 문자| ### Example ```javascript //특정문자를 기준으로 그룹핑을 나눈다 options.Cols = [ ... {Type: \"Text\", Name: \"Product_Name\", Width: 100, GroupChar: \"-\", ...}, ... ]; ```",
              "see": [
                {
                  "label": "GroupFormat cfg",
                  "url": "/docs/props/cfg/group-format"
                },
                {
                  "label": "MaxChars col",
                  "url": "./max-chars"
                },
                {
                  "label": "CanGroup col",
                  "url": "./can-group"
                },
                {
                  "label": "GroupDef col",
                  "url": "./group-def"
                },
                {
                  "label": "GroupWidth col",
                  "url": "./group-width"
                },
                {
                  "label": "GroupEmpty col",
                  "url": "./group-empty"
                },
                {
                  "label": "GroupSole col",
                  "url": "./group-sole"
                },
                {
                  "label": "GroupSingle col",
                  "url": "./group-single"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/group-char.html"
          },
          {
            "cid": 340,
            "sid": "group-def",
            "name": "group-def",
            "label": "GroupDef",
            "data": {
              "body": "> 열이 그룹핑될때, 그룹행에 적용될 공통 설정을 지정합니다. > 시트 초기화시 `Def` 영역에 커스텀하게 기능을 설정해 두고, 해당 열에서 `Def`에 정의된 ID를 지정해 설정하실 수 있습니다. > `Def` 영역에 커스텀하게 기능을 설정할 때 `Def` 속성에 <b>반드시 `Group`을 설정</b>해야 정상적으로 동작합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|Def에 설정한 커스텀 기능 ID| ### Example ```javascript options.Def = { //커스텀 그룹행 설정 \"myGroupRow\": {Def: \"Group\", Color: \"#FFADAD\", CanEdit: 0, CanFocus: 0} }; //특정 열에 대해 그룹핑 불허 options.Cols = [ ... {Type: \"Text\", Name: \"SA_DEPTID\", GroupDef: \"myGroupRow\", ...}, ... ]; ```",
              "see": [
                {
                  "label": "GroupFormat cfg",
                  "url": "/docs/props/cfg/group-format"
                },
                {
                  "label": "CanGroup col",
                  "url": "./can-group"
                },
                {
                  "label": "GroupWidth col",
                  "url": "./group-width"
                },
                {
                  "label": "GroupEmpty col",
                  "url": "./group-empty"
                },
                {
                  "label": "GroupSole col",
                  "url": "./group-sole"
                },
                {
                  "label": "GroupSingle col",
                  "url": "./group-single"
                },
                {
                  "label": "GroupDeleted col",
                  "url": "./group-deleted"
                },
                {
                  "label": "GroupChar col",
                  "url": "./group-char"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/group-def.html"
          },
          {
            "cid": 341,
            "sid": "group-deleted",
            "name": "group-deleted",
            "label": "GroupDeleted",
            "data": {
              "body": "> 삭제예정인 행([Deleted](/docs/props/row/deleted))을 그룹핑에 포함시킬지 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|삭제 예정인 행은 그룹핑 제외| |`1(true)`|삭제 예정인 행도 그룹핑에 포함 (`default`)| ### Example ```javascript //삭제 예정 행에 대해 그룹핑에서 제외합니다. options.Def.Col = {GroupDeleted: 0}; ```",
              "see": [
                {
                  "label": "GroupFormat cfg",
                  "url": "/docs/props/cfg/group-format"
                },
                {
                  "label": "CanGroup col",
                  "url": "./can-group"
                },
                {
                  "label": "GroupDef col",
                  "url": "./group-def"
                },
                {
                  "label": "GroupWidth col",
                  "url": "./group-width"
                },
                {
                  "label": "GroupEmpty col",
                  "url": "./group-empty"
                },
                {
                  "label": "GroupSole col",
                  "url": "./group-sole"
                },
                {
                  "label": "GroupSingle col",
                  "url": "./group-single"
                },
                {
                  "label": "GroupChar col",
                  "url": "./group-char"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/group-deleted.html"
          },
          {
            "cid": 342,
            "sid": "group-empty",
            "name": "group-empty",
            "label": "GroupEmpty",
            "data": {
              "body": "> `0` 또는 `\"\"(공백)` 에 대해서 그룹핑을 할지 여부를 설정합니다. > 그룹핑 제외된 행은 상단에 위치하게 됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|0이나 \"\"(공백) 모두 그룹핑 불가| |`1`|0은 그룹핑 가능하나 \"\"(공백)은 그룹핑 불가| |`2`|0이나 \"\"(공백) 모두 그룹핑 가능 (`default`)| ### Example ```javascript //\"\"(공백) 행을 그룹에서 제외시킨다. options.Cols = [ ... {Type: \"Text\", Name: \"Product_Name\", Width: 100, GroupEmpty: 0, ...}, ... ]; ```",
              "see": [
                {
                  "label": "GroupFormat cfg",
                  "url": "/docs/props/cfg/group-format"
                },
                {
                  "label": "CanGroup col",
                  "url": "./can-group"
                },
                {
                  "label": "GroupDef col",
                  "url": "./group-def"
                },
                {
                  "label": "GroupWidth col",
                  "url": "./group-width"
                },
                {
                  "label": "GroupSole col",
                  "url": "./group-sole"
                },
                {
                  "label": "GroupSingle col",
                  "url": "./group-single"
                },
                {
                  "label": "GroupDeleted col",
                  "url": "./group-deleted"
                },
                {
                  "label": "GroupChar col",
                  "url": "./group-char"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/group-empty.html"
          },
          {
            "cid": 343,
            "sid": "group-single",
            "name": "group-single",
            "label": "GroupSingle",
            "data": {
              "body": "> 해당 열을 기준으로 그룹행 생성시, 하위노드의 값이 모두 동일한 경우(그룹 기준이 되는 열의 모든 값이 동일한 경우) 그룹열을 생성할지 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|열의 모든 내용이 같은 경우 그룹 열을 생성하지 않음| |`1(true)`|열의 모든 내용이 동일해도 그룹 열 생성 (`default`)| ### Example ```javascript //열 내에 모든 값이 같은 경우 그룹열 생성 안함 options.Cols = [ ... {Type: \"Text\", Name: \"SA_DEPTID\", GroupSingle: 0, ...}, ... ]; ```",
              "see": [
                {
                  "label": "GroupFormat cfg",
                  "url": "/docs/props/cfg/group-format"
                },
                {
                  "label": "CanGroup col",
                  "url": "./can-group"
                },
                {
                  "label": "GroupDef col",
                  "url": "./group-def"
                },
                {
                  "label": "GroupWidth col",
                  "url": "./group-width"
                },
                {
                  "label": "GroupEmpty col",
                  "url": "./group-empty"
                },
                {
                  "label": "GroupSole col",
                  "url": "./group-sole"
                },
                {
                  "label": "GroupDeleted col",
                  "url": "./group-deleted"
                },
                {
                  "label": "GroupChar col",
                  "url": "./group-char"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/group-single.html"
          },
          {
            "cid": 344,
            "sid": "group-sole",
            "name": "group-sole",
            "label": "GroupSole",
            "data": {
              "body": "> 해당 열을 기준으로 그룹행 생성시, 하위 노드가 한행인 경우 그룹에서 제외 시킬지 여부를 설정합니다. . ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|자식행이 단일행인 경우 그룹핑을 하지 않음| |`1(true)`|자식행 개수와 무관하게 그룹핑 (`default`)| ### Example ```javascript //단일 자식행에 대해서는 그룹핑을 하지 않는다. options.Cols = [ ... {Type: \"Text\", Name: \"SA_DEPTID\", GroupSole: 0, ...}, ... ]; ```",
              "see": [
                {
                  "label": "GroupFormat cfg",
                  "url": "/docs/props/cfg/group-format"
                },
                {
                  "label": "CanGroup col",
                  "url": "./can-group"
                },
                {
                  "label": "GroupDef col",
                  "url": "./group-def"
                },
                {
                  "label": "GroupWidth col",
                  "url": "./group-width"
                },
                {
                  "label": "GroupEmpty col",
                  "url": "./group-empty"
                },
                {
                  "label": "GroupSingle col",
                  "url": "./group-single"
                },
                {
                  "label": "GroupDeleted col",
                  "url": "./group-deleted"
                },
                {
                  "label": "GroupChar col",
                  "url": "./group-char"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/group-sole.html"
          },
          {
            "cid": 345,
            "sid": "group-sub-total",
            "name": "group-sub-total",
            "label": "GroupSubTotal",
            "data": {
              "body": "> [UseGroupSubTotal cfg](/docs/props/cfg/use-group-sub-total) 그룹 소계 기능 사용시, 그룹 소계행에 적용될 옵션을 설정합니다. > 소계 계산을 표현할 열에 `Type`, `Color`, `Format`을 설정할 수 있습니다. > 반드시 [UseGroupSubTotal cfg](/docs/props/cfg/use-group-sub-total) 을 설정</b>해야 정상적으로 동작합니다. ### Type `object` ### Options |Name|Type|Required|Description| |----------|-----|---|----| |`Type`|`string`|<span class='required'>필수</span>|계산 타입 `\"Sum\"`: 합계 `\"Avg\"`: 평균 `\"Count\"`: 갯수 `\"Max\"`: 최대값 `\"Min\"`: 최소값| |`Color`|`string`|<span class='optional'>선택</span>|소계행의 배경색 \"#FFFFEF\" (`default`)| |`Format`|`string`|<span class='optional'>선택</span>|소계 계산에 적용할 포맷 열에 적용된 \"Format\" (`default`)| ### Example ```javascript options.cfg = { \"Group\": \"SA_DEPTID\", //그룹 소계 기능 사용 설정 \"UseGroupSubTotal\": 1 }; //그룹 소계행 설정 options.Cols = [ ... {Type: \"Int\", Name: \"SA_DEPTID\", GroupSubTotal: { Type: \"Sum\", Color: \"#FFDDAA\" ,\"Format\": \"#,###\"}, ...}, ... ]; ```",
              "see": [
                {
                  "label": "UseGroupSubTotal cfg",
                  "url": "/docs/props/cfg/use-group-sub-total"
                },
                {
                  "label": "Group cfg",
                  "url": "./docs/props/cfg/group"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.8|기능 추가|"
            },
            "url": "docs/props/col/group-sub-total.html"
          },
          {
            "cid": 346,
            "sid": "group-width",
            "name": "group-width",
            "label": "GroupWidth",
            "data": {
              "body": "> 열이 그룹핑 될 때, 그룹 트리가 생성될 열(`GroupMain` 옵션에 지정된 열. `GroupMain` 옵션이 없을 시 `SEQ`를 제외한 첫 번째 열)의 너비를 지정한 크기로 조정합니다. 값을 1로 설정 시 열의 데이터 양에 따라 자동으로 조절됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|그룹핑 될때 열의 너비(pixel단위)| ### Example ```javascript //열이 그룹핑될 때 그룹 트리가 위치될 열의 너비를 210px로 수정 options.Cols = [ ... {Type: \"Text\", Name: \"SA_Name\", Width: 100, GroupWidth: 210, ...}, ... ]; ```",
              "see": [
                {
                  "label": "GroupFormat cfg",
                  "url": "/docs/props/cfg/group-format"
                },
                {
                  "label": "CanGroup col",
                  "url": "./can-group"
                },
                {
                  "label": "GroupDef col",
                  "url": "./group-def"
                },
                {
                  "label": "GroupEmpty col",
                  "url": "./group-empty"
                },
                {
                  "label": "GroupSole col",
                  "url": "./group-sole"
                },
                {
                  "label": "GroupSingle col",
                  "url": "./group-single"
                },
                {
                  "label": "GroupDeleted col",
                  "url": "./group-deleted"
                },
                {
                  "label": "GroupChar col",
                  "url": "./group-char"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/group-width.html"
          },
          {
            "cid": 347,
            "sid": "h-radio",
            "name": "h-radio",
            "label": "HRadio",
            "data": {
              "body": "> `Type`이 `Radio` 열(혹은 열들)에 대해서 단일 선택 여부를 설정합니다. > `0(false)`으로 설정시 해당 컬럼 내에서 단일 셀만 선택 가능하게 합니다. > `1(true)`으로 설정시 해당 행 내에서 단일 셀만 선택 가능하게 합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|한 열안에서 하나만 선택| |`1(true)`|한 행안에서 하나만 선택| ### Example ```javascript //st1 컬럼 내에서 단일 셀만 선택가능하게 함. //st2, st3 열 중에 한개 셀만 선택 가능 options.Cols = [ ... {Type: \"Radio\", Name: \"st1\", HRadio: 0 ...}, {Type: \"Radio\", Name: \"st2\", HRadio: 1 ...}, {Type: \"Radio\", Name: \"st3\", HRadio: 1 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Radio col",
                  "url": "./radio"
                },
                {
                  "label": "Range col",
                  "url": "./range"
                },
                {
                  "label": "RadioIcon col",
                  "url": "./radio-icon"
                },
                {
                  "label": "RadioIconWidth col",
                  "url": "./radio-icon-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/h-radio.html"
          },
          {
            "cid": 348,
            "sid": "header-check-2",
            "name": "header-check",
            "label": "HeaderCheck",
            "data": {
              "body": "> 타입이 `Bool`인 열의 헤더에 체크 박스를 생성하며, 체크 박스를 클릭시 해당 열에 있는 모든 셀의 체크박스를 체크 또는 해제합니다. > [HeaderCheck cfg](/docs/props/cfg/header-check)보다 우선 적용됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| | `0` | 체크 박스 생성 안함| | `1` | 체크 박스 생성| ### Example ```javascript options.Cols = [ ... { Header:{ Value: \"체크박스\", HeaderCheck: 1 }, Type: \"Bool\", Name: \"sCheckBox\", Width: 100, ... }, ... ]; ```",
              "see": [
                {
                  "label": "HeaderCheck cfg",
                  "url": "/docs/props/cfg/header-check"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/header-check.html"
          },
          {
            "cid": 349,
            "sid": "header",
            "name": "header",
            "label": "Header",
            "data": {
              "body": "> 열의 헤더 셀을 정의합니다. > 단순히 헤더셀에 들어가야 할 문자열을 설정 할 수도 있고, 셀의 색상이나 정렬 등의 기능을 같이 정의하거나 여러 개의 헤더행을 만들기 위해 배열로 설정 할 수도 있습니다. > **여러 개의 헤더 행을 만드는 경우 컬럼별 헤더 배열의 길이는 같아야 합니다.** > **<mark>주의</mark> : 헤더에 빈값을 셋팅하려면 공백데이터를 포함해야 합니다. Header:\"<mark> </mark>\"** ### Type `mixed`( `string` \\| `object` \\| `array[string|object]` ) ### Options |Value|Description| |-----|-----| |`string`|헤더셀에 들어갈 타이틀(`\\n` 줄바꿈 기호를 통해 문자열을 줄바꿈 할 수 있습니다.)| |`object`|헤더셀에 들어갈 타이틀과 문자열 정렬, 배경색 등을 설정| |`array`\\[`string`\\|`object`\\]|여러개의 헤더 행을 만드는 경우 설정| ### Example 한줄 헤더행 예) ```javascript options.Cols = [ { //string 형태로 사원명 지정 Header: \"사원명\", // Header: \"사원\\n명\" 을 하면 줄바꿈 되어 표시 됩니다. Type: \"Text\", MinWidth: 120, Name: \"sa_name\" }, { //object 형태의 사원명 지정 Header: {Value: \"부서\", Color: \"#EDEDED\", TextColor: \"#FF0000\", Align: \"Left\"}, Type: \"Text\", MinWidth: 120, Name: \"deptCd\" } ]; ``` ![\"한줄헤더\"](/assets/imgs/headerSingleRow.png) 두줄 해더행 예) ```javascript options.Cfg = {HeaderMerge: 3}; //헤더 영역 머지모드 options.Cols = [ // String 형태로 간단하게 설정 { Header: [\"사원정보\", \"이름\"], Type: \"Text\", MinWidth: 120, Name: \"sa_name\" }, { Header: [\"사원정보\",\"사번\"], Type: \"Text\", MinWidth: 80, Name: \"sa_no\" } ] //or options.Cfg = {HeaderMerge: 3}; //헤더 영역 머지모드 options.Cols = [ // Object 형태로 배경이나 글자색,정렬등을 같이 설정하는 방법 { Header:[ {Value: \"사원정보\", Align: \"Center\"}, {Value: \"이름\", Color: \"#315C81\", TextColor: \"#FFEEFF\", Align: \"Left\"} ], Type: \"Text\", MinWidth: 120, Name: \"sa_name\" }, { Header:[ {Value: \"사원정보\"}, {Value: \"사번\", Color: \"#315C81\", TextColor: \"#ED6655\", Align: \"Left\"} ], Type: \"Text\", MinWidth: 80, Name: \"sa_no\" }, ]; ``` ![\"두줄헤더\"](/assets/imgs/headerDoubleRow.png)",
              "see": [
                {
                  "label": "HeaderMerge cfg",
                  "url": "/docs/props/cfg/header-merge"
                },
                {
                  "label": "Span cell",
                  "url": "/docs/props/cell/span"
                },
                {
                  "label": "RowSpan cell",
                  "url": "/docs/props/cell/row-span"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/header.html"
          },
          {
            "cid": 350,
            "sid": "hide-mobile",
            "name": "hide-mobile",
            "label": "HideMobile",
            "data": {
              "body": "> 모바일 환경에서 열의 보임 감춤/여부를 설정합니다. > **※ iPad Pro나 Surface Pro는 모바일로 분류되지 않습니다.** ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|열 보임 (`default`)| |`1(true)`|열 감춤| ### Example ```javascript // 특정 열을 모바일에서 감춤 options.Cols = [ ... {Type: \"Int\", Name: \"Product_Sales\", HideMobile: true, ...}, ... ]; ```",
              "see": [
                {
                  "label": "BreakPoint col",
                  "url": "/docs/props/col/break-point"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/hide-mobile.html"
          },
          {
            "cid": 351,
            "sid": "hint-value-2",
            "name": "hint-value",
            "label": "HintValue",
            "data": {
              "body": "> 힌트는 열의 너비가 좁아 셀의 내용의 일부가 안보일 때, 마우스 커서가 올라간 셀에 한해 일시적으로 셀의 너비를 늘려 안보이던 뒷 내용을 보여주는 기능입니다. > 힌트기능 사용시 원래 셀의 내용 대신에 설정한 내용이 보여지게끔 설정합니다. ### ![힌트활성화](/assets/imgs/hint1.png \"마우스 커서가 셀에 올라갔을때 힌트를 통해 감춰진 부분이 보여짐\") [**힌트기능 사용 예**] ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|힌트기능 활성화시(마우스커서가 셀 위에 Over시) 보여질 문자| ### Example ```javascript //특정 열에 힌트기능을 사용합니다. options.Cols = [ ... {Type: \"Text\", HintValue: \"이번 분기는 마감되었습니다.\", ShowHint: 2, Name: \"DESC\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "ShowHint col",
                  "url": "./show-hint"
                },
                {
                  "label": "ShowHint row",
                  "url": "/docs/props/row/show-hint"
                },
                {
                  "label": "onShowHint event",
                  "url": "/docs/events/on-show-hint"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/hint-value.html"
          },
          {
            "cid": 352,
            "sid": "html-postfix-2",
            "name": "html-postfix",
            "label": "HtmlPostfix",
            "data": {
              "body": "> 열의 각 셀의 문자열 뒤에 원하는 `HTML 태그`를 삽입합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|원하는 `HTML태그`| ### Example ```javascript //열의 뒤에 icon 이미지를 추가한다 options.Cols = [ ... {Type: \"Text\", Name: \"sa_nm\", HtmlPostfix: '<i class=\"fas fa-apple-alt\"></i>'}, ... ]; ```",
              "see": [
                {
                  "label": "HtmlPrefix col",
                  "url": "./html-prefix"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/html-postfix.html"
          },
          {
            "cid": 353,
            "sid": "html-prefix-2",
            "name": "html-prefix",
            "label": "HtmlPrefix",
            "data": {
              "body": "> 열의 각 셀의 문자열 앞에 원하는 `HTML 태그`를 삽입합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|원하는 `HTML태그`| ### Example ```javascript //열의 앞에 icon 이미지를 추가한다 options.Cols = [ ... {Type: \"Text\", Name: \"sa_nm\", HtmlPrefix:' <i class=\"fas fa-apple-alt\"></i>'}, ... ]; ```",
              "see": [
                {
                  "label": "HtmlPostfix col",
                  "url": "./html-postfix"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/html-prefix.html"
          },
          {
            "cid": 354,
            "sid": "icon-align",
            "name": "icon-align",
            "label": "IconAlign",
            "data": {
              "body": "> 셀 좌측에 버튼(혹은 체크박스)을 표시하는 [Icon](./icon)속성 사용시, 버튼의 위치를 설정합니다. > 기본적으로 셀의 좌측에 표시되면 오른쪽에 표시 할 수도 있습니다.. ### Type `string` ### Options |Value|Description| |-----|-----| |`Left`|셀 좌측에 `Icon` 표시 (`default`)| |`Right`|셀 우측에 `Icon` 표시| ### Example ```javascript options.Cols = [ ... //Enum 버튼을 셀 우측에 표시한다. {Type: \"Enum\", Name: \"brnSaleAmt\", IconAlign: \"Right\", Enum: \"|사장|부장|차장|과장\", EnumKeys: \"|AA|BB|CC|DD\" ...}, ... ]; ```",
              "see": [
                {
                  "label": "Icon col",
                  "url": "./icon"
                },
                {
                  "label": "IconWidth cell",
                  "url": "../cell/icon-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.4|기능 추가|"
            },
            "url": "docs/props/col/icon-align.html"
          },
          {
            "cid": 355,
            "sid": "icon-width",
            "name": "icon-width",
            "label": "IconWidth",
            "data": {
              "body": "> 셀 좌측에 버튼을 표시하는 [Icon](./icon) 속성 사용 시, 커스텀 이미지를 사용하는 경우 버튼의 영역 너비를 설정합니다. > 너비는 pixel 단위로 설정됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|셀 좌측 버튼의 너비.| ### Example ```javascript options.Cols = [ ... //셀의 좌측에 이미지로 버튼을 추가합니다. {Type: \"Text\", Name: \"brnSaleAmt\", Icon: \"Icon\", IconSrc: \"/pcd/img/popIcon.png\", IconWidth: 15, Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Icon col",
                  "url": "./icon"
                },
                {
                  "label": "IconSrc col",
                  "url": "./icon-src"
                },
                {
                  "label": "IconWidth cell",
                  "url": "../cell/icon-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/icon-width.html"
          },
          {
            "cid": 356,
            "sid": "icon",
            "name": "icon",
            "label": "Icon",
            "data": {
              "body": "> 셀의 좌측에 원하는 아이콘 이미지, 체크박스 혹은 버튼을 표시하는 기능입니다. > 셀의 우측에 버튼을 표시하는 [Button](/docs/props/col/button) 속성과 유사한 기능입니다. > 열의 타입이 `Button`인 경우에는 사용하실 수 없습니다. ### ![Icon속성](/assets/imgs/Icon2.png \"Icon속성\") [그림1] ![Icon속성](/assets/imgs/Icon1.png \"Icon속성\") [그림2] ![Icon속성](/assets/imgs/iconDefaults.png \"Icon속성\") [그림3] ### Type `string` ### Options |Value|Description| |-----|-----| |`Clear`|셀 좌측에 셀 내용을 지우기위한 버튼이 표시됩니다.| |`Date`|셀 좌측에 달력 아이콘을 보여줍니다. 열의 타입이 `Date`인 경우에만 클릭시 달력이 표시됩니다.[그림1] 참고| |`Check`|셀 좌측에 체크박스를 표시합니다.| |`공백`|원래 보여져야 하는 `Icon` 이미지를 감춥니다.| |`기타`|이미지 파일에 대한 url을 넣으면 아이콘의 배경으로 이미지가 표시됩니다. [그림2] 참고 (이미지는 `gif, png, jpg`만 가능)| |`Defaults`|셀 좌측에 [Defaults](./defaults) 버튼을 표시합니다. [그림3] 참고| *[IconWidth](/docs/props/col/icon-width) 속성을 통해 아이콘 영역의 넓이를 설정할 수 있습니다. 아이콘을 클릭시 [onIconClick](/docs/events/on-icon-click)이벤트가 호출됩니다. `\"Clear\"`나 `\"Check\"`로 설정하면 [OnClickSide](/docs/props/event/on-click-side) 이벤트만 호출합니다.* ### Example ```javascript options.Cols = [ ... //셀의 좌측에 체크박스를 표시 {Type: \"Text\", Name: \"product_name\", Icon: \"Check\", Width: 120 ...}, //셀의 좌측에 이미지로 버튼을 추가합니다. {Type: \"Text\", Name: \"brnSaleAmt\", Icon: \"/pcd/img/popIcon.png\", IconWidth: 15, Width: 120 ...}, ... ]; //4. Icon:\"Check\"를 사용할때, 조회 데이터 내에서 체크시 (열이름 : CLS) { \"data\": [ {... , \"CLSChecked\": 1 , ...} ] } ```",
              "see": [
                {
                  "label": "IconWidth col",
                  "url": "/docs/props/col/icon-width"
                },
                {
                  "label": "Button col",
                  "url": "/docs/props/col/button"
                },
                {
                  "label": "Defaults col",
                  "url": "./defaults"
                },
                {
                  "label": "Checked cell",
                  "url": "/docs/props/cell/checked"
                },
                {
                  "label": "Icon cell",
                  "url": "/docs/props/cell/icon"
                },
                {
                  "label": "IconWidth cell",
                  "url": "/docs/props/cell/icon-width"
                },
                {
                  "label": "setIconCheck method",
                  "url": "/docs/funcs/core/set-icon-check"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/icon.html"
          },
          {
            "cid": 357,
            "sid": "indent-2",
            "name": "indent",
            "label": "Indent",
            "data": {
              "body": "> 문자열 정렬([Align](./align))에 따라 셀 좌측 또는 우측에 들여쓰기를 설정합니다. > 숫자로 입력시 입력값 * 10 px로 padding이 생성됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|패딩 정도 (입력값 * 10px)| ### Example ```javascript //특정 열의 좌측에 20px 정도 패딩을 생성 options.Cols = [ ... {Type: \"Text\", Name: \"Description\", Align: \"Left\", Indent: 2, Width: 100 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Align col",
                  "url": "./align"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/indent.html"
          },
          {
            "cid": 358,
            "sid": "interval",
            "name": "interval",
            "label": "Interval",
            "data": {
              "body": "> `Date` 타입 컬럼의 달력 호출시 시간의 분 / 초 조절 버튼 클릭 시, [`TimePicker`](/docs/props/col/time-picker) 의 시간 조절 분 / 초의 버튼 클릭 시 증감 단위를 설정합니다. > `Minute`, `Second` 를 통하여 분 / 초 를 각각 설정할 수 있습니다. > 셀에 값이 있는 상태에서 분 / 초를 조절 시 `Interval` 설정한 값의 가까운 배수의 값으로 조절 됩니다. > `Init`을 `1(true)`로 설정하는 경우 빈 값의 셀에서 현재 시각을 보여줄 때 `Interval` 설정한 값으로 조절하여 보여줍니다. ### Type `object` ### Options |Name|Type|Required|Description| |----------|-----|---|----| |`Minute`|`number`|<span class='optional'>선택</span>|분의 증감 단위 설정. (입력값의 배수의 분으로 조절됨)| |`Second`|`number`|<span class='optional'>선택</span>|초의 증감 단위 설정. (입력값의 배수의 초로 조절됨)| |`Init`|`boolean`|<span class='optional'>선택</span>|셀이 빈 값인 경우 현재 시각을 `Interval` 설정 값으로 보여주는 기능 (`default: 0(false)`)| ### Example ```javascript options.Cols = [ ... {Type: \"Date\", Width: 120, Name: \"sDate_Hms\", Format: \"HH:mm:ss\", EditFormat: \"HHmmss\", DataFormat: \"HHmmss\", \"TimePicker\": 1, Interval: { Minute: 30, // 분의 증감을 30의 배수 단위로 설정. Second: 10, // 초의 증감을 10의 배수 단위로 설정. Init: true } }, {Type: \"Date\", Width: 120, Name: \"sDate_YmdHms\", \"Format\": \"yyyy/MM/dd HH:mm:ss\",\"Width\": 150,\"EditFormat\": \"yyyyMMddHHmmss\",\"DataFormat\": \"yyyyMMddHHmmss\", Interval: { Minute: 20, // 분의 증감을 20의 배수 단위로 설정. Second: 5, // 초의 증감을 5의 배수 단위로 설정. Init: true } }, ... ]; ```",
              "see": [
                {
                  "label": "TimePicker col",
                  "url": "/docs/props/col/time-picker"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.6|기능 추가||core|8.1.0.13|`Init` 기능 추가|"
            },
            "url": "docs/props/col/interval.html"
          },
          {
            "cid": 359,
            "sid": "link-base",
            "name": "link-base",
            "label": "LinkBase",
            "data": {
              "body": "> 셀에 [Link](/docs/props/col/link)속성이 있는 경우, Base 경로를 설정합니다. > 현재 페이지가 **/abc/test.html**이라고 가정했을때, `LinkBase` 설정에 따른 연결 `URL`은 다음과 같습니다. > |Link|LinkBase|실제연결URL| > |---|---|---| > |/xyz/test2.html||/xyz/test2.html| > |./xyz/test2.html||/abc/xyz/test2.html| > |/xyz/test2.html|/kor|/kor/xyz/test2.html| > |./xyz/test2.html|/kor|/kor/xyz/test2.html| ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|[Link](/docs/props/col/link)에서 설정한 `URL`의 Base 경로| ### Example ```javascript //열을 클릭시 특정 URL로 이동한다. options.Cols = [ ... //클릭시 /koef/tMIS/dcp/ConfProc.do 로 연결 {Type: \"Text\", Link: \"/tMIS/dcp/ConfProc.do\", LinkBase: \"/koef\", CanEdit: 0, Name: \"sa_cfprc\", Width: 100 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Link col",
                  "url": "/docs/props/col/link"
                },
                {
                  "label": "LinkTarget col",
                  "url": "/docs/props/col/link-target"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/link-base.html"
          },
          {
            "cid": 360,
            "sid": "link-target",
            "name": "link-target",
            "label": "LinkTarget",
            "data": {
              "body": "> 셀에 [Link](/docs/props/col/link)속성이 있는 경우, 클릭시 이동할 target Window를 설정합니다.. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|클릭시 이동할 Target Window(_blank ,_parent ,_self ,_top, 특정 window명)| ### Example ```javascript //열을 클릭시 특정 URL로 이동한다. options.Cols = [ ... //클릭시 새창으로 열기 {Type: \"Text\", Link: \"/tMIS/dcp/ConfProc.do\", LinkTarget: \"_blank\", CanEdit: 0 , Name: \"sa_cfprc\", Width: 100 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Link col",
                  "url": "/docs/props/col/link"
                },
                {
                  "label": "LinkBase col",
                  "url": "/docs/props/col/link-base"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/link-target.html"
          },
          {
            "cid": 361,
            "sid": "link",
            "name": "link",
            "label": "Link",
            "data": {
              "body": "> 셀에 데이터를 \\<a> 태그로 감싸고 href 속성에 들어갈 URL을 설정합니다. > `LinkBase`와 `LinkTarget` 속성을 같이 사용하여 상대경로나 클릭시에 target window를 설정할 수 있습니다. > **이 옵션은 반드시 CanEdit가 0으로 설정되어야 동작합니다.** ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|클릭시 이동할 url| ### Example ```javascript //열을 클릭시 특정 URL로 이동한다. options.Cols = [ ... {Type: \"Text\", Link: \"/tMIS/dcp/ConfProc.do\", LinkTarget: \"_self\", CanEdit: 0, Name: \"sa_cfprc\", Width: 100 ...}, ... ]; ```",
              "see": [
                {
                  "label": "LinkBase col",
                  "url": "/docs/props/col/link-base"
                },
                {
                  "label": "LinkTarget col",
                  "url": "/docs/props/col/link-target"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/link.html"
          },
          {
            "cid": 362,
            "sid": "max-width",
            "name": "max-width",
            "label": "MaxWidth",
            "data": {
              "body": "> 사용자가 마우스 드래그를 이용하여 열의 너비를 조정할 때, 늘릴수 있는 최대 열의 너비를 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|열의 최대 너비(pixel단위)| ### Example ```javascript //특정 열의 최대 너비를 120px로 설정합니다. options.Cols = [ ... {Type: \"Date\", Name: \"em_date\", MaxWidth: 120, ...}, ... ]; ```",
              "see": [
                {
                  "label": "Width col",
                  "url": "./width"
                },
                {
                  "label": "MinWidth col",
                  "url": "./min-width"
                },
                {
                  "label": "RelWidth col",
                  "url": "./rel-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/max-width.html"
          },
          {
            "cid": 363,
            "sid": "menu-3",
            "name": "menu",
            "label": "Menu",
            "data": {
              "body": "> 마우스 우측 버튼 클릭시 보여질 컨텍스트 메뉴를 설정합니다. ### Type mixed( `object` \\| `string` ) ### Options |Value|Description| |-----|-----| |`string`|첫글자를 구분자로 한 컨텍스트 메뉴스트링 지정 (ex: @저장@임시저장@취소 or *상신*취소) | |`object`|[Menu Object 설정 링크 참고](/docs/appx/menu) ### Example ```javascript //procs 열에서 마우스 우측버튼 클릭시 보여질 메뉴 설정 options.Cols = [ ... {Type: \"Text\", Menu: \"|진행|반려|전결|보류\", Name: \"procs\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Menu appendix",
                  "url": "/docs/appx/menu"
                },
                {
                  "label": "MenuHSeparator cfg",
                  "url": "/docs/props/cfg/menu-h-separator"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/menu.html"
          },
          {
            "cid": 364,
            "sid": "min-width",
            "name": "min-width",
            "label": "MinWidth",
            "data": {
              "body": "> 열의 최소 너비를 pixel단위로 설정합니다. > 사용자가 드래그를 통해 열의 너비를 조정할 때, 지정한 크기 이하로 작아지지 않게 합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|열의 최소 너비(pixel단위)| ### Example ```javascript //특정 열의 최소 너비를 110px로 설정합니다. options.Cols = [ ... {Type: \"Enum\", Name: \"DeptNm\", MinWidth: 110, ...}, ... ]; ```",
              "see": [
                {
                  "label": "Width col",
                  "url": "./width"
                },
                {
                  "label": "MaxWidth col",
                  "url": "./max-width"
                },
                {
                  "label": "RelWidth col",
                  "url": "./rel-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/min-width.html"
          },
          {
            "cid": 365,
            "sid": "name",
            "name": "name",
            "label": "Name",
            "data": {
              "body": "> 열에 이름을 부여합니다. > 여기서 부여한 데이터 조회시 `json` 데이터와 매핑하거나, 저장시 서버로 전송됩니다. > `Name`을 `\"SEQ\"`로 설정하면 해당 열은 서버에서 조회해 온 데이터와 무관하게 자동으로 1,2,3,4.. 숫자가 보여지는 열로 동작합니다.(편집불가) > `SEQ`로 생성된 열은 `Sort`, `Filter`, `hideRow`, `removeRow` 등 행의 변화가 있을 때에도 무조건 1부터 숫자를 다시 설정 합니다. > **<mark>주의</mark> : 대소문자를 구분합니다. > 반드시 필수로 설정해야 하며, 중복을 허용하지 않습니다. > 문자(az, AZ), 밑줄 '_', 숫자(0-9)만 포함할 수 있습니다. > 단, 이름은 숫자나 밑줄로 시작할 수 없습니다.** > 아래와 같은 이름은 사용할 수 없습니다: > 1. 행의 속성명: Def, Kind, Deleted, Attribute(TextColor 등) > 2. 시트에서 사용하는 예약어: SEQ, id, Status, Level, ColorPos, GroupPos, Hasch, LevelImg, OrgIndex, SUMType > 3. 이미 존재하는 속성 이름의 일부: Color, NoColor (예: 컬럼 이름을 'No'로 사용할 경우 'NoColor'로 저장되어 충돌 발생) ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|각 열에 부여하는 고유한 이름| ### Example ```javascript //열 생성시 고유한 이름을 선언 options.Cols = [ {Type: \"Int\", Name: \"SEQ\", Width: 60 ...}, //Seq 열 {Type: \"Text\", Name: \"empNm\", Width: 120 ...}, {Type: \"Int\", Name: \"age\", Width: 70 ...}, ... ]; //조회 데이터 var DATA = [ {\"empNm\": \"이몽룡\", \"age\": 19, ...}, {\"empNm\": \"성춘향\", \"age\": 17, ...}, ... ]; ```",
              "see": [
                {
                  "label": "RowIndex cfg",
                  "url": "/docs/props/cfg/row-index"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/name.html"
          },
          {
            "cid": 366,
            "sid": "no-button-in-filter",
            "name": "no-button-in-filter",
            "label": "NoButtonInFilter",
            "data": {
              "body": "> 해당 열의 필터행에 [Button](./button), [TimePicker](./time-picker) 을 통해 생성되는 `Button` 혹은 `TimePicker` 가 생성되지 않도록 합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|필터행에 `Button` 혹은 `TimePicker` 생성됨 (`default`)| |`1(true)`|필터행에 `Button` 혹은 `TimePicker` 생성되지 않음| ### Example ```javascript // 특정 열의 필터행에 버튼이 생성되지 않도록 설정 options.Cols = [ {Type: \"Text\", Button: \"Button\", ButtonText: \"TestButton\", Name: \"sNumber\", NoButtonInFilter: 1, Width: 70 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Button",
                  "url": "./button"
                },
                {
                  "label": "TimePicker",
                  "url": "./time-picker"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.76|기능 추가|"
            },
            "url": "docs/props/col/no-button-in-filter.html"
          },
          {
            "cid": 367,
            "sid": "no-changed",
            "name": "no-changed",
            "label": "NoChanged",
            "data": {
              "body": "> 열의 값이 변경되었을때 수정 상태를 변경 하지 않도록 설정합니다. > 값이 `1(true)`로 설정되어 있다면 열의 값이 변경되어도 수정 상태를 변경하지 않습니다. > 수정 상태를 변경(`Changed`)하지 않지만 수정 관련된 이벤트는 발생합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|열 값을 수정하면 수정 상태를 변경 (`default`)| |`1(true)`|열 값을 수정해도 수정 상태를 변경하지 않음| ### Example ```javascript // 특정 열의 값이 수정될때 수정 상태가 변경되지 않도록 설정 options.Cols = [ {Type: \"Int\", Name: \"sNumber\", NoChanged: true, Width: 70 ...}, ... ]; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/no-changed.html"
          },
          {
            "cid": 368,
            "sid": "no-color-2",
            "name": "no-color",
            "label": "NoColor",
            "data": {
              "body": "> 열의 기본 적용된 배경색이 무시됩니다. > 홀수, 짝수행에 대한 배경색상([AlternateColor](/docs/props/row/alternate-color))나 상태(입력, 수정, 삭제)및 선택에 대한 색상이 무시되고, [Color](./color) 속성으로 통한 배경색도 적용되지 않게 할수 있습니다. > `NoColor`가 적용되는 우선 순위는 셀 > 행 > 열입니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|기능 사용 안함 (`default`)| |`1`|모든 배경색 무시(단 Class속성을 통해 설정한 배경색을 적용)| |`2`|상태 및 선택에 대한 색상만 무시 |`3`|`Color` 설정 시 상태, `AlternateColor`에 대한 색상을 무시하고 `Color` 색상 적용 ### Example ```javascript //특정 열은 모든 배경색을 무시하게 설정 options.Cols = [ ... {Type: \"Text\", Name: \"Dept\", NoColor: 1, Width: 100 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Alternate cfg",
                  "url": "/docs/props/cfg/alternate"
                },
                {
                  "label": "Color col",
                  "url": "./color"
                },
                {
                  "label": "AlternateColor row",
                  "url": "/docs/props/row/alternate-color"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.2.0.14|`NoColor: 3` 동작 추가|"
            },
            "url": "docs/props/col/no-color.html"
          },
          {
            "cid": 369,
            "sid": "no-upload-2",
            "name": "no-upload",
            "label": "NoUpload",
            "data": {
              "body": "> 지정한 열의 저장 여부를 설정합니다. > `1(true)` 로 설정한 열의 경우 저장 함수(`doSave, getSaveString 등`) 호출시 상태와 무관한게 서버로 전송되지 않습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|서버로 전송 (`default`)| |`1(true)`|서버로 전송 제외(지정한 컬럼은 서버로 전송하지 않습니다.)| ### Example ```javascript //특정 열은 저장시 서버로 전송 제외하기 sheetOption.Cols = [ ... {Header: \"상세 내용\", Type: \"Text\", Name: \"Description\", Width: 200, NoUpload: 1}, ... ]; ```",
              "see": [
                {
                  "label": "doSave method",
                  "url": "/docs/funcs/core/do-save"
                },
                {
                  "label": "getSaveString method",
                  "url": "/docs/funcs/core/get-save-string"
                },
                {
                  "label": "getSaveJson method",
                  "url": "/docs/funcs/core/get-save-json"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/no-upload.html"
          },
          {
            "cid": 370,
            "sid": "number-sort",
            "name": "number-sort",
            "label": "NumberSort",
            "data": {
              "body": "> 열의 데이터를 숫자형식으로 소팅할지 여부를 설정합니다. > 일반적으로 `Int, Float, Date` [Type](/docs/appx/type)은 숫자형식으로, 그 외의 [Type](/docs/appx/type)은 문자형식으로 소팅이 이루어집니다. > 여기서 값을 `0(false)`으로 설정하면, [Type](/docs/appx/type)과 무관하게 문자형식으로 소팅되고, `1(true)`로 설정시 숫자형식으로 소팅이 이루어집니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|문자형식의 소팅 (`default`)| |`1(true)`|숫자형식의 소팅| ### Example ```javascript //특정 열에 대해 숫자형식으로 소팅 options.Cols = [ ... {Type: \"Text\", Name: \"SA_ID\", NumberSort: 1 ...}, ... ]; ``` ### Try it - [True](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Col/NumberSort-true/)",
              "see": [
                {
                  "label": "CanSort col",
                  "url": "./can-sort"
                },
                {
                  "label": "RawSort col",
                  "url": "./raw-sort"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/number-sort.html"
          },
          {
            "cid": 371,
            "sid": "number-strict-mode",
            "name": "number-strict-mode",
            "label": "NumberStrictMode",
            "data": {
              "body": "> 0(false)으로 설정 시 조회 시 숫자 타입(Int, Float)에 빈 값이나 숫자 형태가 아닌 경우 0으로 처리합니다. > 천단위 구분자 \",\"가 포함된 문자열 형태의 숫자를 입력하는 경우 숫자로 표시됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|숫자가 아닌 데이터에 대해 엄격하게 검사하지 않음. 숫자가 아닌 경우 NaN 대신 0으로 표시| |`1(true)`|숫자 타입 열에서 데이터의 타입에 대해 엄격하게 검사. 숫자형태가 아닌 경우 NaN으로 표시 (`default`)| ### Example ```javascript options.Cols = [ ... { Header: '정수(Int)', Type: 'Int', Name: 'IntData', Width: 80, Align: 'Right', NumberStrictMode: 0 // 숫자가 아닌 데이터에 대해 엄격하게 검사하지 않음. }, ... ]; ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.17|기능 추가|"
            },
            "url": "docs/props/col/number-strict-mode.html"
          },
          {
            "cid": 372,
            "sid": "orig-search-data",
            "name": "orig-search-data",
            "label": "OrigSearchData",
            "data": {
              "body": "> 조회시 숫자, 문자 등의 데이터 형식을 변경하지 않고 그대로 `Row`객체에 저장합니다. > `getValue`, `getString`에는 영향을 주지 않습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|조회시 숫자, 문자 타입의 데이터를 각각의 타입에 맞는 형식으로 변형하여 저장 (`default`)| |`1(true)`|조회시 숫자, 문자 타입의 데이터를 변형하지 않고 그대로 유지| ### Example ```javascript // 조회 데이터의 형식을 변형하지 않고 그대로 Row 객체에 저장 options.Cols = [ ... {Type: \"Text\", OrigSearchData: 1, Name: \"CarName\", Width: 120, ...}, ... ]; //조회 데이터 [ {\"CarName\":\"1234\"} ] //OrigSearchData 설정 전 getDataRows 함수로 CarName 리턴값 CarName: 1234 , 숫자형으로 리턴 //OrigSearchData 설정 후 getDataRows 함수로 CarName 리턴값 CarName: \"1234\" , 문자형으로 리턴 ```",
              "see": [
                {
                  "label": "시트 객체 구조",
                  "url": "/docs/appx/init-structure"
                },
                {
                  "label": "loadSearData method",
                  "url": "/docs/funcs/core/load-search-data"
                },
                {
                  "label": "doSearch method",
                  "url": "/docs/funcs/core/do-search"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.17|기능 추가|"
            },
            "url": "docs/props/col/orig-search-data.html"
          },
          {
            "cid": 373,
            "sid": "pos",
            "name": "pos",
            "label": "Pos",
            "data": {
              "body": "> 섹션 내에서 열의 인덱스를 확인합니다. > 시트의 열 생성시, `LeftCols` 배열에 추가한 열은 틀고정을 기준으로 좌측 섹션으로 들어가고, `Cols` 배열에 넣은 열은 가운데, `RightCols` 섹션에 넣은 열은 우측 섹션으로 추가됩니다. > 이 속성은 자신의 섹션 내에서 왼쪽을 기준으로 몇번째로 열이 위치하고 있는지를 확인합니다. (`Readonly`) ### ![섹션](/assets/imgs/section.png \"섹션\") ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|섹션 내에 순번(좌측 기준 0부터 시작) `LeftCols`에는 제품 내부적으로 사용하는 숨겨진 열이 있어 1부터 시작합니다. 또한 `SEQ` 열을 별도로 지정하지 않는 경우, 자동으로 `LeftCols`에 `SEQ` 열이 감춰진 상태로 생성됩니다.| ### Example ```javascript //열의 순번을 확인 var pos = sheet.getAttribute({col: \"RENTFEE\", attr: \"Pos\"}) ```",
              "see": [
                {
                  "label": "Section col",
                  "url": "./section"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/pos.html"
          },
          {
            "cid": 374,
            "sid": "radio-icon",
            "name": "radio-icon",
            "label": "RadioIcon",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Radio`인 열에서 `Radio` 아이콘을 다른 이미지나 `Html` 객체로 설정합니다. > 임의의 이미지를 라디오 아이콘으로 사용하고자 하는 경우에는, 언체크 이미지와 체크 이미지를 첫글자를 구분자로 하여 연결된 문자열로 설정하시면 됩니다. (ex:\"|OFF.gif|ON.gif\") > > 임의의 이미지를 체크박스 아이콘으로 사용할 때, 해당 열내의 셀이 편집불가([CanEdit](./can-edit))인 경우가 있다면 편집 불가일때의 이미지까지해서 총 4개의 이미지를 설정하시면 됩니다. (ex:\"|Off.gif|On.gif|OffReadOnly.gif|OnReadOnly.gif\") > > 여러개의 라디오 아이콘을 사용하고자 하는 경우에는 언체크 이미지와 체크이미지를 이어서 설정하시면 됩니다. (ex:\"|Off1.gif|On1.gif|Off2.gif|On2.gif|Off3.gif|On3.gif\") > > 그 외에 일반적인 숫자형식으로 아래 `Options`에서와 같이 기능을 설정하실 수 있습니다. ### Type `mixed`( `string` \\| `number` ) ### Options **숫자형식을 사용하는 경우** |Value|Description| |-----|-----| |`0`|기본적인 내장 라디오아이콘 이미지를 사용/ [Range](./range)속성을 사용하는 경우 내장 체크박스아이콘 이미지를 사용 (`default`) |`1`|내장 라디오 아이콘 이미지를 사용| |`2`|내장 체크박스 아이콘 이미지를 사용| |`3`|\\<input type=\"radio\">객체를 사용 / [Range](./range)속성을 사용하는 경우 \\<input type=\"checkbox\">객체를 사용| |`4`|\\<input type=\"radio\">객체를 사용| |`5`|\\<input type=\"checkbox\">객체를 사용| |`6`|아이콘을 표시하지 않음| ***input 객체를 사용하는 경우 그렇지 않은 경우보다 성능이 느릴 수 있습니다.*** ### Example ```javascript //라디오 아이콘 대신 체크박스 아이콘을 사용 options.Cols = [ ... {Type: \"Radio\", Name: \"relation\", RadioIcon: 2 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Range col",
                  "url": "./range"
                },
                {
                  "label": "HRadio col",
                  "url": "./h-radio"
                },
                {
                  "label": "RadioIconWidth col",
                  "url": "./radio-icon-width"
                },
                {
                  "label": "RadioUncheck col",
                  "url": "./radio-uncheck"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/radio-icon.html"
          },
          {
            "cid": 375,
            "sid": "radio-uncheck",
            "name": "radio-uncheck",
            "label": "RadioUncheck",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Radio`인 열에서, 한 번 클릭하여 선택한 아이템을 다시 클릭하여 체크해제 하게끔 허용할지 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|체크해제를 허용하지 않음 (`default`) |`1(true)`|체크해제를 허용| ### Example ```javascript //체크 해제를 허용 options.Cols = [ ... {Type: \"Radio\", Name: \"relation\", RadioUncheck: 1 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Range col",
                  "url": "./range"
                },
                {
                  "label": "HRadio col",
                  "url": "./h-radio"
                },
                {
                  "label": "RadioIcon col",
                  "url": "./radio-icon"
                },
                {
                  "label": "RadioIconWidth col",
                  "url": "./radio-icon-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/radio-uncheck.html"
          },
          {
            "cid": 376,
            "sid": "radio",
            "name": "radio",
            "label": "Radio",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Bool` 혹은 `Radio` 인 열들 간에 같은 값을 부여한 값을 갖고 있는 셀들을 하나의 그룹으로 묶여서 한 행에서 같은 그룹 내에 한 셀만 체크 가능하게 합니다. ### ![Radio](/assets/imgs/radio.png \"같은 행에서 하나만 선택 가능\") ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|라디오처럼 하나로 묶을 그룹 인덱스| ### Example ```javascript //행안에서 좌우로 비교하여 그룹내에서 하나의 셀만 체크 가능하게 설정 options.Cols = [ //1번 그룹 {Type:\"Bool\", Name:\"st1\", HRadio:1, Radio:1, ...}, {Type:\"Bool\", Name:\"st2\", HRadio:1, Radio:1, ...}, {Type:\"Bool\", Name:\"st3\", HRadio:1, Radio:1, ...}, {Type:\"Bool\", Name:\"st4\", HRadio:1, Radio:1, ...}, {Type:\"Bool\", Name:\"st5\", HRadio:1, Radio:1, ...}, //2번 그룹 {Type:\"Bool\", Name:\"att1\", HRadio:1, Radio:2, ...}, {Type:\"Bool\", Name:\"att2\", HRadio:1, Radio:2, ...}, {Type:\"Bool\", Name:\"att3\", HRadio:1, Radio:2, ...}, {Type:\"Bool\", Name:\"att4\", HRadio:1, Radio:2, ...}, {Type:\"Bool\", Name:\"att5\", HRadio:1, Radio:2, ...}, ... ]; ```",
              "see": [
                {
                  "label": "BoolGroup col",
                  "url": "./bool-group"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/radio.html"
          },
          {
            "cid": 377,
            "sid": "radion-icon-width",
            "name": "radion-icon-width",
            "label": "RadioIconWidth",
            "data": {
              "body": "> [RadioIcon](./radio-icon)속성을 통해서 라디오 아이콘을 커스텀 이미지로 설정하는 경우 이미지의 너비를 pixel단위로 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|라디오 아이콘 이미지의 너비 (pixel단위)| ### Example ```javascript //라디오 아이콘 이미지의 너비를 22px로 정의 options.Cols = [ ... {Type: \"Radio\", Name: \"st1\", RadioIconWidth: 22, RadioIcon: \"|Off.gif|On.gif\" ...}, ... ]; ```",
              "see": [
                {
                  "label": "RadioIcon col",
                  "url": "./radio-icon"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/radion-icon-width.html"
          },
          {
            "cid": 378,
            "sid": "range",
            "name": "range",
            "label": "Range",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Enum`, `Radio`, `File`, `Date`인 열에서 복수개를 선택하게 할지 여부를 설정합니다. > [Type](/docs/appx/type)이 `Enum`인 경우, 드랍리스트 내에 체크박스가 생성되어 여러개 선택이 가능하게 합니다. > [Type](/docs/appx/type)이 `Radio`인 경우, 체크박스가 생성되어 여러개 아이템을 선택하실 수 있습니다. > [Type](/docs/appx/type)이 `File`인 경우, 여러개 파일을 선택하실 수 있습니다. > [Type](/docs/appx/type)이 `Date`인 경우, 드래그를 통해 달력내에 여러 일자를 선택할 수 있습니다. > 복수로 선택한 아이템은 `locale/*.js` 파일에 `ValueSeparator`, `ValueSeparatorHtml`로 설정한 문자를 구분자로 하여 연결된 문자로 리턴됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|단일 선택만 허용 (`default`)| |`1(true)`|복수 선택 허용| ### Example ```javascript //Enum에서 여러개 선택 허용 options.Cols = [ ... {Header: \"명절선물\", Type: \"Enum\", Name: \"gift\", Range : 1, Enum: \"|갈비세트|조기세트|사과배|스팸3호\" ...}, ... ]; //File에서 여러개 선택 허용 options.Cols = [ ... {Header: \"파일선택\", Type: \"File\", Name: \"lblist\", Range: 1}, ... ]; ```",
              "see": [
                {
                  "label": "Enum col",
                  "url": "/docs/props/col/enum"
                },
                {
                  "label": "Radio col",
                  "url": "/docs/props/col/radio"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/range.html"
          },
          {
            "cid": 379,
            "sid": "raw-sort",
            "name": "raw-sort",
            "label": "RawSort",
            "data": {
              "body": "> 열 소팅시 Format 적용 여부를 설정합니다. > [CustomFormat](./custom-format) 에는 적용되지 않습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|열의 [Type](/docs/appx/type) 과 `Format`을 적용한 소팅(`default`)| |`1`|`Format`을 적용하지 않은 순수데이터를 기준으로 한 소팅 [Enum](./enum)형식인 경우 `Key`를 기준으로 소팅| |`2`|[Enum](./enum)타입에서 [Enum](./enum)과 [EnumKeys](./enum-keys)의 입력순서(배열순서)로 정렬| ### Example ```javascript //특정 Enum 열에서 Key를 기준으로 소팅 options.Cols = [ ... {Type: \"Enum\", Name: \"Position\", RawSort: 1, Enum: \"|사장|부장|과장|대리|사원\", EnumKeys: \"|AA|BB|CC|DD|EE\" ...}, ... ]; ```",
              "see": [
                {
                  "label": "CanSort col",
                  "url": "./can-sort"
                },
                {
                  "label": "CustomFormat col",
                  "url": "./custom-format"
                },
                {
                  "label": "Enum col",
                  "url": "./enum"
                },
                {
                  "label": "EnumKeys col",
                  "url": "./enum-keys"
                },
                {
                  "label": "NumberSort col",
                  "url": "./number-sort"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/raw-sort.html"
          },
          {
            "cid": 380,
            "sid": "record-col-span",
            "name": "record-col-span",
            "label": "RecordColSpan",
            "data": {
              "body": "> 멀티레코드([MultiRecord](/docs/props/cfg/multi-record)) 기능을 사용하는 시트에서 특정 컬럼을 기준으로 오른쪽으로 합쳐질 열의 개수를 설정합니다. > `row`에 [Spanned](/docs/props/row/spanned): `1` 이 설정되어 있어야 사용할 수 있습니다. > Html Table객체에 `ColSpan`과 유사합니다. > **<mark>주의</mark> : `RecordColSpan` 설정으로 인해 머지되어 보이지 않는 컬럼은 `Name`설정을 하게 될 경우 정상동작 되지 않습니다.** ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|행 내에서 오른쪽으로 합쳐질 열 개수| ### Example ```javascript options.Cfg = { MultiRecord: true // 멀티레코드 전용 시트로 설정 ... }; // 멀티레코드 기능 사용시 열설정(1차원 배열 -> 2차원 배열) options.Cols = [ //첫번째 단위데이터행(DataRow) [ {Header: \"A\", Name: \"colA\", Type: \"Text\", Width: 100}, {Header: \"B\", Name: \"colB\", Type: \"Image\", Width: 100}, {Header: \"C\", Name: \"colC\", Type: \"Int\", Width: 100}, {Header: \"D\", Name: \"colD\", Type: \"Float\", Width: 100} ], //두번째 단위데이터행(DataRow) [ {Header: \"E\", Name: \"colE\", Type: \"Text\", Width: 100}, {Header: \"F\", Name: \"colF\", Type: \"Text\", Width: 100}, {Header: \"G\", Name: \"colG\", Type: \"Enum\", Width: 100}, {Header: \"H\", Name: \"colH\", Type: \"Date\", Width: 100} ], //세번째 단위데이터행(DataRow) [ {Header: \"I\", Name: \"colI\", Type: \"Text\", Width: 100}, {Header: \"J\", Name: \"colJ\", Type: \"Text\", Width: 100, RecordColSpan: 3}, {Header: \"J\", Width: 50}, {Header: \"J\", Width: 120} ] ]; ```",
              "see": [
                {
                  "label": "RowSpan cell",
                  "url": "./row-span"
                },
                {
                  "label": "Spanned row",
                  "url": "/docs/props/row/spanned"
                },
                {
                  "label": "RecordRowSpan col",
                  "url": "/docs/props/col/record-row-span"
                },
                {
                  "label": "MultiRecord cfg",
                  "url": "/docs/props/cfg/multi-record"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/record-col-span.html"
          },
          {
            "cid": 381,
            "sid": "record-h-col-span",
            "name": "record-h-col-span",
            "label": "RecordHColSpan",
            "data": {
              "body": "> 멀티레코드([MultiRecord](/docs/props/cfg/multi-record)) 기능을 사용하는 시트에서 [RecordRowSpan](/docs/props/col/record-row-span)이 2이상 설정되어있고 [RecordColSpan](/docs/props/col/record-col-span)이 설정되어있지 않을때 헤더의 특정 열을 기준으로 오른쪽으로 합쳐질 열의 개수를 설정합니다. > 이 때, 하나의 헤더를 나누어 사용하기 때문에 데이터는 하나의 셀로 표시됩니다. (즉, 헤더만 나눠서 보이도록 하는 기능) > `row`에 [Spanned](/docs/props/row/spanned):`1` 이 설정되어 있어야 사용할 수 있습니다. > Html Table객체에 `ColSpan`과 유사합니다. > **<mark>주의</mark> : 시트 전체 초기 설정에서 `Header.RecordRowSpan`, `Header.RecordColSpan` 등을 이용한 멀티레코드 헤더 머지 기능과 해당 기능은 절대 같이 사용할 수 없습니다** ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|헤더 행 내에서 오른쪽으로 합쳐질 열 개수| ### Example ```javascript options.Cfg = { MultiRecord: true // 멀티레코드 전용 시트로 설정 ... }; // 멀티레코드 기능 사용시 열설정(1차원 배열 -> 2차원 배열) Cols: [ //첫번째 단위데이터행(DataRow) [ { \"Header\": \"본사\", Name: \"HeadOffice\", \"Width\": 60, RecordRowSpan: 3, RecordHColSpan: 5, RecordHColTitle: \"기관\" }, { \"Header\": \"연구소\", Name: \"Laboratory\", \"Width\": 60, RecordRowSpan: 3 }, { \"Header\": \"지사1\", Name: \"BranchOffice1\", \"Width\": 60, RecordRowSpan: 3 }, { \"Header\": \"지사2\", Name: \"BranchOffice2\", \"Width\": 60, RecordRowSpan: 3 }, { \"Header\": \"기타\", Name: \"sEtc\", \"Width\": 60, RecordRowSpan: 3 } ], //두번째 단위데이터행(DataRow) [ { \"Header\": \"본사\", RecordHColSpan: 2, RecordHColTitle: \"계열1\" }, { \"Header\": \"연구소\" }, { \"Header\": \"지사1\", RecordHColSpan: 2, RecordHColTitle: \"계열2\" }, { \"Header\": \"지사2\" }, { \"Header\": \"기타\" } ], //세번째 단위데이터행(DataRow) [ { \"Header\": \"본사\" }, { \"Header\": \"연구소\" }, { \"Header\": \"지사1\" }, { \"Header\": \"지사2\" }, { \"Header\": \"기타\" } ] ]; ```",
              "see": [
                {
                  "label": "RowSpan cell",
                  "url": "/docs/props/cell/row-span"
                },
                {
                  "label": "Spanned row",
                  "url": "/docs/props/row/spanned"
                },
                {
                  "label": "RecordRowSpan col",
                  "url": "/docs/props/col/record-row-span"
                },
                {
                  "label": "RecordColSpan col",
                  "url": "/docs/props/col/record-col-span"
                },
                {
                  "label": "RecordHColTitle col",
                  "url": "/docs/props/col/record-h-col-title"
                },
                {
                  "label": "MultiRecord cfg",
                  "url": "/docs/props/cfg/multi-record"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/record-h-col-span.html"
          },
          {
            "cid": 382,
            "sid": "record-h-col-title",
            "name": "record-h-col-title",
            "label": "RecordHColTitle",
            "data": {
              "body": "> 멀티레코드([MultiRecord](/docs/props/cfg/multi-record)) 기능을 사용하는 시트에서 [RecordHColSpan](/docs/props/col/record-h-col-span)이 설정 되어 있는 헤더의 열의 제목을 설정합니다. > **데이터와 상관없이 동작하며 서버로 전송되지 않습니다.** ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|[RecordHColSpan](/docs/props/col/record-h-col-span)이 설정 되어 있는 헤더의 열의 제목| ### Example ```javascript options.Cfg = { MultiRecord: true // 멀티레코드 전용 시트로 설정 ... }; // 멀티레코드 기능 사용시 열설정(1차원 배열 -> 2차원 배열) Cols: [ //첫번째 단위데이터행(DataRow) [ { \"Header\": \"본사\", Name: \"HeadOffice\", \"Width\": 60, RecordRowSpan: 3, RecordHColSpan: 5, RecordHColTitle: \"기관\" }, { \"Header\": \"연구소\", Name: \"Laboratory\", \"Width\": 60, RecordRowSpan: 3 }, { \"Header\": \"지사1\", Name: \"BranchOffice1\", \"Width\": 60, RecordRowSpan: 3 }, { \"Header\": \"지사2\", Name: \"BranchOffice2\", \"Width\": 60, RecordRowSpan: 3 }, { \"Header\": \"기타\", Name: \"sEtc\", \"Width\": 60, RecordRowSpan: 3 } ], //두번째 단위데이터행(DataRow) [ { \"Header\": \"본사\", RecordHColSpan: 2, RecordHColTitle: \"계열1\" }, { \"Header\": \"연구소\" }, { \"Header\": \"지사1\", RecordHColSpan: 2, RecordHColTitle: \"계열2\" }, { \"Header\": \"지사2\" }, { \"Header\": \"기타\" } ], //세번째 단위데이터행(DataRow) [ { \"Header\": \"본사\" }, { \"Header\": \"연구소\" }, { \"Header\": \"지사1\" }, { \"Header\": \"지사2\" }, { \"Header\": \"기타\" } ] ]; ```",
              "see": [
                {
                  "label": "RowSpan cell",
                  "url": "./row-span"
                },
                {
                  "label": "Spanned row",
                  "url": "/docs/props/row/spanned"
                },
                {
                  "label": "RecordRowSpan col",
                  "url": "/docs/props/col/record-row-span"
                },
                {
                  "label": "RecordColSpan col",
                  "url": "/docs/props/col/record-col-span"
                },
                {
                  "label": "RecordHColSpan col",
                  "url": "/docs/props/col/record-h-col-span"
                },
                {
                  "label": "MultiRecord cfg",
                  "url": "/docs/props/cfg/multi-record"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/record-h-col-title.html"
          },
          {
            "cid": 383,
            "sid": "record-row-span",
            "name": "record-row-span",
            "label": "RecordRowSpan",
            "data": {
              "body": "> 멀티레코드([MultiRecord](/docs/props/cfg/multi-record)) 기능을 사용하는 시트에서 특정 행을 기준으로 아래쪽으로 합쳐질 행의 개수를 설정합니다. > col에 [Spanned](/docs/props/col/spanned):`1` 이 설정되어 있어야 사용할 수 있습니다. > Html Table객체에 `RowSpan`과 유사합니다. > **<mark>주의</mark> : `RecordRowSpan` 설정으로 인해 머지되어 보이지 않는 컬럼은 `Name`설정을 하게 될 경우 정상동작 되지 않습니다.** ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|열 내에서 아래로 병합할 행의 개수| ### Example ```javascript options.Cfg = { MultiRecord: true // 멀티레코드 전용 시트로 설정 ... }; // 멀티레코드 기능 사용시 열설정(1차원 배열 -> 2차원 배열) options.Cols = [ //첫번째 단위데이터행(DataRow) [ {Header: \"A\", Name: \"colA\", Type: \"Text\", Width: 100}, {Header: \"B\", Name: \"colB\", Type: \"Image\", Width: 100, RecordRowSpan: 3}, {Header: \"C\", Name: \"colC\", Type: \"Int\", Width: 100}, {Header: \"D\", Name: \"colD\", Type: \"Float\", Width: 100} ], //두번째 단위데이터행(DataRow) [ {Header: \"E\", Name: \"colE\", Type: \"Text\", Width: 100}, {Header: \"B\"}, {Header: \"F\", Name: \"colF\", Type: \"Enum\", Width: 100}, {Header: \"G\", Name: \"colG\", Type: \"Date\", Width: 100} ], //세번째 단위데이터행(DataRow) [ {Header: \"H\", Name: \"colH\", Type: \"Text\", Width: 100}, {Header: \"B\"}, {Header: \"I\", Name: \"colI\", Type: \"Text\", Width: 100}, {Header: \"J\", Name: \"colJ\", Type: \"Text\", Width: 100}, ] ]; ```",
              "see": [
                {
                  "label": "Span cell",
                  "url": "/docs/props/cell/span"
                },
                {
                  "label": "Spanned col",
                  "url": "/docs/props/col/spanned"
                },
                {
                  "label": "RecordColSpan col",
                  "url": "/docs/props/col/record-col-span"
                },
                {
                  "label": "MultiRecord cfg",
                  "url": "/docs/props/cfg/multi-record"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/record-row-span.html"
          },
          {
            "cid": 384,
            "sid": "rel-width",
            "name": "rel-width",
            "label": "RelWidth",
            "data": {
              "body": "> 열의 상대적 너비를 설정합니다. > 열의 너비를 퍼센트로 설정하는 것과 유사하게 열간의 상대적인 너비를 설정합니다. > 가령 시트의 크기가 1000px이고, 각 열의 너비가 100px 으로 설정한 열이 5개 있다고 가정할때 이중 한 열이 `RelWidth: 1`을 갖으면 해당 열의 너비는 600px를 갖게 됩니다. > 만약 두개 열이 `RelWidth: 1`을 갖으면 두개 열은 각각 300px를 갖게 됩니다. > 만약 두개 열이 `RelWidth` 속성이 설정되어있는데, 하나는 `RelWidth: 1`이고 다른 하나는 `RelWidth: 2` 로 설정되어 있다면 `RelWidth: 1` 인 열의 너비는 200px, `RelWidth: 2`인 열의 너비는 400px가 됩니다. > **주의 : 상대적 너비를 설정하다 보니, 시트 전체 너비보다 설정된 컬럼들의 너비가 더 큰 경우, `RelWidth` 가 설정된 컬럼의 너비가 작아지거나 0 이 되는 경우가 있기 때문에, 반드시 `minWidth` 를 사용하여 최소 너비를 지정해주는 것이 좋습니다.** ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|남는 너비에 대한 상대적인 비율| ### Example ```javascript //특정 열이 나머지 영역을 모두 차지하게 설정 options.Cols = [ ... {Type: \"Date\", Name: \"em_date\", RelWidth: 1, MinWidth: 100, ...}, ... ]; ``` ### Try it - [Set to 1](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Col/RelWidth-1/)",
              "see": [
                {
                  "label": "Width col",
                  "url": "./width"
                },
                {
                  "label": "MinWidth col",
                  "url": "./min-width"
                },
                {
                  "label": "MaxWidth col",
                  "url": "./max-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/rel-width.html"
          },
          {
            "cid": 385,
            "sid": "related",
            "name": "related",
            "label": "Related",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Enum`이나 `Radio` 인 열들 간에 연관성을 통해, 대분류/중분류/소분류와 같은 **관계형 콤보**를 설정합니다. > 대분류(혹은 최상위)에 해당하는 열은 `Related`를 설정할 필요가 없고, 중분류 열에서 대분류 열이름을, 소분류 열에서 중분류 열이름을 설정합니다. > 중분류 열에서는 [**\"Enum\"+\"상위분류 EnumKey\"**] 속성으로 아이템을 설정합니다. > 소분류와 같이 자신의 상위 관계가 2단계 이상 있는 열에서는 [**\"Enum\"+\"1단계 분류 EnumKey\"+\"_\"+\"2단계 분류 EnumKey\"**] 속성으로 아이템을 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|자신의 상위 관계 열이름| ### Example ```javascript //Related 속성을 통해 대분류/중분류/소분류에 해당하는 콤보를 구성 options.Cols = [ ... //대분류 {Type: \"Enum\", Name: \"cls1\", Enum: \"|A회사|B회사\", EnumKeys: \"|AA|BB\" ... }, //중분류 {Type: \"Enum\", Name: \"cls2\", Related: \"cls1\", EnumAA: \"|해외사업부|국내사업부|영업지원부\", EnumKeysAA: \"|A0|A1|A2\", EnumBB: \"|개발부|기술지원부\", EnumKeysBB: \"|B0|B1\" ... }, //소분류 Related 속성에 중분류와 대분류까지 바라보게 설정. //상위 관계가 2단계 이상인 경우 Related 속성에 해당하는 Name 모두 설정 {Type: \"Enum\", Name: \"cls3\", Related: \"cls1,cls2\", EnumAA_A0: \"|미주사업|동남아사업팀|유럽사업팀\", EnumKeysAA_A0: \"|AB0|AB1|AB2\", EnumAA_A1: \"|경부|전라|수도권\", EnumKeysAA_A1: \"|K0|K1|K2\", EnumAA_A2: \"|지원1팀|지원2팀\", EnumKeysAA_A2: \"|SE0|SE1\", EnumBB_B0: \"|개발1팀|개발2팀|개발3팀\", EnumKeysBB_B0: \"|DEV0|DEV1|DEV2\", EnumBB_B1: \"|지원1팀|지원2팀|지원3팀\", EnumKeysBB_B1: \"|SU0|SU1|SU3\", ... }, ... ]; //상위 분류만 체크하여 대분류/중분류/소분류 콤보를 구성하는 방법. options.Cols = [ ... //대분류 {Type: \"Enum\", Name: \"cls1\", Enum: \"|인문|소설/시\", EnumKeys: \"|AA|BB\" ... }, //중분류 {Type: \"Enum\", Name: \"cls2\", Related: \"cls1\", EnumAA: \"|철학/사상|인문일반\", EnumKeysAA: \"|A0|A1\", EnumBB: \"|한국소설|시/희곡\", EnumKeysBB: \"|B0|B1\" ... }, //소분류 Related 속성에 중분류 Name을 바라보게 설정. {Type: \"Enum\", Name: \"cls3\", Related: \"cls2\", EnumA0: \"|과학철학|언어철학|실용주의\", EnumKeysA0: \"|AA0|AA1|AA2\", EnumA1: \"|인문학 이론|인문/교양 일반\", EnumKeysA1: \"|AB0|AB1\", EnumB0: \"|단편소설|장편소설\", EnumKeysB0: \"|BA0|BA1\", EnumB1: \"|세계의 시|희곡/시나리오\", EnumKeysB1: \"|BB0|BB1\", ... }, ... ]; ```",
              "see": [
                {
                  "label": "Enum col",
                  "url": "/docs/props/col/enum"
                },
                {
                  "label": "EnumKeys col",
                  "url": "/docs/props/col/enum-keys"
                },
                {
                  "label": "Clear col",
                  "url": "/docs/props/col/clear"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/related.html"
          },
          {
            "cid": 386,
            "sid": "required",
            "name": "required",
            "label": "Required",
            "data": {
              "body": "> 데이터의 필수 입력 항목 여부를 설정합니다. > `1`인 경우 저장 함수 호출 시 셀에 데이터가 없는 경우 경고 메시지를 표시하고, 편집하도록 유도합니다. > [RequiredPosition](/docs/props/cfg/required-position) 옵션으로 헤더 내용의 왼쪽/오른쪽에 설정 가능합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|필수 입력 항목을 지정하지 않습니다. (`default`) | |`1`|필수 입력 항목을 지정합니다. ![option1](/assets/imgs/required1.png \"option1\")| ### Example ```javascript //열 생성시 고유한 이름을 선언 options.Cols = [ {Type: \"Text\", Name: \"sName\", Required: 1 ...}, {Type: \"Int\", Name: \"ssalary\",Width: 70 ...}, ... ]; ```",
              "see": [
                {
                  "label": "RequiredPosition cfg",
                  "url": "/docs/props/cfg/required-position"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/required.html"
          },
          {
            "cid": 387,
            "sid": "result-mask",
            "name": "result-mask",
            "label": "ResultMask",
            "data": {
              "body": "> 셀 편집 종료시 입력된 글자를 검사할 자바스크립트 정규식을 설정합니다. > 정규식 검사에 대한 로직은 [EditMask](./edit-mask)와 동일합니다. > > 정규식에 맞지 않은 글자가 입력되었을 시에는 [ResultMessage](./result-message)속성으로 설정한 메세지가 화면에 보여집니다. > [onResultMask](/docs/events/on-result-mask)이벤트의 리턴값을 통해 잘못된 값이 입력되었을때 후속 처리에 대한 부분을 설정하실 수 있습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|자바스크립트 정규식 문자| ### Example ```javascript //이메일 주소 확인 options.Cols = [ ... {Type: \"Text\", ResultMask: \"^[\\\\w\\\\.\\\\+%-]+@[A-Za-z0-9\\\\.-]+\\\\.[A-Za-z]{2,6}$\", ResultText: \"이메일 주소를 확인해 주세요.\", Name: \"sa_email\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "ResultText col",
                  "url": "./result-text"
                },
                {
                  "label": "ResultMessage col",
                  "url": "./result-message"
                },
                {
                  "label": "EditMask col",
                  "url": "./edit-mask"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/result-mask.html"
          },
          {
            "cid": 388,
            "sid": "result-message-time",
            "name": "result-message-time",
            "label": "ResultMessageTime",
            "data": {
              "body": "> [ResultMessage](./result-message)가 보여질 시간을 설정합니다.(ms단위) > 설정한 시간만큼 메세지가 보여지고 자동으로 사라집니다. > 이 속성을 설정하지 않으면 \"확인\" 버튼을 누를 때까지 메세지가 보여지게 됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|메세지가 보여질 시간(ms단위)| ### Example ```javascript //이메일 주소 확인 options.Cols = [ ... { Type: \"Text\", ResultMask: \"^[\\\\w\\\\.\\\\+%-]+@[A-Za-z0-9\\\\.-]+\\\\.[A-Za-z]{2,6}$\", ResultMessage: \"이메일 주소를 확인해 주세요.\", ResultMessageTime: 800, Name: \"sa_email\", Width: 120, ... }, ... ]; ```",
              "see": [
                {
                  "label": "ResultText col",
                  "url": "./result-text"
                },
                {
                  "label": "ResultMessage col",
                  "url": "./result-message"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/result-message-time.html"
          },
          {
            "cid": 389,
            "sid": "result-message",
            "name": "result-message",
            "label": "ResultMessage",
            "data": {
              "body": "> [ResultMask](./result-mask)에 위배되는 내용이 입력시 DIV 레이어 팝업으로 보여질 내용을 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|잘못된 내용이 입력시 보여질 경고문 내용| ### Example ```javascript //이메일 주소 확인 options.Cols = [ ... {Type: \"Text\", ResultMask: \"^[\\\\w\\\\.\\\\+%-]+@[A-Za-z0-9\\\\.-]+\\\\.[A-Za-z]{2,6}$\", ResultMessage: \"이메일 주소를 확인해 주세요.\", ResultMessageTime: 800, Name:\"sa_email\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "ResultText col",
                  "url": "./result-text"
                },
                {
                  "label": "ResultMessageTime col",
                  "url": "./result-message-time"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/result-message.html"
          },
          {
            "cid": 390,
            "sid": "result-text",
            "name": "result-text",
            "label": "ResultText",
            "data": {
              "body": "> [ResultMask](./result-mask)에 위배되는 내용이 입력시 `alert`으로 보여줄 내용을 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|잘못된 내용이 입력시 보여질 경고문 내용| ### Example ```javascript //이메일 주소 확인 options.Cols = [ ... {Type: \"Text\", ResultMask: \"^[\\\\w\\\\.\\\\+%-]+@[A-Za-z0-9\\\\.-]+\\\\.[A-Za-z]{2,6}$\", ResultText: \"이메일 주소를 확인해 주세요.\", Name: \"sa_email\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "ResultMask col",
                  "url": "./result-mask"
                },
                {
                  "label": "ResultMessage col",
                  "url": "./result-message"
                },
                {
                  "label": "EditMask col",
                  "url": "./edit-mask"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/result-text.html"
          },
          {
            "cid": 391,
            "sid": "section",
            "name": "section",
            "label": "Section",
            "data": {
              "body": "> 열의 섹션을 확인합니다. > 시트의 열 생성시, `LeftCols` 배열에 추가한 열은 틀고정을 기준으로 좌측 섹션으로 들어가고, `Cols` 배열에 넣은 열은 가운데, `RightCols` 섹션에 넣은 열은 우측 섹션으로 추가됩니다. > 이 속성은 특정 열이 어느 섹션에 위치하고 있는지를 확인하는 용도로 사용됩니다.(`Readonly`) ### ![섹션](/assets/imgs/section.png \"섹션\") ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|좌측 섹션| |`1`|가운데 섹션| |`2`|우측 섹션| ### Example ```javascript //열의 섹션을 확인 var section = sheet.getAttribute({col: \"RENTFEE\", attr: \"Section\"}) ```",
              "see": [
                {
                  "label": "Pos col",
                  "url": "./pos"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/section.html"
          },
          {
            "cid": 392,
            "sid": "select-check",
            "name": "select-check",
            "label": "SelectCheck",
            "data": {
              "body": "> Bool 타입 컬럼을 드래그하여 선택시, 선택한 셀들을 체크하거나 언체크 합니다. > > 제약사항1: 머지가 이뤄진 컬럼에서는 해당 옵션을 사용하실 수 없습니다. > 제약사항2: 여러개 컬럼들 드래그 시에는 동작하지 않습니다.. > 제약사항3: (Cfg)SearchMode:2에서는 해당 옵션을 사용하실 수 없습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|SelectCheck 기능을 사용하지 않음| |`1(true)`|Bool 타입 컬럼을 드래그하여 선택시, 선택한 셀들을 체크/언체크합니다. (`default`)| ### Example ```javascript var opt = { Cols:[ ..., // 단일 Bool 타입 컬럼 드래그시 선택할 셀들을 체크합니다. { Header: { Value: \"체크박스(Bool)\", HeaderCheck: 1 }, Type: \"Bool\", Name: \"CheckData\", Width: 80, Align: \"Center\", CanEdit: 1, SelectCheck: 1, } ] } ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.2.0.26|기능 추가|"
            },
            "url": "docs/props/col/select-check.html"
          },
          {
            "cid": 393,
            "sid": "selected-2",
            "name": "selected",
            "label": "Selected",
            "data": {
              "body": "> 열을 선택하거나 선택여부를 확인 합니다. > [SelectingCells](/docs/props/cfg/selecting-cells)의 속성값이 0인 경우 사용하실 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|열 선택 해제 (`default`)| |`1(true)`|열 선택| ### Example ```javascript //XMT 열 전체를 선택 sheet.setAttribute({col: \"XMT\", attr: \"Selected\", val: 1, render: 1}); ```",
              "see": [
                {
                  "label": "SelectingCells cfg",
                  "url": "/docs/props/cfg/selecting-cells"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/selected.html"
          },
          {
            "cid": 394,
            "sid": "show-hint-2",
            "name": "show-hint",
            "label": "ShowHint",
            "data": {
              "body": "> 해당 열에서 힌트기능을 사용할지 여부를 설정합니다. > 힌트는 열의 너비가 좁아 셀의 내용의 일부가 안보일때, 마우스 커서가 올라간 셀에 한해 일시적으로 셀의 너비를 늘려 안보이던 뒷 내용을 보여주는 기능입니다. > 이 기능은 체크박스나 라디오 형태의 열에서는 작동하지 않습니다. ### ![힌트활성화](/assets/imgs/hint1.png \"마우스 커서가 셀에 올라갔을때 힌트를 통해 감춰진 부분이 보여짐\") ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|힌트 기능을 사용안함| |`1`|셀의 크기가 작아 셀의 내용의 일부만 보여질때 동작 (`default`)| |`2`|1번 옵션과 더불어 스크롤이 있는 시트에서 셀이 하단에 있어 내용의 아래부분이 안보여질때 힌트 동작| |`3`|일반적으로는 힌트 기능이 동작하지 않고 [onShowHint](/docs/events/on-show-hint) 이벤트를 통해서만 동작(이벤트를 통해 힌트에 어떤 내용이 보여지게 할지 설정 가능)| ### Example ```javascript //특정 열에 힌트기능을 사용합니다. options.Cols = [ ... {Type: \"Text\", ShowHint: 2, Name: \"DESC\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "HintValue col",
                  "url": "./hint-value"
                },
                {
                  "label": "ShowHint row",
                  "url": "/docs/props/row/show-hint"
                },
                {
                  "label": "onShowHint event",
                  "url": "/docs/events/on-show-hint"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/show-hint.html"
          },
          {
            "cid": 395,
            "sid": "sign-font-style",
            "name": "sign-font-style",
            "label": "SignFontStyle",
            "data": {
              "body": "> 숫자형 컬럼 (Int, Float 타입)에서 7장 appendix의 [Format](/docs/appx/format)의 내용과 같이 양수, 음수, 0 일때의 Text속성들을 설정하여 적용하실 수 있습니다. > Col의 Text속성 ([TextColor](./text-color), [TextFont](./text-font), [TextSize](./text-size), [TextStyle](./text-style)) 보다 우선 적용 됩니다. > 양수, 음수, 0의 구분자는 `locale/*.js` 파일에 `ValueSeparator`로 설정된 문자열을 사용합니다. > **<mark>주의</mark> : SignFontStyle은 데이터에 따라 속성이 적용되기 때문에 Cell에 해당 Text속성들이 적용됩니다.** > **<mark>주의</mark> : 빈 값이나 '', null로 값 설정 시, 이전에 적용된 속성 값이 유지 됩니다.** ### Type `object` ### Options |Name|Type|Required|Description| |-----|-----|-----|-----| |`TextColor`|`string`|<span class='optional'>선택</span>|숫자형의 지정한 열에서 데이터에 따라 양수, 음수, 0일 때 적용하고자 하는 글자색([TextColor](./text-color))을 설정합니다. ex) \"SignFontStyle\": {\"TextColor\": \"red;blue;orange\", ...}| |`TextFont`|`string`|<span class='optional'>선택</span>|숫자형의 지정한 열에서 데이터에 따라 양수, 음수, 0일 때 적용하고자 하는 글자 폰트([TextFont](./text-font))를 설정합니다. ex) \"SignFontStyle\": {TextFont: \"Gulim, Helvetica;Malgun Gothic;Times New Roman\", ...}| |`TextSize`|`string`|<span class='optional'>선택</span>|숫자형의 지정한 열에서 데이터에 따라 양수, 음수, 0일 때 적용하고자 하는 글자 크기([TextSize](./text-size))를 설정합니다. ex) \"SignFontStyle\": {TextSize: \"12px;15px;5px\", ...}| |`TextStyle`|`string`|<span class='optional'>선택</span>|숫자형의 지정한 열에서 데이터에 따라 양수, 음수, 0일 때 적용하고자 하는 글자 스타일([TextStyle](./text-style))를 숫자로 설정합니다. ex) \"SignFontStyle\": {TextStyle: \"5;2;8\", ...}| ### Example ```javascript options.Cols = [ ... // 숫자형 컬럼인 컬럼명이 intData인 열에서 양수, 음수, 0일 때의 Text속성 적용 {Type: \"Int\", Name: \"IntData\", SignFontStyle: {TextColor: \"red;blue;yellow\", TextFont: \"Gulim;Malgun Gothic;Helvetica\", TextSize: \"15px;10em;11pt\", TextStyle: \"1,2,4\"} ...}, ... ]; // IntData 열에 SignFontStyle 속성 적용, 양수, 음수 일때는 기존의 TextColor 유지(생성 시 설정된 정보와 같이 양수일 때는 red, 음수일 때는 blue로 유지), 0일 때는 aqua로 글자색 적용 sheet.setAttribute(\"\", \"IntData\", \"SignFontStyle\", {TextColor: \";;aqua\"}); ```",
              "see": [
                {
                  "label": "TextColor col",
                  "url": "./text-color"
                },
                {
                  "label": "TextFont col",
                  "url": "./text-font"
                },
                {
                  "label": "TextSize col",
                  "url": "./text-size"
                },
                {
                  "label": "TextStyle col",
                  "url": "./text-style"
                },
                {
                  "label": "SignFontStyle cell",
                  "url": "/docs/props/cell/sign-font-style"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.19|기능 추가|"
            },
            "url": "docs/props/col/sign-font-style.html"
          },
          {
            "cid": 396,
            "sid": "size-ignore-decimal-sep",
            "name": "size-ignore-decimal-sep",
            "label": "SizeIgnoreDecimalSep",
            "data": {
              "body": "> 입력된 문자열이 숫자형인 경우, 설정된 열에 입력 가능한 글자 수에서 자릿수 구분자와 소수점 구분자의 값들을 글자 수에서 제외하는 기능입니다. > Locale메세지 파일(ko.js,en.js등)에서 자릿수 구분자는 `Format.GroupSeparator`, 소수점 구분자는 `Format.DecimalSeparator`로 설정되어 있습니다. > **<mark>주의</mark> : Col 혹은 Cell에 `Size` 속성이 설정되어 있어야 해당 기능이 동작합니다.** ### Type `boolean` ### Options |Value|Description| |-----|-----| |`boolean`|입력된 데이터에서 자릿수 구분자와 소수점 구분자를 이용하여 숫자형인지 판단하고, 숫자형 데이터일 경우 구분자 문자들을 입력가능한 글자수에서 제외 여부 (`Int`, `Float` type: `default:1(true)`, 그 외의 type: `default:0(false)`) 전 세계에서 사용되는 자릿수 구분자(`Format.GroupSeparator`) 문자: `,`, `.`, ` `, `'` 전 세계에서 사용되는 소수점 구분자(`Format.DecimalSeparator`) 문자: `,`, `.`| ### Example ```javascript //FloatData열에 최대 10글자까지 입력가능, 데이터가 숫자형인 경우 구분자를 입력제한 글자수에서 제외 options.Cols = [ ... {Type: \"Text\", Size: 10, SizeIgnoreDecimalSep: true, Name: \"FloatData\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Size col",
                  "url": "/docs/props/col/size"
                },
                {
                  "label": "UnicodeByteMode cfg",
                  "url": "/docs/props/cfg/unicode-byte-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.15|기능 추가|"
            },
            "url": "docs/props/col/size-ignore-decimal-sep.html"
          },
          {
            "cid": 397,
            "sid": "size-2",
            "name": "size",
            "label": "Size",
            "data": {
              "body": "> 열에 입력가능한 글자수를 설정합니다. > [cfg.UnicodeByteMode](/docs/props/cfg/unicode-byte-mode)를 설정할 경우 한글의 바이트 수를 계산하여 입력을 제한합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|입력가능한 글자수| ### Example ```javascript //CarName열에 최대 10글자까지 입력가능 options.Cols = [ ... {Type: \"Text\", Size: 10, Name: \"CarName\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Size cell",
                  "url": "/docs/props/cell/size"
                },
                {
                  "label": "SizeIgnoreDecimalSep col",
                  "url": "/docs/props/col/size-ignore-decimal-sep"
                },
                {
                  "label": "UnicodeByteMode cfg",
                  "url": "/docs/props/cfg/unicode-byte-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/size.html"
          },
          {
            "cid": 398,
            "sid": "spanned-2",
            "name": "spanned",
            "label": "Spanned",
            "data": {
              "body": "> 특정 열에 속한 셀들에 대해서 위/아래로 병합할 지 여부를 설정합니다. > 실제 병합은 [RowSpan](/docs/props/cell/row-span) 속성을 사용하게 됩니다. > 셀머지 기능 사용시 자동머지 기능과는 별도로 움직임으로 자동머지 기능을 꺼주셔야합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|병합 불가 (`default`)| |`1(true)`|병합 가능| ### Example ```javascript //전체 열들에 대해서 상/하 병합을 허용 options.Def.Col = {Spanned: true}; opiotns.Cfg = { HeaderMerge: 0 // 자동머지 끔 }; //헤더행을 위아래로 병합 options.Cols = [ {Header:[{Value: \"매장명\", RowSpan: 2, Align: \"Center\"},{}], Type: \"Text\", Name: \"사원명\"}, ... ]; ```",
              "see": [
                {
                  "label": "RowSpan cell",
                  "url": "/docs/props/cell/row-span"
                },
                {
                  "label": "Span cell",
                  "url": "/docs/props/cell/span"
                },
                {
                  "label": "Spanned row",
                  "url": "/docs/props/row/spanned"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/spanned.html"
          },
          {
            "cid": 399,
            "sid": "spinner-max",
            "name": "spinner-max",
            "label": "SpinnerMax",
            "data": {
              "body": "> [SpinnerVisible](./spinner-visible)을 사용하는 열에서 화살표를 통한 입력 시 최댓값을 설정할 수 있습니다. > > 추가적으로 [SpinnerStep](./spinner-step), [SpinnerMin](./spinner-min)을 통해 input의 step, min를 설정 할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|편집 시 입력 값의 최댓값| ### Example ```javascript options.Cols = [ ... {Type: \"Int\", Name: \"Qty\", SpinnerVisible: true, SpinnerMax: 100000, ...}, ... ]; ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "SpinnerVisible",
                  "url": "./spinner-visible"
                },
                {
                  "label": "SpinnerStep",
                  "url": "./spinner-step"
                },
                {
                  "label": "SpinnerMin",
                  "url": "./spinner-min"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.88|기능 추가|"
            },
            "url": "docs/props/col/spinner-max.html"
          },
          {
            "cid": 400,
            "sid": "spinner-min",
            "name": "spinner-min",
            "label": "SpinnerMin",
            "data": {
              "body": "> [SpinnerVisible](./spinner-visible)을 사용하는 열에서 화살표를 통한 입력 시 최솟값을 설정할 수 있습니다. > > 추가적으로 [SpinnerStep](./spinner-step), [SpinnerMax](./spinner-Max)을 통해 input의 step, max를 설정 할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|편집 시 입력 값의 최솟값| ### Example ```javascript options.Cols = [ ... {Type: \"Int\", Name: \"Qty\", SpinnerVisible: true, SpinnerMin: -1, ...}, ... ]; ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "SpinnerVisible",
                  "url": "./spinner-visible"
                },
                {
                  "label": "SpinnerStep",
                  "url": "./spinner-step"
                },
                {
                  "label": "SpinnerMax",
                  "url": "./spinner-max"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.88|기능 추가|"
            },
            "url": "docs/props/col/spinner-min.html"
          },
          {
            "cid": 401,
            "sid": "spinner-step",
            "name": "spinner-step",
            "label": "SpinnerStep",
            "data": {
              "body": "> [SpinnerVisible](./spinner-visible)을 사용하는 열에서 입력 값의 증감 간격을 설정할 수 있습니다. > > 추가적으로 [SpinnerMax](./spinner-max), [SpinnerMax](./spinner-min)을 통해 input의 min, max를 설정 할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|편집 시 입력 값의 증감 간격| ### Example ```javascript options.Cols = [ ... {Type: \"Int\", Name: \"Qty\", SpinnerVisible: true, SpinnerStep: 10, ...}, ... ]; ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "SpinnerVisible",
                  "url": "./spinner-visible"
                },
                {
                  "label": "SpinnerMax",
                  "url": "./spinner-max"
                },
                {
                  "label": "SpinnerMin",
                  "url": "./spinner-min"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.88|기능 추가|"
            },
            "url": "docs/props/col/spinner-step.html"
          },
          {
            "cid": 402,
            "sid": "spinner-visible",
            "name": "spinner-visible",
            "label": "SpinnerVisible",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Int`, `Float`인 열에서 편집 시 화살표를 표시합니다. > 설정 시 input의 type이 number로 생성됩니다. > > 추가적으로 [SpinnerStep](./spinner-step), [SpinnerMax](./spinner-max), [SpinnerMax](./spinner-min)을 통해 input의 step, min, max를 설정 할 수 있습니다. > `제약사항` [EditMaskFunc](../cfg/edit-mask-func)가 적용된 열에서는 동작하지 않습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|편집 시 화살표를 표시하지 않음 (`default`)| |`1(true)`|편집 시 화살표를 표시| ### Example ```javascript options.Cols = [ ... {Type: \"Int\", Name: \"Qty\", SpinnerVisible: true...}, ... ]; ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "SpinnerStep",
                  "url": "./spinner-step"
                },
                {
                  "label": "SpinnerMax",
                  "url": "./spinner-max"
                },
                {
                  "label": "SpinnerMin",
                  "url": "./spinner-min"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.88|기능 추가|"
            },
            "url": "docs/props/col/spinner-visible.html"
          },
          {
            "cid": 403,
            "sid": "stack-col",
            "name": "stack-col",
            "label": "Stack",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Bool` 인 열에서 체크를 통해 화면의 상/하단에 행을 고정시키는 기능 입니다. > 해당 속성을 설정하면 클릭을 통해 행을 고정 / 고정 해제 할 수 있습니다. > 데이터 행의 높이가 같아야 하며, 동적으로 스크롤 행의 개수를 변경시키는 동작 (`정렬, 행추가/제거, 필터`) 에 대해 `제약 사항` 이 있습니다. <br /> ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|고정 기능 사용하지 않음 (`default`)| |`1(true)`|고정 기능 사용| ### Example ```javascript // 체크된 행을 고정하는 컬럼 설정 options.Cfg = { SearchMode: 0, CanSort: 0 }; options.Cols = [ ... { Type: \"Bool\", Header: \"고정행\", Name: \"StackColumn\", Stack: 1... }, ... ]; ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "(Appendix)대용량 모드 제약사항",
                  "url": "/docs/appx/fastload-constraints"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.31|기능 추가|"
            },
            "url": "docs/props/col/stack-col.html"
          },
          {
            "cid": 404,
            "sid": "suggest-delay",
            "name": "suggest-delay",
            "label": "SuggestDelay",
            "data": {
              "body": "> `Suggest`가 설정된 컬럼에서 글자를 입력시 `Suggest`가 나타나기 전까지 딜레이를 ms 단위로 설정합니다. > `debounce`와 유사한 개념으로 딜레이를 설정한 시간 중에 다른 키가 입력되는 경우, 다시 설정한 시간만큼을 기다린 후 `Suggest`를 표시합니다. > 가령 입력하는 글자를 기준으로 `onSuggest()`이벤트에서 디비 조회를 하는 경우, 너무 빈번하게 서버를 호출하는 것을 방지할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|입력 대기 시간 (`default: 0`)| ### Example ```javascript options.Cols = [ ... { Type: \"Text\", Suggest: \"\", //Suggest가 설정된 컬럼에 입력시 300ms 기다린 후 Suggest를 발생시킨다. SuggestDelay: 300, Name: \"CarName\", Width: 120 }, ... ]; ```",
              "see": [
                {
                  "label": "SuggestMin col",
                  "url": "./suggest-min"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/suggest-delay.html"
          },
          {
            "cid": 405,
            "sid": "suggest-min",
            "name": "suggest-min",
            "label": "SuggestMin",
            "data": {
              "body": "> `Suggest`속성을 통해 설정한 메뉴를 보여주기 위한 최소 글자수를 입력합니다. > 설정을 하지 않으면 한글자라도 입력시 바로 `Suggest목록`이 보여지게 됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|최소 입력 글자수 (`default: 1`)| ### Example ```javascript //Suggest기능 사용 options.Cols = [ ... { Type: \"Text\", Suggest: \"|싼타페 현대|포터2 현대|그랜저 현대|카니발 기아...\", SuggestMin: 3, //세글자 이상 입력시 Suggest 기능 활성화 Name: \"CarName\", Width: 120 } ... ]; ```",
              "see": [
                {
                  "label": "Suggest col",
                  "url": "./suggest"
                },
                {
                  "label": "SuggestType col",
                  "url": "./suggest-type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/suggest-min.html"
          },
          {
            "cid": 406,
            "sid": "suggest-type",
            "name": "suggest-type",
            "label": "SuggestType",
            "data": {
              "body": "> [Suggest](./suggest)속성 사용과 관련한 다양한 추가기능을 설정합니다. > 여러 기능을 `\",\"` 를 구분자로 하여 설정하실 수 있습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`Replace`|`Suggest` 메뉴가 보여질때, 키보드 방향키를 이용하여 커서를 메뉴로 이동하면 셀값이 변경됩니다.| |`Start`|편집모드로 들어갈때 셀의 내용을 기준으로 `Suggest`메뉴를 보여줍니다.| |`StartAll`|편집모드로 들어갈때 셀의 내용과 무관하게 빈 값(\"\")에 대한 `Suggest`메뉴를 보여줍니다. 해당 기능을 사용하면 `Start`는 사용할 수 없습니다.| |`Empty`|셀 값이 비어있을때 모든 `Suggest`메뉴를 보여줍니다.| |`All`|항상 모든 `Suggest`메뉴를 보여줍니다.| |`Case`|대소문자를 구분하여 `Suggest`메뉴를 보여줍니다.| |`Begin`|입력한 글자를 기준으로 `Suggest`메뉴의 아이템을 필터링할때,입력한 글자로 시작하는 아이템만 보여지게 됩니다.| |`Search`|입력한 글자를 포함하는 모든 아이템을 보여줍니다.| |`Complete`|`Suggest`메뉴의 리스트가 한개인 경우 자동으로 입력처리 합니다.| |`IgnoreSpace`|`Suggest`메뉴의 리스트에서 `Space`로 값이 선택되지 않도록 합니다.| |`Validate`|편집모드 종료 또는 셀 붙여넣기 시 셀의 값이 `Suggest`에 설정한 값과 일치하지 않으면 빈값으로 변경됩니다.| ### Example ```javascript //Suggest기능 사용 options.Cols = [ ... { Type: \"Text\", Suggest: \"|싼타페 현대|포터2 현대|그랜저 현대|카니발 기아...\", SuggestType: \"Empty,Begin\", Name: \"CarName\", Width: 120 }, ... ]; ```",
              "see": [
                {
                  "label": "Suggest col",
                  "url": "./suggest"
                },
                {
                  "label": "SuggestMin col",
                  "url": "./suggest-min"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.27|`IgnoreSpace` 기능 추가||core|8.3.0.1|`Validate` 기능 추가|"
            },
            "url": "docs/props/col/suggest-type.html"
          },
          {
            "cid": 407,
            "sid": "suggest",
            "name": "suggest",
            "label": "Suggest",
            "data": {
              "body": "> 포탈 사이트 검색창의 자동완성과 마찬가지로 셀 안에 들어갈 내용 리스트를 정의해 두면, 입력시 리스트 중에 시작글자가 동일한 값이 필터링되어 보여집니다. > 첫번째 글자를 구분자로 하는 문자열로 설정합니다. ### ![Suggest](/assets/imgs/suggest.gif \"Suggest\") ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|첫글자를 구분자로 하는 문자열 ( ex: \"\\|우럭\\|광어\\|참돔\\|볼락\\|도다리\\|부시리\") ### Example ```javascript // CarName 열에 추천어를 미리 등록 options.Cols = [ ... { Type: \"Text\", Suggest: \"|싼타페 현대|포터2 현대|그랜저 현대|카니발 기아...\", Name: \"CarName\", Width: 120, ... }, ... ]; ``` ### Try it - [Demo of Suggest](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Col/Suggest/)",
              "see": [
                {
                  "label": "SuggestType col",
                  "url": "./suggest-type"
                },
                {
                  "label": "SuggestMin col",
                  "url": "./suggest-min"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/suggest.html"
          },
          {
            "cid": 408,
            "sid": "text-color-2",
            "name": "text-color",
            "label": "TextColor",
            "data": {
              "body": "> 지정한 열에 글자색을 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|HEX형식 (ex:#FF00F0) rgb형식 (ex:rgb(244,200,40)| ### Example ```javascript //특정 열의 글자를 파란색으로 표시한다. options.Cols = [ ... {TextColor: \"#0000FF\", Header: \"부서\", Type: \"Text\", Name: \"Dept\" ...}, ... ]; ```",
              "see": [
                {
                  "label": "TextStyle col",
                  "url": "./text-style"
                },
                {
                  "label": "TextSize col",
                  "url": "./text-size"
                },
                {
                  "label": "TextFont col",
                  "url": "./text-font"
                },
                {
                  "label": "Color col",
                  "url": "./color"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/text-color.html"
          },
          {
            "cid": 409,
            "sid": "text-font-2",
            "name": "text-font",
            "label": "TextFont",
            "data": {
              "body": "> 특정 열의 `font-family`를 설정합니다. > 여러개 폰트를 지정하거나 폰트에 띄어씌기가 들어가는 경우에는 `single(')/double quotation(\")`으로 지정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|글자체| ### Example ```javascript //특정열의 글자체를 수정합니다. options.Cols = [ ... { TextFont: \"Dotum\", Header: \"부서\", Type: \"Text\", Name: \"Dept\" }, ... ]; ```",
              "see": [
                {
                  "label": "TextStyle col",
                  "url": "./text-style"
                },
                {
                  "label": "TextColor col",
                  "url": "./text-color"
                },
                {
                  "label": "TextSize col",
                  "url": "./text-size"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/text-font.html"
          },
          {
            "cid": 410,
            "sid": "text-size-2",
            "name": "text-size",
            "label": "TextSize",
            "data": {
              "body": "> 지정한 열의 글자 크기를 설정합니다. > `px, pt, em` 단위를 사용할 수 있으며, 단위를 지정하지 않으면 px기준으로 설정됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|크기숫자와 단위로 이루어진 문자열(ex: 25px)| ### Example ```javascript //특정 열의 글자를 1.2em 지정합니다. options.Cols = [ ... {TextSize: \"1.2em\", Header: \"부서\", Type: \"Text\", Name: \"Dept\" ...}, ... ]; ```",
              "see": [
                {
                  "label": "TextStyle col",
                  "url": "./text-style"
                },
                {
                  "label": "TextColor col",
                  "url": "./text-color"
                },
                {
                  "label": "TextFont col",
                  "url": "./text-font"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/text-size.html"
          },
          {
            "cid": 411,
            "sid": "text-style-2",
            "name": "text-style",
            "label": "TextStyle",
            "data": {
              "body": "> 지정한 열의 글자에 대한 `font-weight, font-style, font-variant, text-decoration`를 숫자로 설정합니다. > 숫자를 서로 더해서 여러 속성을 동시에 적용하 실 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`1`| 굵게 Bold| |`2`| 기울임 Italic| |`4`| 밑줄 Underline| |`8`| 취소선 Strike| |`16`| 윗줄 Overline| |`32`| 작은 대문자 Small Caps| ### Example ```javascript //특정 열의 글자를 기울임이면서 밑줄로 표시한다. options.Cols = [ ... {TextStyle: 6, Header: \"부서\", Type: \"Text\", Name: \"Dept\" ...}, ... ]; ```",
              "see": [
                {
                  "label": "TextColor col",
                  "url": "./text-color"
                },
                {
                  "label": "TextSize col",
                  "url": "./text-size"
                },
                {
                  "label": "TextFont col",
                  "url": "./text-font"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/text-style.html"
          },
          {
            "cid": 412,
            "sid": "time-picker",
            "name": "time-picker",
            "label": "TimePicker",
            "data": {
              "body": "> 시분초 컬럼에 아이콘이 생성됩니다. 아이콘 클릭시, 달력이 아닌 시분초 다이얼로그를 사용합니다. ### 아이콘 표시 조건 > `Type: Date` > `EditFormat`, `Format`, `DataFormat` 3가지의 포맷 중 하나에 날짜 포맷이 없고 시간과 관련된 포맷값만 있을 경우 표시. > ex) `HH:mm` or `HH:mm:ss` > `EditFormat` -> `Format` -> `DataFormat` 우선순위를 따릅니다. > ex) `EditFormat: yyyy-MM-dd`, `DataFormat: HH:mm` 일 경우 TimePicker 아이콘이 표시 되지 않음. ### ![TimePicker](/assets/imgs/timepicker.png) ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|시분초 아이콘 생성하지 않음 (`default`)| |`1(true)`|시분초 아이콘 생성, 다이얼로그 사용| ### Example ```javascript //시분초 컬럼에 TimePicker 설정. options.Cols = [ ... {Type:\"Date\", Name: \"Data_Hms\", Format: 'HH:mm:ss', TimePicker: true} ... ]; ```",
              "see": [
                {
                  "label": "Interval col",
                  "url": "./interval"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.26|기능 추가|"
            },
            "url": "docs/props/col/time-picker.html"
          },
          {
            "cid": 413,
            "sid": "tip-class-2",
            "name": "tip-class",
            "label": "TipClass",
            "data": {
              "body": "> 풍선도움말 객체에 원하는 css클래스를 적용하여 디자인을 설정 합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|풍선도움말 객체에 적용할 클래스 명| ### Example ```css <style> .RedBold{color:red;font-weight:700;} .deepblue{color:#020079;} </style> ``` ```javascript //특정 열에 풍선도움말 표시시 사용될 클레스를 설정. options.Cols = [ ... {Type:\"Text\", Tip: 1, TipClass: \"deepblue\", Name: \"procs\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Tip col",
                  "url": "./tip"
                },
                {
                  "label": "Tip+Value col",
                  "url": "./tip-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/tip-class.html"
          },
          {
            "cid": 414,
            "sid": "tip-position-2",
            "name": "tip-position",
            "label": "TipPosition",
            "data": {
              "body": "> 풍선도움말 객체의 위치나 크기, 정렬을 설정합니다. ### Type `object` ### Options |Value|Description| |-----|-----| |`X`|풍선도움말의 X축 가감 위치| |`Y`|풍선도움말의 Y축 가감 위치| ### Example ```javascript //풍선도움말의 위치조정 options.Cols = [ ... {Type: \"Bool\", Tip: 1, TipPosition: {X: 20, Y: -10}, Name: \"procs\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Tip col",
                  "url": "./tip"
                },
                {
                  "label": "TipClass col",
                  "url": "./tip-class"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/tip-position.html"
          },
          {
            "cid": 415,
            "sid": "tip-value",
            "name": "tip-value",
            "label": "Tip+Value",
            "data": {
              "body": "> 열의 내용이 특정값일때 풍선도움말로 보여줄 문자를 설정합니다. > 가령 TipY:\"선택하셨습니다\", TipN:\"취소하셨습니다.\" 식으로 `Tip` 과 뒤에 `Value`를 결합한 속성명으로 보여질 문자를 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|풍선도움말에 보여질 문자열| ### Example ```javascript //특정 열에 값이 Re인 경우 풍선도움말에 \"반려되었습니다\"가 표시됨 options.Cols = [ ... {Type: \"Text\", Tip: 1, TipRe: \"반려되었습니다\", Name: \"procs\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Tip col",
                  "url": "./tip-value"
                },
                {
                  "label": "TipClass col",
                  "url": "./tip-class"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/tip-value.html"
          },
          {
            "cid": 416,
            "sid": "tip-2",
            "name": "tip",
            "label": "Tip",
            "data": {
              "body": "> 열 위에 마우스 커서 오버시 풍선도움말을 표시합니다. > 설정을 통해 풍선도움말 사용 여부와 풍선도움말에서 표시될 내용까지 설정할 수 있습니다. ### Type mixed( `boolean` \\| `string` ) ### Options |Value|Description| |-----|-----| |`0(false)`|풍선도움말 사용 안함 (`default`)| |`1(true)`|풍선도움말 사용| |`string`|풍선도움말에서 표시 될 내용 설정| ### Example ```javascript //특정 열에 풍선도움말 기능을 활성화 합니다. options.Cols = [ ... {Type: \"Text\", Tip: 1, Name: \"DESC\", Width: 120 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Tip+Value col",
                  "url": "./tip-value"
                },
                {
                  "label": "TipClass col",
                  "url": "./tip-class"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/tip.html"
          },
          {
            "cid": 417,
            "sid": "true-value",
            "name": "true-value",
            "label": "TrueValue",
            "data": {
              "body": "> `Bool타입` 열에는 기본적으로 `1(true)/0(falue)`값만 입력이 가능합니다. > 하지만 디비에 저장된 값이 `1(true)/0(false)`가 아닌 별도의 값인 경우를 대비하여 `1(true)`값에 해당하는 값을 해당 속성을 통해 설정합니다. > 해당 속성을 통해 설정된 값은 데이터를 조회([doSearch](/docs/funcs/core/do-search),[loadSearchData](/docs/funcs/core/load-search-data)등)하거나 저장([doSave](/docs/funcs/core/do-save),[getSaveJson](/docs/funcs/core/get-save-json)등)할때 사용됩니다. > 이 속성 값은 단지 서버와 데이터를 주고 받을때만 사용될 뿐, 해당 셀의 값을 `getValue()`를 통해 확인시에는 `1(true)/0(false)`로 리턴됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|`Bool타입`의 열에 대해 `1(true)`(체크)에 해당하는 값| ### Example ```javascript //Bool Type 열에 대해서 서버에서 주고 받는 값을 Y/N으로 설정 options.Cols = [ { Type: \"Bool\", Name: \"ConfirmYN\", Align: \"Center\", Width: 70, TrueValue: \"Y\", FalseValue: \"N\" }, ... ]; ``` ### Try it - [Set to \"Y\" With Set to \"N\" by FalseValue](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Col/TrueValue-FalseValue/)",
              "see": [
                {
                  "label": "FalseValue col",
                  "url": "./false-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/true-value.html"
          },
          {
            "cid": 418,
            "sid": "type",
            "name": "type",
            "label": "Type",
            "data": {
              "body": "> 셀이 갖고있는 데이터 유형을 의미합니다. > 열을 생성시에는 반드시 선언되어야 합니다. > 일반적인 텍스트나 숫자(정수, 실수) 체크박스, 드랍다운리스트 와 같은 타입이 존재합니다. > 자세한 내용은 [Type appendix](/docs/appx/type)를 참고하세요. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|`Text, Int, Float, Date, Bool, Enum` 등 정해진 문자열| ### Example ```javascript //특정 열의 타입을 설정합니다. options.Cols = [ {Type: \"Int\", Name: \"Seq\", Width: 70, ...}, {Type: \"Date\", Name: \"enterDate\", Width: 120, ...}, {Type: \"Text\", Name: \"sa_Nm\", Width: 100, ...}, ... ]; ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "Type cell",
                  "url": "/docs/props/cell/type"
                },
                {
                  "label": "getType method",
                  "url": "/docs/funcs/core/get-type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/type.html"
          },
          {
            "cid": 419,
            "sid": "uncheck",
            "name": "uncheck",
            "label": "Uncheck",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Bool` 인 열이 여러개 있을때, 한 행 내에서 하나의 셀만 체크 가능하게([Radio속성](./radio))하거나, 한 열 내에서 하나의 셀만 체크하게([BoolGroup속성](./bool-group))하는 기능이 있는데, 이러한 기능을 사용시 체크된 상태에서 다시 클릭시 체크 해제를 허용할지 여부를 설정합니다. ### ![Radio](/assets/imgs/radio.png \"같은 행에서 하나만 선택 가능\") ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|체크 해제를 허용 안함| |`1(true)`|체크 해제를 허용 (`default`)| ### Example ```javascript //한번 체크하고 나면 그룹내에서 체크 해제가 불가능하게 설정 options.Cols = [ ... {Type: \"Bool\", Name: \"st1\", Radio: 1, Uncheck: 0 ...}, {Type: \"Bool\", Name: \"st2\", Radio: 1, Uncheck: 0 ...}, {Type: \"Bool\", Name: \"st3\", Radio: 1, Uncheck: 0 ...}, {Type: \"Bool\", Name: \"st4\", Radio: 1, Uncheck: 0 ...}, {Type: \"Bool\", Name: \"st5\", Radio: 1, Uncheck: 0 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Radio col",
                  "url": "./radio"
                },
                {
                  "label": "BoolGroup col",
                  "url": "./bool-group"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/uncheck.html"
          },
          {
            "cid": 420,
            "sid": "unescape-html",
            "name": "unescape-html",
            "label": "UnescapeHTML",
            "data": {
              "body": "> `Text`, `Lines` 타입 컬럼 데이터 조회에서 `&gt;`, `&amp;`, `&lt;` 등의 문자를 unescape 처리하여 `<`, `&`, `>` 문자로 변경하는 기능 ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|문자 그대로 조회 (`default`)| |`1(true)`|문자 unescape 처리하여 조회| ### Example ```javascript // 조회에 들어오는 문자 HTML unescape 처리 options.Cols = [ ... { Type: \"Text\", Name: \"TextData\", Width: 110, UnescapeHTML: 1 ... }, ... ]; ```",
              "see": [
                {
                  "label": "SaveHTMLChar cfg",
                  "url": "/docs/props/cfg/save-html-char"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.24|기능 추가|"
            },
            "url": "docs/props/col/unescape-html.html"
          },
          {
            "cid": 421,
            "sid": "v-align-2",
            "name": "v-align",
            "label": "VAlign",
            "data": {
              "body": "> 셀 안에 문자열 상하 정렬을 설정합니다. > 좌우 정렬과 관련해서는 [Align](./align)속성을 참고하세요. ### Type `string` ### Options |Value|Description| |-----|-----| |`Top`|문자열 상단 정렬| |`Middle`|문자열 가운데 정렬| |`Bottom`|문자열 하단 정렬| ### Example ```javascript //특정 열의 문자열을 상단 정렬로 설정 options.Cols = [ ... {Type: \"Text\", Name: \"Description\", VAlign: \"Top\", Width: 100, ...}, ... ]; ```",
              "see": [
                {
                  "label": "Align col",
                  "url": "./align"
                },
                {
                  "label": "VAlign row",
                  "url": "/docs/props/row/v-align"
                },
                {
                  "label": "VAlign cell",
                  "url": "/docs/props/cell/v-align"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/v-align.html"
          },
          {
            "cid": 422,
            "sid": "visible-2",
            "name": "visible",
            "label": "Visible",
            "data": {
              "body": "> 열의 보임 감춤/여부를 설정합니다. > 시트 생성시 `Visible:0`으로 설정 후, 나중에 컬럼에 보여주고자 할때는 `setAttribute()`를 통해 속성값을 변경하기 보다는, [showCol()](/docs/funcs/core/show-col)함수를 사용하시기 바랍니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|열 감춤| |`1(true)`|열 보임 (`default`)| ### Example ```javascript //특정 열를 감춤 options.Cols = [ ... {Type: \"Int\", Name: \"Pvt_TSum\", Visible: 0, ...}, ... ]; ```",
              "see": [
                {
                  "label": "showCol method",
                  "url": "/docs/funcs/core/show-col"
                },
                {
                  "label": "hideCol method",
                  "url": "/docs/funcs/core/hide-col"
                },
                {
                  "label": "onShowColumn event",
                  "url": "/docs/events/on-show-column"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/visible.html"
          },
          {
            "cid": 423,
            "sid": "width-pad",
            "name": "width-pad",
            "label": "WidthPad",
            "data": {
              "body": "> [Button](./button)속성을 이용하여 셀 우측에 작은 버튼을 표시할때 버튼의 너비를 설정합니다. > 너비는 pixel단위로 설정됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|우측 버튼의 너비| ### Example ```javascript options.Cols = [ ... //셀 우측에 \"확인\"버튼을 표시한다. {Type: \"Text\", Button: \"Button\", ButtonText: \"확인\", WidthPad: 25, Name: \"conf_btn\", Width: 120, ...}, ... ]; ```",
              "see": [
                {
                  "label": "Button col",
                  "url": "./button"
                },
                {
                  "label": "UseButton cfg",
                  "url": "/docs/props/cfg/use-button"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/width-pad.html"
          },
          {
            "cid": 424,
            "sid": "width",
            "name": "width",
            "label": "Width",
            "data": {
              "body": "> 열의 너비를 pixel단위로 설정합니다. > 시트객체의 최초 생성시 열의 너비를 의미합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|열의 너비(pixel단위)| ### Example ```javascript //특정 열의 너비를 85px로 설정합니다. options.Cols = [ ... {Type: \"Text\", Name: \"EMPID\", Width: 85, ...}, ... ]; ```",
              "see": [
                {
                  "label": "MaxWidth col",
                  "url": "./max-width"
                },
                {
                  "label": "MinWidth col",
                  "url": "./min-width"
                },
                {
                  "label": "RelWidth col",
                  "url": "./rel-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/width.html"
          },
          {
            "cid": 425,
            "sid": "wrap-2",
            "name": "wrap",
            "label": "Wrap",
            "data": {
              "body": "> 셀에 내용이 많아 뒷부분이 안보여질 때, 줄넘김 기능 사용 여부를 설정합니다. > 줄넘김이 이루어지는 경우 행의 높이가 증가하게 됩니다. > 일반적으로 `Text` 타입에서 사용하며, `Radio` 타입에서도 사용하실 수 있습니다. > [Lines 타입](/docs/appx/type) 컬럼에서는 `default: 1(true)`로 설정됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|줄넘김 사용 안함 (`default`)| |`1(true)`|줄넘김 사용 (`컬럼의 Type이 Lines인 경우 default: 1(true)`)| ### Example ```javascript //특정 열의 줄넘김 허용 options.Cols = [ ... {Header: \"의견\", Type: \"Text\", Wrap: 1, Name: \"DESC\", ...}, ... ]; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/col/wrap.html"
          }
        ]
      },
      {
        "gid": 4,
        "name": "props-cell",
        "label": "Cell",
        "children": [
          {
            "cid": 426,
            "sid": "Alias",
            "name": "Alias",
            "label": "Alias",
            "data": {
              "body": "> 열의 [Type](/docs/props/cell/type)이 `File`인 경우 실제 파일명 대신 보여질 셀 값을 설정합니다. > 지정하지 않을 경우 실제 파일명이 셀 값에 보여지게 됩니다. > > 구분자를 포함하여 해당 셀의 파일들의 가명을 개별 설정할 수 있습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|`File`컬럼 셀에 파일명 대신 보여질 문자열| ### Example ```javascript //1. 메소드를 통해 속성 설정 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Alias\", \"myFile\" ); //2. 객체에 직접 접근해서 속성 설정(열이름이 CLS 로 가정) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSAlias\"] = \"myFile\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성설정(열이름이 CLS 로 가정) { data:[ {... , \"CLSAlias\":\"myFile\" , ...} ] } //4. 개별 설정을 하는 경우 { data: [ { \"CLS\": \"testFile.xlsx;testFile2.xlsx\", \"CLSAlias\": \"file1;file2\" } ] } ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "File Type 업로드 appendix",
                  "url": "/docs/appx/file-type-upload"
                },
                {
                  "label": "Path cell",
                  "url": "/docs/props/cell/path"
                },
                {
                  "label": "[Format]"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가||core|8.3.0.21|개별 설정 동작 개선|"
            },
            "url": "docs/props/cell/Alias.html"
          },
          {
            "cid": 427,
            "sid": "accept-enters-2",
            "name": "accept-enters",
            "label": "AcceptEnters",
            "data": {
              "body": "> 타입이 `Lines`인 셀에서 편집중 `Enter키` 입력시 동작에 대해 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|값 변경을 마치고, 편집모드를 종료합니다.| |`1`|줄넘김문자가 삽입되고 계속 편집이 진행됩니다. 편집을 종료하려면 `Ctrl or Shift or Alt + Enter`를 입력하거나 `tab키`를 입력해야 합니다.| |`2`|값 변경을 마치고, 편집모드를 종료합니다. `Ctrl or Shift or Alt + Enter`를 입력하여 줄넘김을 할 수 있습니다.| |`3`|`Ctrl or Shift or Alt + Enter`, `Enter` 모두 줄넘김문자가 삽입됩니다. 편집을 종료하려면 `tab키`를 누르거나 마우스로 다른 셀을 클릭하여야 합니다.| ### Example ```javascript //Lines 셀에서 편집중 Enter키 입력시 줄넘김으로 동작 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"DESC\", \"AcceptEnters\", 1); ```",
              "see": [
                {
                  "label": "EnterMode cfg",
                  "url": "/docs/props/cfg/enter-mode"
                },
                {
                  "label": "AcceptEnters col",
                  "url": "/docs/props/col/accept-enters"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/accept-enters.html"
          },
          {
            "cid": 428,
            "sid": "accept-2",
            "name": "accept",
            "label": "Accept",
            "data": {
              "body": "> [File Type](/docs/appx/file-type-upload) 셀에 업로드를 허용할 파일 형식을 지정하는 속성입니다. > `input type=\"file\"` 의 accept 속성과 동일하게 동작합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|[File Type](/docs/appx/file-type-upload) 셀에 업로드를 허용할 파일 형식을 지정| ### Example ```javascript // Type: File인 셀에 이미지 파일만 업로드 하도록 설정 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"FileUpload\", \"Accept\", 'image/*'); ```",
              "see": [
                {
                  "label": "File Type 업로드",
                  "url": "/docs/appx/file-type-upload"
                },
                {
                  "label": "Accept Col",
                  "url": "/docs/props/col/accept"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/accept.html"
          },
          {
            "cid": 429,
            "sid": "add-class",
            "name": "add-class",
            "label": "AddClass",
            "data": {
              "body": "> 열의 [Type](./type)이 `Button`이고 **[Button](./button)속성의 값이 \"Button\"인 경우**, 셀 버튼에 적용할 css class 명을 설정합니다. > 가령 AddClass에 \"MYBTN\"으로 값을 설정하면 실제 열에는 \"MYBTN\"의 css class 가 추가 됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|열에 부여할 css class 명| ### Example ```javascript //1. 메소드를 통해 속성 설정 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"EDate\", \"AddClass\", \"MYBTN\"); //2. 객체에 직접 접근해서 속성 설정(열이름이 CLS 로 가정) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSAddClass\"] = \"BTN\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성설정(열이름이 CLS 로 가정) { data:[ {... , \"CLSAddClass\":\"MYBTN\" , ...} ] } ```",
              "see": [
                {
                  "label": "ButtonClass cell",
                  "url": "./button-class"
                },
                {
                  "label": "Button col",
                  "url": "/docs/props/col/button"
                },
                {
                  "label": "ButtonText col",
                  "url": "/docs/props/col/button-text"
                },
                {
                  "label": "UseButton cfg",
                  "url": "/docs/props/cfg/use-button"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/add-class.html"
          },
          {
            "cid": 430,
            "sid": "align-3",
            "name": "align",
            "label": "Align",
            "data": {
              "body": "> 문자열 좌우 정렬을 설정합니다. > 트리 또는 그룹에서 사용할 때는 기준으로 지정된 컬럼(**트리의 접힘/펼침 아이콘이 보이는 컬럼**)의 데이터영역은 `Align`이 먹지 않습니다. > 상하 정렬과 관련해서는 [VAlign](./v-align)속성을 참고하세요. ### Type `string` ### Options |Value|Description| |-----|-----| |`Left`|문자열 좌측 정렬| |`Center`|문자열 가운데 정렬| |`Right`|문자열 우측 정렬| ### Example ```javascript //특정 셀의 문자열을 오른쪽 정렬로 설정 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Align\", \"Right\"); ```",
              "see": [
                {
                  "label": "VAlign cell",
                  "url": "./v-align"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/align.html"
          },
          {
            "cid": 431,
            "sid": "attribute-formula-3",
            "name": "attribute-formula",
            "label": "attribute+Formula",
            "data": {
              "body": "> 셀에 설정 가능한 여러가지 속성(`CanEdit, Color 등`)을 Formula문자열과 결합하여 계산에 따라 속성 값이 적용되게 끔 할수 있습니다. > 자세한 내용은 `col` 설정에서 [attribute + Formula](/docs/props/col/attribute-formula)을 참고해 주세요. > > `※**매우중요**` > 1. 모든 포뮬러 기능을 사용시에는 (row)[**CanFormula**](/docs/props/row/can-formula)가 `1`로 설정되어야 동작합니다. > 2. `attribute + Formula` 사용시에는 반드시 (row)[**CalcOrder**](/docs/props/row/calc-order)에 `열이름+기능명` 형식으로 포뮬러별 계산 순서가 정의되어야 합니다. >가령 \"A\"열에 대해 `CanEdit`속성 포뮬러를 설정하고 \"B\"열에 대해 `Color`속성 포뮬러를 설정했다면, `CalcOrder`에는 \"ACanEdit,BColor\"로 명시하면 됩니다. > 3. **`CalcOrder` 설정시 이름들은 반드시 띄어쓰기 없이 서로 붙여 작성해주셔야 됩니다. 이름들 간에 띄어쓰기가 되어 있는 경우 Formula 동작이 정상적으로 이뤄지지 않습니다.** ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|각 속성에 들어갈 값을 계산하는 계산식| ### Example ```javascript // 생성시 CalcOrder 정의 options.Def.Row = { // 열이름 간에 띄어쓰지말고 전부 붙여쓰셔야 합니다. CalcOrder: \"CLSCanEdit,CLSColor\" }; // 조회 데이터 내에서 속성 적용 // CHK열의 값이 false 이면 CLS 열은 편집 불가 // AMT열의 값이 4000 보다 크면 CLS 열에 핑크색 배경색 적용 { data:[ {..., \"CLSCanEditFormula\": \"CHK?1:0\", \"CLSColorFormula\": \"AMT>4000?'#FFDDDD':''\", ...} ] } ```",
              "see": [
                {
                  "label": "CanFormula row",
                  "url": "/docs/props/row/can-formula"
                },
                {
                  "label": "CalcOrder row",
                  "url": "/docs/props/row/calc-order"
                },
                {
                  "label": "Formula appendix",
                  "url": "/docs/appx/formula"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/attribute-formula.html"
          },
          {
            "cid": 432,
            "sid": "auto-calendar-3",
            "name": "auto-calendar",
            "label": "AutoCalendar",
            "data": {
              "body": "> [Type](/docs/appx/type)이 Date인 셀에 대해 사용자가 편집모드로 들어갈때 달력을 띄울지 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|기능 사용 안함 (`default`)| |`1(true)`|편집시 달력을 띄움| ### Example ```javascript //메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS ) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"AutoCalendar\", 1); ```",
              "see": [
                {
                  "label": "AutoCalendar col",
                  "url": "/docs/props/col/auto-calendar"
                },
                {
                  "label": "AutoCalendar cfg",
                  "url": "/docs/props/cfg/auto-calendar"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/auto-calendar.html"
          },
          {
            "cid": 433,
            "sid": "bool-group-2",
            "name": "bool-group",
            "label": "BoolGroup",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Bool`인 셀 내에서 동일 그룹으로 묶을지 여부를 설정합니다. > 입력하는 숫자가 그룹에 인덱스가 되어 같은 값을 갖고있는 셀간에는 하나만 체크가 됩니다. > (마치 라디오처럼 체크될때 따른 셀은 자동으로 언체크 됩니다.) ### ![BoolGroup](/assets/imgs/boolGroup.png \"그룹으로 묶인 행에서 하나만 선택 가능\") ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|라디오처럼 하나로 묶을 그룹 인덱스| ### Example ```javascript //열 내에서 1,2,3번행 그룹과 4,5,6번 행 그룹 내에서 단일 셀만 체크 가능하게 합니다. sheet.setAttribute( sheet.getRowById(\"AR1\"), \"CLS\", \"BoolGroup\", \"1\" ); sheet.setAttribute( sheet.getRowById(\"AR2\"), \"CLS\", \"BoolGroup\", \"1\" ); sheet.setAttribute( sheet.getRowById(\"AR3\"), \"CLS\", \"BoolGroup\", \"1\" ); sheet.setAttribute( sheet.getRowById(\"AR4\"), \"CLS\", \"BoolGroup\", \"2\" ); sheet.setAttribute( sheet.getRowById(\"AR5\"), \"CLS\", \"BoolGroup\", \"2\" ); sheet.setAttribute( sheet.getRowById(\"AR6\"), \"CLS\", \"BoolGroup\", \"2\" ); ```",
              "see": [
                {
                  "label": "Radio cell",
                  "url": "/docs/props/cell/radio"
                },
                {
                  "label": "BoolIcon cell",
                  "url": "/docs/props/cell/bool-icon"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/bool-group.html"
          },
          {
            "cid": 434,
            "sid": "bool-icon-2",
            "name": "bool-icon",
            "label": "BoolIcon",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Bool`인 셀에서 체크/언체크 아이콘을 다른 이미지나 Html 객체로 설정합니다. > 임의의 이미지를 체크박스 아이콘으로 사용하고자 하는 경우에는, 언체크 이미지와 체크 이미지를 첫글자를 구분자로 하여 연결된 문자열로 설정하시면 됩니다. (ex:\"|Off.gif|On.gif\") > > 임의의 이미지를 체크박스 아이콘으로 사용할 때, 해당 열내의 셀이 편집불가([CanEdit](/docs/props/cell/can-edit))인 경우가 있다면 편집 불가일 때의 이미지까지해서 총 4개의 이미지를 설정하시면 됩니다. (ex:\"|Off.gif|On.gif|OffReadOnly.gif|OnReadOnly.gif\") > > 여러개의 라디오 아이콘을 사용하고자 하는 경우에는 언체크 이미지와 체크이미지를 이어서 설정하시면 됩니다. (ex:\"|Off1.gif|On1.gif|Off2.gif|On2.gif|Off3.gif|On3.gif\") > > 그 외에 일반적인 숫자형식으로 아래 Options에서와 같이 기능을 설정하실 수 있습니다. ### Type `mixed`( `string` \\| `number` ) ### Options |Value|Description| |-----|-----| |`0`|기본적인 내장 체크박스 이미지를 사용 (`default`) |`1`|내장 라디오 이미지를 사용| |`2`|무조건 middle 정렬되는 체크박스 이미지를 사용(`성능이 0번 옵션보다 느림`)| |`3`|무조건 middle 정렬되는 라디오 이미지를 사용(`성능이 1번 옵션보다 느림`)| |`4`|\\<input type=\"checkbox\">객체를 사용(`IE에서 성능이 좋음`)| |`5`|\\<input type=\"radio\">객체를 사용(`IE에서 성능이 좋음`)| |`6`|div객체를 이용하여 체크박스를 구현(`IE 호환성 보기에서 성능이 좋음`)| ### Example ```javascript //html객체로 체크박스 표현 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"BoolIcon\", 4); ```",
              "see": [
                {
                  "label": "BoolIconWidth cell",
                  "url": "/docs/props/cell/bool-icon-width"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/bool-icon.html"
          },
          {
            "cid": 435,
            "sid": "button-text-2",
            "name": "button-text",
            "label": "ButtonText",
            "data": {
              "body": "> [Button](/docs/props/cell/button)속성의 값이 `Button`이거나 `Html`인 경우, 셀 버튼에 표시할 문자를 설정합니다. > > `Button속성`의 값이 `Button`인 경우에는 설정한 문자가 \\<u>나 \\<button>태그로 표시되며, `Html`인 경우에는 <span>입력</span>식의 Html 문자가 해석되어 셀에 표시됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|버튼에 들어갈 문자열| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"ButtonText\", \"확인\"); //2. 객체에 직접 접근해서 속성 적용 (열이름 :CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSButtonText\"] = \"<span class='spBtn'>완료</spn>\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름 :CLS) { data:[ {..., \"CLSButtonText\":\"보류\" , ...} ] } ```",
              "see": [
                {
                  "label": "Button cell",
                  "url": "/docs/props/cell/button"
                },
                {
                  "label": "UseButton cfg",
                  "url": "/docs/props/cfg/use-button"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/button-text.html"
          },
          {
            "cid": 436,
            "sid": "button-width-3",
            "name": "button-width",
            "label": "ButtonWidth",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Button`이고, [Button](/docs/props/cell/button)속성의 값이 `Button`인 경우, 셀에 생성되는 버튼 객체의 너비를 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|버튼 객체의 너비| ### Example ```javascript //버튼의 너비를 80px로 설정 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"ButtonWidth\", 80); ```",
              "see": [
                {
                  "label": "Button cell",
                  "url": "/docs/props/cell/button"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/button-width.html"
          },
          {
            "cid": 437,
            "sid": "button-2",
            "name": "button",
            "label": "Button",
            "data": {
              "body": "> 셀의 우측에 원하는 아이콘이미지, 체크박스 혹은 버튼을 표시하는 기능입니다. > 열의 [Type](/docs/appx/type)이 `Date`거나 `Enum`인 경우에는 설정과 상관없이 달력이나 드롭다운 모양의 버튼이 표시됩니다. > > 열의 타입이 `Button`인 경우에는 셀 버튼에 대한 기능으로 동작하게 됩니다. > *셀의 좌측에 버튼을 설정하고자 할때는 [Icon](/docs/props/cell/icon)속성을 확인하세요.* ### ![Button속성](/assets/imgs/button1.png \"Button속성\") [그림1] ![Button속성](/assets/imgs/button2.png \"Button속성\") [그림2] ![Button속성](/assets/imgs/button3.png \"Button속성\") [그림3] ### Type `string` ### Options **열의 Type이 Button이 아닌 경우** |Value|Description| |-----|-----| |`Clear`|셀 우측에 셀 내용을 지우기위한 버튼이 표시됩니다. [그림1] 참고| |`Check`|셀 우측에 체크박스를 표시합니다. [그림2] 참고| |`Html`|[ButtonText](/docs/props/cell/button-text) 속성으로 원하는 HTML태그를 넣으면 셀 우측에 표시됩니다.| |`공백`|원래 보여져야 하는 버튼 이미지를 감춥니다. 가령 Date 타입 열은 기본적으로 달력버튼이 표시되는데 이 속성을 이용하여 버튼을 감출수 있습니다. |`기타`|이미지 파일에 대한 url을 넣으면 버튼의 배경으로 이미지가 표시됩니다. [그림3] 참고 (이미지는 gif, png, jpg만 가능 / 클릭시 `onButtonClick이벤트`가 호출)| **열의 Type이 Button인 경우** |value|desc| |---|---| |`Button`|일반적인 버튼 형태로 보여줍니다. [UseButton](/docs/props/cfg/use-button)속성의 값에 따라 셀의 값을 \\<u>태그 또는 \\<button>태그로 만들어 줍니다.| |`Html`|속성을 `Html`로 설정하고 셀의 값을 `Html` 형태로 사용하실 수 있습니다. (ex: <div class=\"button>버튼\\</div>)| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Button\", \"Clear\"); //2. 객체에 직접 접근해서 속성 적용 (열이름 :CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSButton\"] = \"/images/alBtn.gif\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름 :CLS) { data:[ {..., \"CLSButton\":\"Check\", ...} ] } ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "ButtonText cell",
                  "url": "/docs/props/cell/button-text"
                },
                {
                  "label": "UseButton cfg",
                  "url": "/docs/props/cfg/use-button"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/button.html"
          },
          {
            "cid": 438,
            "sid": "can-edit-4",
            "name": "can-edit",
            "label": "CanEdit",
            "data": {
              "body": "> 셀에 대한 편집 가능 여부를 설정합니다. > 이 속성은 기본값은 `1`인데, `0`설정시 `Cell, Row, Col`순으로 우선 순위를 갖습니다. > 가령 `Cell`에서 `0`으로 설정시 `Row`나 `Col`에서 `1`을 설정해도 해당 셀은 편집이 불가능해 집니다. > `CanEdit: 4`를 제외하고는 편집불가 모드 사용시 `Enum` 컬럼의 아이콘과 `Date` 타입 컬럼의 달력 아이콘을 표현하지 않습니다. > `Cfg`를 이용하여 편집불가 사용시에는 우선순위가 가장 높아짐으로, `Cell, Row, Col`에 `CanEdit: 0`은 먹히지 않습니다. > `Button` 타입의 버튼 클릭 시 동작, `File` 타입의 아이콘 표시 여부에 대해서는 해당 속성의 영향을 **`받지 않습니다`**. ([Disabled col](/docs/props/cell/disabled) 통하여 제어 가능.) ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|셀을 편집 불가(읽기 전용)으로 설정합니다. ![CanEdit](/assets/imgs/canEdit0.png \"CanEdit\")| |`1`|셀을 편집 가능으로 설정합니다. ![CanEdit](/assets/imgs/canEdit1.png \"CanEdit\")| |`2`|셀의 내용은 편집 불가하지만, 편집 미리보기를 제공하여 셀의 모든 내용을 확인할 수 있습니다. ![CanEdit](/assets/imgs/canEdit2.png \"CanEdit\")| |`3`|셀 편집 불가능(편집 가능 불가능에 대한 배경색을 표시하지 않음) [ColorState (cfg)](/docs/props/cfg/color-state)와 관계없이 배경색을 표현하지 않음.| |`4`|셀 편집 불가능 + 배경색 표현안함 + 아이콘표시| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"CanEdit\", 0); //2. 객체에 직접 접근해서 속성 적용 (열이름 :CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSCanEdit\"] = 1; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름 :CLS ) { data:[ {..., \"CLSCanEdit\":0, ...} ] } ```",
              "see": [
                {
                  "label": "CanEdit row",
                  "url": "/docs/props/row/can-edit"
                },
                {
                  "label": "CanEdit col",
                  "url": "/docs/props/col/can-edit"
                },
                {
                  "label": "getCanEdit method",
                  "url": "/docs/funcs/core/get-can-edit"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.12|`CanEdit:3, 4` 추가|"
            },
            "url": "docs/props/cell/can-edit.html"
          },
          {
            "cid": 439,
            "sid": "can-focus-3",
            "name": "can-focus",
            "label": "CanFocus",
            "data": {
              "body": "> 셀에 클릭이나 키보드를 통한 이동시 포커스 가능 여부를 설정합니다. > `CanFocus:0(false)`으로 설정된 셀에 대해서는 클릭을 통한 포커스 진입이 불가능하고, 키보드의 Tab 키를 이용한 이동시 열을 건너뛰게 됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|포커스 진입 불가| |`1(true)`|포커스 집입 가능 (`default`)| ### Example ```javascript //특정 셀에 대해서 포커스가 들어가지 않게 한다. var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSCanFocus\"] = 0; ```",
              "see": [
                {
                  "label": "CanFocus row",
                  "url": "/docs/props/row/can-focus"
                },
                {
                  "label": "CanFocus col",
                  "url": "/docs/props/col/can-focus"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/can-focus.html"
          },
          {
            "cid": 440,
            "sid": "can-paste",
            "name": "can-paste",
            "label": "CanPaste",
            "data": {
              "body": "> 행에서 특정 열에 대한 붙여넣기를 제한합니다. > `ctrl+c` 를 통해 복사시 클립보드에 저장되지만 `ctrl+v` 를 통해 붙여넣기는 되지 않습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|붙여넣기 불가| |`1(true)`|붙여넣기 가능 (`default`)| ### Example ```javascript // 적용 방법 1. var ROW = sheet.getRowById(\"AR1\"); ROW[\"sMoneyCanPaste\"] = 0; // 적용 방법 2. var OPT = { \"Def\": { \"Row\": { \"컬럼이름\": { CanPaste: 0 } // or \"컬럼이름CanPaste\": 0 } } } ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.2.0.0|기능 추가|<!-- |`[비공개]` core|8.2.0.0|기능 공개| -->"
            },
            "url": "docs/props/cell/can-paste.html"
          },
          {
            "cid": 441,
            "sid": "case-sensitive-2",
            "name": "case-sensitive",
            "label": "CaseSensitive",
            "data": {
              "body": "> 소팅시(혹은 필터 기능 사용시) 대소문자 구분 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|대소문자 구분 안함| |`1(true)`|대소문자 구분 사용 (`default`)| ### Example ```javascript //특정 셀 데이터에 대해서 소팅시 대소문자 구분 안함. //조회 데이터 내에서 속성 적용 (열이름 :CLS ) { data:[ {... , \"CLSCaseSensitive\":\"0\" , ...} ] } ```",
              "see": [
                {
                  "label": "RawSort cell",
                  "url": "./raw-sort"
                },
                {
                  "label": "NumberSort cell",
                  "url": "./number-sort"
                },
                {
                  "label": "SortValue cell",
                  "url": "./sort-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/case-sensitive.html"
          },
          {
            "cid": 442,
            "sid": "changed-2",
            "name": "changed",
            "label": "Changed",
            "data": {
              "body": "> 셀의 변경 여부를 나타냅니다. > 셀의 값을 수정시 자동으로 `1(true)`로 수정되고, 값을 원래 값으로 복원하면 자동으로 속성이 제거됩니다. > 별도로 [NoColor](./no-color) 속성을 설정하지 않으면, 수정시 셀의 배경색상은 css/default(테마)/main.css파일에 .IBColorChangedCell 로 설정한 색상 (기본값:#EEE 연한 회색)으로 변경됩니다. > 이 속성은 직접 값을 변경하기 보다는 수정 여부를 확인하는 용도로 사용할 것을 권합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`1(true)`|수정됨| ### Example ```javascript //셀값의 수정여부를 확인합니다. (열이름이 CLS 라고 가정) var row = sheet.getRowById(\"AR10\"); if (row[\"CLSChanged\"]) { //셀값이 수정되었습니다... } ```",
              "see": [
                {
                  "label": "Changed row",
                  "url": "/docs/props/row/changed"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/changed.html"
          },
          {
            "cid": 443,
            "sid": "checked",
            "name": "checked",
            "label": "Checked",
            "data": {
              "body": "> [Icon](/docs/props/col/icon)속성이나 [Button](/docs/props/col/button)속성의 값을 \"Check\" 로 설정하여 셀 안에 체크박스가 생성되었을때, 체크 여부를 확인하거나 수정합니다. ### ![ICON Check](/assets/imgs/iconCheck.png \"Icon:Check 사용한 경우\") [**Icon:\"Check\"사용 예**] ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|체크 해제됨| |`1`|체크됨| |`2`|알 수 없음(체크 박스 안에 \"?\"문자가 표시됨)| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Checked\", 1); //2. 객체에 직접 접근해서 속성 확인 (열이름 :CLS) var ROW = sheet.getRowById(\"AR10\"); var cellchk = ROW[\"CLSChecked\"]; //3. 조회 데이터 내에서 속성 적용 (열이름 :CLS) { \"data\":[ {... , \"CLSChecked\":1 , ...} ] } ```",
              "see": [
                {
                  "label": "Icon col",
                  "url": "/docs/props/col/icon"
                },
                {
                  "label": "Button col",
                  "url": "/docs/props/col/button"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/checked.html"
          },
          {
            "cid": 444,
            "sid": "class-3",
            "name": "class",
            "label": "Class",
            "data": {
              "body": "> 셀에 적용할 커스텀 css class명을 설정합니다. > **<mark>주의</mark> : Class로 적용한 css는 엑셀 다운로드시 디자인 반영되지 않습니다.** ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|열에 적용할 css class 명| ### Example ```css <style> .RedBold{color:#FF0000;font-weight:700} </style> ``` ```javascript //특정 셀에 \"RedBold\" 클래스를 적용 var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSClass\"] = \"RedBold\"; //변경내용 반영 sheet.refreshCell({row:ROW, col:\"CLS\"}); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/class.html"
          },
          {
            "cid": 445,
            "sid": "clear-2",
            "name": "clear",
            "label": "Clear",
            "data": {
              "body": "> 열 간에 관계형 콤보를 사용할 때, 상위 콤보에 값이 바뀌었을 때 클리어 되어야 하는 하위 열을 정의 합니다. > 관계형 콤보 구성과 관련해서는 (col) [Related](/docs/props/col/related) 속성을 참고해 주세요. > [CanEmpty](./can-empty) 속성에 영향을 받아 `CanEmpty: 0` 일 경우에는 Enum의 첫 번째 값으로 설정이 됩니다. > `CanEmpty: 1` 일 경우에는 빈 문자열로 설정 됩니다. > `참고` : 관계형 콤보의 `(cell)Clear, (cell)CanEmpty` 는 사용자의 action(change 이벤트가 발생하는) 에 의해서만 동작합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|자신의 하위관계 열이름 (여러개인 경우 \",\"구분자로 지정)| ### Example ```javascript sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS1\", \"Clear\", \"CLS2,CLS3\"); ```",
              "see": [
                {
                  "label": "Related cell",
                  "url": "/docs/props/cell/related"
                },
                {
                  "label": "Enum cell",
                  "url": "/docs/props/cell/enum"
                },
                {
                  "label": "EnumKeys cell",
                  "url": "/docs/props/cell/enum-keys"
                },
                {
                  "label": "CanEmpty cell",
                  "url": "/docs/props/col/can-empty"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/clear.html"
          },
          {
            "cid": 446,
            "sid": "col-merge-2",
            "name": "col-merge",
            "label": "ColMerge",
            "data": {
              "body": "> 헤더 영역에서 값 기준 병합 실행([DataMerge](/docs/props/cfg/DataMerge), [HeaderMerge](/docs/props/cfg/HeaderMerge))시 열을 포함할지 여부를 설정합니다. > 병합 대상에서 제외/포함할 열에 해당하는 헤더 영역의 <b>모든 셀</b>에 설정해야 합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|병합 할 때 열을 포함하지 않습니다. | |`1(true)`|병합 할 때 열을 포함합니다. | ### Example ```javascript options.Cfg = { IgnoreHeaderColMerge: false, // ColMerge 속성을 헤더 영역에도 적용합니다. }; options.Cols = [ ... { Header: [{ Value: \"부서1\", ColMerge:0 }, { Value: \"부서2\", ColMerge:0 }, { Value: \"부서3\", ColMerge:0 },{ Value: \"부서4\", ColMerge:0 }], Type:\"Text\", Name:\"Dept\", ColMerge:false, Width:100 ...}, ... ]; ```",
              "see": [
                {
                  "label": "RowMerge row",
                  "url": "/docs/props/row/RowMerge"
                },
                {
                  "label": "ColMerge col",
                  "url": "/docs/props/col/ColMerge"
                },
                {
                  "label": "DataMerge cfg",
                  "url": "/docs/props/cfg/DataMerge"
                },
                {
                  "label": "HeaderMerge cfg",
                  "url": "/docs/props/cfg/HeaderMerge"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/col-merge.html"
          },
          {
            "cid": 447,
            "sid": "color-3",
            "name": "color",
            "label": "Color",
            "data": {
              "body": "> 셀의 배경 색상을 설정합니다. > 색상은 상태에 따른 배경 색상의 영향을 받습니다. > rgb(255,255,255)는 투명색이 됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|HEX형식 (ex:#FF00F0) rgb형식 (ex:rgb(244,200,40)| ### Example ```javascript //조회 데이터 내에서 속성 적용 (열이름 :CLS ) { data:[ {... , \"CLSColor\":\"#ADADAD\" , ...} ] } ```",
              "see": [
                {
                  "label": "TextColor cell",
                  "url": "./text-color"
                },
                {
                  "label": "TextStyle cell",
                  "url": "./text-style"
                },
                {
                  "label": "TextSize cell",
                  "url": "./text-size"
                },
                {
                  "label": "TextFont cell",
                  "url": "./text-font"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/color.html"
          },
          {
            "cid": 448,
            "sid": "copy-value",
            "name": "copy-value",
            "label": "CopyValue",
            "data": {
              "body": "> 셀의 원래 값 대신 `Ctrl+C(혹은 Ctrl+X)`시 클립보드로 복사될 값을 설정합니다. > 특히 타입이 Html이나 버튼 같이 편집이 불가능한 셀에 유용하게 사용하실 수 있습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|복사시 클립보드로 들어갈 문자| ### Example ```javascript //특정 열에 대해서 복사시 원래 데이터가 아닌 다른 문자가 복사되게 끔 합니다. sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"CopyValue\", \"복사불가필드\"); ```",
              "see": [
                {
                  "label": "SortValue cell",
                  "url": "./sort-value"
                },
                {
                  "label": "FilterValue cell",
                  "url": "./filter-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/copy-value.html"
          },
          {
            "cid": 449,
            "sid": "cursor-2",
            "name": "cursor",
            "label": "Cursor",
            "data": {
              "body": "> 셀 위에 마우스 커서가 호버시 커서의 모양을 설정합니다. > 설정가능한 커서의 모양은 css를 따릅니다. > ex) auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, w-resize, text, wait, help ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|원하는 커서 모양| ### Example ```javascript //셀에 커서가 들어갔을때 커서 모양을 클릭가능한 손가락 모양으로 변경. { data:[ {... , \"CLSCursor\":\"pointer\" , ...} ] } ```",
              "see": [
                {
                  "label": "Cursor col",
                  "url": "/docs/props/col/cursor"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/cursor.html"
          },
          {
            "cid": 450,
            "sid": "custom-format-2",
            "name": "custom-format",
            "label": "CustomFormat",
            "data": {
              "body": "> 원본 데이터에 대한 마스킹을 정의합니다. > <mark>[Type](/docs/appx/type)이 `Text`또는 `Lines`인 경우</mark>에 사용가능한 사용자 정의 포맷으로, 사용자가 선언한 커스텀 포맷 함수도 지정가능합니다. > `CustomFormat`에서 사용 가능한 예약어는 다음과 같습니다. > |Value|Description| > |-----|-----| > |`#`|그대로 보여지는 글자(숫자)| > |`*`| *(별표)로 처리되는 글자(숫자)| > |`PostNo` | 우편번호 | > |`IdNo` | 주민등록번호(뒤 6자리 *(별표)로 처리) | > |`IdNoMask` | 주민등록번호(full text) | > |`SaupNo` | 사업자 등록번호 | > |`CardNo` | 카드번호 | > |`PhoneNo` | 전화번호 | ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|열의 Type에 따른 다양한 포맷설정 문자열| ### Example ```javascript //주민등록번호 포맷을 정의합니다. { data:[ {... , \"CLSCustomFormat\":\"IdNoMask\" , ...} ] } //사업자 번호와 주민등록번호 마스킹 적용 { data:[ {... , \"CLSCustomFormat\":\"SaupNo|IdNo\" , ...} ] } ```",
              "see": [
                {
                  "label": "Format appendix",
                  "url": "/docs/appx/format"
                },
                {
                  "label": "Format cell",
                  "url": "./format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/custom-format.html"
          },
          {
            "cid": 451,
            "sid": "data-format-2",
            "name": "data-format",
            "label": "DataFormat",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Date`인 셀에 로딩할 데이터의 포매팅을 설정합니다. > 다시 말해 서버에서 가져오거나 서버로 내보낼 데이터의 포맷을 설정합니다. > 가령 조회 데이터의 날짜가 \"25012017\"와 같다면 `DataFormat`에는 \"ddMMyyyy\"로, 데이터가 \"20171225\"와 같다면 \"yyyyMMdd\"로 설정되어야 합니다. > 시트에서 수정한 내용이 서버로 전달 될때에도 이 속성을 통해 변경한 포맷으로 서버에 문자열이 전달됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|yyyyMMdd 등 정해진 문자열| ### Example ```javascript //1. 메소드를 통해 특정 셀의 DataFormat을 변경 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"EDate\", \"DataFormat\", \"yyyyMMdd\"); //변경내용 확인(수정한 포맷으로 데이터 추출됨) var json = sheet.getSaveJson(); //2. 객체에 직접 접근해서 DataFormat 변경 (CLS열의 DataFormat을 \"yyyyMMddHHmm\"로 변경) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSDataFormat\"] = \"yyyyMMddHHmm\"; //변경내용 확인(수정한 포맷으로 데이터 추출됨) var json = sheet.getSaveJson(); //3. 조회 데이터 내에서 DataFormat 변경 { data:[ {... ,\"CLS\":\"12312018\" \"CLSFormat\":\"MMddyyyy\" , ...} ] } ```",
              "see": [
                {
                  "label": "Format cell",
                  "url": "./format"
                },
                {
                  "label": "EditFormat cell",
                  "url": "./edit-format"
                },
                {
                  "label": "Format appendix",
                  "url": "/docs/appx/format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/data-format.html"
          },
          {
            "cid": 452,
            "sid": "date-strict-mode-3",
            "name": "date-strict-mode",
            "label": "DateStrictMode",
            "data": {
              "body": "> 조회시 [Type](/docs/appx/type)이 `Date`인 셀에서 `DataFormat`이 설정된 경우 설정된 포맷과 길이가 일치하지 않거나 잘못된 날짜가 조회되는 경우 공백으로 처리합니다. > `DataFormat`을 \"yyyyMMdd\" 로 설정한 후 \"88\" 이라는 값이 조회되는 경우 해당 셀 값은 공백으로 처리됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|정밀검사하지 않음 (`default`)| |`1(true)`|`DataFormat`에 설정된 포맷에 대한 정밀 검사| ### Example ```javascript // 해당 컬럼에 DataFormat이 설정되어있다면 options.Cols = [ ... // DateStrictMode를 사용하기 위해선 DataFormat이 설정되어야 합니다. {Type: \"Date\", Format: \"yyyy.MM.dd\", DataFormat: \"yyyyMMdd\", Name: \"CLS\", Width: 120 ...}, ... ]; //특정 셀에서 잘못된 날짜 데이터 조회시 공백처리 합니다. { data:[ {... ,\"CLS\":\"12312018\" \"CLSDateStrictMode\":\"1\" , ...} ] } ```",
              "see": [
                {
                  "label": "DataFormat col",
                  "url": "/docs/props/col/data-format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.12|기능 추가|"
            },
            "url": "docs/props/cell/date-strict-mode.html"
          },
          {
            "cid": 453,
            "sid": "decimal-adjust-3",
            "name": "decimal-adjust",
            "label": "DecimalAdjust",
            "data": {
              "body": "> Int, Float 타입 컬럼 데이터의 근사값 처리방식을 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`round`|근사값을 반올림으로 처리합니다. (`default`)| |`floor`|근사값을 내림으로 처리합니다.| |`ceil`|근사값을 올림으로 처리합니다.| ```javascript //조회 데이터 내에서 속성 적용 (열이름 :FloatData ) { data:[ {... , \"FloatData\": 15.1, \"FloatDataDecimalAdjust\": \"floor\", ...} // 해당 셀의 근사값 처리 방식을 내림으로 설정 ] } ``` ### Since |product|version|desc| |---|---|---| |core|8.0.0.11|기능 추가|",
              "since": "|product|version|desc||---|---|---||core|8.0.0.11|기능 추가|"
            },
            "url": "docs/props/cell/decimal-adjust.html"
          },
          {
            "cid": 454,
            "sid": "disabled-2",
            "name": "disabled",
            "label": "Disabled",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Button`, `File`인 셀에 대해 버튼 사용 가능 여부를 설정합니다. > `Type:\"Button\", Disabled:1` : 버튼 셀이 비활성화 색으로 변경되며, click 이벤트 발생하지 않는다 > `Type:\"File\", Disabled:1` : 파일 추가, 제거 버튼이 표시되지 않는다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|버튼 기능 사용 가능 (`default`)| |`1(true)`|버튼 기능 사용 불가| ### Example ```javascript //특정 셀의 버튼을 사용불가로 설정 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Disabled\", 1); ```",
              "see": [
                {
                  "label": "Button cell",
                  "url": "./button"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/disabled.html"
          },
          {
            "cid": 455,
            "sid": "edit-enum-2",
            "name": "edit-enum",
            "label": "EditEnum",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Enum`인 셀에서 드랍리스트가 펼쳐졌을때 보여지는 아이템의 Text를 [Enum](./enum)에서 설정한 값과 다르게 하고자 할때 사용합니다. > '\\\\t'구분자를 이용하여 아이템을 여러개의 컬럼으로 표현할 수 있습니다. ### **1. 일반적인 EditEnum 사용** ![EditEnum](/assets/imgs/editEnum.png \"EditEnum\") **2. '\\t' 구분자를 사용한 EditEnum 사용** ![EditEnum2](/assets/imgs/editEnum2.png \"EditEnum2\") ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|첫번째 글자를 구분자로 하는 문자열 (ex:\"#사장#부사장#전무#상무#이사#부서장#차장#과장#대리#주임#사원\")| ### Example ```javascript //Enum 열에 item을 설정한다. { \"data\":[ ... { ..., CLSEnum: \"|시흥현장|안산현장|화성현장\", CLSEditEnum: \"|경기도 시흥시 은행로216번길 26|경기도 안산시 단원구 안산천남로 245|경기도 화성시 동탄반석로 96\" }, { ..., CLSEnum: \"|시흥현장|안산현장|화성현장\", CLSEditEnum: \"|경기도\\t시흥시\\t은행로216번길 26|경기도\\t안산시 단원구\\t안산천남로 245|경기도\\t화성시\\t동탄반석로 96\" } ... ] } ```",
              "see": [
                {
                  "label": "Enum cell",
                  "url": "./enum"
                },
                {
                  "label": "EnumKeys cell",
                  "url": "./enum-keys"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/edit-enum.html"
          },
          {
            "cid": 456,
            "sid": "edit-format-2",
            "name": "edit-format",
            "label": "EditFormat",
            "data": {
              "body": "> 사용자가 셀을 더블클릭하여 편집모드로 들어갔을때 보여 줄 포맷을 설정합니다 > 각 열의 [Type](/docs/appx/type)에 따라 설정 방법이나 동작이 달라집니다. > 가장 쉽게 이해하자면 날짜 유형 포맷을 사용하는 열에서 \"EditFormat\":\"ddMMyyyy\"로 설정하면, 셀에 보여질때는 \"2019-12-31\"형식으로 보여지다가, 사용자가 셀의 데이터를 편집하려 할때는 \"31122019\"로 나타나게 됩니다. > 포맷에 대한 자세한 내용은 appendix의 [Format](/docs/appx/format)을 참고해 주세요. ### Type mixed( `string` \\| `object` ) ### Options | Column Type | Type | Description | |---|---|---| |Text, Lines|`object`|셀에서 더블클릭을 통해 편집모드로 들어갈때 원래의 값을 어떤 형식으로 보여줄지 설정합니다. ex) \"EditFormat\":{\"KOR\":\"대한민국\", \"JPN\":\"일본\", \"USA\":\"미국\"} 셀의 값이 KOR일때 편집모드로 들어가면 대한민국으로 보여줌 ![EditFormat Text](/assets/imgs/editFormatText.png)| |Date|`string`|편집시 보여질 년,월,일의 순서 ex) \"EditFormat\":\"ddMMyyyy\" ![EditFormat Date](/assets/imgs/editFormatDate.png)| ### Example ```javascript //1. 메소드를 통해 특정 셀의 포맷을 변경 sheet.setAttribute( sheet.getRowById(\"AR99\") , \"EDate\" , \"EditFormat\" ,\"MMddyyyy\"); //2. 객체에 직접 접근해서 타입변경 (CLS열의 포맷을 \"dd-MM-yyyy\"로 변경) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSEditFormat\"] = \"ddMMyyyy\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 포맷 변경 { data:[ {... , \"CLSEditFormat\":\"yyyyMMdd\" , ...} ] } ```",
              "see": [
                {
                  "label": "Format cell",
                  "url": "./format"
                },
                {
                  "label": "DataFormat cell",
                  "url": "./data-format"
                },
                {
                  "label": "EditFormat col",
                  "url": "/docs/props/col/edit-format"
                },
                {
                  "label": "Format appendix",
                  "url": "/docs/appx/format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/edit-format.html"
          },
          {
            "cid": 457,
            "sid": "edit-mask-2",
            "name": "edit-mask",
            "label": "EditMask",
            "data": {
              "body": "> 셀에 입력가능한 문자를 자바스크립트 정규식을 이용하여 설정합니다. > 여기서 입력한 글자는 정규식의 `search()`를 사용하여 입력허용 여부가 결정됩니다. > > \"입력값\".search(EditMask)>=0 > `true` 인 경우 입력 허용 > `false` 인 경우 입력 제한 > > 띄어쓰기를 제외한 모든 글자만 입력허용 : \"^\\\\\\\\S\\*\\$\" > 숫자만 입력 가능 : \"^\\\\\\\\d\\*\\$\" > 알파벳 만 가능 : \"^\\\\\\\\w\\*\\$\" > 열개 숫자만 가능 : \"^\\\\\\\\d{0,10}$\" > > 정규식에 맞지 않은 글자는 입력되지 않습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|자바스크립트 정규식 문자| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS ) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"EditMask\", \"^\\\\S*$\"); //2. 객체에 직접 접근해서 속성 적용 (열이름 :CLS ) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSEditMask\"] = \"^\\\\w*$\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름 :CLS ) { data:[ {... , \"CLSEditMask\":\"^\\\\d{0,10}$\" , ...} ] } ```",
              "see": [
                {
                  "label": "EditMask col",
                  "url": "/docs/props/col/edit-mask"
                },
                {
                  "label": "ResultMask cell",
                  "url": "./result-mask"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/edit-mask.html"
          },
          {
            "cid": 458,
            "sid": "empty-value-2",
            "name": "empty-value",
            "label": "EmptyValue",
            "data": {
              "body": "> 셀에 값이 없을때 보여질 글자를 설정합니다. > `Html` input 객체의 `placeholder`속성과 비슷한 기능으로, 값을 읽거나(getValue) 저장하거나 엑셀로 다운로드할 때는 값이 없는 상태로 처리됩니다. > 해당 속성에 영향을 받는 데이터는 아래와 같습니다. ```javascript {Type: \"Text\", Name: \"sText\", EmptyValue : \"값이 없습니다.\"} data: [ {\"e\": null}, //null 데이터 {\"e\": undefined}, //undefined 데이터 {\"e\": \"\"}, //빈문자 데이터 {} //데이터 없음 ] ``` ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|신규 행이나 조회시 값이 없을때 보여질 내용| ### Example ```javascript //필수 입력에 대한 안내를 설정 { data:[ {... , \"CLSEmptyValue\":\"필수 입력 사항입니다.\" , ...} ] } ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/empty-value.html"
          },
          {
            "cid": 459,
            "sid": "enum-disabled-2",
            "name": "enum-disabled",
            "label": "EnumDisabled",
            "data": {
              "body": "> [Enum](./enum) 속성을 통해 설정한 아이템들의 선택 불가능 여부를 설정합니다. > 첫번째 글자를 구분자로 설정하게 됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|첫번째 글자를 구분자로 하는 문자열 (ex:\"#1#0\")| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS ) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"EnumDisabled\", \"|1|0|0|0|0|1|0|1|1|0|0\"); //2. 객체에 직접 접근해서 속성 적용 (열이름 :CLS ) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSEnumDisabled\"] = \"|1|0|0|0\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름 :CLS ) { data:[ {..., \"CLSEnumDisabled\":\"|1|0\", ...} ] } ```",
              "see": [
                {
                  "label": "Enum cell",
                  "url": "./enum"
                },
                {
                  "label": "EnumKeys cell",
                  "url": "./enum-keys"
                },
                {
                  "label": "EnumMenu cell",
                  "url": "./enum-menu"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.16|기능 추가|"
            },
            "url": "docs/props/cell/enum-disabled.html"
          },
          {
            "cid": 460,
            "sid": "enum-keys-2",
            "name": "enum-keys",
            "label": "EnumKeys",
            "data": {
              "body": "> [Enum](./enum) 속성을 통해 설정한 아이템들의 값을 설정합니다. > 첫번째 글자를 구분자로 설정하게 됩니다. > 이 속성을 설정하면, 실제 조회나 저장시 `EnumKey`로 설정한 값이 서버로 전송됩니다. > **<mark>주의</mark> : EnumKeys는 [Enum](./enum) 당 유일한 하나의 Key로 동일한 값을 중복해서 사용하면 안됩니다.** > **<mark>주의</mark> : [Type](/docs/appx/type)이 `Radio`인 컬럼에서는 [Enum](./enum)과 `EnumKeys`의 길이를 동일하게 사용해야 체크 동작이 정상적으로 이뤄집니다.** ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|첫번째 글자를 구분자로 하는 문자열 (ex:\"#01#02#03#04\")| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS ) sheet.setAttribute( sheet.getRowById(\"AR99\") , \"CLS\" , \"EnumKeys\" ,\"|01|02|03|04\"); //2. 객체에 직접 접근해서 속성 적용 (열이름 :CLS ) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSEnumKeys\"] = \"@A1@B0@B1@C1\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름 :CLS ) { data:[ {... , \"CLSEnumKeys\":\"#AA#ED#K9\" , ...} ] } ```",
              "see": [
                {
                  "label": "Enum cell",
                  "url": "./enum"
                },
                {
                  "label": "Related cell",
                  "url": "./related"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/enum-keys.html"
          },
          {
            "cid": 461,
            "sid": "enum-menu-2",
            "name": "enum-menu",
            "label": "EnumMenu",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Enum`인 셀에서 드랍리스트 대신 메뉴가 보여지게 끔 설정하고자 할때 사용합니다. > `Menu`에 대한 자세한 내용은 appendix의 [Menu](/docs/appx/menu)속성을 참고해 주세요. ### ![EnumMenu](/assets/imgs/enumMenu.png \"EnumMenu\") ### Type `object` ### Options |Value|Description| |-----|-----| |`object`|메뉴를 구성하는 json 객체| ### Example ```javascript //Enum 열에 item을 설정한다. { \"data\":[ ... {... CLSEnum: \"|안산1|안산2|화성1|화성2|화성3|일산1|일산2\", CLSEnumMenu : { Items: [ { Menu: 1, Name: \"안산현장\", Items: [ {Name: \"[안산1] 경기도 안산시 단원구 광덕3로 201\",Value: \"안산1\"}, {Name: \"[안산2] 경기도 안산시 단원구 신길동 1509\",Value: \"안산2\"} ] }, { Menu: 1, Name: \"화성현장\", Items: [ {Name: \"[화성1] 경기도 화성시 반송동\", Value: \"화성1\"}, {Name: \"[화성2] 경기도 화성시 동탄대로22길 30\", Value: \"화성2\"}, {Name: \"[화성3] 경기도 화성시 산척동 283\", Value: \"화성3\"}, ] }, { Menu: 1, Name: \"일산현장\", Items: [ {Name: \"[일산1] 경기도 고양시 일산동구 정발산로82번길 10\", Value: \"일산1\"}, {Name: \"[일산2] 경기도 고양시 일산동구 장항동 1761\", Value: \"일산2\"}, ] } ] } }, ... ] } ```",
              "see": [
                {
                  "label": "Enum col",
                  "url": "/docs/props/cell/enum"
                },
                {
                  "label": "EnumKeys col",
                  "url": "/docs/props/cell/enum-keys"
                },
                {
                  "label": "Menu appendix",
                  "url": "/docs/appx/menu"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/enum-menu.html"
          },
          {
            "cid": 462,
            "sid": "enum-2",
            "name": "enum",
            "label": "Enum",
            "data": {
              "body": "> 셀의 [Type](/docs/appx/type)이 `Enum`이나 `Radio`일 때 보여질 item을 설정합니다. > 첫번째 글자를 구분자로 설정하게 됩니다. > [EnumKeys](./enum-keys) 속성을 통해 `item`의 실제값을 설정할 수 있습니다. ### ![Enum타입](/assets/imgs/enum1.png \"Enum\") [그림1] ![Radio타입](/assets/imgs/radioEnum.png \"Radio\") [그림2] ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|첫번째 글자를 구분자로 하는 문자열 (ex:\"#사장#부사장#전무#상무#이사#부서장#차장#과장#대리#주임#사원\")| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS ) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Enum\", \"|사장|부장|차장|과장|대리|사원\"); //2. 객체에 직접 접근해서 속성 적용 (열이름 :CLS ) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSEnum\"] = \"|성인|청소년|아동|유가\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름 :CLS ) { data:[ {..., \"CLSEnum\":\"|남성|여성\", ...} ] } ```",
              "see": [
                {
                  "label": "EnumKeys cell",
                  "url": "./enum-keys"
                },
                {
                  "label": "Related cell",
                  "url": "./related"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/enum.html"
          },
          {
            "cid": 463,
            "sid": "error",
            "name": "error",
            "label": "Error",
            "data": {
              "body": "> 셀에 수정값이 [ResultMask](./result-mask)에 선언한 유효성 검사에 위배되는 경우 속성값이 `1(true)`로 세팅됩니다. > 이 속성은 직접 값을 변경하기 보다는, 수정 여부를 확인하는 용도로 사용할 것을 권합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`1(true)`|`Validation` 위배됨| ### Example ```javascript //셀값의 오류여부를 확인. (열이름이 CLS 라고 가정) var error = sheet.getAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Error\"); if (error) { //잘못 입력된 내용이 있습니다. } ```",
              "see": [
                {
                  "label": "ResultMask cell",
                  "url": "./result-mask"
                },
                {
                  "label": "ResultText cell",
                  "url": "./result-text"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/error.html"
          },
          {
            "cid": 464,
            "sid": "export-value",
            "name": "export-value",
            "label": "ExportValue",
            "data": {
              "body": "> 엑셀 다운로드 시 보여질 글자를 설정합니다. > `Link`, `Img` 타입에서는 데이터 포맷을 맞춰줘야 정상적으로 셀 값이 보여집니다. > 예시) Link 타입: \"||ExportValue 설정 값|\" > 예시) Img 타입: \"|../image.jpg|50|50|0|0|||\" > 그외에 타입에서는 설정한 string값 대로 다운로드 됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|엑셀 다운로드 시 보여질 문자| ### Example ```javascript // 1. 메소드를 통해 특정 셀에 속성 적용 (열이름 : CLS ) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"ExportValue\", \"먼저 '실적대차' 열의 내용을 확인해 주세요.\"); // 2. 객체에 직접 접근해서 속성 적용 (열이름 : CLS ) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSExportValue\"] = \"마감되었습니다.\"; // 변경내용 확인 sheet.refreshCell({ row:ROW, col:\"CLS\" }); // 3. 조회 데이터 내에서 속성 적용 (열이름 : CLS ) { data:[ {... , \"CLSExportValue\": \"공사 시작일을 먼저 입력해 주세요.\" , ...} ] } ```",
              "see": [
                {
                  "label": "exportData method",
                  "url": "/docs/funcs/core/export-data"
                },
                {
                  "label": "down2Excel method",
                  "url": "/docs/funcs/excel/down-to-excel"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.19|기능 추가||excel|1.0.6|기능 추가|"
            },
            "url": "docs/props/cell/export-value.html"
          },
          {
            "cid": 465,
            "sid": "filter-enum-keys",
            "name": "filter-enum-keys",
            "label": "FilterEnumKeys",
            "data": {
              "body": "> Enum 타입의 컬럼에서 필터링시 Enum(문자열)이 아닌 EnumKeys(코드값)를 기준으로 필터링 하게 합니다. > 이 속성은 시트 생성 시점에서 Def.Filter를 통해 설정하실 수 있습니다. > 동일한 Enum 값이 있는 경우, 이 속성을 1로 설정해야 EnumKeys를 기준으로 구분지어 필터링 할 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|Enum(문자열) 기준으로 필터 (`default`)| |`1(true)`|EnumKeys(코드값) 기준으로 필터| ### Example ```javascript //Enum 타입 컬럼명을 \"Nation\" 이라고 가정합니다 var option = { Def: { Filter: { Nation: { FilterEnumKeys: 1 //Enum컬럼을 Key값을 기준으로 필터링 } } } } ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/filter-enum-keys.html"
          },
          {
            "cid": 466,
            "sid": "filter-value",
            "name": "filter-value",
            "label": "FilterValue",
            "data": {
              "body": "> 셀의 원래 값 대신 필터링시 사용할 값을 설정합니다. > 특히 타입이 `Html`이나 `버튼` 같이 편집이 불가능한 셀에 유용하게 사용하실 수 있습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|필터링이 이루어질때 사용될 기준 문자| ### Example ```javascript //조회 데이터 내에서 속성 적용 (열이름 :CLS ) //원래 셀의 값 대신 \"00가0000\"로 필터링 되게 끔 설정 { data:[ {... , \"CARNOFilterValue\":\"00가0000\" , ...} ] } ``` ![FilterValue](/assets/imgs/filterValue.png \"실제 값 대신 00가0000로 필터링\")",
              "see": [
                {
                  "label": "SortValue cell",
                  "url": "./sort-value"
                },
                {
                  "label": "CopyValue cell",
                  "url": "./copy-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/filter-value.html"
          },
          {
            "cid": 467,
            "sid": "focus-cell-2",
            "name": "focus-cell",
            "label": "FocusCell",
            "data": {
              "body": "> 특정 셀에 포커스가 들어갔을때 포커스 셀의 디자인을 정의 합니다. > 예약된 문자를 구분자 \",\"연결하여 설정합니다. > 기본적으로는 \"Border, Color\"로 구성됩니다. ### ```css .IBColorFocusedCell{background-color:#FFFFDD;} .IBClassFocusedCell{background-color:#DDDDDD;} ``` 위와 같이 클레스가 정의 되었을 경우 보여지는 모습은 다음과 같습니다. |설정값|보여지는 모습| |---|---| |Default 설정 (Border,Color)|![FocusCell](/assets/imgs/FocusCell1.png \"포커스된 셀의 모양\")| |Class 만 설정|![FocusCell](/assets/imgs/FocusCell2.png \"포커스된 셀의 모양\")| |Border,Class 로 설정|![FocusCell](/assets/imgs/FocusCell3.png \"포커스된 셀의 모양\")| ### Type `string` ### Options |Value|Description| |-----|-----| |`Border`|포커스된 셀의 테두리를 적용| |`Color`|포커스된 셀의 td 태그에 배경색으로 css/default(테마)/main.css 파일에 IBColorFocusedCell 클레스에서 정의한 색상이 적용(성능 저하가 있을 수 있음)| |`Class`|css/default(테마)/main.css 파일에 IBClassFocusedCell 클레스에 정의한 디자인을 따릅니다.| ### Example ```javascript //포커스가 들어갔을때 셀의 배경색만 보여줌. sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"FocusCell\", \"Class\"); ```",
              "see": [
                {
                  "label": "FocusCell col",
                  "url": "/docs/props/col/focus-cell"
                },
                {
                  "label": "FocusRow cell",
                  "url": "./focus-row"
                },
                {
                  "label": "FocusRow row",
                  "url": "/docs/props/row/focus-row"
                },
                {
                  "label": "FocusRow col",
                  "url": "/docs/props/col/focus-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/focus-cell.html"
          },
          {
            "cid": 468,
            "sid": "focus-row-3",
            "name": "focus-row",
            "label": "FocusRow",
            "data": {
              "body": "> 셀을 클릭시 보여지는 \"커서 포커스 행\"은 Table 객체 위에 DIV 객체가 떠있는 형태로 구성됩니다. > 특정 셀에 포커스가 있을때 보여질 \"커서 포커스 행\"의 디자인을 설정합니다. > 예약된 문자를 구분자 \",\"연결하여 설정합니다. > 기본적으로는 \"Border, Background\"로 구성됩니다. ### ![FocusRow](/assets/imgs/focusRow1.png \"FocusRow default\") [일반 FocusRow] ![FocusRow](/assets/imgs/focusRow2.png \"FocusRow default\") [border없이 Background로 설정시] ### Type `string` ### Options |Value|Description| |-----|-----| |`Border`|커서 포커스 DIV의 테두리 사용 (.IBFocusRowBorder)| |`Background`|커서 포커스 DIV의 배경색 사용 (.IBFocusRowBackground) | |`Color`|커서 포커스 DIV를 사용하지 않고 Table 객체에 background-color를 부여 (성능이 저하될수 있음,포커스 셀은 제외) (.IBColorFocused) | |`Class`|css/default(테마)/main.css 파일에 .IBClassFocused 클레스에 정의한 디자인을 따릅니다. (포커스 셀은 제외)| ### Example ```javascript //셀에 포커스가 들어갔을때 포커스행에 대해 배경색만 사용함 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"FocusRow\", \"Background\"); ```",
              "see": [
                {
                  "label": "FocusRow row",
                  "url": "/docs/props/row/focus-row"
                },
                {
                  "label": "FocusRow col",
                  "url": "/docs/props/col/focus-row"
                },
                {
                  "label": "FocusCell col",
                  "url": "/docs/props/col/focus-cell"
                },
                {
                  "label": "FocusCell cell",
                  "url": "./focus-cell"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/focus-row.html"
          },
          {
            "cid": 469,
            "sid": "format-2",
            "name": "format",
            "label": "Format",
            "data": {
              "body": "> 원본 데이터에 대한 마스킹된 데이터를 정의합니다. > 원본 데이터와 무관하게 사용자에게 마스크를 적용한 데이터를 보여줍니다. > [Format](/docs/appx/format)은 열의 Type에 따라 다양하게 정의될 수 있습니다. 자세한 내용은 7장 appendix의 [Format](/docs/appx/format)을 참고해 주세요. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|열의 Type에 따른 다양한 포맷설정 문자열| ### Example ```javascript //날짜 포맷을 정의합니다. { data:[ {... , \"CLSFormat\":\"dd.MM.yyyy\" , ...} ] } ```",
              "see": [
                {
                  "label": "Format appendix",
                  "url": "/docs/appx/format"
                },
                {
                  "label": "EditFormat cell",
                  "url": "./edit-format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/format.html"
          },
          {
            "cid": 470,
            "sid": "gmt-2",
            "name": "gmt",
            "label": "GMT",
            "data": {
              "body": "> 셀의 [Type](/docs/appx/type)이 `Date` 일 때 기준 시간대를 설정합니다. > 조회된 시간을 기준으로 UTC시간으로 변경하여 보여줍니다. > 이는 시트에 보여지는 값일뿐 실제 값과는 무관합니다. 가령 조회데이터가 \"2017-05-25 14:30\" 인 경우, 이 속성의 값을 `1(true)`로 설정하면 실제 시트상에는 \"2017-05-25 05:30\"으로 표시됩니다.(한국은 GMT +9 이기 때문) > 하지만 값을 \"2017-05-25 06:30\"으로 수정하여 저장하면, 실제로 전송되는 데이터는 \"2017-05-25 15:30\"이 전송됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|사용자 PC의 시간대 (`default`)| |`1(true)`|GMT/UTC 시간대| ### Example ```javascript //UTC로 보기 { \"data\":[ ... {CLS: \"20190103134521\", CLSFormat: 'MM-dd-yyyy HH:mm', CLSDataFormat: \"yyyyMMddHHmmss\", GMT: 1 ...}, ... ]; ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/gmt.html"
          },
          {
            "cid": 471,
            "sid": "hint-value-3",
            "name": "hint-value",
            "label": "HintValue",
            "data": {
              "body": "> 힌트는 열의 너비가 좁아 셀의 내용의 일부가 안보일 때, 마우스 커서가 올라간 셀에 한해 일시적으로 셀의 너비를 늘려 안보이던 뒷 내용을 보여주는 기능입니다. > 힌트기능 사용시 원래 셀의 내용 대신에 설정한 내용이 보여지게끔 설정합니다. ### ![힌트활성화](/assets/imgs/hint1.png \"마우스 커서가 셀에 올라갔을때 힌트를 통해 감춰진 부분이 보여짐\") [힌트기능 사용 예] ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|힌트기능 활성화시(마우스커서가 셀 위에 Over시) 보여질 문자| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS ) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"HintValue\", \"먼저 '실적대차' 열의 내용을 확인해 주세요.\"); //2. 객체에 직접 접근해서 속성 적용 (열이름 :CLS ) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSHintValue\"] = \"마감되었습니다.\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름 :CLS ) { data:[ {... , \"CLSHintValue\":\"공사 시작일을 먼저 입력해 주세요.\" , ...} ] } ```",
              "see": [
                {
                  "label": "ShowHint cell",
                  "url": "./show-hint"
                },
                {
                  "label": "ShowHint col",
                  "url": "/docs/props/col/show-hint"
                },
                {
                  "label": "ShowHint row",
                  "url": "/docs/props/row/show-hint"
                },
                {
                  "label": "onShowHint event",
                  "url": "/docs/events/on-show-hint"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/hint-value.html"
          },
          {
            "cid": 472,
            "sid": "html-postfix-3",
            "name": "html-postfix",
            "label": "HtmlPostfix",
            "data": {
              "body": "> 셀의 문자열 뒤에 원하는 HTML 태그를 삽입합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|원하는 HTML태그| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS ) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"HtmlPostfix\", \"<i class='fas fa-apple-alt'></i>\"); //2. 객체에 직접 접근해서 속성 적용 (열이름 :CLS ) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSHtmlPostfix\"] = \"<span>약어</span>\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름 :CLS ) { data:[ {... , \"CLSHtmlPostfix\":\"<div class='btn'>time</div>\" , ...} ] } ```",
              "see": [
                {
                  "label": "HtmlPrefix cell",
                  "url": "./html-prefix"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/html-postfix.html"
          },
          {
            "cid": 473,
            "sid": "html-prefix-3",
            "name": "html-prefix",
            "label": "HtmlPrefix",
            "data": {
              "body": "> 셀의 문자열 앞에 원하는 HTML 태그를 삽입합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|원하는 HTML태그| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS ) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"HtmlPrefix\", \"<i class='fas fa-apple-alt'></i>\"); //2. 객체에 직접 접근해서 속성 적용 (열이름 :CLS ) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSHtmlPrefix\"] = \"<span>약어</span>\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름 :CLS ) { data:[ {... , \"CLSHtmlPrefix\":\"<div class='btn'>time</div>\" , ...} ] } ```",
              "see": [
                {
                  "label": "HtmlPostfix cell",
                  "url": "./html-postfix"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/html-prefix.html"
          },
          {
            "cid": 474,
            "sid": "icon-align-2",
            "name": "icon-align",
            "label": "IconAlign",
            "data": {
              "body": "> 셀 좌측에 버튼(혹은 체크박스)을 표시하는 [Icon](./icon)속성 사용시, 버튼의 위치를 설정합니다. > 다른 설정이 없을시 셀의 좌측에 표시됩니다.. ### Type `string` ### Options |Value|Description| |-----|-----| |`Left`|셀 좌측에 Icon표시 (`default`)| |`Right`|셀 우측에 Icon표시| ### Example ```javascript //조회 데이터 내에서 속성 적용 (열이름: CLS ) { data:[ {... , \"ClsIconAlign\":\"Right\",\"CLSIcon\":\"/images/popIcon.gif\", ...} ] } ```",
              "see": [
                {
                  "label": "Icon cell",
                  "url": "./icon"
                },
                {
                  "label": "IconWidth col",
                  "url": "../col/icon-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/icon-align.html"
          },
          {
            "cid": 475,
            "sid": "icon-width-2",
            "name": "icon-width",
            "label": "IconWidth",
            "data": {
              "body": "> 셀 좌측에 버튼을 표시하는 [Icon](./icon)속성 사용시, 버튼의 너비를 설정합니다. > 너비는 pixel단위로 설정됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|셀 좌측 버튼의 너비| ### Example ```javascript //조회 데이터 내에서 속성 적용 (열이름: CLS ) { data:[ {... , \"CLSIcon\":\"/images/popIcon.gif\", \"CLSIconWidth\":22 , ...} ] } ```",
              "see": [
                {
                  "label": "Icon cell",
                  "url": "./icon"
                },
                {
                  "label": "IconWidth col",
                  "url": "../col/icon-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/icon-width.html"
          },
          {
            "cid": 476,
            "sid": "icon-2",
            "name": "icon",
            "label": "Icon",
            "data": {
              "body": "> 셀의 좌측에 원하는 아이콘 이미지,체크박스 혹은 버튼을 표시하는 기능입니다. > 셀의 우측에 버튼을 표시하는 [Button](./button) 속성과 유사한 기능입니다. > 열의 타입이 `Button`인 경우에는 사용하실 수 없습니다. ### ![Icon속성](/assets/imgs/Icon1.png \"Icon속성\") [그림1] ![Icon속성](/assets/imgs/Icon2.png \"Icon속성\") [그림2] ### Type `string` ### Options |Value|Description| |-----|-----| |`Clear`|셀 좌측에 셀 내용을 지우기 위한 버튼이 표시됩니다.| |`Date`|셀 좌측에 달력 아이콘을 보여줍니다. 열의 타입이 \"Date\"인 경우에만 클릭시 달력이 표시됩니다.[그림2] 참고| |`Check`|셀 좌측에 체크박스를 표시합니다.| |`공백`|원래 보여져야 하는 Icon 이미지를 감춥니다.| |`기타`|이미지 파일에 대한 url을 넣으면 아이콘의 배경으로 이미지가 표시됩니다. [그림1] 참고 (이미지는 gif,png,jpg만 가능)| *[IconWidth](../col/icon-width) 속성을 통해 아이콘 영역의 넓이를 설정할 수 있습니다. 아이콘을 클릭시 [onIconClick](/docs/events/on-icon-click)이벤트가 호출됩니다. `\"Clear\"`나 `\"Check\"`로 설정하면 [OnClickSide](/docs/props/event/on-click-side) 이벤트만 호출합니다.* ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS ) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Icon\", \"Clear\"); //2. 객체에 직접 접근해서 속성 적용 (열이름 :CLS ) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSIcon\"] = \"Check\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름 : CLS) { \"data\":[ {... , \"CLSIcon\":\"/images/popIcon.gif\", ...} ] } //4. 조회 데이터 내에서 속성 적용 (열이름 : CLS) { \"data\":[ {... , \"ClsIcon\":\"Check\", \"CLSChecked\":1, ...} ] } ```",
              "see": [
                {
                  "label": "IconWidth cell",
                  "url": "./icon-width"
                },
                {
                  "label": "Button cell",
                  "url": "./button"
                },
                {
                  "label": "Checked cell",
                  "url": "/docs/props/cell/checked"
                },
                {
                  "label": "Icon col",
                  "url": "../col/icon"
                },
                {
                  "label": "IconWidth col",
                  "url": "../col/icon-width"
                },
                {
                  "label": "setIconCheck method",
                  "url": "/docs/funcs/core/set-icon-check"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/icon.html"
          },
          {
            "cid": 477,
            "sid": "indent-3",
            "name": "indent",
            "label": "Indent",
            "data": {
              "body": "> 문자열 정렬([Align](./align))에 따라 셀 좌측 또는 우측에 들여쓰기를 설정합니다. > 숫자로 입력시 입력값*10px로 padding이 생성됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|패딩 정도 (입력값 * 10px)| ### Example ```javascript //특정 셀에 20px 정도 패딩을 생성 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Indent\", 2); ```",
              "see": [
                {
                  "label": "Align cell",
                  "url": "./align"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/indent.html"
          },
          {
            "cid": 478,
            "sid": "link-base-2",
            "name": "link-base",
            "label": "LinkBase",
            "data": {
              "body": "> 셀에 [Link](./link)속성이 있는 경우, Base 경로를 설정합니다. > 현재 페이지가 **/abc/test.html**이라고 가정했을때, `LinkBase` 설정에 따른 연결 URL은 다음과 같습니다. > |Link|LinkBase|실제연결URL| > |---|---|---| > |/xyz/test2.html||/xyz/test2.html| > |./xyz/test2.html||/abc/xyz/test2.html| > |/xyz/test2.html|/kor|/kor/xyz/test2.html| > |./xyz/test2.html|/kor|/kor/xyz/test2.html| ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|`Link`에서 설정한 URL의 Base 경로| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"LinkBase\", \"/koem\"); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSLinkBase\"] = \"/dps\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSLinkBase\":\"/cust\" , ...} ] } ```",
              "see": [
                {
                  "label": "Link cell",
                  "url": "./link"
                },
                {
                  "label": "LinkTarget cell",
                  "url": "./link-target"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/link-base.html"
          },
          {
            "cid": 479,
            "sid": "link-target-2",
            "name": "link-target",
            "label": "LinkTarget",
            "data": {
              "body": "> 셀에 [Link](./link)속성이 있는 경우, 클릭시 이동할 `target Window`를 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|클릭시 이동 할 Target Window(_blank ,_parent ,_self ,_top, 특정 window명)| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS ) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"LinkTarget\", \"_self\"); //2. 객체에 직접 접근해서 속성 적용 (열이름 :CLS ) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSLinkTarget\"] = \"_blank\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름 :CLS ) { data:[ {... , \"CLSLinkTarget\":\"_parent\" , ...} ] } ```",
              "see": [
                {
                  "label": "Link cell",
                  "url": "./link"
                },
                {
                  "label": "LinkBase cell",
                  "url": "./link-base"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/link-target.html"
          },
          {
            "cid": 480,
            "sid": "link-2",
            "name": "link",
            "label": "Link",
            "data": {
              "body": "> 셀에 데이터를 \\<a> 태그로 감싸고 href 속성에 들어갈 URL을 설정합니다. > [LinkBase](./link-base)와 [LinkTarget](./link-target) 속성을 같이 사용하여 상대경로나 클릭시에 target window를 설정할 수 있습니다. > **이 옵션은 반드시 CanEdit가 0으로 설정되어야 동작합니다.** ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|클릭시 이동할 URL| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Link\", \"./cbt/exam02.do\"); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSLink\"] = \"/cbs/recalcSum.do\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSLink\":\"/abs/endPointJ.do\" , ...} ] } ```",
              "see": [
                {
                  "label": "LinkBase cell",
                  "url": "./link-base"
                },
                {
                  "label": "LinkTarget cell",
                  "url": "./link-target"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/link.html"
          },
          {
            "cid": 481,
            "sid": "menu-items",
            "name": "menu-items",
            "label": "MenuItems",
            "data": {
              "body": "> Filter 셀의 보여질 필터 아이콘 메뉴를 셀 별로 설정 할 수 있습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`items`|보여질 아이콘 번호를 \",\" 로 연결한 문자열| **operators 상세설명** |value|type|desc| |---|---|---| |`0`|공통|필터를 사용하지 않음| |`1`|공통|같다| |`2`|공통|같지않다| |`3`|숫자, 날짜|작다| |`4`|숫자, 날짜|작거나 같다| |`5`|숫자, 날짜|크다| |`6`|숫자, 날짜|크거나 같다| |`7`|문자|앞글자 일치| |`8`|문자|앞글자가 일치하지 않음| |`9`|문자|뒷글자 일치| |`10`|문자|뒷글자 일지하지 않음| |`11`|문자|해당 글자 포함| |`12`|문자|해당 글자 포함하지 않음| |`13`|숫자|상위 10| |`14`|공통|값 있음| |`15`|공통|값 없음| ### Example ```javascript // \"RENTDATE\" 컬럼에 보여질 아이콘 설정 options.Filter = [ RENTDATE: { MenuItems: \"0,1,2,3,4,5,6,7,8,9,10,11,12\" }, ]; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.27|13 기능 추가||core|8.1.0.27|14,15 기능 추가|"
            },
            "url": "docs/props/cell/menu-items.html"
          },
          {
            "cid": 482,
            "sid": "menu-4",
            "name": "menu",
            "label": "Menu",
            "data": {
              "body": "> 특정 셀 위에서 마우스 우측 버튼 클릭시 보여질 컨텍스트 메뉴를 설정합니다. > 7장의 [Menu appendix](/docs/appx/menu)내용을 참고해 주세요. ### Type mixed( `object` \\| `string` ) ### Options |Value|Description| |-----|-----| |`string`|첫글자를 구분자로 한 컨텍스트 메뉴스트링 지정 (ex: @저장@임시저장@취소 or *상신*취소) | |`object`|[Menu Object 설정 링크 참고](/docs/appx/menu) ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Menu\", \"|진행|취소\"); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSMenu\"] = \"|보류|결제|전결\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSMenu\":\"|국내|해외\" , ...} ] } ```",
              "see": [
                {
                  "label": "Menu appendix",
                  "url": "/docs/appx/menu"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/menu.html"
          },
          {
            "cid": 483,
            "sid": "merge",
            "name": "merge",
            "label": "Merge",
            "data": {
              "body": "> 같은 행 안에 다른 셀들의 값을 한 셀에서 표현하는 기능입니다. > 눈에 보이기만 할뿐 실제 셀의 값은 별도로 관리됩니다. > `row`에 [Spanned](/docs/props/row/spanned) 속성이 `1`로 설정되어야 동작합니다. ### ![Merge속성](/assets/imgs/Merge.png \"Merge속성\") [empinfoMerge:\"empno,empNm,pstnGbn\" 으로 설정] ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|열이름 (\",\"구분자로 여러개 지정 가능)| ### Example ```javascript //Spanned가 설정되어 있어야 함. options.Def.Row = {Spanned: 1}; //empinfo 열에서 empno,empNo,pstnGbn 열의 값을 모두 표시 opyiond.Def.Row[\"empinfo\"] = {\"Merge\": \"empno,empNm,pstnGbn\"} ```",
              "see": [
                {
                  "label": "Span cell",
                  "url": "./span"
                },
                {
                  "label": "Spanned row",
                  "url": "/docs/props/row/spanned"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/merge.html"
          },
          {
            "cid": 484,
            "sid": "no-changed-2",
            "name": "no-changed",
            "label": "NoChanged",
            "data": {
              "body": "> 셀의 값이 변경되었을때 수정 상태를 변경 하지 않도록 설정합니다. > 값이 `1(true)`로 설정되어 있다면 셀의 값이 변경되어도 수정 상태를 변경하지 않습니다. > 수정 상태를 변경(`Changed`)하지 않지만 수정 관련된 이벤트는 발생합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|셀 값을 수정하면 수정 상태를 변경 (`default`)| |`1(true)`|셀 값을 수정해도 수정 상태를 변경하지 않음| ### Example ```javascript // 특정 셀의 값이 변경되어도 수정 상태를 변경하지 않도록 설정 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"NoChanged\", true); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/no-changed.html"
          },
          {
            "cid": 485,
            "sid": "no-color-3",
            "name": "no-color",
            "label": "NoColor",
            "data": {
              "body": "> 셀에 적용된 배경색이 무시됩니다. > 홀수/짝수행에 대한 배경색([AlternateColor](/docs/props/row/alternate-color)), 상태(입력/수정/삭제)및 선택, 편집불가 컬럼에 대한 색상이 무시됩니다. [Color](./color) 속성으로 통한 배경색도 적용되지 않게 할 수 있습니다.<br /> > `NoColor`가 적용되는 우선 순위는 셀 \\> 행 \\> 열입니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|기능 사용 안함 (`default`)| |`1`|모든 배경색 무시(단 Class속성을 통해 설정한 배경색을 적용)| |`2`|상태 및 선택에 대한 색상만 무시| |`3`|`Color` 설정 시 상태, `AlternateColor`, 편집불가에 대한 색상을 무시하고 무조건 `Color` 색상 적용 ### Example ```javascript //특정 셀에 모든 배경색을 무시하게 설정 var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSNoColor\"] = 1; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); ```",
              "see": [
                {
                  "label": "Alternate cfg",
                  "url": "/docs/props/cfg/alternate"
                },
                {
                  "label": "Color cell",
                  "url": "./color"
                },
                {
                  "label": "AlternateColor row",
                  "url": "/docs/props/row/alternate-color"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.2.0.14|`NoColor: 3` 동작 추가|"
            },
            "url": "docs/props/cell/no-color.html"
          },
          {
            "cid": 486,
            "sid": "number-sort-2",
            "name": "number-sort",
            "label": "NumberSort",
            "data": {
              "body": "> 셀의 데이터를 숫자형식으로 소팅할지 여부를 설정합니다. > 일반적으로 `Int, Float, Date Type`은 숫자형식으로, 그 외의 [Type](/docs/appx/type)은 문자형식으로 소팅이 이루어집니다. > 여기서 값을 `0(false)`으로 설정하면, Type과 무관하게 문자형식으로 소팅되고, `1(true)`로 설정시 숫자형식으로 소팅이 이루어집니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|문자형식의 소팅| |`1(true)`|숫자형식의 소팅| ### Example ```javascript //조회 데이터 내에서 속성 적용 (열이름: CLS) //특정 셀에 대해 숫자형식으로 소팅 { data:[ {... , \"CLSNumberSort\":\"1\" , ...} ] } ```",
              "see": [
                {
                  "label": "RawSort cell",
                  "url": "./raw-sort"
                },
                {
                  "label": "SortValue cell",
                  "url": "./sort-value"
                },
                {
                  "label": "CaseSensitive cell",
                  "url": "./case-sensitive"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/number-sort.html"
          },
          {
            "cid": 487,
            "sid": "number-strict-mode-2",
            "name": "number-strict-mode",
            "label": "NumberStrictMode",
            "data": {
              "body": "> 0(false)으로 설정 시 조회 시 숫자 타입(Int, Float)에 빈 값이나 숫자 형태가 아닌 경우 0으로 처리합니다. > 천단위 구분자 \",\"가 포함된 문자열 형태의 숫자를 입력하는 경우 숫자로 표시됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|숫자가 아닌 데이터에 대해 엄격하게 검사하지 않음. 숫자가 아닌 경우 NaN 대신 0으로 표시| |`1(true)`|숫자 타입 셀에서 데이터의 타입에 대해 엄격하게 검사. 숫자형태가 아닌 경우 NaN으로 표시 (`default`)| ### Example ```javascript // 1. 메소드를 통해 특정 셀에 속성 적용 ( 열이름 : IntData ) sheet.setAttribute( sheet.getRowById(\"AR99\") , \"IntData\" , \"NumberStrictMode\" , false); // 2. 객체에 직접 접근해서 속성 적용 ( 열이름 : IntData ) var ROW = sheet.getRowById(\"AR10\"); ROW[\"IntDataNumberStrictMode\"] = false; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"IntData\"}); // 3. 조회 데이터 내에서 속성 적용 ( 열이름 : IntData ) { data:[ {... , \"IntDataNumberStrictMode\":false , ...} ] } ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.17|기능 추가|"
            },
            "url": "docs/props/cell/number-strict-mode.html"
          },
          {
            "cid": 488,
            "sid": "orig",
            "name": "orig",
            "label": "Orig",
            "data": {
              "body": "> 셀에 최초 로딩된 데이터를 담고 있습니다. > 해당 셀에 대한 최초 조회시 데이터를 알고자 할 때 확인 용도로 사용해 주세요. ### Type `string` ### Options |Value|Description| |-----|-----| |`Orig`|처음 로딩된 데이터| ### Example ```javascript //수정하기 전, 최초 데이터를 확인한다. var orgValue = sheet.getAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Orig\"); ```",
              "see": [
                {
                  "label": "revertCell method",
                  "url": "/docs/funcs/core/revert-cell"
                },
                {
                  "label": "revertRow method",
                  "url": "/docs/funcs/core/revert-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/orig.html"
          },
          {
            "cid": 489,
            "sid": "path",
            "name": "path",
            "label": "Path",
            "data": {
              "body": "> 열의 [Type](/docs/props/cell/type)이 `File`인 경우 파일을 다운받을 경로를 설정합니다. > `File` [Type](/docs/props/cell/type)을 사용하시는 경우 반드시 설정해야 정상적으로 다운로드 됩니다. > 해당 속성 혹은 [FilePath](/docs/props/cfg/export)가 설정된 경우에만 [File](/docs/appx/file-type-upload)타입인 셀에 데이터가 표시됩니다. > > 구분자를 포함하여 해당 셀의 파일들의 경로를 개별 설정할 수 있습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`| 파일을 다운받을 경로 | ### Example ```javascript //1. 메소드를 통해 속성 설정 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Path\", \"https://api.ibleaders.com/ibsheet/v8/samples/customer/files/\"); //2. 객체에 직접 접근해서 속성 설정(열이름이 CLS 로 가정) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSPath\"] = \"https://api.ibleaders.com/ibsheet/v8/samples/customer/files/\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성설정(열이름이 CLS 로 가정) { data:[ {... , \"CLS\":\"testFile.xlsx\", \"CLSPath\":\"https://api.ibleaders.com/ibsheet/v8/samples/customer/files/\" , ...} ] } //4. 개별 경로를 설정을 하는 경우 { data: [ { \"CLS\": \"testFile.xlsx;testFile2.xlsx\", \"CLSPath\": \"https://api.ibleaders.com/ibsheet/v8/samples/customer/files/;https://api.ibleaders.com/ibsheet/v8/samples/customer/files2/\" } ] } ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "File Type 업로드 appendix",
                  "url": "/docs/appx/file-type-upload"
                },
                {
                  "label": "Alias cell",
                  "url": "/docs/props/cell/Alias"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가||core|8.3.0.21|개별 설정 동작 개선|"
            },
            "url": "docs/props/cell/path.html"
          },
          {
            "cid": 490,
            "sid": "radio-icon-width",
            "name": "radio-icon-width",
            "label": "RadioIconWidth",
            "data": {
              "body": "> [RadioIcon](/docs/props/cell/radio-icon)속성을 통해서 라디오 아이콘을 커스텀 이미지로 설정하는 경우 이미지의 너비를 pixel단위로 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|라디오 아이콘 이미지의 너비 (pixel단위)| ### Example ```javascript //라디오 아이콘 이미지의 너비를 22px로 정의 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"RadioIcon\", \"|Off.gif|On.gif\" ); sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"RadioIconWidth\", 22); ```",
              "see": [
                {
                  "label": "RadioIcon cell",
                  "url": "/docs/props/cell/radio-icon"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/radio-icon-width.html"
          },
          {
            "cid": 491,
            "sid": "radio-icon-2",
            "name": "radio-icon",
            "label": "RadioIcon",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Radio`인 셀에서 `Radio` 아이콘을 다른 이미지나 Html 객체로 설정합니다. > 임의의 이미지를 라디오 아이콘으로 사용하고자 하는 경우에는, 언체크 이미지와 체크 이미지를 첫글자를 구분자로 하여 연결된 문자열로 설정하시면 됩니다. (ex:\"|OFF.gif|ON.gif\") > > 임의의 이미지를 체크박스 아이콘으로 사용할 때, 해당 열내의 셀이 편집불가([CanEdit](./can-edit))인 경우가 있다면 편집 불가일때의 이미지까지해서 총 4개의 이미지를 설정하시면 됩니다. (ex:\"|Off.gif|On.gif|OffReadOnly.gif|OnReadOnly.gif\") > > 여러개의 라디오 아이콘을 사용하고자 하는 경우에는 언체크 이미지와 체크이미지를 이어서 설정하시면 됩니다. (ex:\"|Off1.gif|On1.gif|Off2.gif|On2.gif|Off3.gif|On3.gif\") > > 그 외에 일반적인 숫자형식으로 아래 Options에서와 같이 기능을 설정하실 수 있습니다. ### Type `mixed`(`string` \\| `number` ) ### Options **숫자형식을 사용하는 경우** |Value|Description| |-----|-----| |`0`|기본적인 내장 라디오아이콘 이미지를 사용/ [Range](/docs/props/col/range)속성을 사용하는 경우 내장 체크박스아이콘 이미지를 사용(`default`) |`1`|내장 라디오 아이콘 이미지를 사용| |`2`|내장 체크박스 아이콘 이미지를 사용| |`3`|\\<input type=\"radio\">객체를 사용 / [Range](/docs/props/col/range)속성을 사용하는 경우 \\<input type=\"checkbox\">객체를 사용| |`4`|\\<input type=\"radio\">객체를 사용| |`5`|\\<input type=\"checkbox\">객체를 사용| |`6`|아이콘을 표시하지 않음| ***input 객체를 사용하는 경우 그렇지 않은 경우보다 성능이 느릴 수 있습니다.*** ### Example ```javascript //라디오 아이콘 대신 체크박스 아이콘을 사용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"RadioIcon\", \"2\"); //객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSRadioIcon\"] = \"2\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSRadioIcon\":\"2\" , ...} ] } ```",
              "see": [
                {
                  "label": "RadioIconWidth cell",
                  "url": "./radio-icon-width"
                },
                {
                  "label": "RadioUncheck cell",
                  "url": "./radio-uncheck"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/radio-icon.html"
          },
          {
            "cid": 492,
            "sid": "radio-uncheck-2",
            "name": "radio-uncheck",
            "label": "RadioUncheck",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Radio`인 셀에서, 한 번 클릭하여 선택한 아이템을 다시 클릭하여 체크해제 하게끔 허용할지 여부를 설정합니다. ### Type `Boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|체크해제를 허용하지 않음 (`default`) |`1(true)`|체크해제를 허용| ### Example ```javascript //체크 해제를 허용 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"RadioUncheck\", 1); ```",
              "see": [
                {
                  "label": "RadioIcon cell",
                  "url": "./radio-icon"
                },
                {
                  "label": "RadioIconWidth cell",
                  "url": "./radio-icon-width"
                },
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/radio-uncheck.html"
          },
          {
            "cid": 493,
            "sid": "radio-2",
            "name": "radio",
            "label": "Radio",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Bool`인 셀들 간에 같은 값을 부여한 값을 갖고 있는 셀들을 하나의 그룹으로 묶여서 한 행에서 같은 그룹 내에 한 셀만 체크 가능하게 합니다. ### ![Radio](/assets/imgs/radio.png \"같은 행에서 하나만 선택 가능\") ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|라디오처럼 하나로 묶을 그룹 인덱스| ### Example ```javascript //조회 데이터 내에서 설정 적용 //CLS1,CLS2,CLS3 열에서 단일 셀만 선택 가능하게 끔 설정 { data:[ {..., \"CLS1Radio\":\"1\", \"CLS2Radio\":\"1\", \"CLS3Radio\":\"1\" ...}, ... ] } ```",
              "see": [
                {
                  "label": "BoolGroup cell",
                  "url": "./bool-group"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/radio.html"
          },
          {
            "cid": 494,
            "sid": "raw-sort-2",
            "name": "raw-sort",
            "label": "RawSort",
            "data": {
              "body": "> 소팅시 [Format](/docs/props/cell/format) 이 적용된 데이터를 기준으로 소팅할지 여부를 설정합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|열의 `Type` 과 `Format`을 적용한 소팅 (`default`)| |`1`|`Format`을 적용하지 않은 순수 데이터를 기준으로 한 소팅 `Enum`형식인 경우 `Key`를 기준으로 소팅| |`2`|`Enum`타입에서 `Enum`과 `EnumKey`의 입력순서(배열순서)로 정렬| ### Example ```javascript //조회 데이터 내에서 속성 적용 (열이름: CLS) //포맷이 적용되지 않은 순수 데이터를 기준으로 소팅 { data:[ {... , \"CLSRawSort\": 1, ...} ] } ```",
              "see": [
                {
                  "label": "NumberSort cell",
                  "url": "./number-sort"
                },
                {
                  "label": "SortValue cell",
                  "url": "./sort-value"
                },
                {
                  "label": "CaseSensitive cell",
                  "url": "./case-sensitive"
                },
                {
                  "label": "Format cell",
                  "url": "/docs/props/cell/format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/raw-sort.html"
          },
          {
            "cid": 495,
            "sid": "related-2",
            "name": "related",
            "label": "Related",
            "data": {
              "body": "> [Type](./type)이 [Enum](/docs/props/cell/enum)이나 [Radio](/docs/props/cell/radio) 인 열들 간에 연관성을 통해, 대분류/중분류/소분류와 같은 **관계형 콤보**를 설정합니다. > 자세한 사용 방법은 col [Related](/docs/props/col/related)속성을 확인해 주세요. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|자신의 상위 관계 열이름| ### Example ```javascript //Related 속성을 통해 대분류/중분류/소분류에 해당하는 콤보를 구성 //메소드를 통해 특정 셀에 속성 적용 (열이름: CLS3) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS3\", \"Related\", \"CLS1,CLS2\"); ```",
              "see": [
                {
                  "label": "Related col",
                  "url": "/docs/props/col/related"
                },
                {
                  "label": "Enum cell",
                  "url": "/docs/props/cell/enum"
                },
                {
                  "label": "EnumKeys cell",
                  "url": "/docs/props/cell/enum-keys"
                },
                {
                  "label": "Clear cell",
                  "url": "/docs/props/cell/clear"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/related.html"
          },
          {
            "cid": 496,
            "sid": "result-mask-2",
            "name": "result-mask",
            "label": "ResultMask",
            "data": {
              "body": "> 셀 편집 종료시 입력된 글자를 검사할 자바스크립트 정규식을 설정합니다. > 정규식 검사에 대한 로직은 [EditMask](/docs/props/cell/edit-mask)와 동일합니다. > > 정규식에 맞지 않은 글자가 입력되었을 시에는 [ResultMessage](/docs/props/cell/result-message)속성으로 설정한 메세지가 화면에 보여집니다. > [onResultMask](/docs/events/on-result-mask)이벤트의 리턴값을 통해 잘못된 값이 입력되었을때 후속 처리에 대한 부분을 설정하실 수 있습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|자바스크립트 정규식 문자| ### Example ```javascript //조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ //이메일 주소만 입력 가능 {... ,CLSResultMask:\"^[\\\\w\\\\.\\\\+%-]+@[A-Za-z0-9\\\\.-]+\\\\.[A-Za-z]{2,6}$\", CLSResultText:\"이메일 주소를 확인해 주세요.\", ...} ] } ```",
              "see": [
                {
                  "label": "ResultText cell",
                  "url": "/docs/props/cell/result-text"
                },
                {
                  "label": "ResultMessage cell",
                  "url": "/docs/props/cell/result-message"
                },
                {
                  "label": "Error cell",
                  "url": "/docs/props/cell/error"
                },
                {
                  "label": "EditMask cell",
                  "url": "/docs/props/cell/edit-mask"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/result-mask.html"
          },
          {
            "cid": 497,
            "sid": "result-message-time-2",
            "name": "result-message-time",
            "label": "ResultMessageTime",
            "data": {
              "body": "> [ResultMessage](./result-message)가 보여질 시간(term)을 설정합니다.(ms단위) > 설정한 시간만큼 메세지가 보여지고 자동으로 사라집니다. > 이 속성을 설정하지 않으면 \"확인\"버튼을 누를 때까지 메세지가 보여지게 됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|메세지가 보여실 시간(ms단위)| ### Example ```javascript //이메일 주소 확인 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"ResultMask\", \"^[\\\\w\\\\.\\\\+%-]+@[A-Za-z0-9\\\\.-]+\\\\.[A-Za-z]{2,6}$\"); sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"ResultMessage\", \"이메일 주소를 확인해 주세요.\"); sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"ResultMessageTime\", 800); ```",
              "see": [
                {
                  "label": "ResultText cell",
                  "url": "./result-text"
                },
                {
                  "label": "ResultMessage cell",
                  "url": "./result-message"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/result-message-time.html"
          },
          {
            "cid": 498,
            "sid": "result-message-2",
            "name": "result-message",
            "label": "ResultMessage",
            "data": {
              "body": "> [ResultMask](./result-mask)에 위배되는 내용이 입력시 DIV 레이어 팝업으로 보여질 내용을 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|잘못된 내용이 입력시 보여질 경고문 내용| ### Example ```javascript //이메일 주소 확인 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"ResultMask\", \"^[\\\\w\\\\.\\\\+%-]+@[A-Za-z0-9\\\\.-]+\\\\.[A-Za-z]{2,6}$\"); sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"ResultMessage\", \"이메일 주소를 확인해 주세요.\") sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\",\"ResultMessageTime\", 800) ```",
              "see": [
                {
                  "label": "ResultText cell",
                  "url": "./result-text"
                },
                {
                  "label": "ResultMessageTime cell",
                  "url": "./result-message-time"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/result-message.html"
          },
          {
            "cid": 499,
            "sid": "result-text-2",
            "name": "result-text",
            "label": "ResultText",
            "data": {
              "body": "> [ResultMask](./result-mask)에 위배되는 내용이 입력시 alert으로 보여줄 내용을 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|잘못된 내용이 입력시 보여질 경고문 내용| ### Example ```javascript //특정 셀에서 ResultMask 속성 위배시 메세지 설정 var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSResultText\"] = \"숫자만 입력 가능합니다.\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); ```",
              "see": [
                {
                  "label": "ResultMask cell",
                  "url": "./result-mask"
                },
                {
                  "label": "ResultMessage cell",
                  "url": "./result-message"
                },
                {
                  "label": "EditMask cell",
                  "url": "./edit-mask"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/result-text.html"
          },
          {
            "cid": 500,
            "sid": "row-span",
            "name": "row-span",
            "label": "RowSpan",
            "data": {
              "body": "> 특정 셀을 기준으로 아래쪽으로 합쳐질 셀의 개수를 설정합니다. > `col`에 [Spanned](/docs/props/col/spanned):`1` 이 설정되어 있어야 사용할 수 있습니다. > Html Table객체에 RowSpan과 유사합니다. > [DataMerge cfg](/docs/props/cfg/data-merge)과 [HeaderMerge cfg](/docs/props/cfg/header-merge)이 우선 적용 됩니다. > [setMergeRange method](/docs/funcs/core/set-merge-range) 사용시 동적으로 병합할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|열 내에서 아래로 병합할 셀의 개수| ### Example ```javascript //Spanned가 설정되어 있어야 함. options.Def.Col = {Spanned: 1}; //조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ //아래로 3개 셀을 병합함 {... ,CLSRowSpan: 3 ...} ] } ```",
              "see": [
                {
                  "label": "Span cell",
                  "url": "./span"
                },
                {
                  "label": "Spanned col",
                  "url": "/docs/props/col/spanned"
                },
                {
                  "label": "DataMerge cfg",
                  "url": "/docs/props/cfg/data-merge"
                },
                {
                  "label": "HeaderMerge cfg",
                  "url": "/docs/props/cfg/header-merge"
                },
                {
                  "label": "setMergeRange method",
                  "url": "/docs/funcs/core/set-merge-range"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/row-span.html"
          },
          {
            "cid": 501,
            "sid": "selected-3",
            "name": "selected",
            "label": "Selected",
            "data": {
              "body": "> 셀을 선택하거나 선택여부를 확인 합니다. > [SelectingCells](/docs/props/cfg/selecting-cells)의 속성값이 `0(false)`이 아닌 경우에 사용하실 수 있습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|열 선택 해제| |`1(true)`|열 선택| ### Example ```javascript //특정 셀을 선택 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Selected\", 1); ```",
              "see": [
                {
                  "label": "Selected row",
                  "url": "/docs/props/row/selected"
                },
                {
                  "label": "SelectingCells cfg",
                  "url": "/docs/props/cfg/selecting-cells"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/selected.html"
          },
          {
            "cid": 502,
            "sid": "show-hint-3",
            "name": "show-hint",
            "label": "ShowHint",
            "data": {
              "body": "> 해당 셀에서 힌트기능을 사용할지 여부를 설정합니다. > 힌트는 셀의 너비가 좁아 내용의 일부가 안 보일 때, 마우스 커서가 올라간 셀에 한해 일시적으로 셀의 너비를 늘려 안보이던 뒷 내용을 보여주는 기능입니다. > 이 기능은 체크박스나 라디오 형태의 열에서는 작동하지 않습니다. ### ![힌트활성화](/assets/imgs/hint1.png \"마우스 커서가 셀에 올라갔을때 힌트를 통해 감춰진 부분이 보여짐\") ### Type `number` ### Options |Value|Description| |-----|-----| |`0`|힌트 기능을 사용안함| |`1`|셀의 크기가 작아 셀의 내용의 일부만 보여질때 동작 (`default`)| |`2`|1번 옵션과 더불어 스크롤이 있는 시트에서 셀이 하단에 있어 내용의 아래부분이 안보여질때 힌트 동작| |`3`|일반적으로는 힌트 기능이 동작하지 않고 [onShowHint](/docs/events/on-show-hint) 이벤트를 통해서만 동작(이벤트를 통해 힌트에 어떤 내용이 보여지게 할지 설정 가능)| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"ShowHint\", \"0\"); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSShowHint\"] = 2; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... ,\"CLSShowHint\": \"0\", ...} ] } ```",
              "see": [
                {
                  "label": "HintValue cell",
                  "url": "./hint-value"
                },
                {
                  "label": "ShowHint row",
                  "url": "/docs/props/row/show-hint"
                },
                {
                  "label": "onShowHint event",
                  "url": "/docs/events/on-show-hint"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/show-hint.html"
          },
          {
            "cid": 503,
            "sid": "size-ignore-decimal-sep-2",
            "name": "size-ignore-decimal-sep",
            "label": "SizeIgnoreDecimalSep",
            "data": {
              "body": "> 입력된 문자열이 숫자형인 경우, 설정된 열에 입력 가능한 글자 수에서 자릿수 구분자와 소수점 구분자의 값들을 글자 수에서 제외하는 기능입니다. > Locale메세지 파일(ko.js,en.js등)에서 자릿수 구분자는 `Format.GroupSeparator`, 소수점 구분자는 `Format.DecimalSeparator`로 설정되어 있습니다. > **<mark>주의</mark> : Col 혹은 Cell에 `Size` 속성이 설정되어 있어야 해당 기능이 동작합니다.** ### Type `boolean` ### Options |Value|Description| |-----|-----| |`boolean`|입력된 데이터에서 자릿수 구분자와 소수점 구분자를 이용하여 숫자형인지 판단하고, 숫자형 데이터일 경우 구분자 문자들을 입력가능한 글자수에서 제외 여부 (`Int`, `Float` type: `default:1(true)`, 그 외의 type: `default:0(false)`) 전 세계에서 사용되는 자릿수 구분자(`Format.GroupSeparator`) 문자: `,`, `.`, ` `, `'` 전 세계에서 사용되는 소수점 구분자(`Format.DecimalSeparator`) 문자: `,`, `.`| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"SizeIgnoreDecimalSep\", true); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSSizeIgnoreDecimalSep\"] = true; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSSizeIgnoreDecimalSep\": true ...} ] } ```",
              "see": [
                {
                  "label": "Size cell",
                  "url": "/docs/props/cell/size"
                },
                {
                  "label": "UnicodeByteMode cfg",
                  "url": "/docs/props/cfg/unicode-byte-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.15|기능 추가|"
            },
            "url": "docs/props/cell/size-ignore-decimal-sep.html"
          },
          {
            "cid": 504,
            "sid": "size-3",
            "name": "size",
            "label": "Size",
            "data": {
              "body": "> 셀에 입력가능한 글자수를 설정합니다. > [cfg.UnicodeByteMode](/docs/props/cfg/unicode-byte-mode)를 설정할 경우 한글의 바이트 수를 계산하여 입력을 제한합니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|입력가능한 글자수| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Size\", 20); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSSize\"] = 15; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSSize\": 10, ...} ] } ```",
              "see": [
                {
                  "label": "Size col",
                  "url": "/docs/props/col/size"
                },
                {
                  "label": "SizeIgnoreDecimalSep cel",
                  "url": "/docs/props/cell/size-ignore-decimal-sep"
                },
                {
                  "label": "UnicodeByteMode cfg",
                  "url": "/docs/props/cfg/unicode-byte-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/size.html"
          },
          {
            "cid": 505,
            "sid": "sort-value",
            "name": "sort-value",
            "label": "SortValue",
            "data": {
              "body": "> 셀의 원래 값 대신 소팅시 사용할 값을 설정합니다. > 특히 타입이 Html이나 버튼 같이 편집이 불가능한 셀에 유용하게 사용하실 수 있습니다. > 이 속성은 그룹 기능 사용 시 그룹핑 기준으로 사용 됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|소팅이 이루어질때 사용될 기준 문자| ### Example ```javascript //조회 데이터 내에서 속성 적용 (열이름: CLS) //특정 셀은 오름차순 소팅시 최상단에 올라오게 설정 { data:[ {... ,\"CLSSortValue\": \"00000\" , ...} ] } ```",
              "see": [
                {
                  "label": "Group cfg",
                  "url": "/docs/props/cfg/group"
                },
                {
                  "label": "NumberSort cell",
                  "url": "./number-sort"
                },
                {
                  "label": "RawSort cell",
                  "url": "./raw-sort"
                },
                {
                  "label": "CaseSensitive cell",
                  "url": "./case-sensitive"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/sort-value.html"
          },
          {
            "cid": 506,
            "sid": "span",
            "name": "span",
            "label": "Span",
            "data": {
              "body": "> 특정 셀을 기준으로 오른쪽으로 합쳐질 셀의 개수를 설정합니다. > `row`에 [Spanned](/docs/props/row/spanned):`1` 이 설정되어 있어야 사용할 수 있습니다. > Html Table객체에 ColSpan과 유사합니다. > [DataMerge cfg](/docs/props/cfg/data-merge)과 [HeaderMerge cfg](/docs/props/cfg/header-merge)이 우선 적용 됩니다. > [setMergeRange method](/docs/funcs/core/set-merge-range) 사용시 동적으로 병합할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|행 내에서 오른쪽으로 합쳐질 셀 개수| ### Example ```javascript //Spanned가 설정되어 있어야 함. options.Def.Row = {Spanned: 1}; //조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ //오른쪽으로 3개 셀을 병합함 {... ,CLSSpan: 3 ...} ] } ```",
              "see": [
                {
                  "label": "DataMerge cfg",
                  "url": "/docs/props/cfg/data-merge"
                },
                {
                  "label": "HeaderMerge cfg",
                  "url": "/docs/props/cfg/header-merge"
                },
                {
                  "label": "RowSpan cell",
                  "url": "./row-span"
                },
                {
                  "label": "Spanned row",
                  "url": "/docs/props/row/spanned"
                },
                {
                  "label": "setMergeRange method",
                  "url": "/docs/funcs/core/set-merge-range"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/span.html"
          },
          {
            "cid": 507,
            "sid": "spinner-max-2",
            "name": "spinner-max",
            "label": "SpinnerMax",
            "data": {
              "body": "> [SpinnerVisible](./spinner-visible)을 사용하는 셀에서 화살표를 통한 입력 시 최댓값을 설정할 수 있습니다. > > 추가적으로 [SpinnerStep](./spinner-step), [SpinnerMin](./spinner-min)을 통해 input의 step, min를 설정 할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|편집 시 입력 값의 최댓값| ### Example ```javascript options.cells = [ ... {Type: \"Int\", Name: \"Qty\", SpinnerVisible: true}, ... ]; var data = [ {Qty: 10, QtySpinnerMax: 100000}, {Qty: 20, QtySpinnerMax: 200000}, ] ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "SpinnerVisible",
                  "url": "./spinner-visible"
                },
                {
                  "label": "SpinnerStep",
                  "url": "./spinner-step"
                },
                {
                  "label": "SpinnerMin",
                  "url": "./spinner-min"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.42|기능 추가|"
            },
            "url": "docs/props/cell/spinner-max.html"
          },
          {
            "cid": 508,
            "sid": "spinner-min-2",
            "name": "spinner-min",
            "label": "SpinnerMin",
            "data": {
              "body": "> [SpinnerVisible](./spinner-visible)을 사용하는 셀에서 화살표를 통한 입력 시 최솟값을 설정할 수 있습니다. > > 추가적으로 [SpinnerStep](./spinner-step), [SpinnerMax](./spinner-Max)을 통해 input의 step, max를 설정 할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|편집 시 입력 값의 최솟값| ### Example ```javascript options.cells = [ ... {Type: \"Int\", Name: \"Qty\", SpinnerVisible: true}, ... ]; var data = [ {Qty: 10, QtySpinnerMin: 0}, {Qty: 20, QtySpinnerMin: -100}, ] ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "SpinnerVisible",
                  "url": "./spinner-visible"
                },
                {
                  "label": "SpinnerStep",
                  "url": "./spinner-step"
                },
                {
                  "label": "SpinnerMax",
                  "url": "./spinner-max"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.42|기능 추가|"
            },
            "url": "docs/props/cell/spinner-min.html"
          },
          {
            "cid": 509,
            "sid": "spinner-step-2",
            "name": "spinner-step",
            "label": "SpinnerStep",
            "data": {
              "body": "> [SpinnerVisible](./spinner-visible)을 사용하는 셀에서 입력 값의 증감 간격을 설정할 수 있습니다. > > 추가적으로 [SpinnerMax](./spinner-max), [SpinnerMax](./spinner-min)을 통해 input의 min, max를 설정 할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|편집 시 입력 값의 증감 간격| ### Example ```javascript options.cells = [ ... {Type: \"Int\", Name: \"Qty\", SpinnerVisible: true}, ... ]; var data = [ {Qty: 10, QtySpinnerStep: 10}, {Qty: 20, QtySpinnerStep: 20}, ] ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "SpinnerVisible",
                  "url": "./spinner-visible"
                },
                {
                  "label": "SpinnerMax",
                  "url": "./spinner-max"
                },
                {
                  "label": "SpinnerMin",
                  "url": "./spinner-min"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.42|기능 추가|"
            },
            "url": "docs/props/cell/spinner-step.html"
          },
          {
            "cid": 510,
            "sid": "spinner-visible-2",
            "name": "spinner-visible",
            "label": "SpinnerVisible",
            "data": {
              "body": "> [Type](/docs/appx/type)이 `Int`, `Float`인 셀에서 편집 시 화살표를 표시합니다. > 설정 시 input의 type이 number로 생성됩니다. > > 추가적으로 [SpinnerStep](./spinner-step), [SpinnerMax](./spinner-max), [SpinnerMax](./spinner-min)을 통해 input의 step, min, max를 설정 할 수 있습니다. > `제약사항` [EditMaskFunc](../cfg/edit-mask-func)가 적용된 셀에서는 동작하지 않습니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|편집 시 화살표를 표시하지 않음 (`default`)| |`1(true)`|편집 시 화살표를 표시| ### Example ```javascript options.cells = [ ... {Type: \"Int\", Name: \"Qty\", SpinnerVisible: false}, ... ]; var data = [ {Qty: 10, QtySpinnerVisible: true}, {Qty: 20, QtySpinnerVisible: false}, ] ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "SpinnerStep",
                  "url": "./spinner-step"
                },
                {
                  "label": "SpinnerMax",
                  "url": "./spinner-max"
                },
                {
                  "label": "SpinnerMin",
                  "url": "./spinner-min"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.42|기능 추가|"
            },
            "url": "docs/props/cell/spinner-visible.html"
          },
          {
            "cid": 511,
            "sid": "suggest-delay-2",
            "name": "suggest-delay",
            "label": "SuggestDelay",
            "data": {
              "body": "> [Suggest](/docs/props/cell/suggest)가 설정된 셀에서 글자를 입력시 [Suggest](/docs/props/cell/suggest)가 나타나기 전까지 딜레이를 ms단위로 설정합니다. > debounce와 유사한 개념으로 딜레이를 설정한 시간 중에 다른 키가 입력되는 경우, 다시 설정한 시간만큼을 기다린 후 [Suggest](/docs/props/cell/suggest)를 표시합니다. > 가령 입력하는 글자를 기준으로 `onSuggest()`이벤트에서 디비 조회를 하는 경우, 너무 빈번하게 서버를 호출하는 것을 방지할 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|입력 대기 시간 (`default: 0`)| ### Example ```javascript //3번째 행의 \"SaName\" 컬럼에서 Suggest표시 전에 300ms 대기 시간을 둔다. var row = sheet.getRowByIndex(3); row[\"SaNameSuggetDelay\"] = 300; ```",
              "see": [
                {
                  "label": "Suggest cell",
                  "url": "/docs/props/cell/suggest"
                },
                {
                  "label": "SuggestMin cell",
                  "url": "./suggest-min"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/suggest-delay.html"
          },
          {
            "cid": 512,
            "sid": "suggest-min-2",
            "name": "suggest-min",
            "label": "SuggestMin",
            "data": {
              "body": "> [Suggest](/docs/props/cell/suggest)을 통해 설정한 메뉴를 보여주기 위한 최소 글자수를 입력합니다. > 설정을 하지 않으면 한글자라도 입력시 바로 `Suggest`목록이 보여지게 됩니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`number`|최소 입력 글자수 (`default: 1`)| ### Example ```javascript //Suggest기능 사용 options.Cols = [ ... { Type: \"Text\", Suggest: \"|싼타페 현대|포터2 현대|그랜저 현대|카니발 기아...\", SuggestMin: 3,//세글자 이상 입력시 Suggest 기능 활성화 Name: \"CarName\", Width: 120 ... }, ... ]; ```",
              "see": [
                {
                  "label": "Suggest cell",
                  "url": "./suggest"
                },
                {
                  "label": "SuggestType cell",
                  "url": "./suggest-type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/suggest-min.html"
          },
          {
            "cid": 513,
            "sid": "suggest-type-2",
            "name": "suggest-type",
            "label": "SuggestType",
            "data": {
              "body": "> [Suggest](./suggest)속성 사용과 관련한 다양한 추가기능을 설정합니다. > 여러 기능을 `\",\"` 를 구분자로 하여 설정하실 수 있습니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`Replace`|`Suggest` 메뉴가 보여질때, 키보드 방향키를 이용하여 커서를 메뉴로 이동하면 셀값이 변경됩니다.| |`Start`|편집모드로 들어갈때 셀의 내용을 기준으로 `Suggest`메뉴를 보여줍니다.| |`StartAll`|편집모드로 들어갈때 셀의 내용과 무관하게 모든 `Suggest`메뉴를 보여줍니다.| |`Empty`|셀 값이 비어있을때 모든 `Suggest`메뉴를 보여줍니다.| |`All`|항상 모든 `Suggest`메뉴를 보여줍니다.| |`Case`|대소문자를 구분하여 `Suggest`메뉴를 보여줍니다.| |`Begin`|입력한 글자를 기준으로 `Suggest`메뉴의 아이템을 필터링할때,입력한 글자로 시작하는 아이템만 보여지게 됩니다.| |`Search`|입력한 글자를 포한하는 모든 아이템을 보여줍니다.| |`Complete`|`Suggest`메뉴의 리스트가 한개인 경우 자동으로 입력처리 합니다.| |`IgnoreSpace`|`Suggest`메뉴의 리스트에서 `Space`로 값이 선택되지 않도록 합니다.| |`Validate`|편집모드 종료 또는 셀 붙여넣기 시 셀의 값이 `Suggest`에 설정한 값과 일치하지 않으면 빈값으로 변경됩니다.| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"SuggestType\", \"Empty,Complete, Existing\"); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSSuggestType\"] = \"Empty,Complete,Existing\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSSuggestType\": \"Start,Search\", ...} ] } ```",
              "see": [
                {
                  "label": "Suggest cell",
                  "url": "./suggest"
                },
                {
                  "label": "SuggestMin cell",
                  "url": "./suggest-min"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.27|`IgnoreSpace` 기능 추가||core|8.3.0.1|`Validate` 기능 추가|"
            },
            "url": "docs/props/cell/suggest-type.html"
          },
          {
            "cid": 514,
            "sid": "suggest-2",
            "name": "suggest",
            "label": "Suggest",
            "data": {
              "body": "> 포탈 사이트 검색창의 자동완성과 마찬가지로 셀 안에 들어갈 내용 리스트를 정의해 두면, 입력시 리스트 중에 시작글자가 동일한 값이 필터링되어 보여집니다. > 첫번째 글자를 구분자로 하는 문자열로 설정합니다. ### ![Suggest](/assets/imgs/suggest.gif \"Suggest\") ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|첫글자를 구분자로 하는 문자열 ( ex: \"\\|우럭\\|광어\\|참돔\\|볼락\\|도다리\\|부시리\") ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Suggest\", \"|싼타페 현대|포터2 현대|그랜저 현대|카니발 기아...\"); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSSuggest\"] = \"|항공|철도|도로\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSSuggest\":\"|노인우대|장애인|아동|유아\" , ...} ] } ```",
              "see": [
                {
                  "label": "SuggestType cell",
                  "url": "./suggest-type"
                },
                {
                  "label": "SuggestMin cell",
                  "url": "./suggest-min"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/suggest.html"
          },
          {
            "cid": 515,
            "sid": "text-color-3",
            "name": "text-color",
            "label": "TextColor",
            "data": {
              "body": "> 지정한 셀에 글자색을 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|HEX형식 (ex:#FF00F0) rgb형식 (ex:rgb(244,200,40)| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"TextColor\", \"#FF0000\"); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSTextColor\"] = \"#AD4499\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSTextColor\": \"#0000FF\", ...} ] } ```",
              "see": [
                {
                  "label": "TextStyle cell",
                  "url": "./text-style"
                },
                {
                  "label": "TextSize cell",
                  "url": "./text-size"
                },
                {
                  "label": "TextFont cell",
                  "url": "./text-font"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/text-color.html"
          },
          {
            "cid": 516,
            "sid": "text-font-3",
            "name": "text-font",
            "label": "TextFont",
            "data": {
              "body": "> 특정 셀의 `font-family`를 설정합니다. > 여러개 폰트를 지정하거나 폰트에 띄어쓰기가 들어가는 경우에는 `single(')/double quotation(\")`으로 지정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|글자체| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"TextFont\", \"Dotum\"); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSTextFont\"] = \"'Nanum Gothic'\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSTextFont\":\"Gulim\" , ...} ] } ```",
              "see": [
                {
                  "label": "TextStyle cell",
                  "url": "/docs/props/cell/text-style"
                },
                {
                  "label": "TextColor cell",
                  "url": "/docs/props/cell/text-color"
                },
                {
                  "label": "TextSize cell",
                  "url": "/docs/props/cell/text-size"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/text-font.html"
          },
          {
            "cid": 517,
            "sid": "text-size-3",
            "name": "text-size",
            "label": "TextSize",
            "data": {
              "body": "> 지정한 셀의 글자 크기를 설정합니다. > `px, pt, em` 단위를 사용할 수 있으며, 단위를 지정하지 않으면 px기준으로 설정됩니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|크기숫자와 단위로 이루어진 문자열(ex: 25px)| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"TextSize\", \"12pt\"); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSTextSize\"] = \"20px\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSTextSize\": \"22px\", ...} ] } ```",
              "see": [
                {
                  "label": "TextStyle cell",
                  "url": "./text-style"
                },
                {
                  "label": "TextColor cell",
                  "url": "./text-color"
                },
                {
                  "label": "TextFont cell",
                  "url": "./text-font"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/text-size.html"
          },
          {
            "cid": 518,
            "sid": "text-style-3",
            "name": "text-style",
            "label": "TextStyle",
            "data": {
              "body": "> 지정한 셀의 글자에 대한 `font-weight, font-style, font-variant, text-decoration`를 숫자로 설정합니다. > 숫자를 서로 더해서 여러 속성을 동시에 적용하 실 수 있습니다. ### Type `number` ### Options |Value|Description| |-----|-----| |`1`| 굵게 Bold| |`2`| 기울임 Italic| |`4`| 밑줄 Underline| |`8`| 취소선 Strike| |`16`| 윗줄 Overline| |`32`| 작은 대문자 Small Caps| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"TextStyle\", 4); //1-1 특정 셀에 여러 속성 적용 (열이름: CLS, 굵게 + 기울임) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"TextStyle\", 1 + 2); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSTextStyle\"] = 5; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSTextStyle\":8 , ...} ] } ```",
              "see": [
                {
                  "label": "TextColor cell",
                  "url": "./text-color"
                },
                {
                  "label": "TextSize cell",
                  "url": "./text-size"
                },
                {
                  "label": "TextFont cell",
                  "url": "./text-font"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/text-style.html"
          },
          {
            "cid": 519,
            "sid": "tip-class-3",
            "name": "tip-class",
            "label": "TipClass",
            "data": {
              "body": "> 풍선도움말 객체에 원하는 css클래스를 적용하여 디자인을 설정 합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|풍선도움말 객체에 적용할 클레스 명| ### Example ```css <style> .RedBold{color:red;font-weight:700;} .deepblue{color:#020079;} </style> ``` ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"TipClass\", \"RedBold\"); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSTipClass\"] = \"deepblue\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSTipClass\": \"RedBold\", ...} ] } ```",
              "see": [
                {
                  "label": "Tip cell",
                  "url": "./tip"
                },
                {
                  "label": "Tip+Value cell",
                  "url": "./tip-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/tip-class.html"
          },
          {
            "cid": 520,
            "sid": "tip-position-3",
            "name": "tip-position",
            "label": "TipPosition",
            "data": {
              "body": "> 풍선도움말 객체의 위치나 크기,정렬을 설정합니다. ### Type `object` ### Options |Value|Description| |-----|-----| |`X`|풍선도움말의 X축 가감 위치| |`Y`|풍선도움말의 Y축 가감 위치| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"TipPosition\", {X:0, Y:-20}); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSTipPosition\"] = {X:-30}; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSTipPosition\": {Y:210}, ...} ] } ```",
              "see": [
                {
                  "label": "Tip cell",
                  "url": "./tip"
                },
                {
                  "label": "TipClass cell",
                  "url": "./tip-class"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/tip-position.html"
          },
          {
            "cid": 521,
            "sid": "tip-value-2",
            "name": "tip-value",
            "label": "Tip+Value",
            "data": {
              "body": "> 셀의 내용이 특정값일때 풍선도움말로 보여줄 문자를 설정합니다. > 가령 TipY:\"선택하셨습니다\", TipN:\"취소하셨습니다.\" 식으로 Tip 과 뒤에 Value를 결합한 속성명으로 보여질 문자를 설정합니다. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|풍선도움말에 보여질 문자열| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"TipAA\", \"심사기준을 확인해 주세요.\"); sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"TipBB\", \"진행율을 확인해 주세요.\"); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSY\"] = \"선택됨\"; ROW[\"CLSN\"] = \"취소됨\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLS0\":\"반려\",\"CLS1\":\"확인중\",\"CLS2\":\"진행중\",\"CLS3\":\"완료됨\", ...} ] } ```",
              "see": [
                {
                  "label": "Tip cell",
                  "url": "./tip-value"
                },
                {
                  "label": "TipPosition cell",
                  "url": "./tip-position"
                },
                {
                  "label": "TipClass cell",
                  "url": "./tip-class"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/tip-value.html"
          },
          {
            "cid": 522,
            "sid": "tip-3",
            "name": "tip",
            "label": "Tip",
            "data": {
              "body": "> 셀 위에 마우스 커서 오버시 풍선도움말을 표시할지 여부와 표시될 내용을 설정 합니다. > 기본적으로 html태그를 사용하여 상세한 내용을 표시할 수 있으나, cfg의 [StandardTip](/docs/props/cfg/standard-tip)의 값이 `1(true)`인 경우에는 브라우저의 내장 툴팁을 사용하게 되어 html태그를 표현할수 없습니다. ### Type `mixed`( `boolean` \\| `string` ) ### Options |Value|Description| |-----|-----| |`0(false)`|풍선도움말 사용 안함| |`1(true)`|풍선도움말 사용| |`string`|풍선도움말에서 표시 될 내용 설정| ### Example ```javascript //1. 메소드를 통해 특정 셀에 속성 적용 (열이름: CLS) sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Tip\", 0); //2. 객체에 직접 접근해서 속성 적용 (열이름: CLS) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSTip\"] = 1; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSTip\":\"작업 시작일과 종료일을 입력해 주세요.\" , ...} ] } ```",
              "see": [
                {
                  "label": "Tip+Value cell",
                  "url": "./tip-value"
                },
                {
                  "label": "TipClass cell",
                  "url": "./tip-class"
                },
                {
                  "label": "StandardTip cfg",
                  "url": "/docs/props/cfg/standard-tip"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/tip.html"
          },
          {
            "cid": 523,
            "sid": "type-2",
            "name": "type",
            "label": "Type",
            "data": {
              "body": "> 셀이 갖고있는 데이터 유형을 의미합니다. > 일반적인 텍스트나 숫자(정수,실수) 체크박스, 드랍다운리스트 와 같은 타입이 존재합니다. > 자세한 내용은 [Type appendix](/docs/appx/type)를 참고하세요. ### Type `string` ### Options |Value|Description| |-----|-----| |`string`|`Text,Int,Float,Date,Bool,Enum` 등 정해진 문자열| ### Example ```javascript //1. 메소드를 통해 특정 셀의 타입을 변경 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"AMT\", \"Type\", \"Float\"); //2. 객체에 직접 접근해서 타입변경 (CLS열의 타입을 \"Date\"로 변경) var ROW = sheet.getRowById(\"AR10\"); ROW[\"CLSType\"] = \"Date\"; //변경내용 확인 sheet.refreshCell({row:ROW, col:\"CLS\"}); //3. 조회 데이터 내에서 타입 변경 { data:[ {... \"CLS\":\"20171225\", \"CLSType\": \"Date\", ...} ] } ```",
              "see": [
                {
                  "label": "Type appendix",
                  "url": "/docs/appx/type"
                },
                {
                  "label": "Type col",
                  "url": "/docs/props/col/type"
                },
                {
                  "label": "getType method",
                  "url": "/docs/funcs/core/get-type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/type.html"
          },
          {
            "cid": 524,
            "sid": "uncheck-2",
            "name": "uncheck",
            "label": "Uncheck",
            "data": {
              "body": "> [Type](./type)이 `Bool` 인 셀이 여러 개 있을때, 한 행 내에서 하나의 셀만 체크 가능하게([Radio속성](./radio))하거나, 한 열 내에서 하나의 셀만 체크하게([BoolGroup속성](./bool-group))하는 기능이 있는데, 이러한 기능을 사용시 체크된 상태에서 다시 클릭시 체크 해제를 허용할지 여부를 설정합니다. ### ![Radio](/assets/imgs/radio.png \"같은 행에서 하나만 선택 가능\") ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|체크 해제를 허용 안함| |`1(true)`|체크 해제를 허용 (`default`)| ### Example ```javascript //한번 체크하고 나면 그룹내에서 체크 해제가 불가능하게 설정 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"Uncheck\", 0); ```",
              "see": [
                {
                  "label": "Radio cell",
                  "url": "./radio"
                },
                {
                  "label": "BoolGroup cell",
                  "url": "./bool-group"
                },
                {
                  "label": "Type cell",
                  "url": "./type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/uncheck.html"
          },
          {
            "cid": 525,
            "sid": "v-align-3",
            "name": "v-align",
            "label": "VAlign",
            "data": {
              "body": "> 셀 안에 문자열 상하 정렬을 설정합니다. > 좌우 정렬과 관련해서는 [Align](./align)속성을 참고하세요. ### Type `string` ### Options |Value|Description| |-----|-----| |`Top`|문자열 상단 정렬| |`Middle`|문자열 가운데 정렬| |`Bottom`|문자열 하단 정렬| ### Example ```javascript //특정 셀의 문자열을 상단 정렬로 설정 sheet.setAttribute(sheet.getRowById(\"AR99\"), \"CLS\", \"VAlign\", \"Top\", 1); ```",
              "see": [
                {
                  "label": "Align cell",
                  "url": "./align"
                },
                {
                  "label": "VAlign row",
                  "url": "/docs/props/row/v-align"
                },
                {
                  "label": "VAlign col",
                  "url": "/docs/props/col/v-align"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/v-align.html"
          },
          {
            "cid": 526,
            "sid": "visible-3",
            "name": "visible",
            "label": "Visible",
            "data": {
              "body": "> 셀 데이터의 보임/감춤 여부를 설정합니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|감춰짐| |`1(true)`|보임| ### Example ```javascript // 첫번째행 \"CLS\" 컬럼에 해당하는 셀의 데이터를 감춘다. sheet.setAttribute(sheet.getRowById(\"AR1\"), \"CLS\", \"Visible\", 0, 1); //조회 데이터에서 특정셀을 감춘다. {\"data\":[ ... {\"ColName1Visible\": 0, \"ColName1\": \"Value1\", \"ColName2\": \"Value2\", ...}, ... ]} ```",
              "see": [
                {
                  "label": "Visible row",
                  "url": "/docs/props/row/visible"
                },
                {
                  "label": "Visible col",
                  "url": "/docs/props/col/visible"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/visible.html"
          },
          {
            "cid": 527,
            "sid": "wrap-3",
            "name": "wrap",
            "label": "Wrap",
            "data": {
              "body": "> 셀에 내용이 많아 뒷부분이 안보여질때, 줄넘김 기능 사용 여부를 설정합니다. > 줄넘김이 이루어지는 경우 행의 높이가 증가하게 됩니다. > 일반적으로 `Text` 타입에서 사용하며, `Radio` 타입에서도 사용하실 수 있습니다. > [Lines 타입](/docs/appx/type) 컬럼에서는 `default: 1(true)`로 설정됩니다. ### Type `boolean` ### Options |Value|Description| |-----|-----| |`0(false)`|줄넘김 사용 안함 (`default`)| |`1(true)`|줄넘김 사용 (`컬럼의 Type이 Lines인 경우 default: 1(true)`)| ### Example ```javascript //조회 데이터 내에서 속성 적용 (열이름: CLS) { data:[ {... , \"CLSWrap\": 1, ...} ] } ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/cell/wrap.html"
          }
        ]
      },
      {
        "gid": 5,
        "name": "props-event",
        "label": "Event",
        "children": [
          {
            "cid": 528,
            "sid": "on-change",
            "name": "on-change",
            "label": "OnChange",
            "data": {
              "body": "> 셀 값을 변경했을 때 셀 값과 편집된 셀값이 다를 경우 호출되는 `Json` 이벤트입니다. > `Json` 이벤트는 셀, 행, 열에서 선언될 수 있으며 적용되는 우선 순위는 **셀 > 행 > 열**입니다. > 예를 들어, 셀과 행 둘 다 선언했다면, 우선순위로 인해 행에 선언한 이벤트는 발생하지 않습니다. ### Syntax ```javascript function Handler(evtParam) { ... } // 행에 넣는 경우 var options = { ... Def: { Row: { ... OnChange: Handler, // 함수 호출이 아닌 문자열을 통한 간단한 로직 설정 가능 // ** 아래와 같은 예약어 사용 가능 // sheet(현재 시트 객체), // row(현재 이벤트가 호출된 셀의 데이터 로우 객체), // col(현재 이벤트가 호출된 열이름) ... } } ... }; // 열에 넣는 경우 var options = { ... Cols: [ { ... OnChange: Handler, ... } ... ] ... }; // 특정 셀에 넣는 경우 var data = [ { ... 열이름: \"\", 열이름OnChange: Handler, ... }, ... ]; // 특정 행에 넣는 경우 var data = [ { ... OnChange: Handler, ... }, ... ]; // 위에서 설정한 options 또는 data 객체를 시트 생성자의 인자로 넣습니다. IBSheet.create({ id: \"sheet\", el: \"Main\", options: options, data: data }); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|값이 변경된 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|값이 변경된 셀의 열이름| |event|`object`|이벤트에 대한 정보를 담고 있는 객체| ### Return *boolean* ### Example ```javascript /* 예시 1 열에 OnChange이벤트를 선언하는 경우 */ // 값이 변경된 경우 alert를 띄웁니다. function Handler(evtParam) { alert(\"변경된 값은\" + evtParam.sheet.getValue({row:evtParam.row,col:evtParam.col})+ \"입니다\"); } var options = { Cols: [ { Name: \"sCountry\", Type: \"Text\", OnChange: Handler } ... ] }; /* 예시 2 셀에 OnChange이벤트 선언하는 경우(시트에 사용될 데이터에 선언) */ var data = [ { \"sCountry\": \"한국\", sCountryOnChange: \"alert('변경되었습니다')\", }, ... ]; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/event/on-change.html"
          },
          {
            "cid": 529,
            "sid": "on-click-side",
            "name": "on-click-side",
            "label": "OnClickSide",
            "data": {
              "body": "> [Button](/docs/props/col/button) 또는 [Icon](/docs/props/col/icon)이 속성을 사용하는 셀에 만들어지는 버튼을 클릭시 호출되는 `Json` 이벤트 입니다. > `Json` 이벤트는 셀, 행, 열에서 선언될 수 있으며 적용되는 우선 순위는 **셀 > 행 > 열**입니다. > 예를 들어, 셀과 행 둘 다 선언했다면, 우선순위로 인해 행에 선언한 이벤트는 발생하지 않습니다. ***Icon이나 Button 속성의 값이 Check 인 경우, 이 이벤트 내에서 값을 얻어보면 변경 전에 값이 추출됩니다. 이는 이 이벤트의 발생 시점이 실제로 체크가 변경되기 보다 앞서있기 때문입니다. 따라서 \"Check\"를 사용하실 때는 얻은 값의 반대 값을 입력해 주어야 합니다.*** ### Syntax ```js function Handler(evtParam) { // ... } // 행에 넣는 경우 var options = { // ... Def: { Row: { // ... // 함수 호출이 아닌 문자열을 통한 간단한 로직 설정 가능 // ** 아래와 같은 예약어 사용 가능 // Sheet(현재 시트 객체), // Row(현재 이벤트가 호출된 셀의 데이터 로우 객체), // Value(현재 이벤트가 호출된 셀의 값), // Col(현재 이벤트가 호출된 열이름), // ex) 'Value && alert(\"Changed\")' OnClickSide: Handler, // ... } } // ... }; // 열에 넣는 경우 var options = { // ... Cols: [{ // ... OnClickSide: Handler, // ... } // ... ] // ... }; // 특정 셀에 넣는 경우 var data = [{ // ... '열이름': '', '열이름OnClickSide': Handler, // ... }, ... ]; // 특정 행에 넣는 경우 var data = [{ // ... OnClickSide: Handler, // ... }, // ... ]; // 위에서 설정한 options 또는 data 객체를 시트 생성자의 인자로 넣습니다. IBSheet.create({ id: 'sheet', el: 'Main', options: options, data: data }); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|클릭된 버튼/아이콘이 위치한 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|클릭된 버튼/아이콘이 위치한 셀의 열이름| |event|`object`|이벤트에 대한 정보를 담고 있는 객체| ### Return boolean ### Example ```js /** * [예시 1] * 열에 OnClickSide이벤트를 선언하는 경우 * */ // 셀 내에 위치한 오른쪽 버튼을 클릭시 http://www.ibsheet.com 페이지를 새창에서 띄웁니다. function Handler(evtParam) { window.open('http://www.ibsheet.com', '_blank'); } var options = { Cols: [{ Name: 'sCompany', Type: 'Text', Button: 'http://ibsheet.com/demo/images/11/s1.jpg', OnClickSide: Handler } // ... ] }; /** * [예시 2] * 셀에 OnClickSide이벤트 선언하는 경우(시트에 사용될 데이터에 선언) * */ var data = [{ sCompany: '시트', sCompanyOnClickSide: 'window.open(\"http://www.ibsheet.com\", \"_blank\")', }, // ... ]; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/event/on-click-side.html"
          },
          {
            "cid": 530,
            "sid": "on-click",
            "name": "on-click",
            "label": "OnClick",
            "data": {
              "body": "> 셀 클릭시 호출되는 `Json` 이벤트입니다. > `Json` 이벤트는 셀, 행, 열에서 선언될 수 있으며 적용되는 우선 순위는 **셀 > 행 > 열**입니다. > 예를 들어, 셀과 행 둘 다 선언했다면, 우선순위로 인해 행에 선언한 이벤트는 발생하지 않습니다. ### Syntax ```javascript function Handler(evtParam) { ... } // 행에 넣는 경우 var options = { ... Def: { Row: { ... OnClick: Handler, // 함수 호출이 아닌 문자열을 통한 간단한 로직 설정 가능 // ** 아래와 같은 예약어 사용 가능 // Sheet(현재 시트 객체), // Row(현재 이벤트가 호출된 셀의 데이터 로우 객체), // Value(현재 이벤트가 호출된 셀의 값), // Col(현재 이벤트가 호출된 열이름), // ex) \"Value && alert('Changed')\" ... } } ... }; // 열에 넣는 경우 var options = { ... Cols: [ { ... OnClick: Handler, ... } ... ] ... }; // 특정 셀에 넣는 경우 var data = [ { ... 열이름: \"\", 열이름OnClick: Handler, ... }, ... ]; // 특정 행에 넣는 경우 var data = [ { ... OnClick: Handler, ... }, ... ]; // 위에서 설정한 options 또는 data 객체를 시트 생성자의 인자로 넣습니다. IBSheet.create({ id: \"sheet\", el: \"Main\", options: options, data: data }); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|클릭된 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|클릭된 셀의 열이름| |event|`object`|이벤트에 대한 정보를 담고 있는 객체| ### Return boolean ### Example ```javascript /* 예시 1 열에 OnClick이벤트를 선언하는 경우 */ // PCount 열의 셀을 클릭시 해당 셀의 값을 sProduct 열의 셀의 값과 곱하여 그 결과를 sTotal 열의 셀에 설정합니다. function Handler(evtParam) { evtParam.sheet.setValue({row: evtParam.row, col: \"sTotal\", val: evtParam.sheet.getValue({row: evtParam.row,col: evtParam.col}) * evtParam.sheet.getValue({row: evtParam.row,col: \"sProduct\"}), render:1}); } var options = { Cols: [ { Name: \"PCount\", Type: \"Int\", OnClick: Handler } ... ] }; /* 예시 2 셀에 OnClick이벤트 선언하는 경우(시트에 사용될 데이터에 선언) */ var data = [ { \"PCount\": \"5\", PCountOnClick: \"Sheet.setValue({row: Row, col: 'sTotal', val: Sheet.getValue({row: Row, col: Col}) * Sheet.getValue({row: Row, col: 'sProduct'}), render:1})\", }, ... ]; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/event/on-click.html"
          },
          {
            "cid": 531,
            "sid": "on-same",
            "name": "on-same",
            "label": "OnSame",
            "data": {
              "body": "> 셀 값을 변경했을 때 셀 값과 편집된 셀값이 같을 경우 호출되는 `Json` 이벤트입니다. > `Json` 이벤트는 셀, 행, 열에서 선언될 수 있으며 적용되는 우선 순위는 **셀 > 행 > 열**입니다. > 예를 들어, 셀과 행 둘 다 선언했다면, 우선순위로 인해 행에 선언한 이벤트는 발생하지 않습니다. ### Syntax ```javascript function Handler(evtParam) { ... } // 행에 넣는 경우 var options = { ... Def: { Row: { ... OnSame: Handler, // 함수 호출이 아닌 문자열을 통한 간단한 로직 설정 가능 // ** 아래와 같은 예약어 사용 가능 // Sheet(현재 시트 객체), // Row(현재 이벤트가 호출된 셀의 데이터 로우 객체), // Value(현재 이벤트가 호출된 셀의 값), // Col(현재 이벤트가 호출된 열이름), // ex) \"Value && alert('Same')\" ... } } ... }; // 열에 넣는 경우 var options = { ... Cols: [ { ... OnSame: Handler, ... } ... ] ... }; // 특정 셀에 넣는 경우 var data = [ { ... 열이름: \"\", 열이름OnSame: Handler, ... }, ... ]; // 특정 행에 넣는 경우 var data = [ { ... OnSame: Handler, ... }, ... ]; // 위에서 설정한 options 또는 data 객체를 시트 생성자의 인자로 넣습니다. IBSheet.create({ id: \"sheet\", el: \"Main\", options: options, data: data }); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|편집 후에도 값이 이전과 같은 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|편집 후에도 값이 이전과 같은 셀의 열이름| |event|`object`|이벤트에 대한 정보를 담고 있는 객체| ### Example ```javascript /* 예시 1 열에 OnSame이벤트를 선언하는 경우 */ // 값이 편집전과 같은 경우 alert를 띄우고 셀 배경을 빨간색으로 변경합니다. function Handler(evtParam) { alert(\"기존의 값과 결과가 같습니다.\"); evtParam.sheet.setCellStyle({row: evtParam.row, col: evtParam.col, attr: {Color:'red'}, render:1}); } var options = { Cols: [ { Name: \"sCountry\", Type: \"Text\", OnSame: Handler } ... ] }; /* 예시 2 셀에 OnSame이벤트 선언하는 경우(시트에 사용될 데이터에 선언) */ var data = [ { \"sCountry\": \"한국\", sCountryOnSame:\"alert('기존의 값과 결과가 같습니다.') || Sheet.setCellStyle({row: Row, col: Col, attr: {Color:'red'}, render:1});\", }, ... ]; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/props/event/on-same.html"
          }
        ]
      }
    ]
  },
  {
    "gid": 4,
    "label": "Methods",
    "name": "funcs",
    "children": [
      {
        "cid": 532,
        "sid": "method",
        "name": "method",
        "label": "method 사용법 기초",
        "data": {
          "body": "> 시트가 제공하는 모든 메소드는 각 파라미터를 순서대로 설정하거나 하나의 `object` 형태로 설정할 수 있습니다. ### 파라미터 설정 방법 ```javascript //addRow 행추가 (next: 행위치, visible: 보임여부, focus: 포커스 이동여부, parent: 트리사용시 부모 행객체) //각 파라미터를 순서대로 설정 sheet.addRow(sheet.getFirstRow(), 1); //파라미터를 object 형태로 설정 sheet.addRow({visible: 1, focus: 1}); ```",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/funcs/method.html"
      },
      {
        "gid": 1,
        "name": "funcs-core",
        "label": "Core",
        "children": [
          {
            "cid": 533,
            "sid": "accept-changed-data",
            "name": "accept-changed-data",
            "label": "acceptChangedData",
            "data": {
              "body": "> 시트 내에 변경된 내용(입력, 수정, 삭제)을 적용 합니다. > 행의 상태가 `Added(입력)`, `Changed(수정)`인 행은 상태만 클리어되고, `Deleted(삭제)`인 행은 삭제 됩니다. > 인자로 [데이터 로우 객체](/docs/appx/row-object)를 지정하면 해당 행에 대해서만 적용 합니다. ### Syntax ```javascript void acceptChangedData( row ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***none*** ### Example ```javascript //저장 작업 완료 CallBack 함수 function SaveSuccessCallBack(data){ //수정한 내용을 모두 반영한다. sheet.acceptChangedData(); } ```",
              "see": [
                {
                  "label": "applySaveResult method",
                  "url": "./apply-save-result"
                },
                {
                  "label": "hasChangedData method",
                  "url": "./has-changed-data"
                },
                {
                  "label": "getChangedData method",
                  "url": "./get-changed-data"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/accept-changed-data.html"
          },
          {
            "cid": 534,
            "sid": "add-col",
            "name": "add-col",
            "label": "addCol",
            "data": {
              "body": "> 이미 생성된 시트에 동적으로 열을 추가합니다. > 여러 컬럼을 `add` 할시 `render` 인자를 `false` 로 하여 작업 후에는 `rerender` 를 무조건 호출하셔야 합니다. `Formula` 계산 반영이 필요한 경우에는 `calculate` 를 호출해주셔야 계산이 반영됩니다. ### Syntax ```javascript object addCol( name, section, pos, param, visible, render ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |name|`string`|<span class='required'>필수</span>|추가할 열이름| |section|`number`|<span class='optional'>선택</span>|추가될 영역 `0`:좌측 영역 `1`:가운데 영역 (`default`) `2`:우측영역| |pos|`number`|<span class='optional'>선택</span>|section 내에 위치 (0부터 시작, -1입력시 우측 끝 열) (`default: 0`)| |param|`object`|<span class='optional'>선택</span>|열의 속성 (ex : `{Type:\"Text\", Header:\"타이틀\", Width:120, CanEdit:0}` ) |visible|`boolean`|<span class='optional'>선택</span>|생성 후 화면에 `Visible` 여부 `0(false)`:감춤 (`default`) `1(true)`:보임| |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***object*** : 생성된 열 객체(name 인자에 이미 존재하는 열이름을 입력하는 경우 `null` 이 리턴됨) ### Example ```javascript // 가운데 영역 마지막 열으로 \"Name:EXT_SUBSUM\" 열을 추가 sheet.addCol( \"EXT_SUBSUM\", 1, -1, {Type:\"Int\",Header:\"중간합계\",Width:200,CanEdit:1,Color:\"#DADADA\"}, true ); // render 인자 false for (var i = 0; i < 50; i++) { sheet.addCol( \"EXT_SUBSUM\" + i, 1, -1, {Type:\"Int\",Header:\"중간합계\",Width:200,CanEdit:1,Color:\"#DADADA\"}, true, false ); } sheet.rerender(); ```",
              "see": [
                {
                  "label": "addRow method",
                  "url": "./add-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.17|`render` 인자 추가|"
            },
            "url": "docs/funcs/core/add-col.html"
          },
          {
            "cid": 535,
            "sid": "add-formula",
            "name": "add-formula",
            "label": "addFormula",
            "data": {
              "body": "> 특정 행, 열, 셀에 포뮬러를 추가합니다. > `row`와 `col`이 없는 경우 전체 데이터에 포뮬러를 추가합니다. > 해당 기능 사용 시 [CanFormula](/docs/props/row/can-formula)가 자동적으로 true로 설정됩니다. > [CalcOrder](/docs/props/row/calc-order)에 설정한 포뮬러가 순차적으로 추가됩니다. > 자세한 내용은 7장 [Formula appendix](/docs/appx/formula)를 참고하세요. ### Syntax ```javascript boolean addFormula( formula, row, col, attr, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |formula|`function` \\| `string`|<span class='required'>필수</span>|추가하고자 하는 포뮬러| |row |`object` \\| `array[object]`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object) 또는 [데이터 로우 객체](/docs/appx/row-object) 배열| |col |`string`|<span class='optional'>선택</span>|열 이름| |attr|`string`|<span class='optional'>선택</span>|추가하려는 [attribute + Formula](/docs/props/col/attribute-formula)의 속성명| |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***boolean*** : 함수 정상 동작 여부. (인자값이 잘못되어 수행되지 못한 경우에는 false 리턴) ### Example ```javascript // 컬럼 추가 후 Formula 도 동적으로 추가 sheet.addCol( \"IntData\", 0, -1, {Type:\"Int\",Header:\"추가Int컬럼\",Width:200,CanEdit:1}, true); var colorFormula = function (param) { if (param.Row && param.Row[\"IntData\"] === 0) { return \"#FFD9FA\" } } // 데이터 행의 배경색을 조건에 따라 변경 sheet.addFormula(colorFormula, \"\", \"\", \"Color\"); //////////////////////////////////////////// var Formula = function (param) { if (param.Row[\"IntData\"] > 100) { return true } else { return false } } // IntData의 값에 따라 체크박스 열의 체크 변경 sheet.addFormula(Formula, \"\", \"CheckData\", \"\", true); //////////////////////////////////////////// // 시트의 첫번째 행의 TextData 열에 값을 IntData 열과 FloatData 열의 합으로 변경 sheet.addFormula(\"IntData + FloatData\", sheet.getFirstRow(), \"TextData\", \"\", true); ```",
              "see": [
                {
                  "label": "Formula appendix",
                  "url": "/docs/appx/formula"
                },
                {
                  "label": "CanFormula Row",
                  "url": "/docs/props/row/can-formula"
                },
                {
                  "label": "CalcOrder Row",
                  "url": "/docs/props/row/calc-order"
                },
                {
                  "label": "attribute+Formula col",
                  "url": "/docs/props/col/attributeformula"
                },
                {
                  "label": "FormulaRow col",
                  "url": "/docs/props/col/formula-row"
                },
                {
                  "label": "Formula col",
                  "url": "/docs/props/col/formula"
                },
                {
                  "label": "attribute+Formula cell",
                  "url": "/docs/props/cell/attribute-formula"
                },
                {
                  "label": "calculate method",
                  "url": "/docs/funcs/core/calculate"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.4|기능 추가|"
            },
            "url": "docs/funcs/core/add-formula.html"
          },
          {
            "cid": 536,
            "sid": "add-row",
            "name": "add-row",
            "label": "addRow",
            "data": {
              "body": "> 신규 행을 추가합니다. > 트리 기능을 사용시에는 `parent`인자를 지정해 줘야 원하는 레벨로 행을 추가할 수 있습니다. > `render:0` 을 사용하여 화면에 바로 반영하지 않고 `rerender` 호출을 통해 화면에 반영할 때, `Formula` 적용 계산이 필요하다면 `calculate` 함수를 호출해 주어야 `Formula`가 반영 됩니다. ### Syntax ```javascript object addRow( next, visible, focus, parent, init, render ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |next|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object) (지정한 행의 위에 신규 행이 생성됨. 값이 없으면 맨 마지막행에 생성)| |visible|`boolean`|<span class='optional'>선택</span>|생성 즉시 화면에 반영 여부 **생성된 행의 [Visible](/docs/props/row/visible) 값 설정** `0(false)`:감춤 `1(true)`:보임 (`default`)| |focus|`boolean`|<span class='optional'>선택</span>|생성 후 생성된 행으로 포커스 이동 여부 `0(false)`:포커스 이동 안함 `1(true)`:포커스 이동 (`default`)| |parent|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object) (트리 사용시 부모에 해당하는 행 지정)| |init|`object`|<span class='optional'>선택</span>|신규 행에 값/옵션 설정 객체| |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. **생성된 행의 [Visible](/docs/props/row/visible) 여부와는 관련 없음** `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***object*** : 생성된 [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript // 맨 위에 신규 행을 생성합니다. sheet.addRow( {\"next\":sheet.getFirstRow()} ) // 현재 포커스가 위치한 행의 위에 신규 행을 생성합니다. sheet.addRow( {\"next\":sheet.getFocusedRow()} ); // 현재 포커스가 위치한 행의 아래에 신규 행을 생성합니다.(focus 이동) sheet.addRow( {\"next\":sheet.getNextRow(sheet.getFocusedRow())}); // 트리 사용시 현재 포커스가 위치한 행의 아래에 같은 레벨의 신규 행을 생성합니다. var nextRow = sheet.getNextSiblingRow(sheet.getFocusedRow()); var parentRow = sheet.getFocusedRow().parentNode; sheet.addRow( {\"next\":nextRow, \"parent\":parentRow} ); // 현재 포커스가 된 행의 자식 노드로 신규 행을 추가합니다. // next 로 기준 행을 주지 않으면, 자식 노드 맨 마지막에 행이 추가됩니다. sheet.addRow({\"parent\":sheet.getFocusedRow()}); // 현재 포커스가 위치한 행의 위에 신규 행을 생성합니다. // 신규 행의 CONTRACTNO과 CARNO 열에 값을 설정합니다. // 신규 행의 배경 색상을 빨간색으로 설정합니다. sheet.addRow({\"next\":sheet.getFocusedRow(), \"init\":{\"CONTRACTNO\":\"S155\", \"CARNO\":\"1234123\", Color:\"red\"}}); ``` ### Demo - [addRow sample](https://codepen.io/ibsheet/pen/dygddxQ)",
              "see": [
                {
                  "label": "addRows method",
                  "url": "./add-rows"
                },
                {
                  "label": "deleteRow method",
                  "url": "./delete-row"
                },
                {
                  "label": "deleteRows method",
                  "url": "./delete-rows"
                },
                {
                  "label": "removeRow method",
                  "url": "./remove-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.3|`init` 인자 추가||core|8.0.0.20|`render` 인자 추가|"
            },
            "url": "docs/funcs/core/add-row.html"
          },
          {
            "cid": 537,
            "sid": "add-rows",
            "name": "add-rows",
            "label": "addRows",
            "data": {
              "body": "> 신규 행을 여러개 추가합니다. > 트리 기능을 사용시에는 `parent`인자를 지정해 줘야 원하는 레벨로 행을 추가할 수 있습니다. ### Syntax ```javascript object addRows( count, next, focus, parent, valid ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |count|`number`|<span class='required'>필수</span>|추가할 행의 개수| |next|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object) (지정한 행의 위에 신규행이 생성됨. 값이 없으면 맨 마지막행에 생성)| |focus|`boolean`|<span class='optional'>선택</span>|생성 후 생성된 행으로 포커스 이동 여부 `0(false)`:포커스 이동 안함 `1(true)`:포커스 이동 (`default`)| |parent|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object) (트리 사용시 부모에 해당하는 행 지정)| |valid|`boolean`|<span class='optional'>선택</span>|행추가 가능여부 확인 (실제로 행이 추가되지 않고, 가능/불가능 여부를 확인해서 리턴) `0(false)`:행추가 가능여부 확인 안함 (`default`) `1(true)`:행추가 가능여부 확인 사용| ### Return Value ***object*** : 추가된 행들 중에 최상단 행의 [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //포커스행 위로 신규행을 3개 추가합니다. var firtAddRow = sheet.addRows( {\"count\":3, \"next\":sheet.getFocusedRow()} ); //선택 행 위치에 신규행을 2개 추가합니다. sheet.addRows({\"count\":2, \"parent\":sheet.getFocusedRow().parentNode, \"next\":sheet.getFocusedRow()}); ```",
              "see": [
                {
                  "label": "addRow method",
                  "url": "./add-row"
                },
                {
                  "label": "deleteRow method",
                  "url": "./delete-row"
                },
                {
                  "label": "deleteRows method",
                  "url": "./delete-rows"
                },
                {
                  "label": "removeRow method",
                  "url": "./remove-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/add-rows.html"
          },
          {
            "cid": 538,
            "sid": "ajax",
            "name": "ajax",
            "label": "ajax",
            "data": {
              "body": "> ajax 통신을 통해 서버로부터 데이터를 받아옵니다. > 서버 통신이 완료되었을때 실행되는 callback 함수를 이용해서 서버로부터 받은 데이터를 사용할 수 있습니다. ### Syntax ```javascript void ajax ( url, param, method, callback, sync, reqHeader, timeout, traditional ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |url|`string`|<span class='required'>필수</span>|ajax를 통해 호출할 url| |param|`string`\\|`object`|<span class='optional'>선택</span>|서버로 전송할 파라미터| |method|`string`|<span class='optional'>선택</span>| 전송방식 `GET / POST` 선택 (`default: 'GET'`)| |callback|`funtion`|<span class='optional'>선택</span>|서버 통신이 완료되었을때 발생하는 콜백 함수 ex) `func(res(결과 코드), data(서버로부터 받은 데이터), responseXML(XMLHttpRequest.responseXML), response(XMLHttpRequest 객체))`| |sync|`boolean`|<span class='optional'>선택</span>|동기식 처리 여부 `0(false)`:비동기 방식 (`default`) `1(true)`:동기 방식| |reqHeader|`object`|<span class='optional'>선택</span>|서버로 전송할 헤더 {key1: value1, key2: value2}| |timeout|`number`|<span class='optional'>선택</span>|서버 통신 최대 대기 시간 (단위: 초(second), `default: 60`)| |traditional|`boolean`|<span class='optional'>선택</span>|서버로 전달될 param 구조 설정 `param: {\"data\": [1, 2]}` 배열 구조 param 전송시 설정 **`0(false)`:[] 을 포함하여 전송** (`default`) ex) `data[]=1&data[]=2` **`1(true)`:[] 없이 전송** ex) `data=1&data=2` | ### Return Value ***none*** ### Example ```javascript // POST 방식으로 데이터 조회 sheet.ajax(\"./insaAppMain.do\", \"dept_cd=031&position_cd=A0\", \"POST\", function (res, data, resXml, response) { if (res >= 0) { sheet.loadSearchData(data); } else { alert(\"데이터 조회에 실패 했습니다!!\"); } }); // GET 방식으로 데이터 조회 sheet.ajax({ url: \"./insaAppMain.do\", param: {\"dept_cd\": 31, \"position_cd\": \"A0\"}, method: \"GET\", reqHeader: {\"Content-Type\":\"application/json\"}, callback: function (res, data, resXml, response) { if (res >= 0) { sheet.loadSearchData(data); } else { alert(\"데이터 조회에 실패 했습니다\"); } } }); ```",
              "see": [
                {
                  "label": "loadSearchData method",
                  "url": "./load-search-data"
                },
                {
                  "label": "Timeout cfg",
                  "url": "/docs/props/cfg/timeout"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.5|`timeout` 인자 추가||core|8.0.0.7|`traditional` 인자 추가||core|8.0.0.17|`params` -> `param` 인자명 변경 (`params` 사용 가능)|"
            },
            "url": "docs/funcs/core/ajax.html"
          },
          {
            "cid": 539,
            "sid": "apply-save-result",
            "name": "apply-save-result",
            "label": "applySaveResult",
            "data": {
              "body": "> 시트의 수정된 내용을 서버로 전송했다가 돌아온 결과 `json`으로 부터 이후에 수행되어야할 작업을 처리합니다. > > 동작하는 내용을 아래와 같습니다. > 1. 첫번째 `result` 인자의 값이 양수(0 이상)이면 [appeptChangedData()](./accept-changed-data)를 통해 수정내용을 반영합니다. > 음수가 리턴되는 경우, 값에 따라 경고 메세지를 표시합니다. > 2. `result` 값과 무관하게 [onAfterSave](/docs/events/on-after-save)이벤트가 발생시킵니다. ### Syntax ```javascript boolean applySaveResult( result, message, response, files ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |result|`number`|<span class='required'>필수</span>|서버 응답 결과([onAfterSave](/docs/events/on-after-save) 이벤트의 `result` 파라미터 값 참고.)| |message|`string`|<span class='optional'>선택</span>|[onAfterSave](/docs/events/on-after-save) 이벤트로 전달할 메세지 문자열| |response|`object`|<span class='optional'>선택</span>|ajax 통신의 response 객체([onAfterSave](/docs/events/on-after-save) 이벤트로 전달)| |files|`array`|<span class='optional'>선택</span>|`file` 타입 저장 시 ajax 통신 후 저장된 파일 데이터를 전달 ([getSaveJson](./get-save-json)의 `formData`인자와 함께 사용)| ### Return Value ***boolean*** : 함수 정상 동작 여부. (인자값이 잘못되어 수행되지 못한 경우에는 `false` 리턴) ### Example ```javascript // 포커스행 위로 신규행을 3개 추가합니다. $.ajax({ url:\"saveDO.do\", data: param, dataType:\"json\", success:function(data){ var result = data.IO.Result; var message = data.IO.Message; // 결과를 시트에 반영한다. sheet.applySaveResult(result, message); } }) ```",
              "see": [
                {
                  "label": "appeptChangedData method",
                  "url": "./accept-changed-data"
                },
                {
                  "label": "onAfterSave event",
                  "url": "/docs/events/on-after-save"
                },
                {
                  "label": "getSaveJson method",
                  "url": "./get-save-json"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.5|files 기능 추가|"
            },
            "url": "docs/funcs/core/apply-save-result.html"
          },
          {
            "cid": 540,
            "sid": "blur",
            "name": "blur",
            "label": "blur",
            "data": {
              "body": "> 시트에 포커스를 해제합니다. > 시트에 버튼을 통해 layer 팝업을 띄우는 경우, 시트 측에 포커스를 해제해야만 layer 팝업 내에서 원활하게 포커스를 이동할 수 있습니다. ### Syntax ```javascript boolean blur( mode ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |mode|`number`|<span class='optional'>선택</span>| 시트 내부 셀에 대한 포커스를 해제할지와 시트에 대한 포커스도 해제할지 여부를 설정합니다. `0`:모두 해제 (`default`) `1`:시트 내부 셀에 대한 포커스만 해제 `2`:시트에 대한 포커스만 해제| ### Return Value ***boolean*** : 정상적으로 포커스가 해제된 경우 `true`, 포커스 해제에 실패한 경우 `false`를 리턴 ### Example ```javascript //layer팝업 오픈 전에 현재 시트의 포커스 해제(셀 포커스는 유지) sheet.blur(2); dialog.dialog( \"open\" ); ```",
              "see": [
                {
                  "label": "focus method",
                  "url": "./focus"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/blur.html"
          },
          {
            "cid": 541,
            "sid": "calculate",
            "name": "calculate",
            "label": "calculate",
            "data": {
              "body": "> 시트에 설정된 `Formula` 계산을 [Row.CalcOrder](/docs/props/row/calc-order) 에 따라 실행합니다. > 경우에 따라서 [CanFormula row](/docs/props/row/can-formula)속성을 통해 계산이 이루어져야 할 행만 `1`로 설정하고 나머지 행은 `0`으로 설정한 뒤, 해당 함수를 통해 계산할 수 있습니다. ### Syntax ```javascript void calculate( render, calconly, fixedonly ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |render |`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| |calconly|`boolean`|<span class='optional'>선택</span>|`Row.CanFormula = 1` 인 행만 계산할 지 여부 `0(false)`:전체 행 계산 (`default`) `1(true)`:`Row.CanFormula = 1` 인 행들만 계산| |fixedonly |`boolean`|<span class='optional'>선택</span>|`Fiexd` 행들(`Header, Filter, FormulaRow`)만 계산할 지 여부 `0(false)`:전체 행 계산 (`default`) `1(true)`:`Fiexd` 행들(`Header, Filter, FormulaRow`)만 계산| ### Return Value ***none*** ### Example ```javascript //전체 Formula를 실행하여 결과를 반영한다. sheet.calculate( true, false ); ```",
              "see": [
                {
                  "label": "Formaula appendix",
                  "url": "/docs/appx/formula"
                },
                {
                  "label": "CanFormula row",
                  "url": "/docs/props/row/can-formula"
                },
                {
                  "label": "CalcOrder row",
                  "url": "/docs/props/row/calc-order"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.8|`render` 인자 `default` 값 변경(`false -> true`)||core|8.0.0.11|`fixedonly` 추가|"
            },
            "url": "docs/funcs/core/calculate.html"
          },
          {
            "cid": 542,
            "sid": "clear-current-info",
            "name": "clear-current-info",
            "label": "clearCurrentInfo",
            "data": {
              "body": "> [saveCurrentInfo()](./save-current-info)로 저장된 현재 시트의 정보를 로컬 스토리지 혹은 세션 스토리지에서 제거하는 메소드입니다. > [StorageSession](/docs/props/cfg/storage-session) 값이 0인 경우에는 제거 동작을 하지 않습니다. ### Syntax ```javascript boolean clearCurrentInfo(); ``` ### Return Value ***boolean*** : 함수 정상 동작 여부. (로컬 스토리지 혹은 세션 스트로지에서 시트 정보 제겅 실패했을 때 false 리턴) ### Example ```javascript options.Cfg = { StorageSession: 1 // 로컬 스토리지에 현재 시트 정보를 저장할 수 있고 가져올 수 있도록 설정 }; ... // 현재 시트의 정보를 로컬 스토리지 혹은 세션 스토리지에서 제거한다. sheet.clearCurrentInfo(); ```",
              "see": [
                {
                  "label": "StorageSession cfg",
                  "url": "/docs/props/cfg/storage-session"
                },
                {
                  "label": "StorageKeyPrefix cfg",
                  "url": "/docs/props/cfg/storage-key-prefix"
                },
                {
                  "label": "StorageCompressMode cfg",
                  "url": "/docs/props/cfg/storage-compress-mode"
                },
                {
                  "label": "saveCurrentInfo method",
                  "url": "./save-current-info"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/clear-current-info.html"
          },
          {
            "cid": 543,
            "sid": "clear-current-style",
            "name": "clear-current-style",
            "label": "clearCurrentStyle",
            "data": {
              "body": "> 스타일 행으로 저장된 현재 시트의 스타일 관련 정보를 제거하는 메소드입니다. > [StyleRowConfig](/docs/props/cfg/style-row-config)의 `StorageType`이 1인 경우, 로컬 스토리지에 저장된 스타일 정보를 제거합니다. ([StorageSession](/docs/props/cfg/storage-session) 값이 0인 경우에는 제거 동작을 하지 않습니다.) > `StorageType`이 2인 경우, 스타일 행의 `ServerUrl`의 경로로 저장된 스타일 정보를 제거하는 요청을 전송합니다. ### Syntax ```javascript boolean clearCurrentStyle(); ``` ### Return Value ***boolean*** : 함수 정상 동작 여부 ### Example ```javascript options.Cfg = { StorageSession: 1 // 로컬 스토리지에 현재 시트 정보를 저장할 수 있고 가져올 수 있도록 설정 }; ... // 저장된 스타일 정보를 제거한다. sheet.clearCurrentStyle(); ```",
              "see": [
                {
                  "label": "StorageSession cfg",
                  "url": "/docs/props/cfg/storage-session"
                },
                {
                  "label": "StyleRowConfig cfg",
                  "url": "/docs/props/cfg/style-row-config"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.18|기능 추가||core|8.3.0.33|서버 삭제 요청 기능 개선|"
            },
            "url": "docs/funcs/core/clear-current-style.html"
          },
          {
            "cid": 544,
            "sid": "clear-filter",
            "name": "clear-filter",
            "label": "clearFilter",
            "data": {
              "body": "> 필터행의 내용이 초기화 되고, 이전에 필터링되었던 내용도 모두 보여지게 됩니다. ### Syntax ```javascript void clearFilter(); ``` ### Return Value ***none*** ### Example ```javascript //필터 초기화 sheet.clearFilter(); ```",
              "see": [
                {
                  "label": "showFilterRow method",
                  "url": "./show-filter-row"
                },
                {
                  "label": "setFilter method",
                  "url": "./set-filter"
                },
                {
                  "label": "doFilter method",
                  "url": "./do-filter"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/clear-filter.html"
          },
          {
            "cid": 545,
            "sid": "clear-pivot-filter",
            "name": "clear-pivot-filter",
            "label": "clearPivotFilter",
            "data": {
              "body": "> 피벗 필터가 적용된 경우 필터행의 내용을 초기화한 뒤, 원본 시트에 따라 다시 피벗 시트를 생성합니다. ### Syntax ```javascript void clearPivotFilter(); ``` ### Return Value ***none*** ### Example ```javascript //피벗 필터를 제거하고 다시 피벗 시트를 생성합니다. pivotSheet_sheet.clearPivotFilter(); ```",
              "see": [
                {
                  "label": "doPivotFilter method",
                  "url": "./do-pivot-filter"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.1|기능 추가|"
            },
            "url": "docs/funcs/core/clear-pivot-filter.html"
          },
          {
            "cid": 546,
            "sid": "clear-range",
            "name": "clear-range",
            "label": "clearRange",
            "data": {
              "body": "> 시트 내에 특정 영역의 값을 지웁니다. > `range` 인자에 설정된 row1, col1 셀부터 row2, col2 셀까지 영역의 값을 지웁니다. ### Syntax ```javascript void clearRange( range ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |range|`array`|<span class='required'>필수</span>|시트 내에서 값을 지울 영역을 지정하는 배열 [ row1, col1, row2, col2 ] row1 : 영역의 시작되는 부분에 위치한 셀의 [데이터 로우 객체](/docs/appx/row-object) col1 : 영역의 시작되는 부분에 위치한 셀의 열이름 row2 : 영역의 끝나는 부분에 위치한 셀의 [데이터 로우 객체](/docs/appx/row-object) col2 : 영역의 끝나는 부분에 위치한 셀의 열이름| ### Return Value ***none*** ### Example ```javascript //첫번째 행부터, 포커스된 행까지 CUST_CD 열부터 ORDER_DATE열까지 값을 모두 지웁니다. sheet.clearRange([sheet.getFirstVisibleRow(), \"CUST_CD\", sheet.getFocusedRow(), \"ORDER_DATE\"]) ```",
              "see": [
                {
                  "label": "setValue method",
                  "url": "./set-value"
                },
                {
                  "label": "setString method",
                  "url": "./set-string"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/clear-range.html"
          },
          {
            "cid": 547,
            "sid": "clear-selection",
            "name": "clear-selection",
            "label": "clearSelection",
            "data": {
              "body": "> 드래그나 함수등을 통해 선택한 영역에 대해 선택을 취소한다. ### Syntax ```javascript void clearSelection( ); ``` ### Return Value ***none*** ### Example ```javascript //선택 영역 모두 취소 sheet.clearSelection(); ```",
              "see": [
                {
                  "label": "CanSelect row",
                  "url": "/docs/props/row/can-select"
                },
                {
                  "label": "CanSelect col",
                  "url": "/docs/props/col/can-select"
                },
                {
                  "label": "selectRow method",
                  "url": "./select-row"
                },
                {
                  "label": "selectCol method",
                  "url": "./select-col"
                },
                {
                  "label": "selectRange method",
                  "url": "./select-range"
                },
                {
                  "label": "getSelectedRange method",
                  "url": "./get-selected-range"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/clear-selection.html"
          },
          {
            "cid": 548,
            "sid": "clear-sort",
            "name": "clear-sort",
            "label": "clearSort",
            "data": {
              "body": "> 헤더 소팅을 취소합니다. ### Syntax ```javascript void clearSort( ); ``` ### Return Value ***none*** ### Example ```javascript //헤더 소팅된 내용을 원래 순서로 클리어 sheet.clearSort(); ```",
              "see": [
                {
                  "label": "doSort method",
                  "url": "./do-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/clear-sort.html"
          },
          {
            "cid": 549,
            "sid": "clear-3",
            "name": "clear",
            "label": "clear",
            "data": {
              "body": "> DOM 영역에서 시트 부분을 제거합니다. > 구형 Internet Explorer 브라우저에서 메모리 누수에 대응하기 위한 기능입니다. > 브라우저를 새로고침 하거나, 다른 페이지로 이동시 내부적으로 자동 호출됩니다. > [reload](./reload)()함수를 통해 DOM에서 제거된 시트를 다시 불러올 수 있습니다. ### Syntax ```javascript void clear(); ``` ### Return Value ***none*** ### Example ```javascript //시트 DOM 부분 제거 sheet.clear(); ```",
              "see": [
                {
                  "label": "reload method",
                  "url": "./reload"
                },
                {
                  "label": "dispose mehtod",
                  "url": "./dispose"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/clear.html"
          },
          {
            "cid": 550,
            "sid": "close-dialog",
            "name": "close-dialog",
            "label": "closeDialog",
            "data": {
              "body": "> 시트가 제공하는 다이얼로그나 `Menu`를 닫습니다. ### Syntax ```javascript void closeDialog(); ``` ### Return Value ***none*** ### Example ```javascript //열려있는 메뉴/다이얼로그를 닫습니다. sheet.closeDialog(); ```",
              "see": [
                {
                  "label": "showMenu method",
                  "url": "./show-menu"
                },
                {
                  "label": "showDialog method",
                  "url": "./show-dialog"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/close-dialog.html"
          },
          {
            "cid": 551,
            "sid": "copy-row",
            "name": "copy-row",
            "label": "copyRow",
            "data": {
              "body": "> 지정한 행을 특정 위치로 복사합니다. ### Syntax ```javascript object copyRow( row , next , empty , parent , child, forceVisible ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |next|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object) (next로 지정한 행의 위에 row행이 복사됨. 값이 없으면 맨 마지막행에 복사)| |empty|`boolean`|<span class='optional'>선택</span>|복사 시 데이터 포함 여부 `1(true)`로 설정하여 사용 시 [onAfterRowCopy](/docs/events/on-after-row-copy) 이벤트 미발생 `0(false)`:데이터 포함 (`default`) `1(true)`:데이터 미포함| |parent|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object) (트리 사용시 부모에 해당하는 행 지정)| |child|`boolean`|<span class='optional'>선택</span>|트리 사용시 자식행도 복사할 지 여부 `0(false)`:자식행 미포함 (`default`) `1(true)`:자식행 포함| |forceVisible|`boolean`|<span class='optional'>선택</span>|보이지 않는 행을 복사할 때 보이도록 설정 `0(false)`:행을 감춤(Visible:`0(false)`) 상태로 변경 시키고 복사 (`default`) `1(true)`:행을 보임(Visible:`1(true)`) 상태로 변경 시키고 복사| ### Return Value ***object*** : 복사된 [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //AR5 행을 포커스 행 위로 복사 var row = sheet.copyRow({row:sheet.getRowById(\"AR5\"), next:sheet.getFocusedRow()}); //AR5 행을 포커스 행 아래로 복사 var row = sheet.copyRow({row:sheet.getRowById(\"AR5\"), \"next\":sheet.getNextRow(sheet.getFocusedRow())}); //복사한 행을 감춘다. row[\"Visible\"] = 0; sheet.renderBody(); ```",
              "see": [
                {
                  "label": "addRow method",
                  "url": "./add-row"
                },
                {
                  "label": "moveRow method",
                  "url": "./move-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/copy-row.html"
          },
          {
            "cid": 552,
            "sid": "copy-rows",
            "name": "copy-rows",
            "label": "copyRows",
            "data": {
              "body": "> 지정한 행들을 특정 위치로 복사합니다. > 내부적으로는 여러개 행을 복사 후 추가(ctrl+c, ctrl+v)하는 행위이기 때문에 [onAfterRowCopy](/docs/events/on-after-row-copy) 이벤트와 [onAfterRowAdd](/docs/events/on-after-row-add)이벤트가 발생합니다. ### Syntax ```javascript object copyRows( rows, next, empty, parent, child, forceVisible ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |rows|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object) 배열| |next|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object) (next로 지정한 행의 위에 rows행들이 복사됨. 값이 없으면 마지막 행에 복사)| |empty|`boolean`|<span class='optional'>선택</span>|복사 시 데이터 포함 여부 `1(true)`로 설정하여 사용 시 [onAfterRowCopy](/docs/events/on-after-row-copy) 이벤트 미발생 `0(false)`:데이터 포함 (`default`) `1(true)`:데이터 미포함| |parent|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object) (트리 사용시 부모에 해당하는 행 지정)| |child|`boolean`|<span class='optional'>선택</span>|트리 사용시 자식행도 복사할 지 여부 `0(false)`:자식행 미포함 (`default`) `1(true)`:자식행 포함| |forceVisible|`boolean`|<span class='optional'>선택</span>|보이지 않는 행을 복사할 때 보이도록 설정 `0(false)`:행을 감춤(Visible:`0(false)`) 상태로 변경 시키고 복사 (`default`) `1(true)`:행을 보임(Visible:`1(true)`) 상태로 변경 시키고 복사| ### Return Value ***array[row object]*** : 복사된 [데이터 로우 객체](/docs/appx/row-object)들 ### Example ```javascript //AR5,AR6,AR9행을 최상단에 복사 sheet.copyRows({rows:[ sheet.getRowById(\"AR5\"), sheet.getRowById(\"AR6\"), sheet.getRowById(\"AR9\") ], next:sheet.getFirstRow()}); //CHK열에 체크한 행들을 sheet2에 맨 마지막 행으로 복사 function work(){ var chkRows = sheet.getRowsByChecked(\"CHK\"); sheet2.copyRows({rows:chkRows}); } ```",
              "see": [
                {
                  "label": "copyRow method",
                  "url": "./copy-row"
                },
                {
                  "label": "addRow method",
                  "url": "./add-row"
                },
                {
                  "label": "moveRow method",
                  "url": "./move-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/copy-rows.html"
          },
          {
            "cid": 553,
            "sid": "delete-row",
            "name": "delete-row",
            "label": "deleteRow",
            "data": {
              "body": "> 지정한 행의 <mark>상태를 삭제로 변경</mark>합니다. > 지정한 행에는 [Deleted](/docs/props/row/deleted) 속성값이 `1`로 세팅됩니다. > 트리의 경우 행의 상태를 삭제로 변경할 경우 행의 자식 행들도 삭제 상태로 변경됩니다. ### Syntax ```javascript boolean deleteRow( row , del , valid, visible); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |del|`number`|<span class='optional'>선택</span>|삭제 여부 `0`:삭제취소 `1`:삭제 (`default`)| |valid|`boolean`|<span class='optional'>선택</span>|삭제/삭제취소 가능여부 확인 (실제로 삭제/삭제취소 되진 않고 삭제/삭제취소 가능/불가능 여부를 확인해서 리턴) `0(false)`:삭제/삭제취소 가능여부 확인 안함 (`default`) `1(true)`:삭제/삭제취소 가능여부 확인 사용| |visible|`boolean`|<span class='optional'>선택</span>|삭제 행을 화면에 보여줄지 여부 `0(false)`:삭제 행 감춤 `1(true)`:삭제 행 보임 (`default`)| ### Return Value ***boolean*** : 상태 변경여부 (상태가 삭제/삭제취소로 변경이 이루어지면 true, 변화가 없으면 false 리턴) ### Example ```javascript //AR5 행에 대해 상태를 삭제로 변경한다. sheet.deleteRow({row:sheet.getRowById(\"AR5\"), del:1}); ```",
              "see": [
                {
                  "label": "addRow method",
                  "url": "./add-row"
                },
                {
                  "label": "addRows method",
                  "url": "./add-rows"
                },
                {
                  "label": "deleteRows method",
                  "url": "./delete-rows"
                },
                {
                  "label": "removeRow method",
                  "url": "./remove-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.38|visible 기능 추가|"
            },
            "url": "docs/funcs/core/delete-row.html"
          },
          {
            "cid": 554,
            "sid": "delete-rows",
            "name": "delete-rows",
            "label": "deleteRows",
            "data": {
              "body": "> 지정한 행들의 <mark>상태를 삭제로 변경</mark>합니다. > 지정한 행들에는 [Deleted](/docs/props/row/deleted) 속성값이 `1`로 세팅됩니다. ### Syntax ```javascript boolean deleteRows( rows, del ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |rows|`array[object]`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object) 배열| |del|`number`|<span class='optional'>선택</span>|삭제 여부 `0`:삭제취소 `1`:삭제 (`default`) `2`:삭제후 삭제된 행들 숨김(Visible:`0(false)` 처리| ### Return Value ***boolean*** : 상태 변경 여부 (상태가 삭제/삭제취소로 변경이 이루어지면 true, 변화가 없으면 false 리턴) ### Example ```javascript //AR5,AR8 행에 대해 상태를 삭제로 변경한다. sheet.deleteRows({\"rows\":[sheet.getRowById(\"AR5\"), sheet.getRowById(\"AR8\")],\"del\":1}); ```",
              "see": [
                {
                  "label": "addRow method",
                  "url": "./add-row"
                },
                {
                  "label": "addRows method",
                  "url": "./add-rows"
                },
                {
                  "label": "deleteRow method",
                  "url": "./delete-row"
                },
                {
                  "label": "removeRow method",
                  "url": "./remove-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/delete-rows.html"
          },
          {
            "cid": 555,
            "sid": "disable",
            "name": "disable",
            "label": "disable",
            "data": {
              "body": "> 시트를 비활성화 합니다. > 시트 위에 투명한 layer가 덮혀 hover 관련 기능을 차단하고 기타 키보드, 마우스 이벤트가 차단됩니다. > `disable` 영역은 시트 바깥 영역에 있습니다. `fixedInSheet` 를 `true` 로 사용시에 안쪽에 영역을 고정시킵니다. ### Syntax ```javascript void disable( hard, fixedInSheet ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |hard|`boolean`|<span class='optional'>선택</span>|시트위에 50% 반투명 layer가 표시됩니다. `0(false)`:layer 표시 안함 (`default`) `1(true)`:layer 표시| |fixedInSheet|`boolean`|<span class='optional'>선택</span>|시트 영역 안쪽에 `disable` 영역을 만듭니다. `0(false)`:`disable` 영역 생성 안함 (`default`) `1(true)`:`disable` 영역 생성| ### Return Value ***none*** ### Example ```javascript //시트를 비활성화 sheet.disable(true); ```",
              "see": [
                {
                  "label": "enable method",
                  "url": "./enable"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.19|`fixedInSheet` 인자 추가|"
            },
            "url": "docs/funcs/core/disable.html"
          },
          {
            "cid": 556,
            "sid": "dispose",
            "name": "dispose",
            "label": "dispose",
            "data": {
              "body": "> 시트를 DOM과 메모리에서 제거합니다. > `dispose`된 시트는 더 이상 사용할 수 없고, 초기화 과정을 통해 처음부터 다시 생성해야 합니다. > SinglePageApplication 기반의 프로젝트에서는 페이지 이동 전에 이 함수를 통해 시트 객체를 제거해야만 합니다. ### Syntax ```javascript void dispose(); ``` ### Return Value ***none*** ### Example ```javascript //시트객체를 완전히 제거 sheet.dispose(); ```",
              "see": [
                {
                  "label": "clear method",
                  "url": "./clear"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/dispose.html"
          },
          {
            "cid": 557,
            "sid": "do-filter",
            "name": "do-filter",
            "label": "doFilter",
            "data": {
              "body": "> 주어진 값을 필터행에 반영하고 시트를 필터링 합니다. > **해당 함수는 반드시 [ShowFilter](/docs/props/cfg/show-filter)를 통해 필터가 보여지는 경우에만 사용이 가능합니다.** > ;를 통해 필터링 하고 싶은 값들에 대해 or연산을 실행할 수 있습니다(ex |떡볶이;오뎅|...). > ,를 통해 필터링 하고 싶은 값들에 대해 and연산을 실행할 수 있습니다(ex |떡볶이,오뎅|...). ### Syntax ```javascript void doFilter( cols , vals , operators , nofilter , noclear ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |cols|`string`|<span class='required'>필수</span>|필터링을 수행할 열들 첫글자를 구분로 열이름과 열이름을 연결한 문자를 구성(ex:\"\\|DEPTNM\\|POSITION\\|SALARY\" )| |vals|`string`|<span class='required'>필수</span>|필터링 하고 싶은 값 첫글자를 구분로 열이름과 열이름을 연결한 문자를 구성 (ex:\"\\|총무\\|대리\\|3500\" )| |operators|`string`|<span class='required'>필수</span>|필터링 연산자(숫자) 첫글자를 구분로 열이름과 열이름을 연결한 문자를 구성 (ex:\"\\|0\\|1\\|2\" )| |nofilter|`boolean`|<span class='optional'>선택</span>|실제 필터링은 하지않고 필터행에 글자만 입력시킴 여부 `0(false)`:필터링 실행 (`default`) `1(true)`:필터링 미실행, 필터행에 글자만 입력| |noclear|`boolean`|<span class='optional'>선택</span>|필터행에 `cols`에서 지정하지 않은 열의 값을 지울것인지 여부 `0(false)`:`cols`에서 지정하지 않은 열의 값 삭제 (`default`) `1(true)`:`cols`에서 지정하지 않은 열의 값 삭제 안함| **operators 상세설명** |value|type|desc| |---|---|---| |`0`|공통|필터를 사용하지 않음| |`1`|공통|같다| |`2`|공통|같지않다| |`3`|숫자, 날짜|작다| |`4`|숫자, 날짜|작거나 같다| |`5`|숫자, 날짜|크다| |`6`|숫자, 날짜|크거나 같다| |`7`|문자|앞글자 일치| |`8`|문자|앞글자가 일치하지 않음| |`9`|문자|뒷글자 일치| |`10`|문자|뒷글자 일지하지 않음| |`11`|문자|해당 글자 포함| |`12`|문자|해당 글자 포함하지 않음| |`13`|숫자|상위 10| |`14`|공통|값 있음| |`15`|공통|값 없음| ### Return Value ***none*** ### Example ```javascript //deptName 열에 내용중 연구팀으로 끝나는 행과 cardAmt 열의 값이 50000보다 큰 경우의 행만 보여짐 sheet.doFilter(\"|deptName|cardAmt\", \"|연구팀|50000\", \"|9|6\"); ```",
              "see": [
                {
                  "label": "ShowFilter cfg",
                  "url": "/docs/props/cfg/show-filter"
                },
                {
                  "label": "clearFilter method",
                  "url": "./clear-filter"
                },
                {
                  "label": "setFilter method",
                  "url": "./set-filter"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.27|13 기능 추가||core|8.1.0.27|14,15 기능 추가|"
            },
            "url": "docs/funcs/core/do-filter.html"
          },
          {
            "cid": 558,
            "sid": "do-group",
            "name": "do-group",
            "label": "doGroup",
            "data": {
              "body": "> 지정한 열들을 함수를 통해 그룹핑 합니다. ### Syntax ```javascript void doGroup( cols ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |cols|`string`|<span class='required'>필수</span>|그룹할 열이름을 \",\"를 구분자로 순서대로 입력 ### Return Value ***none*** ### Example ```javascript //부서와 팀컬럼을 순서대로 그룹핑 sheet.doGroup(\"dempNm,teamNm\"); ```",
              "see": [
                {
                  "label": "Group cfg",
                  "url": "/docs/props/cfg/group"
                },
                {
                  "label": "onBeforeGroup event",
                  "url": "/docs/events/on-before-group"
                },
                {
                  "label": "onAfterGroup  event",
                  "url": "/docs/events/on-after-group"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.3|groupcols 인자명 변경 -> cols, 다른 API와 통일|"
            },
            "url": "docs/funcs/core/do-group.html"
          },
          {
            "cid": 559,
            "sid": "do-pivot-filter",
            "name": "do-pivot-filter",
            "label": "doPivotFilter",
            "data": {
              "body": "> 주어진 값을 필터행에 반영하여, 원본 시트에서 필터된 데이터 결과에 따라 피벗 시트를 생성합니다. > ;를 통해 필터링 하고 싶은 값들에 대해 or연산을 실행할 수 있습니다(ex |떡볶이;오뎅|...). > ,를 통해 필터링 하고 싶은 값들에 대해 and연산을 실행할 수 있습니다(ex |떡볶이,오뎅|...). ### Syntax ```javascript void doPivotFilter( cols , vals , operators ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |cols|`string`|<span class='required'>필수</span>|필터링을 수행할 열들 첫글자를 구분로 열이름과 열이름을 연결한 문자를 구성(ex:\"\\|DEPTNM\\|POSITION\\|SALARY\" )| |vals|`string`|<span class='required'>필수</span>|필터링 하고 싶은 값 첫글자를 구분로 열이름과 열이름을 연결한 문자를 구성 (ex:\"\\|총무\\|대리\\|3500\" )| |operators|`string`|<span class='required'>필수</span>|필터링 연산자(숫자) 첫글자를 구분로 열이름과 열이름을 연결한 문자를 구성 (ex:\"\\|7\\|7\\|5\" )| **operators 상세설명** |value|type|desc| |---|---|---| |`0`|공통|필터를 사용하지 않음| |`1`|공통|같다| |`2`|공통|같지않다| |`3`|숫자, 날짜|작다| |`4`|숫자, 날짜|작거나 같다| |`5`|숫자, 날짜|크다| |`6`|숫자, 날짜|크거나 같다| |`7`|문자|앞글자 일치| |`8`|문자|앞글자가 일치하지 않음| |`9`|문자|뒷글자 일치| |`10`|문자|뒷글자 일지하지 않음| |`11`|문자|해당 글자 포함| |`12`|문자|해당 글자 포함하지 않음| |`13`|숫자|상위 10| |`14`|공통|값 있음| |`15`|공통|값 없음| ### Return Value ***none*** ### Example ```javascript //deptName 열에 내용중 연구팀으로 끝나는 행과 cardAmt 열의 값이 50000보다 큰 경우의 행을 기반으로 원본 시트를 필터하여, 피벗 시트를 생성합니다. pivotSheet_sheet.doPivotFilter(\"|deptName|cardAmt\", \"|연구팀|50000\", \"|9|6\"); ```",
              "see": [
                {
                  "label": "clearPivotFilter method",
                  "url": "./clear-pivot-filter"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.1|기능 추가|"
            },
            "url": "docs/funcs/core/do-pivot-filter.html"
          },
          {
            "cid": 560,
            "sid": "do-print",
            "name": "do-print",
            "label": "doPrint",
            "data": {
              "body": "> 시트의 내용을 원하는 규격으로 인쇄합니다. > 용지 규격과 방향은 브라우저의 인쇄 설정과 동일하게 설정해 주어야 합니다. > **<mark>주의</mark> : 인쇄 결과가 브라우저 별로 상이 할 수 있습니다.** > **<mark>주의</mark> : `zoomFit` 속성이 `0`일 경우 `fitPage` 속성은 동작하지 않습니다** > **<mark>주의</mark> : 멀티레코드([MultiRecord](/docs/props/cfg/multi-record)) 기능을 사용하는 시트에서는 제약이 있습니다** ### Syntax ```js void doPrint( prefix, postfix, pagePrefix, pagePostfix, fitPage, zoomFit, menu, pageOrient, firstPrintHead ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |prefix|`string`|<span class='optional'>선택</span>|첫 페이지 상단에 표시될 문자열 (HTML 형식 가능)| |postfix|`string`|<span class='optional'>선택</span>|마지막 페이지 하단에 표시될 문자열 (HTML 형식 가능)| |pagePrefix|`string`|<span class='optional'>선택</span>|각 페이지 상단(머릿말)에 표시될 문자열 (HTML 형식 가능)| |pagePostfix|`string`|<span class='optional'>선택</span>|각 페이지 하단(꼬릿말)에 표시될 문자열 (HTML 형식 가능)| |fitPage|`number`|<span class='optional'>선택</span>|인쇄할 시트의 크기가 페이지보다 클 경우, 페이지에 맞춤 옵션 `0`:없음 `1`:너비에 맞춤 <i>(`default`)</i> `2`:높이에 맞춤 `3`:한 페이지에 맞춤| |zoomFit|`number`|<span class='optional'>선택</span>|시트의 크기가 페이지보다 작을 경우, 페이지에 맞춤 옵션 `0`:없음 `1`:한 페이지에 맞춤 <i>(`default`)</i>| |menu|`number`|<span class='optional'>선택</span>|프린트 다이얼로그 사용 여부 `0`:사용안함 <i>(`default`)</i> `1`:행열 선택 옵션만 보기 `2`:전체 옵션 보기| |pageOrient|`number`|<span class='optional'>선택</span>|인쇄 용지 방향 설정 `0`:세로 <i>(`default`)</i> `1`:가로 **<mark>주의</mark> : 해당 속성은 Chrome 브라우저에서만 동작합니다**| |firstPrintHead|`boolean`|<span class='optional'>선택</span>|인쇄시 용지 첫 페이지만 시트의 헤더가 인쇄 `0(false)`:모든 페이지에서 시트의 헤더 표시 <i>(`default`)</i> `1(true)`:첫 페이지만 시트의 헤더 표시 | #### `pagePrefix`, `pagePostfix`에서의 예약어 사용 * `%1`: 가로 페이지 인덱스 * `%2`: 세로 페이지 인덱스 * `%3`: 페이지 인덱스 * `%4`: 가로 페이지 개수 * `%5`: 세로 페이지 개수 * `%6`: 페이지 개수 ### Return Value ***none*** ### Browser Constraint |Browser|Constraint| |-------|----------| |Chrome|제약 없음| |Edge(Chrominu)|제약 없음| |Firefox|시트 스타일, Html 스타일 적용 안됨 `pageOrient` 사용 불가| |Opera|`pageOrient` 사용 불가| |IE11|시트 스타일, Html 스타일 적용 안됨 `pageOrient` 사용 불가| ### Examples #### 옵션객체만 사용하는 경우 ```js var options = { prefix: \"<div style='background-color:#EDEDED;padding:10px'>사용자 : 홍길동</div>\", pagePostfix: \"<div style='text-align:center;font-size:20px'>[%2 / %5]</div>\", fitPage: 1 }; sheet.doPrint(options); ``` #### CSS와 함께 사용하는 경우 `prefix`, `pagePrefix`, `pagePostfix`, `postfix` 클래스명은 고유하므로 변경 불가, 이외의 클래스명으로 크기와 관련된 속성을 정의할 경우 출력 페이지의 레이아웃에 반영되지 않습니다. ##### HTML ```html <!-- ... --> <head> <!-- ... --> <link href=\"ibsheet-print.css\" rel=\"stylesheet\" type=\"text/css\" /> <!-- ... --> </head> ``` ##### SCSS (ibsheet-print.scss) ```scss BODY[class*=BodyPrint] > DIV[class*=PrintPage] DIV[class*=PaddingWrapper] { > .prefix { font-size: 2rem; font-weight: bold; padding: 1.5rem 0 1rem; text-align: center; } > .pagePrefix { text-align: right; padding: 1rem 0; } > .pagePostfix { font-size: .5rem; text-align: center; } > .postfix { font-size: .8rem; text-align: center; } } ``` ##### CSS (ibsheet-print.css) ```css BODY[class*=BodyPrint] > DIV[class*=PrintPage] DIV[class*=PaddingWrapper] > .prefix { font-size: 2rem; font-weight: bold; padding: 1.5rem 0 1rem; text-align: center; } BODY[class*=BodyPrint] > DIV[class*=PrintPage] DIV[class*=PaddingWrapper] > .pagePrefix { text-align: right; padding: 1rem 0; } BODY[class*=BodyPrint] > DIV[class*=PrintPage] DIV[class*=PaddingWrapper] > .pagePostfix { font-size: .5rem; text-align: center; } BODY[class*=BodyPrint] > DIV[class*=PrintPage] DIV[class*=PaddingWrapper] > .postfix { font-size: .8rem; text-align: center; } ``` ##### JavaScript `prefix`, `pagePrefix`, `pagePostfix`, `postfix` 값의 형식이 HTML이 아닐 경우, DIV 엘리먼트에 해당 속성의 클래스명이 자동으로 추가되어 적용됩니다. ```js var options = { prefix: '문서 제목', pagePrefix: 'IB Leaders', pagePostfix: '[ %3 / %6 ]', postfix: 'Powered by IBSheet8' }; sheet.doPrint(options); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.17|`pageOrient` 기능 추가||core|8.1.0.51|`firstPrintHead` 기능 추가|"
            },
            "url": "docs/funcs/core/do-print.html"
          },
          {
            "cid": 561,
            "sid": "do-save",
            "name": "do-save",
            "label": "doSave",
            "data": {
              "body": "> 시트에서 변경된 내용을 추출하여 서버로 전송하고, 서버에서 응답 JSON 내용에 따라 시트에 반영합니다. > 서버로 전송하기 전에 [onBeforeSave](/docs/events/on-before-save)이벤트가 발생하고, 서버에서 응답이 왔을 때 [onAfterSave](/docs/events/on-after-save) 이벤트가 발생 합니다. > 서버에서 받게 되는 JSON 내용과 관련해서는 7장 appendix에 [dataStructure](/docs/appx/data-structure)를 참고하세요. ### Syntax ```javascript void doSave( url , param , saveMode , col , urlEncode , delim , queryMode , reqHeader , request , sync, validRequired, saveAttr, useLevel ,questCallback, timeout, traditional, saveExtraAttr ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |url|`string`|<span class='required'>필수</span>|ajax를 통해 호출할 url| |param|`string` \\| `object`|<span class='optional'>선택</span>|서버로 전송할 파라미터| |saveMode|`number`|<span class='optional'>선택</span>|상태별 데이터 추출 여부 `0`:전체데이터 `1`:전체데이터 중 `Deleted` 만 제외 `2`:수정된 데이터(`Added,Changed,Deleted`) (`default`) `3`:수정된 데이터(`Added,Changed,Deleted`)+이동한 데이터(`Moved`)| |col|`string`|<span class='optional'>선택</span>|저장 기준 열의 열이름 특정 열을 지정하면 행의 상태(`Added,Changed,Deleted`)를 무시하고 지정한 열의 데이터 유무에 따라 저장됨.| |urlEncode|`boolean`|<span class='optional'>선택</span>|시트의 데이터에 대한 encoding 여부 **`queryMode`별로 `default`가 달라짐** `0(false)`:`queryMode:0 (default)` `1(true)`:`queryMode:1/2 (default)` | |delim|`string`|<span class='optional'>선택</span>|queryMode값이 2인 경우에 데이터 사이 구분자 지정 (`default: \"\\|\"`)| |queryMode|`number`|<span class='optional'>선택</span>|서버로 전달될 데이터 구조 설정 **`0`:json 구조로 전달** ex) Data={ \"data\":[ {\"STATUS\":\"Added\",\"ColName1\":\"홍길동\",\"ColName2\":25}, {\"STATUS\":\"Changed\",\"ColName1\":\"심청\",\"ColName2\":18} ]} *단 **reqHeader**속성에 {\"Content-Type\":\"application/json\"}를 추가시 앞에 \"Data=\"이 제거되고 순수하게 json형식만 서버로 전송* **`1`:QueryString 구조 전달** (`default`) ex) STATUS=Added&ColName1=홍길동&ColName2=25&STATUS=Changed&ColName1=심청&ColName2=18 **`2`:열데이터 기준 QueryString 구조 전달** ex) STATUS=Added\\|Changed&ColName1=홍길동\\|심청&ColName2=25\\|18| |reqHeader|`object`|<span class='optional'>선택</span>|전송시 request header에 추가하고자 하는 내용 (ex) {key1:value1, key2:value2}) [Type](/docs/props/col/type)이 file인 셀의 값이 수정된 경우 reqHeader에 Content-Type:application/json을 설정하여도 form으로 전송됩니다. |quest|`boolean`|<span class='optional'>선택</span>|저장시 confirm 메세지 사용 여부 `0(false)`:confirm 메세지 사용 안함 (`default`) `1(true)`:confirm 메세지 사용 ![경고창](/assets/imgs/quest.png \"경고창\")| |sync|`boolean`|<span class='optional'>선택</span>|저장시 동기 여부 `0(false)`:비동기 방식 (`default`) `1(true)`:동기 방식| |validRequired|`boolean`|<span class='optional'>선택</span>|데이터 필수 입력 항목(Required 설정된 열)에 대한 검사 여부 설정. 검사를 통과하지 못할 시 메세지를 띄우며 편집모드 실행. `0(false)`:필수 입력 항목 검사 안함 `1(true)`:필수 입력 항목 검사 실행 (`default`) ![테이블](/assets/imgs/doSaveRequired1.png \"테이블\") ![경고창](/assets/imgs/doSaveRequired2.png \"경고창\")| |saveAttr|`string`|<span class='optional'>선택</span>|각 셀의 속성값을 같이 추출하고자 하는 경우 Name+속성명 형식으로 설정 여러개 속성을 추출하고자 하는 경우 \",\"를 구분자로 작성 ex) \"sNameColor,sNoCanEdit\"| |useLevel|`boolean`|<span class='optional'>선택</span>|Tree기능 사용시 각 행의 Level(Depth)값을 추출되는 데이터에 포함할지 여부 `0(false)`:Level값 데이터 미포함 `1(true)`:Level값 데이터 포함(`default`) 최 상위 노드를 1부터 시작하여 계산하며, \"tLEVEL\"이라는 이름으로 행 데이터에 추가됩니다. \"tLEVEL\"은 각 메세지 파일(ex: ko.js)에서 \"TreeLevelName\"으로 변경할 수 있습니다. Tree기능을 사용하는 시트에서 해당 속성을 `0(false)`로 설정시 `saveMode:0, queryMode:0`을 통해 추출되는 데이터는 계층구조를 갖게 됩니다. `saveMode`를 이용하여 전체 데이터가 아닌 일부 데이터를 추출 할 경우 데이터는 계층 구조를 가지지 않으며 `\"tLEVEL\"` 값은 모두 1이 됩니다.| |questCallback|`function`|<span class='optional'>선택</span>|confirm 메세지 사용시(`quest:true`) Ok, Cancel에 대한 콜백 함수 Ok(확인) : `{result:1}` Cancel(취소) : `{result:2}` | |timeout|`number`|<span class='optional'>선택</span>|서버 통신 최대 대기 시간 (단위: 초(second), `default: 60`)| |traditional|`boolean`|<span class='optional'>선택</span>|서버로 전달될 param 구조 설정 `param: {\"data\": [1, 2]}` 배열 구조 param 전송시 설정 **`0(false)`:[] 을 포함하여 전송** (`default`) ex) `data[]=1&data[]=2` **`1(true)`:[] 없이 전송** ex) `data=1&data=2` | |saveExtraAttr|`boolean`|<span class='optional'>선택</span>|시트에 (col)[Name](/docs/props/col/name)으로 정의하지 않은 데이터가 [doSearch](/docs/funcs/core/do-search)나 [loadSearchData](/docs/funcs/core/load-search-data)함수를 통해 로드 된 경우, 저장시 해당 데이터를 서버로 전송할 지 여부. 로드 데이터 첫번째 행의 keyset을 기준으로 추출됨. `0(false)`:시트에 (col)[Name](/docs/props/col/name)으로 정의 되지 않은 데이터 서버 전송 시 미포함 (`default`) `1(true)`:시트에 (col)[Name](/docs/props/col/name)으로 정의 되지 않은 데이터 서버 전송 시 포함| |validSize|`boolean`|<span class='optional'>선택</span>|사이즈 설정([Size col](/docs/props/col/size))에 대한 유효성 검사 여부 설정. `0(false)`:사이즈 유효성 검사 안함 (`default`) `1(true)`:사이즈 유효성 검사 실행| |validEditMask|`boolean`|<span class='optional'>선택</span>|EditMask 설정([EditMask col](/docs/props/col/edit-mask))에 대한 유효성 검사 여부 설정. `0(false)`:EditMask 유효성 검사 안함 (`default`) `1(true)`:EditMask 유효성 검사 실행| |validResultMask|`boolean`|<span class='optional'>선택</span>|ResultMask 설정([ResultMask col](/docs/props/col/result-mask))에 대한 유효성 검사 여부 설정. `0(false)`:ResultMask 유효성 검사 안함 (`default`) `1(true)`:ResultMask 유효성 검사 실행| ### Return Value ***none*** ### Example ```javascript // 인자가 많으므로 가급적 json 형식으로 사용이 유리함 sheet.doSave({ url:\"./insaAppMain.do\", param:\"dept_cd=031&position_cd=A0\", request:1, quest:1, questCallback:function (evt) { if (evt.result == 2) { alert(\"취소 되었습니다.\"); } } }); ```",
              "see": [
                {
                  "label": "Required col",
                  "url": "/docs/props/col/required"
                },
                {
                  "label": "dataStructure appendix",
                  "url": "/docs/appx/data-structure"
                },
                {
                  "label": "onBeforeSave event",
                  "url": "/docs/events/on-before-save"
                },
                {
                  "label": "onAfterSave event",
                  "url": "/docs/events/on-after-save"
                },
                {
                  "label": "getSaveJson method",
                  "url": "./get-save-json"
                },
                {
                  "label": "getSaveString method",
                  "url": "./get-save-string"
                },
                {
                  "label": "Timeout cfg",
                  "url": "/docs/props/cfg/timeout"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.4|`saveAttr`, `useLevel` 기능 추가||core|8.0.0.5|`timeout` 기능 추가<br>`reqHeader` 설명 추가(`file` 타입 관련)||core|8.0.0.7|`traditional` 기능 추가||core|8.1.0.32|`saveExtraAttr` 기능 추가||core|8.3.0.24|`validSize`, `validEditMask`, `validResultMask` 기능 추가|"
            },
            "url": "docs/funcs/core/do-save.html"
          },
          {
            "cid": 562,
            "sid": "do-search-paging",
            "name": "do-search-paging",
            "label": "doSearchPaging",
            "data": {
              "body": "> 페이징 조회 (cfg [SearchMode](/docs/props/cfg/search-mode) : 3 or 4 or 5)를 사용하는 시트에서만 사용됩니다. > (cfg)[PageLength](/docs/props/cfg/page-length)에서 설정한 건수 만큼 서버에서 데이터를 만들어 리턴해야 합니다. > 조회데이터 JSON 에 `Total` 속성을 통해 전체 데이터의 건수를 갖고 오면 해당 건수만큼 페이지를 나누어 조회 됩니다. > **<mark>주의</mark> : PageLength 값과 서버에서 받아오는 데이터의 갯수를 반드시 동일하게 설정해야 합니다.(PageLength 설정하지 않았을 경우 기본값은 20 입니다)** ### Syntax ```javascript void doSearchPaging( url, pageParam, param, reqHeader, method, callback, timeout, sync, strictParse, traditional, restapi, cPage, pageLengthParam, beforeSend, orderByParam ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |url|`string`|<span class='required'>필수</span>|ajax를 통해 호출할 url| |pageParam|`string`|<span class='optional'>선택</span>|서버로 전송할 페이지 변수 (`default: 'ibpage'`)| |param|`string`\\|`object`|<span class='optional'>선택</span>|서버로 전송할 조회 조건 파라미터| |reqHeader|`object`|<span class='optional'>선택</span>|서버 전송시 request header에 정의할 내용 ex : `{\"callBy\":\"ibsheetObject\",\"method\":\"doSearchPaging\"}`| |method|`string`|<span class='optional'>선택</span>|GET/POST 선택 (`default: 'GET'`)| |callback|`function`|<span class='optional'>선택</span>|조회 후 호출할 콜백 함수| |timeout|`number`|<span class='optional'>선택</span>|서버 통신 최대 대기 시간 (단위: 초(second), `default: 60`)| |sync|`number`|<span class='optional'>선택</span>|동기 조회 여부. 비동기일 경우 연속으로 호출시 이전 조회가 종료되지 않으면 이후의 조회는 무시됩니다. 연속으로 호출해야 되고, 반드시 모든 조회가 완료되어야 한다면 동기 조회 모드를 사용해야 합니다. `0`:비동기 방식 (`default`) `1`:비동기 순차 처리 방식 `2`:동기 방식| |strictParse|`boolean`|<span class='optional'>선택</span>|json 파서 선택 일반적으로 유연한 파싱으로 구동되고 true 설정시에 브라우져의 JSON.parse()를 통해 파싱 `0(false)`:유연한 파서 사용 (`default`) `1(true)`: 브라우저에서 제공하는 JSON.parse() 내장함수 사용| |traditional|`boolean`|<span class='optional'>선택</span>|서버로 전달될 param 구조 설정 `param: {\"data\": [1, 2]}` 배열 구조 param 전송시 설정 **`0(false)`:[] 을 포함하여 전송** (`default`) ex) `data[]=1&data[]=2` **`1(true)`:[] 없이 전송** ex) `data=1&data=2` | |restapi|`boolean`|<span class='optional'>선택</span>|페이지 URL 주소 형식이 REST API 주소형식에 맞게 변경되도록 하는 설정 `0(false)`:페이지 URL 주소 변경 기능 사용 안함 (`default`) `1(true)`:페이지 URL 주소 REST API 주소형식에 맞게 변경 기능 사용 **<mark>주의</mark> : GET 방식으로 보낼 경우 pageParam을 제외한 다른 파라미터들은 전송되지 않음** ex) `/userInfo/users/2`| |cPage| `number`|<span class='optional'>선택</span>|조회 시 처음 보여질 페이지 번호 (1부터 시작)| |pageLengthParam| `string`|<span class='optional'>선택</span>|서버로 전송할 `pageLength` 변수 (`default: 'ibpagelength'`)| |beforeSend|`function`|<span class='optional'>선택</span>|조회 전 호출할 함수 `1(true)` 값을 리턴 시 조회가 취소| |orderByParam|`string`|<span class='optional'>선택</span>|서버로 전송할 소팅 정보 파라미터 변수 (`default: 'iborderby'`)| ### Return Value ***none*** ### Example ```javascript //SearchMode가 3이거나 4이거나 5인 경우 조회 함수 var opt = { \"url\":\"/cust/getCustInfo.do\", \"param\":\"custId=92123&empId=24342\", \"method\":\"POST\", \"beforeSend\":function (rtn) { console.log(rtn.sheet); // 시트 객체 }, \"callback\":function (rtn) { var rtnData = JSON.parse(rtn.data); alert(\"전체 데이터 건수 :\" + rtnData[\"Total\"]); } }; sheet.doSearchPaging(opt); //조회 데이터 예시 { \"Total\":254141 //전체 데이터 건수 \"Data\":[ {},...,{} //PageLength에서 설정한 건수만큼 조회 ] } ```",
              "see": [
                {
                  "label": "dataStructure appendix",
                  "url": "/docs/appx/data-structure"
                },
                {
                  "label": "SortCurrentPage cfg",
                  "url": "/docs/props/cfg/sort-current-page"
                },
                {
                  "label": "Timeout cfg",
                  "url": "/docs/props/cfg/timeout"
                },
                {
                  "label": "PageLength cfg",
                  "url": "/docs/props/cfg/page-length"
                },
                {
                  "label": "StrictParse cfg",
                  "url": "/docs/props/cfg/strict-parse"
                },
                {
                  "label": "onReceiveData event",
                  "url": "/docs/events/on-receive-data"
                },
                {
                  "label": "onDataLoad event",
                  "url": "/docs/events/on-data-load"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.5|`timeout` 인자 추가||core|8.0.0.6|`sync` 인자 추가||core|8.0.0.7|`strictParse` 인자 추가||core|8.0.0.7|`traditional` 인자 추가||core|8.0.0.7|`restapi` 인자 추가||core|8.0.0.20|`cPage` 인자 추가||core|8.1.0.41|`pageLengthParam` 인자 추가||core|8.1.0.49|`beforeSend` 인자 추가|"
            },
            "url": "docs/funcs/core/do-search-paging.html"
          },
          {
            "cid": 563,
            "sid": "do-search",
            "name": "do-search",
            "label": "doSearch",
            "data": {
              "body": "> ajax 통신을 통해 json형식의 데이터를 가져와 시트에 로드합니다. > 비동기형식으로 동작하므로, 데이터 로드 이후에 대한 처리는 [onSearchFinish](/docs/events/on-search-finish) 이벤트에서 로직을 구성하셔야 합니다. ### Syntax ```javascript void doSearch( url, param, method, append, reqHeader, callback, timeout, sync, next, strictParse, traditional ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |url|`string`|<span class='required'>필수</span>|ajax를 통해 호출할 url| |param|`string`\\|`object`|<span class='optional'>선택</span>|서버로 전송할 파라미터| |method|`string`|<span class='optional'>선택</span>| 전송방식 GET / POST 선택 (`default: 'GET'`)| |append|`boolean`|<span class='optional'>선택</span>|기존 데이터에 `append` 여부 조회 방식의 차이로 인해 `append:1(true)`사용 시 [SearchMode](/docs/props/cfg/search-mode):2인 경우 [onRenderFinish](/docs/events/on-render-finish)이벤트가 발생하지 않습니다. `0(false)`:기존 데이터 제거 후 조회 데이터 로드 (`default`) `1(true)`:기존 데이터에 조회 데이터 추가| |reqHeader|`object`|<span class='optional'>선택</span>|서버 전송시 request header에 정의할 내용 ex : `{\"callBy\":\"ibsheetObject\",\"method\":\"doSearch\"}`| |callback|`function`|<span class='optional'>선택</span>|조회 후 호출할 콜백 함수| |timeout|`number`|<span class='optional'>선택</span>|서버 통신 최대 대기 시간 (단위: 초(second), `default: 60`)| |sync|`number`|<span class='optional'>선택</span>|동기 조회 여부. 비동기일 경우 연속으로 호출시 이전 조회가 종료되지 않으면 이후의 조회는 무시됩니다. 연속으로 호출해야 되고, 반드시 모든 조회가 완료되어야 한다면 동기 조회 모드를 사용해야 합니다. `0`:비동기 방식 (`default`) `1`:비동기 순차 처리 방식 `2`:동기 방식| |next|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object) 지정한 행 위에부터 데이터 `append`. (`append:1(true)`일때만 사용 가능)| |strictParse|`boolean`|<span class='optional'>선택</span>|json 파서 선택 일반적으로 유연한 파서를 통해 JSON데이터를 파싱하고, true 설정시에 브라우져의 JSON.parse()를 통해 파싱 `0(false)`:유연한 파서 사용 (`default`) `1(true)`: 브라우저에서 제공하는 JSON.parse() 내장함수 사용| |traditional|`boolean`|<span class='optional'>선택</span>|서버로 전달될 param 구조 설정 `param: {\"data\": [1, 2]}` 배열 구조 param 전송시 설정 **`0(false)`:[] 을 포함하여 전송** (`default`) ex) `data[]=1&data[]=2` **`1(true)`:[] 없이 전송** ex) `data=1&data=2` | |parent|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object) (동적 트리 조회 사용시 부모에 해당하는 행 지정) | 유연한 파서란 일반적인 JSON.parse()를 통해 파싱하는 경우 허용하지 않는 몇가지를 허용합니다. 1. 여분의 콤마 허용 2. 프로퍼티 이름의 쌍따옴표가 없어도 됨. 참고 - [MDN:bad parsing](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Errors/JSON_bad_parse) - JSON.parse()가 유연한 파싱보다 성능이 우수(약 5배)하지만 데이터 로딩과정에서 파싱이 차지하는 시간이 크지 않아 5만건 이내에서는 사용자가 느끼기 어려운 수준임. ### Return Value ***none*** ### Example ```javascript // GET 방식으로 데이터 조회 sheet.doSearch(\"./insaAppMain.do\", \"dept_cd=031&position_cd=A0\", \"GET\"); // POST 방식으로 데이터 조회 var opt = { url: \"./insaAppMain.do\", param: {\"dept_cd\": 031, \"position_cd\": \"A0\"}, method: \"POST\", reqHeader: {\"Content-Type\":\"application/json\"} }; sheet.doSearch(opt); ```",
              "see": [
                {
                  "label": "dataStructure appendix",
                  "url": "/docs/appx/data-structure"
                },
                {
                  "label": "loadSearchData method",
                  "url": "./load-search-data"
                },
                {
                  "label": "doSearchPaging method",
                  "url": "./do-search-paging"
                },
                {
                  "label": "onReceiveData event",
                  "url": "/docs/events/on-receive-data"
                },
                {
                  "label": "onBeforeDataLoad event",
                  "url": "/docs/events/on-before-data-load"
                },
                {
                  "label": "onDataLoad event",
                  "url": "/docs/events/on-data-load"
                },
                {
                  "label": "onSearchFinish event",
                  "url": "/docs/events/on-search-finish"
                },
                {
                  "label": "Timeout cfg",
                  "url": "/docs/props/cfg/timeout"
                },
                {
                  "label": "StrictParse cfg",
                  "url": "/docs/props/cfg/strict-parse"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.4|다른 API와 동일하게 제공하기 위해 `params` 인자명을 `param`으로 변경, 기존의 `params`를 사용할 수 있지만 권장하지 않음.||core|8.0.0.5|`timeout` 인자 추가||core|8.0.0.6|`sync` 인자 추가||core|8.0.0.7|`next` 인자 추가||core|8.0.0.7|`strictParse` 인자 추가||core|8.0.0.7|`traditional` 인자 추가||core|8.0.0.25|`parent` 인자 추가|"
            },
            "url": "docs/funcs/core/do-search.html"
          },
          {
            "cid": 564,
            "sid": "do-sort",
            "name": "do-sort",
            "label": "doSort",
            "data": {
              "body": "> 지정한 열들을 함수를 통해 소팅 합니다. > `doSort`는 비동기로 동작합니다. > 소계에서 `doSort` 사용시 `stdCol`은 소팅되지 않습니다. ### Syntax ```javascript void doSort( sortcols ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |sortcols|`string`|<span class='required'>필수</span>|소팅할 열이름을 `\",\"`를 구분자로 순서대로 입력 (열이름만 쓰면 오름차순, 열이름 앞에 `\"-\"`기호를 붙이면 내림차순이 됨) ### Return Value ***none*** ### Example ```javascript //부서를 내림차순으로 이름을 오름차순으로 정렬 sheet.doSort(\"-dempNm,empNm\"); ```",
              "see": [
                {
                  "label": "clearSort method",
                  "url": "./clear-sort"
                },
                {
                  "label": "onBeforeSort event",
                  "url": "/docs/events/on-before-sort"
                },
                {
                  "label": "onAfterSort event",
                  "url": "/docs/events/on-after-sort"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/do-sort.html"
          },
          {
            "cid": 565,
            "sid": "enable",
            "name": "enable",
            "label": "enable",
            "data": {
              "body": "> 비활성화 된 시트를 다시 활성화 시킵니다. ### Syntax ```javascript void enable( ); ``` ### Return Value ***none*** ### Example ```javascript //시트를 활성화 sheet.enable(); ```",
              "see": [
                {
                  "label": "disable method",
                  "url": "./disable"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/enable.html"
          },
          {
            "cid": 566,
            "sid": "end-edit",
            "name": "end-edit",
            "label": "endEdit",
            "data": {
              "body": "> 셀의 편집을 종료합니다. > 편집 중이던 내용이 메모리에 저장되고 편집 상태가 종료됩니다. > 호출시 [onEndEdit](/docs/events/on-end-edit)이벤트가 발생합니다. ### Syntax ```javascript mixed endEdit(save); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |save|`boolean`|<span class='optional'>선택</span>|편집 종료시 현재 값을 반영할지 여부를 설정합니다. `0(false)`:수정 중인 데이터를 반영하지 않고 편집 상태를 종료 (`default`) `1(true)`:수정 중인 데이터를 반영하며 편집 상태를 종료| ### Return Value ***mixed*** |returnValue|Description| |---|---| |`null`|편집중이지 않은 경우| |`0(false)`|기존과 동일한 값이어서 내용 변경이 없는 경우| |`1(true)`|정상적으로 편집중인 값이 반영됨| |`-1`|수정한 값에 문제가 있어 편집이 종료되지 못한 경우(잘못된 날짜 입력 등)| ### Example ```javascript //편집 종료 sheet.endEdit(1); ```",
              "see": [
                {
                  "label": "onEndEdit event",
                  "url": "/docs/events/on-end-edit"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/end-edit.html"
          },
          {
            "cid": 567,
            "sid": "export-data-buffer",
            "name": "export-data-buffer",
            "label": "exportDataBuffer",
            "data": {
              "body": "> 여러개의 `ibsheet`를 하나의 엑셀파일에 다운로드 하고자 할때 사용됩니다. > `exportDataBuffer(1(true))`로 실행하면 이후 각 시트에서 [exportData](./export-data)를 호출하더라도 다운로드가 이루어지지 않고, `exportDataBuffer(0(false))` 호출하는 순간 각 시트의 내용이 엑셀파일 안에 각기 다른 worksheet에 다운로드 됩니다. > 해당 기능을 이용하여 하나의 시트로 여러개의 워크시트를 갖는 엑셀파일을 만드는 것도 가능합니다. ### Syntax ```javascript void exportDataBuffer( isBuffer ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |isBuffer|`boolean`|<span class='required'>필수</span>|버퍼링 여부 `0(false)`:버퍼링 사용 안함 (`default`) `1(true)`:버퍼링 사용| ### Return Value ***none*** ### Example ```javascript //1. 일반적인 사용 방법 //버퍼링 시작 sheet1.exportDataBuffer(true); //첫번째 시트 데이터 버퍼링 var param1 = { fileName:\"여행경비 내역.xlsx\", sheetName:\"교통비\" //엑셀파일내 워크시트 명 }; sheet1.exportData(param1); //두번째 시트 데이터 버퍼링 var param2 = { sheetName:\"식비\" //엑셀파일내 워크시트 명 }; sheet2.exportData(param2); //세번째 시트 데이터 버퍼링 var param3 = { sheetName:\"숙박비/기타\" //엑셀파일내 워크시트 명 }; sheet3.exportData(param3); //전체 시트 다운로드(실제 다운로드가 시작됨) sheet1.exportDataBuffer(false); //2. 하나의 시트에서 컬럼별로 나누어 엑셀파일을 생성 //버퍼링 시작 sheet.exportDataBuffer(true); //4개 컬럼만 첫번째 워크시트로 다운 var param1 = { sheetName:\"12분기\", downCols:\"1QTCost|1QTProfit|2QTCost|2QTProfit\" }; sheet.exportData(param1); //나머지 컬럼을 두번째 워크시트로 다운 var param2 = { sheetName:\"34분기 및 종합\" downCols:\"3QTCost|3QTProfit|4QTCost|4QTProfit|Total|Summary\" }; sheet.exportData(param2); //버퍼링 종료 (실제 다운로드가 시작됨) sheet.exportDataBuffer(false); ```",
              "see": [
                {
                  "label": "exportData method",
                  "url": "./export-data"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.24|기능 추가|"
            },
            "url": "docs/funcs/core/export-data-buffer.html"
          },
          {
            "cid": 568,
            "sid": "export-data",
            "name": "export-data",
            "label": "exportData",
            "data": {
              "body": "> 시트의 내용을 엑셀 파일로 다운로드 합니다. > 해당 함수를 사용하시려면 `jszip` 라이브러리가 반드시 필요합니다. > 기본적으로 `jszip` 라이브러리가 있는 경우, 그것을 그대로 사용하게 되고 `jszip` 라이브러리가 없는 경우, `plugins/jszip.min.js` 라이브러리를 가져와 사용합니다. > [down2Excel](/docs/funcs/excel/down-to-excel) 과 동일한 기능(서버에서 처리하는 기능을 제외하고)을 제공합니다. (`xlsx 기준`) > 지원 하는 파일 형식은 **xlsx, txt, csv** 입니다. > > 해당 함수는 [down2Text](/docs/funcs/excel/down-to-text) 에서 사용되는 기능 또한 제공됩니다. (`colDelim, rowDelim, downSum`) ### Syntax ```javascript void exportData( param ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |fileName|`string`|<span class='optional'>선택</span>|생성할 엑셀파일 명 (`default: Excel.xlsx`) **이 속성에서 파일명과 함께 확장자를 xlsx, txt, csv로 붙이느냐에 따라서 생성 파일이 xlsx형식, (txt, csv)형식으로 만들어집니다.** 해당 속성 사용시에는 확장자를 입력해야 적용된 파일이 다운로드 됩니다.| |sheetName|`string`|<span class='optional'>선택</span>|만들어지는 엑셀 파일의 WorkSheet에 부여할 이름 `(xlsx에서만 지원)`| |downRows|`string`|<span class='optional'>선택</span>|지정한 행만 다운로드 합니다. 별도의 설정이 없을시 모든 행이 다운로드 됩니다. 보여지는 행만 다운로드하고 싶을 경우 `\"Visible\"`로 설정하면 됩니다. (ex: \"1\\|3\\|4\\|5\\|9\" 식의 문자열) `downRows`를 사용하면 머지 기능이 동작하지 않습니다.| |downCols|`string`|<span class='optional'>선택</span>|지정한 열만 다운로드 합니다. 별도의 설정이 없을시 모든 열이 다운로드 됩니다. 보여지는 열만 다운로드하고 싶을 경우 `\"Visible\"`로 설정하면 됩니다. (ex: \"Price\\|AMT\\|TOTAL\" 식의 문자열)| |downTreeHide|`boolean`|<span class='optional'>선택</span>|tree를 사용하는 경우, 접혀진 행도 엑셀에 다운로드 할지 여부를 설정합니다. `1(true)`로 설정시 접혀있는 자식노드도 모두 다운로드 됩니다.(`default: 0(false)`)| |downHeader|`boolean`|<span class='optional'>선택</span>|헤더행을 다운로드 할지 여부를 설정합니다.(`default: 1(true)`)| |sheetDesign|`number`|<span class='optional'>선택</span>|시트의 디자인 요소를 엑셀에도 반영할지 여부를 설정합니다. 반영되는 디자인 요소는 다음과 같습니다: 헤더의 배경색,폰트명,폰트크기,데이터 배경색 `0`: 셀 외곽선을 제외한 모든 디자인을 적용하지 않습니다. `1`: 셀 외곽선을 포함해 모든 디자인을 적용합니다. (default) `2`: 셀 외곽선을 제외한 셀 스타일을 적용합니다. `3`: 셀 외곽선 및 스타일을 모두 적용하지 않습니다.`(xlsx에서만 지원)` `4`: 헤더행에만 모든 디자인을 적용합니다. |titleText|`string`|<span class='optional'>선택</span>|엑셀 문서의 상단에 원하는 문자를 추가합니다. 문자는 열구분자(\"\\|\")와 행구분자(`\"\\r\\n\"`)을 통해서 작성하실수 있습니다. 가령 \"A\\|B\\|C\\r\\nD\\|E\\|F\" 와 같이 입력한 경우 첫 행에 3개의 셀에 각각 A, B, C 값이 들어가고 두번째 행의 3개의 셀에 각각 D, E, F 값이 입력됩니다. 값 안에서 엔터를 포함하려면 `\"\\r\"` 이나 `\"\\n\"` 을 삽입하면 됩니다. `\"\\r\\n\"` 이 10개가 포함되면 11줄을 차지하게 되고 12번째 행부터 시트 내용이 출력됩니다. `(xlsx에서만 지원)`| |userMerge|`string`|<span class='optional'>선택</span>|`titleText`와 같이 사용하며, titleText를 원하는 모양으로 머지합니다. 입력방법은 4개의 숫자로 `\"머지시작셀 row index, 머지시작셀 col index, 아래로 병합할 행 개수(1을 설정하면 병합 없음), 우측으로 병합할 개수\"` 로 이루어 집니다. (여러개 병합시에는 띄어쓰기로 구분) 가령 `\"2,2,1,6 3,2,3,3\"`위와 같이 설정하였다면 2,2 셀부터 오른쪽으로 6칸이 병합되고, 3,2 셀부터 아래로 3칸, 오른쪽으로 3칸이 병합 됩니다. `(xlsx에서만 지원)` ![userMerge](/assets/imgs/userMerge.png)| |excelRowHeight|`number`|<span class='optional'>선택</span>|엑셀 문서의 행 높이를 설정합니다. -1 설정시 셀의 내용물 크기에 맞춰 엑셀 문서의 행 높이가 조절됩니다. `(xlsx에서만 지원)`| |excelHeaderRowHeight|`number`|<span class='optional'>선택</span>|엑셀의 헤더행의 높이를 설정합니다. `(xlsx에서만 지원)`| |wordWrap|`boolean`|<span class='optional'>선택</span>|엑셀 문서의 \"텍스트 줄바꿈\" 여부를 설정합니다.(`default: 1(true)`) `(xlsx에서만 지원)`| |comboValidation|`boolean`|<span class='optional'>선택</span>|Enum 타입으로 만들어진 열에 대해 엑셀에서도 데이터 기능을 통해 드롭다운리스트 형태로 표현합니다. `(xlsx에서만 지원)`| |rowDelim|`string`|<span class='optional'>선택</span>|text파일을 만들때 행 구분자(기본은 줄넘김 문자 `\"\\r\\n\"`) `(txt, csv)에서만 지원` |colDelim|`string`|<span class='optional'>선택</span>|txt 다운로드 일 경우(`default: \\t(탭문자)`, csv 다운로드 일 경우(`default: ,(콤마)` 업로드되는 파일에 따라 기본 구분자가 변경됩니다. `(txt, csv)에서만 지원` |hiddenColumn|`boolean`|<span class='optional'>선택</span>|숨은 컬럼들을 엑셀로 다운로드 받은 경우, 해당 컬럼이 눈에 보이지는 않지만 엑셀 메뉴중 \"숨기기 취소\"를 선택한 경우 해당 컬럼이 다시 보일 수 있도록 엑셀 문서에 다운로드 받는다. `hiddenColumn:1` 은 `downCols`와 **절대 같이 사용하시면 안됩니다.** `0(false)`: 엑셀 다운로드 시 감춰진 열도 Visible:1 컬럼과 동일하게 일반 컬럼처럼 표현됨 (`default`) `1(true)`:감춰진 열 다운로드 시 \"열 숨기기\" 형태로 엑셀 다운로드| |merge|`number`|<span class='optional'>선택</span>|시트의 머지 상태를 엑셀에 그대로 반영할지를 설정합니다. `0`: 사용 안 함 (`default`) `1`: 사용함 (셀 병합 시, 부속 셀의 값을 원본으로 유지함) `2`: 사용함 (셀 병합 시, 부속 셀의 값을 비움) `(xlsx에서만 지원)`| |textToGeneral|`boolean`|<span class='optional'>선택</span>|Type:`Text`의 엑셀 서식 형식 `0(false)`: Type:`Text`의 엑셀 서식을 텍스트 서식으로 지정 `1(true)`: Type:`Text`의 엑셀 서식을 일반 서식으로 지정(`default`)| |allTypeToText|`boolean`|<span class='optional'>선택</span>|시트의 `Int`, `Float` 타입을 제외한 모든 컬럼의 엑셀 서식을 `Text` 타입으로 받고자 하는 경우 설정합니다.(`default: 0(false)`) `(xlsx에서만 지원)`| |checkBoxOnValue|`string`|<span class='optional'>선택</span>|체크박스와 라디오 박스에서 체크를 한 경우 `1`값 대신 지정한 값을 사용합니다. `(xlsx에서만 지원)`| |checkBoxOffValue|`string`|<span class='optional'>선택</span>|체크박스와 라디오 박스에서 체크 해제를 한 경우 `0`값 대신 지정한 값을 사용합니다. `(xlsx에서만 지원)`| |downSum|`boolean`|<span class='optional'>선택</span>|합계 행 다운로드 여부를 설정합니다.(`default: 1(true)`)| |excelFontSize|`number`|<span class='optional'>선택</span>|엑셀의 폰트 크기를 설정합니다. `(xlsx에서만 지원)`| |excludeFooterRow|`boolean`|<span class='optional'>선택</span>|푸터 행 제외 여부를 설정합니다.(`default: 0(false)`) `(xlsx에서만 지원)`| |numberTypeToText|`boolean`|<span class='optional'>선택</span>|`Int`, `Float` 타입의 컬럼을 `Text` 타입으로 다운로드 받을지 여부를 설정합니다.(`default: 0(false)`) `(xlsx에서만 지원)`| |excelFontFamily|`string`|<span class='optional'>선택</span>|엑셀의 폰트를 설정합니다. `(xlsx에서만 지원)`| |exHead|`array[object]`|<span class='optional'>선택</span>|시트 상단에 표시하고 싶은 내용을 설정합니다. **titleText 속성과 같이 사용할 수 없으며, 같이 사용시 titleText속성은 무시됩니다.**`(xlsx에서만 지원)`| |exFoot|`array[object]`|<span class='optional'>선택</span>|시트 하단에 표시하고 싶은 내용을 설정합니다.`(xlsx에서만 지원)` |appendPrevSheet|`boolean`|<span class='optional'>선택</span>|[exportDataBuffer](./export-data-buffer) 메소드를 사용하여 2개 이상의 시트를 엑셀로 다운로드 할 때 마지막으로 작성한 워크시트에 해당 옵션이 적용된 시트를 덧붙일지 여부를 설정합니다. `0(false)`: 워크시트를 새로 생성하여 작성합니다.(`default`) `1(true)`: 마지막으로 작성한 워크시트에 시트를 덧붙입니다. `(xlsx에서만 지원)`| |onlyHeaderMerge|`boolean`|<span class='optional'>선택</span>|`1(true)`로 설정 시, 시트의 데이터 영역의 머지를 강제로 제한하고 헤더 영역의 머지만을 엑셀에 반영합니다.(`default: 0(false)`)| |freezePane|`number`|<span class='optional'>선택</span>|상단 행과 왼쪽 열을 틀 고정하여 다운로드하는 옵션입니다. 옵션 설정에 따라 다르게 틀 고정이 적용되어 다운로드되며, 비트 연산으로 동작합니다. `0`: 틀 고정을 적용하지 않음(`default`) `1`: 헤더 틀 고정 적용 (`2`과 함께 적용시 헤드 영역 틀 고정으로 동작) `2`: 헤드 영역 틀 고정 적용 `4`: 왼쪽 고정 열 틀 고정 적용| |numberFormatMode|`number`|<span class='optional'>선택</span>|실수 형태의 데이터 타입에 대한 셀 서식 설정 방식을 설정합니다. `0`:시트의 컬럼 포맷을 따릅니다. (`default`) `1`:셀의 값 기준에 따라 정수 또는 실수 형태로 셀 서식을 설정합니다. `2`:일반 서식으로 설정합니다.| ### exHead,exFoot options |Name|Type|Required|Description| |----------|-----|---|----| |Height|`number`|<span class='optional'>선택</span>|행의 높이| |Cells|`array[object]`|<span class='optional'>선택</span>|행의 각셀에 표시될 내용,속성 설정| |Cells[{Value}]|`string`|<span class='optional'>선택</span>|셀에 표시될 내용| |Cells[{Color}]|`string`|<span class='optional'>선택</span>|셀의 배경색 (ex `#FFDDEE`)| |Cells[{TextColor}]|`string`|<span class='optional'>선택</span>|셀의 글자색 (ex `#446622`)| |Cells[{TextSize}]|`number`|<span class='optional'>선택</span>|셀의 글자 크기| |Cells[{TextStyle}]|`number`|<span class='optional'>선택</span>|셀의 글자 style ([참고](/docs/props/cell/text-style))| |Cells[{TextFont}]|`string`|<span class='optional'>선택</span>|셀의 글자 family ([참고](/docs/props/cell/text-font))| |Cells[{Wrap}]|`boolean`|<span class='optional'>선택</span>|자동 줄바꿈 여부(default: true)| |Cells[{Type}]|`string`|<span class='optional'>선택</span>|셀타입(Image를 사용해야 하는 경우에만 Img로 설정)| |Cells[{ColSpan}]|`number`|<span class='optional'>선택</span>|가로 병합 셀 개수(default: 1)| |Cells[{RowSpan}]|`number`|<span class='optional'>선택</span>|세로 병합 셀 개수(default: 1)| |Cells[{BorderTop}]|`string`|<span class='optional'>선택</span>|`상단 보더` 굵기,스타일,색상을 구분자 \" \"로 연결한 문자열 (ex: \"1 solid #FF0000\")| |Cells[{BorderBottom}]|`string`|<span class='optional'>선택</span>|`하단 보더` 굵기,스타일,색상을 구분자 \" \"로 연결한 문자열 (ex: \"1 solid #FF0000\")| |Cells[{BorderLeft}]|`string`|<span class='optional'>선택</span>|`좌측 보더` 굵기,스타일,색상을 구분자 \" \"로 연결한 문자열 (ex: \"1 solid #FF0000\")| |Cells[{BorderRight}]|`string`|<span class='optional'>선택</span>|`우측 보더` 굵기,스타일,색상을 구분자 \" \"로 연결한 문자열 (ex: \"1 solid #FF0000\")| #### Cells 내에 Border 속성 설정시 주의 사항 1. 굵기는 px단위가 아닌 1은 가늘게 2는 굵게 표시 스타일은 `solid`,`dashed`,`dotted` 제공 색상은 hex code로 설정 (ex `#FF00FF`) 2. 좌우로 붙어있는 셀에 각각 우측보더와 좌측보더를 다르게 설정시 우측셀에 설정한 좌측 보더값이 적용됨 상하로 붙어있는 셀에 각각 하단보더와 상단보더를 다르게 설정시 하단셀에 설정하 상단 보더값이 적용됨 3. RowSpan,ColSpan속성으로 통해 병합 된 셀이라도 각 셀별로 보더 설정이 필요함 ### Return Value ***none*** ### Example ```javascript // xlsx 확장자로 다운로드, 보여지는 행만 다운로드. sheet.exportData({fileName: \"재고리스트.xlsx\",downRows: \"Visible\"}); // txt 확장자로 다운로드, 열 구분자 ',' 로 변경. var param = {fileName: \"exportTEXT.txt\", colDelim: \",\"}; sheet.exportData(param); // csv 확장자로 다운로드, 합계행 다운받지 않음. var param = {fileName: \"exportCSV.csv\", downSum: 0} sheet.exportData(param); ``` ```javascript //exHead 사용 예제 var param = { sheetDesign: 1, merge: 1, fileName: '22년도_근무외수당.xlsx' }; param[\"exHead\"] = [ { // 첫번째 행 Height: 30, Cells:[ { // 첫번째 셀에 이미지 설정 Type:\"Img\", Value:\"|/assets/imgs/logo.png|78|28\" }, {},{},{},{},{},{},{}, //7칸 빈셀 { Type:\"Text\", Value:\"(취급주의)대외비\", TextColor:\"#FF0000\", Wrap: 0, TextSize: 14 } ] }, { // 두번째 행 Height: 40, Cells:[ {}, //첫칸 빈셀 { Type:\"Text\", Align: \"Center\", Value: \"2022년 근무 외 수당 청구 내역\", Color:\"#DEDEDE\", TextSize: 45, TextStyle: 1, BorderTop:\"2 dashed #0000FF\", BorderBottom:\"2 dashed #0000FF\", BorderLeft:\"2 dashed #0000FF\", ColSpan: 8 }, { BorderTop:\"2 dashed #0000FF\", BorderBottom:\"2 dashed #0000FF\" }, { BorderTop:\"2 dashed #0000FF\", BorderBottom:\"2 dashed #0000FF\" }, { BorderTop:\"2 dashed #0000FF\", BorderBottom:\"2 dashed #0000FF\" }, { BorderTop:\"2 dashed #0000FF\", BorderBottom:\"2 dashed #0000FF\" }, { BorderTop:\"2 dashed #0000FF\", BorderBottom:\"2 dashed #0000FF\" }, { BorderTop:\"2 dashed #0000FF\", BorderBottom:\"2 dashed #0000FF\" }, { BorderTop:\"2 dashed #0000FF\", BorderBottom:\"2 dashed #0000FF\", BorderRight:\"2 dashed #0000FF\" } ] }, {}, // 3번째 행 (빈행) {// 4번째 행 Cells:[ { Value:\"부서\", Align:\"Right\", Color:\"#DEDEDE\", BorderTop:\"1 solid #222222\", BorderRight:\"1 solid #222222\", BorderBottom:\"1 solid #222222\", BorderLeft:\"1 solid #222222\", },{ ColSpan: 3, Value:\"총무부\", Align:\"Left\", BorderTop:\"1 solid #222222\", BorderRight:\"1 solid #222222\", BorderBottom:\"1 solid #222222\", BorderLeft:\"1 solid #222222\", }, { BorderTop:\"1 solid #222222\", BorderBottom:\"1 solid #222222\" }, { BorderTop:\"1 solid #222222\", BorderBottom:\"1 solid #222222\", BorderRight:\"1 solid #222222\" } ] }, {// 5번째 행 Cells:[ { Value:\"기간\", Align:\"Right\", Color:\"#DEDEDE\", BorderTop:\"1 solid #222222\", BorderRight:\"1 solid #222222\", BorderBottom:\"1 solid #222222\", BorderLeft:\"1 solid #222222\", }, { ColSpan: 3, Value:\"2022/01/01 ~ 2022/12/31\", Align:\"Left\", BorderTop:\"1 solid #222222\", BorderBottom:\"1 solid #222222\", BorderLeft:\"1 solid #222222\", }, { BorderTop:\"1 solid #222222\", BorderBottom:\"1 solid #222222\" }, { BorderTop:\"1 solid #222222\", BorderBottom:\"1 solid #222222\", BorderRight:\"1 solid #222222\" } ] } ]; param[\"exFoot\"] = [ {}, //첫번째 행 (빈행) { Height:30, Cells:[ { Value: \"출력: 2023-06-23 홍길동\", Align: \"Left\", Wrap: 0 } ] } ]; sheet.exportData(param); ``` ![exHead,exFoot](/assets/imgs/exportDataExHeadExFoot.png \"exHead,exFoot\") ### `downCols, downRows` 사용시 `merge` 적용 정리 | downCols |화면과 동일하게 컬럼 설정 | 화면과 다르게 컬럼 설정 | | ------ | ------ | ------ | | downRows 사용| X | X | | downRows 사용 안함 | O | 아래 설명 참고| merge 옵션을 적용해 downCols를 사용하시려면 downCols에 머지가 이뤄진 컬럼을 **순서대로** **모두** 포함하고 있어야만 합니다. **Visible: 0이 설정된 컬럼이 있다면 해당 컬럼도 반드시 downCols에 포함해둬야만 합니다.** 머지가 이뤄진 컬럼 중 특정 컬럼이 빠지거나, 머지가 이뤄진 컬럼을 모두 포함하고 있더라도 다운로드받는 컬럼의 순서가 다르면 엑셀 다운시 머지가 정상적으로 이뤄지지 않습니다. ![downCols사용시 머지](/assets/imgs/downcols_merge.png \"downCols사용시 머지\") 이미지로 예를 들자면, \"머지 컬럼\" 컬럼을 온전히 머지가 적용된 채로 다운로드받고 싶다면 downCols: \"컬럼1|컬럼2|컬럼3|컬럼4\"와 같이 설정하셔야 합니다. downCols: \"컬럼2|컬럼3|컬럼4\"와 같이 특정 컬럼을 제외하거나 downCols: \"컬럼4|컬럼1|컬럼3|컬럼2\"와 같이 컬럼 순서를 바꾸시면 머지가 온전히 적용되지 않습니다. ### 템플릿 파일을 활용한 엑셀 파일 다운로드 `tempFile` 옵션은 미리 서버에 템플릿을 준비해둔 뒤, 해당 템플릿에 시트 데이터만 삽입해 엑셀 파일을 다운로드하고 싶으실 때 사용하는 옵션입니다. 템플릿 기능을 사용하시려면 `Down2Excel.jsp`또는 `Down2Excel.aspx`에 미리 `TempRoot` 설정을 이용해 템플릿 파일 폴더 위치를 지정해주셔야 됩니다. `startRow`, `startCol` 옵션으로 템플릿 파일에서 데이터를 작성하기 시작할 위치를 지정하실 수 있으며, `sheetNo` 옵션으로 템플릿 파일에서 데이터를 작성할 워크시트를 지정하실 수 있습니다. 더불어 `tempFile` 옵션을 이용해 엑셀 파일을 다운로드받는 경우, 디자인은 온전히 템플릿 파일에 설정된 디자인을 따라가게 되며 `excelFontSize`, `excelRowHeight`, `sheetDesign` 등 옵션은 무시됩니다.",
              "see": [
                {
                  "label": "importData method",
                  "url": "./import-data"
                },
                {
                  "label": "AutoExcelMode cfg",
                  "url": "/docs/props/cfg/auto-excel-mode"
                },
                {
                  "label": "LevelMark cfg",
                  "url": "/docs/props/cfg/level-mark"
                },
                {
                  "label": "down2Excel method",
                  "url": "/docs/funcs/excel/down-to-excel"
                },
                {
                  "label": "down2Text method",
                  "url": "/docs/funcs/excel/down-to-text"
                },
                {
                  "label": "onBeforeExport event",
                  "url": "/docs/events/on-before-export"
                },
                {
                  "label": "onExportFinish event",
                  "url": "/docs/events/on-export-finish"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.6|`fileName`, `sheetName`, `downRows`, `downCols`, `downRows`, `downTreeHide`, `downHeader`, `sheetDesign`, `titleText`, `userMerge`, `excelRowHeight`, `excelHeaderRowHeight`, `wordWrap`, `comboValidation`, `rowDelim`, `colDelim`, `downSum` 기능 추가||core|8.0.0.20|파일 형식 내용 추가||core|8.0.0.21|`merge`, `allTypeToText`, `checkBoxOnValue`, `checkBoxOffValue`, `excelFontSize`, `excludeFooterRow`, `numberTypeToText` (xlsx 에서만 지원)||core|8.0.0.29|`excelFontFamily` 기능 추가 (xlsx 에서만 지원)||core|8.1.0.30|`exHead`,`exFoot` 기능 추가 (xlsx 에서만 지원)||core|8.1.0.39|`excelRowHeight : -1` 설정 추가||core|8.1.0.41|`sheetDesign : 4` 설정 추가||core|8.1.0.83|`appendPrevSheet` 설정 추가 (exportDataBuffer 사용시에만 사용 가능)||core|8.2.0.5|`onlyHeaderMerge` 설정 추가||core|8.2.0.11|`hiddenColumn` 설정 추가||core|8.2.0.25|`freezePane` 설정 추가||core|8.3.0.16|`numberFormatMode` 설정 추가|"
            },
            "url": "docs/funcs/core/export-data.html"
          },
          {
            "cid": 569,
            "sid": "extract-data-text",
            "name": "extract-data-text",
            "label": "extractDataText",
            "data": {
              "body": "> 시트의 헤더를 포함한 모든 데이터를 문자열로 반환합니다. > 컬럼과 컬럼 사이는 탭(`\\t`)으로 행과 행사이는 줄바꿈(`\\r\\n`) 문자열로 구분하여 반환 합니다. > **<mark>주의</mark> : 데이터 건수가 많아질수록 성능에 문제가 발생할 수 있습니다.** ### Syntax ```javascript string extractDataText( excludeHideData ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |excludeHideData|`boolean`|<span class='optional'>선택</span>|숨겨진 컬럼, 데이터는 제외하고 반환 여부 `0(false)`:숨겨진 컬럼, 데이터 포함 (`default`) `1(true)`:숨겨진 컬럼, 데이터 제외| ### Return Value ***string*** : 시트의 모든 데이터 (Header, Head, Data, Foot, FormulaRow) ### Example ```javascript // 시트의 모든 데이터를 문자열로 반환 var txt = sheet.extractDataText(); // 숨겨진 컬럼, 데이터는 제외 var txt = sheet.extractDataText( {excludeHideData:1 } ); ``` ### Since |product|version|desc| |---|---|---| |core|8.2.0.6|기능 추가| |core|8.2.0.7|`excludeHideData` 인자 추가|",
              "since": "|product|version|desc||---|---|---||core|8.2.0.6|기능 추가||core|8.2.0.7|`excludeHideData` 인자 추가|"
            },
            "url": "docs/funcs/core/extract-data-text.html"
          },
          {
            "cid": 570,
            "sid": "find-rows",
            "name": "find-rows",
            "label": "findRows",
            "data": {
              "body": "> 시트에서 검색 식([SearchExpression](/docs/props/cfg/search-expression))에 알맞은 데이터를 찾아 선택, 마킹, 포커스 등 처리할 수 있습니다. ### Syntax ```javascript void findRows( action, match, callback ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |action|`string`|<span class='required'>필수</span>| 검색 기능(action)을 설정합니다.| |match|`boolean`|<span class='optional'>선택</span>| 전체 셀 내용이 일치할 경우만 검색 대상에 포함합니다. `0(false)`:데이터에서 찾을 데이터가 포함 된 경우 (`default`) `1(true)`:데이터에서 찾을 데이터가 일치 할 경우| |callback|`function`|<span class='optional'>선택</span>| findRows로 데이터 검색이 완료된 뒤 호출되는 콜백 함수입니다. 콜백 함수의 인자로 두 가지 인자가 주어집니다. 1. `action`: 현재 실행된 검색 기능 2. `result`: findRows로 조회된 데이터 결과값| ### 검색 기능(action) |Name| Description | |----------|----| |`'Find'`| 다음 행 검색 | |`'FindPrev'`| 이전 행 검색 | |`'Mark'`| 검색식에 해당하는 행을 강조 (총 갯수가 `sheet.SearchCount`에 설정됨) | |`'Select'`| 검색식에 해당하는 행을 선택 (총 갯수가 `sheet.SearchCount`에 설정됨) | |`'Filter'`| 검색식에 해당하는 행만 보이도록 필터링 (총 갯수가 `sheet.FilterCount`에 설정됨) | |`'Clear'`| 검색 결과를 초기화 | ### Example ```javascript // 시트에서 '서울'을 포함한 데이터 행을 검색 sheet.SearchExpression = '서울'; sheet.findRows('Find'); ```",
              "see": [
                {
                  "label": "SearchCaseSensitive cfg",
                  "url": "/docs/props/cfg/search-case-sensitive"
                },
                {
                  "label": "SearchCount cfg",
                  "url": "/docs/props/cfg/search-count"
                },
                {
                  "label": "SearchExpression cfg",
                  "url": "/docs/props/cfg/search-expression"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.98|`callback` 기능 공개|"
            },
            "url": "docs/funcs/core/find-rows.html"
          },
          {
            "cid": 571,
            "sid": "find-text",
            "name": "find-text",
            "label": "findText",
            "data": {
              "body": "> 열 내에 특정 문자열을 가지는 첫번 째 [데이터 로우 객체](/docs/appx/row-object)를 반환합니다. ### Syntax ```javascript object findText( col, searchText, startRow, matchMode, caseSensitive, excludeKeys ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |col |`string`|<span class='required'>필수</span>|열 이름| |searchText |`string`|<span class='required'>필수</span>|찾을 문자열| |startRow |`object`|<span class='optional'>선택</span>|검색 시작 행의 [데이터 로우 객체](/docs/appx/row-object) (`default: 시트의 첫번째 행`)| |matchMode|`number`|<span class='optional'>선택</span>|문자열 매칭 모드 `-1`:전체가 동일한 값 (`default`) `0`:앞 부분이 같은 값 `1`:뒷 부분이 같은 값 `2`:일부가 같은 값| |caseSensitive |`boolean`|<span class='optional'>선택</span>|대소문자 구별 여부 `0(false)`:대소문자 구별 안함 (`default`) `1(true)`:대소문자 구별 적용| |excludeKeys |`boolean`|<span class='optional'>선택</span>|[Enum](/docs/props/col/enum) 열 검색 시 [EnumKeys](/docs/props/col/enum-keys)를 검색에 포함 할 지 여부 `0(false)`:[Enum](/docs/props/col/enum) 열 검색 시 [EnumKeys](/docs/props/col/enum-keys)를 검색에 포함 안함 `1(true)`:[Enum](/docs/props/col/enum) 열 검색 시 [EnumKeys](/docs/props/col/enum-keys)를 검색에 포함 (`default`)| ### Return Value ***object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript // sTitle 열의 셀 값에서 Java Project1과 일치하는 첫 번째 데이터 로우 객체를 리턴합니다. var row = sheet.getFirstRow(); var sdata = sheet.findText(\"sTitle\", \"Java project1\", row, -1, 1); ```",
              "see": [
                {
                  "label": "getString method",
                  "url": "./get-string"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.21|`excludeKeys` 기능 추가|"
            },
            "url": "docs/funcs/core/find-text.html"
          },
          {
            "cid": 572,
            "sid": "fit-col-width",
            "name": "fit-col-width",
            "label": "fitColWidth",
            "data": {
              "body": "> 각 컬럼 너비를 인자로 설정한 비율 단위로 설정하거나 시트의 전체 너비에 맞게 비율 기준으로 재 설정 합니다. > `ratio` 인자를 설정하지 않은 경우 모든 컬럼의 너비 합이 시트의 너비에 맞게 현재의 컬럼 너비의 비율에 맞추어 재설정 되며, `ratio` 인자를 설정한 경우 해당 비율로 재설정 됩니다. > **<mark>주의</mark> : [RelWidth](./docs/props/col/rel-width) 사용하는 경우 해당 기능이 정상적으로 지원되지 않습니다.** > `ratio` 설정 시 컬럼의 갯수와 비율 배분(전체 100 기준으로 배분하여 나머지가 남지 않도록)을 반드시 맞춰주어야 정상 동작 됩니다. ### Syntax ```javascript boolean fitColWidth(ratio); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |ratio |`array[number]`|<span class='optional'>선택</span>|컬럼의 너비 비율| ### Return Value ***boolean*** : 적용 여부 (너비의 변경이 이루어지면 true, 변화가 없으면 false 리턴) ### Example ```javascript // 컬럼들의 현재의 너비 비율을 유지하며 시트 너비에 맞게 재설정 처리 sheet.fitColWidth(); // 시트전체 너비를 기준으로 첫번째 컬럼부터 10%, 50%, 30%, 10% 의 너비 비율로 재설정 처리 sheet.fitColWidth([10,50,30,10]); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.1.0.41|기능 추가|"
            },
            "url": "docs/funcs/core/fit-col-width.html"
          },
          {
            "cid": 573,
            "sid": "fit-size",
            "name": "fit-size",
            "label": "fitSize",
            "data": {
              "body": "> 특정 열의 너비를 해당 열에 있는 글자 중 가장 긴 글자에 맞게 조정합니다. (엑셀의 autofit) > 전체 데이터가 아닌 1~100행 사이의 글자열을 기준으로 너비를 조정합니다. > 서버 페이징 조회 사용시 기능 사용이 어려울 수 있습니다. > `rows` 인자를 사용하여 너비를 조정할 때 검사하는 데이터행들을 정할 수 있습니다. > 단, `rows`에 데이터행들이 많아질수록 성능문제가 생길 수 있습니다. ### Syntax ```javascript void fitSize(col, norender, rows); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |col |`string`|<span class='required'>필수</span>|열이름| |norender|`boolean`|<span class='optional'>선택</span><mark>(사용주의)</mark>|즉시 화면에 반영할 것인지 여부 해당 기능을 사용한 뒤, 다른 동작을 실행 할 경우 `renderBody()`를 반드시 먼저 실행 해야 합니다. `0(false)`:즉시 반영 (`default`) `1(true)`:반영 안함 | |rows|`array`|<span class='optional'>선택</span>|특정 열의 너비를 조정할 행들| ### Return Value ***none*** ### Example ```javascript // DESC 열의 너비를 열 내 가장 긴 글자열에 맞게 조정합니다. sheet.fitSize(\"DESC\"); // rows 전체 데이터로우를 검사. 전체 데이터 로우를 검사시 속도에서 문제가 생길 수 있습니다. var totalRows = sheet.getDataRows(); sheet.fitSize(\"DESC\", 0, totalRows); ```",
              "see": [
                {
                  "label": "setColWidth method",
                  "url": "./set-col-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/fit-size.html"
          },
          {
            "cid": 574,
            "sid": "focus",
            "name": "focus",
            "label": "focus",
            "data": {
              "body": "> 지정한 특정 셀에 포커스를 줍니다. > 시트 외부에 버튼을 클릭함으로써 포커스를 설정하고자 하는 경우에는 `setTimeout`을 통해 딜레이를 주어야 합니다. ### Syntax ```javascript boolean focus( row, col, pagepos, ignoreEvent, triggerOnFocus ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)|기본값은 포커스된 행이 있으면 포커스된 행, 포커스된 행이 없으면 보이는 행의 첫번째 |col|`string`|<span class='required'>필수</span>|열이름|기본값은 포커스된 열이 있으면 포커스된 열, 포커스된 열이 없으면 보이는 첫번째 열 |pagepos|`number`|<span class='optional'>선택</span>|서버페이징 사용시 페이지 지정 (`default: null`)| |ignoreEvent|`boolean`|<span class='optional'>선택</span>|함수 호출시 `focus Event(onBeforeFocus, onFocus)`를 발생시킬지 유무 `0(false)`:`focus Event` 발생 시킴 (`default`) `1(true)`:`focus Event`를 발생 시키지 않음| |triggerOnFocus|`boolean`|<span class='optional'>선택</span>|이미 선택한 셀을 다시 선택하는 함수 호출시 `focus Event(onBeforeFocus, onFocus)`를 항상 발생시킵니다. `0(false)`:이미 선택된 셀을 함수로 다시 포커스 하였을 때, `focus Event`를 발생 시키지 않음 (`default`) `1(true)`:이미 선택된 셀을 함수로 다시 포커스 하였을 때, `focus Event` 를 발생 시킴| ### Return Value ***boolean*** : 포커스가 지정되면 true, 이미 포커스가 된 셀에 함수 적용시 false, 해당셀이 없는 경우 null 리턴 ### Example ```javascript //버튼 클릭시 특정셀에 포커스 지정 document.getElementById(\"btn_validCheck\").onclick = function(){ setTimeout(function(){ var errRow = sheet.getRowById(\"AR4\"); sheet.focus(errRow, \"CARNO\"); } , 10); } ```",
              "see": [
                {
                  "label": "blur method",
                  "url": "./blur"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.7|`ignoreEvent` 인자 추가||core|8.1.0.94|`triggerOnFocus` 인자 추가|"
            },
            "url": "docs/funcs/core/focus.html"
          },
          {
            "cid": 575,
            "sid": "get-attribute",
            "name": "get-attribute",
            "label": "getAttribute",
            "data": {
              "body": "> 특정 행,열,셀에 설정된 속성값을 확인합니다. > `row`를 `null`로 설정시 열에 설정한 속성값이 리턴됩니다. > `col`을 `null`로 설정시 행에 설정한 속성값이 리턴됩니다. ### Syntax ```javascript mixed getAttribute( row, col, attr); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row |`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='optional'>선택</span>|열이름| |attr|`string`|<span class='optional'>선택</span>|확인하고자 하는 속성명| ### Return Value ***mixed ( `number` \\| `string` )*** : 인자에 따라 행이나 열,셀의 속성 값을 리턴 ### Example ```javascript //특정 열의 타입 확인 if (sheet.getAttribute(null, sheet.getFocusedCol(), \"Type\") == \"Radio\") { alert(\"해당 열에는 적용할 수 없습니다.\"); } //합계 행의 셀의 글자색 확인 var fcolor = sheet.getAttribute( sheet.getRowById(\"FormulaRow\"), sheet.getFocusedCol(), \"TextColor\"); ```",
              "see": [
                {
                  "label": "setAttribute method",
                  "url": "./set-attribute"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-attribute.html"
          },
          {
            "cid": 576,
            "sid": "get-body-height",
            "name": "get-body-height",
            "label": "getBodyHeight",
            "data": {
              "body": "> 시트 데이터 영역의 높이를 리턴합니다. > 헤더나 필터 행의 높이는 포함되지 않습니다. ### Syntax ```javascript number getBodyHeight( ); ``` ### Return Value ***number*** : 데이터 영역의 높이 (pixel 단위) ### Example ```javascript //데이터 영역의 높이를 리턴함. (세로 스크롤과 무관함) var h = sheet.getBodyHeight( ); ```",
              "see": [
                {
                  "label": "getRowTop method",
                  "url": "./get-row-top"
                },
                {
                  "label": "getScrollTop method",
                  "url": "./get-scroll-top"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-body-height.html"
          },
          {
            "cid": 577,
            "sid": "get-body-width",
            "name": "get-body-width",
            "label": "getBodyWidth",
            "data": {
              "body": "> 특정 [Section](/docs/props/col/section)의 너비(틀고정 기준 좌/우측)를 확인합니다. ### Syntax ```javascript number getBodyWidth( section ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |section |`number`|<span class='optional'>선택</span>|너비를 알고 싶은 영역 `0`:왼쪽 `1`:가운데 (`default`) `2`:오른쪽| ### Return Value ***number*** : 섹션의 너비 (pixel 단위) ### Example ```javascript //왼쪽 틀고정 영역의 너비를 확인 var w = sheet.getBodyWidth(0); ```",
              "see": [
                {
                  "label": "getBodyHeight method",
                  "url": "./get-body-height"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-body-width.html"
          },
          {
            "cid": 578,
            "sid": "get-can-edit",
            "name": "get-can-edit",
            "label": "getCanEdit",
            "data": {
              "body": "> 특정 셀의 편집 가능 여부를 확인합니다. ### Syntax ```javascript number getCanEdit( row, col ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col|`string`|<span class='required'>필수</span>|열이름| ### Return Value ***number*** |value|설명| |-----|-----| |`0`|편집 불가(읽기 전용) ![CanEdit](/assets/imgs/canEdit0.png \"CanEdit\")| |`1`|편집 가능 ![CanEdit](/assets/imgs/canEdit1.png \"CanEdit\")| |`2`|행의 내용은 편집 불가하지만, 편집 미리보기를 제공 ![CanEdit](/assets/imgs/canEdit2.png \"CanEdit\")| ### Example ```javascript //특정 셀에 편집 가능 여부를 확인. var edit = sheet.getCanEdit(sheet.getFocusedRow(), \"RES_ENDDATE\"); if (!edit) { alert(\"마감되었습니다\"); } ```",
              "see": [
                {
                  "label": "CanEdit row",
                  "url": "/docs/props/row/can-edit"
                },
                {
                  "label": "CanEdit col",
                  "url": "/docs/props/col/can-edit"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-can-edit.html"
          },
          {
            "cid": 579,
            "sid": "get-can-focus",
            "name": "get-can-focus",
            "label": "getCanFocus",
            "data": {
              "body": "> 특정 행이나 셀이 포커스 될 수 있는지 여부를 확인합니다. ### Syntax ```javascript boolean getCanFocus( row, col ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='optional'>선택</span>|열이름| ### Return Value ***boolean*** : 포커스 가능 여부 (`0(false)`: 포커스 불가, `1(true)`: 포커스 가능) ### Example ```javascript //id가 AR33인 행이 포커스가 들어갈 수 있는지 여부 확인 var cf = sheet.getCanFocus(sheet.getRowById(\"AR33\")); //특정 셀에 포커스가 들어갈 수 있는지 여부 확인 var cf = sheet.getCanFocus(sheet.getRowById(\"AR5\") , \"CA_DSC\"); ```",
              "see": [
                {
                  "label": "focus method",
                  "url": "./focus"
                },
                {
                  "label": "isFocused method",
                  "url": "./is-focused"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-can-focus.html"
          },
          {
            "cid": 580,
            "sid": "get-cell",
            "name": "get-cell",
            "label": "getCell",
            "data": {
              "body": "> 특정 셀의 Html 태그(td)를 가져옵니다. > `javascript`의 `getBoundingClientRect()` 메서드를 이용하여 셀의 크기와 현재 뷰포트에서의 상대적인 위치 정보를 제공하는 `DOMRect` 객체를 반환 받을 수 있습니다. > 태그 내에 style을 수정할 수는 있으나 태그 자체를 수정하는 것을 불가능합니다. > [SearchMode](/docs/props/cfg/search-mode): 0(FastLoad) 에서는 사용하실 수 없습니다. ### Syntax ```javascript object getCell( row, col ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| ### Return Value ***object*** : Html TD 태그 객체 ### Example ```javascript // 특정 셀에 설정된 클레스에 Black_Bold 클레스를 추가한다. var ctd = sheet.getCell( sheet.getRowById(\"AR15\"), \"EMT_XL\" ); ctd.className = ctd.className+\" Black_Bold\"; // 특정 셀의 현재 뷰포트 기준 top 값을 구합니다. var top = ctd.getBoundingClientRect().top; ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-cell.html"
          },
          {
            "cid": 581,
            "sid": "get-changed-data",
            "name": "get-changed-data",
            "label": "getChangedData",
            "data": {
              "body": "> 시트 내에 변경된 내용(입력,수정,삭제)을 json형식의 **문자열**로 추출합니다. > 인자없이 호출시에는 전체 수정한 데이터를 모두 추출하고, row인자에 [데이터 로우 객체](/docs/appx/row-object)를 설정시 해당 행의 수정된 내용이 추출됩니다. > 두번째 인자를 통해 PK가 되는 열들을 지정하면 해당 열은 수정 여부와 관계 없이 같이 추출됩니다. > *이 함수는 행 전체 데이터가 추출되지 않고 수정이 이루어진 셀만 추출됨을 주의해 주세요.* ### Syntax ```javascript string getChangedData(row, attrs, dataonly); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object)| |attrs|`array[string]`|<span class='optional'>선택</span>|열이름을 갖는 배열 (ex:`[\"ColName1\",\"ColName3\"]`)| |dataonly|`boolean`|<span class='optional'>선택</span>|수정 여부 확인을 Sheet전체 영역과 Data영역만 대상으로 지정할 지 여부 `0(false)`:Sheet전체 영역 대상 지정(`default`) `1(true)`:Data영역만 대상 지정| ### Return Value ***json 형식의 string*** ```js '{\"Changes\":[{\"id\":\"AR4\",\"Changed\":1,\"ColName1\":\"1234\",\"ColName5\":\"ABCDE\"},{\"id\":\"AR12\",\"Changed\":1,\"ColName2\":\"23456\"},{\"id\":\"AR15\",\"Deleted\":1},{\"id\":\"0\",\"Added\":1,\"ColName1\":\"2345\",\"ColName2\":\"4567\"...}]}' ``` ### Example ```javascript var chgData = JSON.stringify(sheet.getChangedData({attrs:[\"CONTRACTNO\",\"RETURNDATE\"]}), null, '\\t'); //리턴된 JSON string (2건 수정되고 1건 삭제, 1건 신규) /* \"{ \"IO\": {}, \"Changes\": [{ \"id\": \"AR5\", \"Changed\": 1, \"CONTRACTNO\": \"SS1944111234933\", \"RETURNDATE\": \"1325602800000\", \"CARNO\": \"52허571123\" }, { \"id\": \"AR9\", \"Changed\": 1, \"CONTRACTNO\": \"SS1937111124325\", \"RETURNDATE\": \"1325430000000\", \"CARNO\": \"33\" }, { \"id\": \"AR12\", \"Deleted\": 1, \"CONTRACTNO\": \"SS1140111240995\", \"RETURNDATE\": \"1326034800000\" }, { \"id\": \"AR101\", \"Added\": 1, \"Def\": \"R\", \"Parent\": \"0\", \"Next\": \"AR14\", \"Prev\": \"AR13\", \"CONTRACTNO\": \"\", \"RETURNDATE\": \"\", \"SEQ\": \"14\", \"CHK\": \"0\", \"DELIVERYDEPTNAME\": \"\", \"CARNO\": \"32가1234\", \"CARNAMEMSTNAME\": \"투싼 현대\", \"RENTFEE\": \"\", \"RENTDATE\": \"\", \"PROMOCODE\": \"\", \"NO\": \"\", \"DISCOUNTRATE\": \"0\", \"NETSALEAMT\": \"0\", \"SALEVATAMT\": \"0\", \"SALEAMT\": \"0\", \"OBJCARNO\": \"\", \"DEPTNAME\": \"\", \"CARNAMEMSTNAME2\": \"\", \"UNIT24\": \"0\", \"ACCNO\": \"\", \"ACCPERSONNAME\": \"\", \"ACCDATE\": \"\", \"REPAIRNO\": \"\", \"REPAIRPERSONNAME\": \"\", \"STARTDATE\": \"\", \"ENDDATE\": \"\", \"cls1\": \"\", \"cls2\": \"\" }] }\" */ //수정된 값이 없는 경우에는 아래와 같은 JSON string이 리턴됨 /* { \"IO\": {}, \"Changes\": [] } */ ```",
              "see": [
                {
                  "label": "acceptChangedData method",
                  "url": "./accept-changed-data"
                },
                {
                  "label": "hasChangedData method",
                  "url": "./has-changed-data"
                },
                {
                  "label": "getSaveJson method",
                  "url": "./get-save-json"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.3.0.20|dataonly 인자 추|"
            },
            "url": "docs/funcs/core/get-changed-data.html"
          },
          {
            "cid": 582,
            "sid": "get-child-rows",
            "name": "get-child-rows",
            "label": "getChildRows",
            "data": {
              "body": "> 특정 행의 전체 자식 행(손자 포함) 객체를 배열 형태로 반환합니다. ### Syntax ```javascript array getChildRows( row, maxLevel ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|부모행 [데이터 로우 객체](/docs/appx/row-object)| |maxLevel|`number`|<span class='optional'>선택</span>|확인할 자식행의 제한 레벨 (지정한 레벨 **미만** 리턴)| ### Return Value ***array[row object]*** : [데이터 로우 객체](/docs/appx/row-object) 배열 ### Example ```javascript // 첫번째 행의 자식 행들을 가져옵니다. var childNodes = sheet.getChildRows(sheet.getFirstRow()); ```",
              "see": [
                {
                  "label": "getParentRows method",
                  "url": "./get-parent-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.14|`maxLevel` 기능 추가|"
            },
            "url": "docs/funcs/core/get-child-rows.html"
          },
          {
            "cid": 583,
            "sid": "get-col-by-index",
            "name": "get-col-by-index",
            "label": "getColByIndex",
            "data": {
              "body": "> 좌측부터 열의 `index`를 기준으로 열이름을 확인합니다. > `index`는 `1`부터 시작합니다. > 해당 함수는 기본적으로 보여지는 열을 기준으로 확인합니다. > `includeHideCol` 또는 `Cfg: GetColWithHide` 를 설정하여 `Visible` 관계없이 가져옵니다. > 우선 순위는 `includeHideCol` > `GetColWithHide` 임으로, `GetColWithHide`를 `true`로 설정 하여도 `includeHideCol`을 `false`로 설정시에는 보여지는 열을 기준으로 동작하게 할 수 있습니다 ### Syntax ```javascript string getColByIndex( index, includeHideCol ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |index|`number`|<span class='required'>필수</span>|열의 `index` |includeHideCol|`boolean`|<span class='optional'>선택</span>|`true` 설정시 `Col.Visible` 관계없이 인덱스를 추출함. `0(false)`:숨김 열을 계산 대상으로 포함하지 않음 (`default`) `1(true)`:숨김 열도 계산 대상으로 포함| ### Return Value ***string*** : 지정한 위치에 있는 열이름 ### Example ```javascript //3번째 열(1부터 시작함으로)의 열이름을 확인 var fcol = sheet.getColByIndex(3); ```",
              "see": [
                {
                  "label": "getColIndex method",
                  "url": "./get-col-index"
                },
                {
                  "label": "GetColWithHide cfg",
                  "url": "/docs/props/cfg/get-col-with-hide"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.11|`includeHideCol` 인자 추가|"
            },
            "url": "docs/funcs/core/get-col-by-index.html"
          },
          {
            "cid": 584,
            "sid": "get-col-index",
            "name": "get-col-index",
            "label": "getColIndex",
            "data": {
              "body": "> 열이름에 대한 `index`를 확인합니다. > `index`는 `1`부터 시작합니다. > 해당 함수는 기본적으로 보여지는 열을 기준으로 확인합니다. > `includeHideCol` 또는 `Cfg: GetColWithHide` 를 설정하여 `Visible` 관계없이 가져옵니다. > 우선 순위는 `includeHideCol` > `GetColWithHide` 임으로, `GetColWithHide`를 `true`로 설정 하여도 `includeHideCol`을 `false`로 설정시에는 보여지는 열을 기준으로 동작하게 할 수 있습니다. ### Syntax ```javascript string getColIndex( col, includeHideCol ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |col|`string`|<span class='required'>필수</span>|열이름 |includeHideCol|`boolean`|<span class='optional'>선택</span>|`true` 설정시 `Col.Visible` 관계없이 인덱스를 추출함 `0(false)`:숨김 열을 계산 대상으로 포함하지 않음 (`default`) `1(true)`:숨김 열도 계산 대상으로 포함| ### Return Value ***number*** : 열이름이 위치한 index ### Example ```javascript //열이름이 EMP_NM인 열의 index var fcol = sheet.getColIndex(\"EMP_NM\"); ```",
              "see": [
                {
                  "label": "getColByIndex method",
                  "url": "./get-col-by-index"
                },
                {
                  "label": "GetColWithHide cfg",
                  "url": "/docs/props/cfg/get-col-with-hide"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.3|`name` 인자명 변경 -> `col`, 다른 API와 통일||core|8.0.0.11|`includeHideCol` 인자 추가|"
            },
            "url": "docs/funcs/core/get-col-index.html"
          },
          {
            "cid": 585,
            "sid": "get-col-left",
            "name": "get-col-left",
            "label": "getColLeft",
            "data": {
              "body": "> 특정 열의 위치를 각 섹션의 시작을 기준으로 확인합니다. ### Syntax ```javascript number getColLeft( col ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |col|`string`|<span class='required'>필수</span>|확인하고자 하는 열이름| ### Return Value ***number*** : 섹션의 최좌측부터 현재 열의 왼쪽 끝부분까지의 거리(px 단위) ### Example ```javascript //AMT 열의 x축 offset 값을 확인 var colOff = sheet.getColLeft(\"AMT\"); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-col-left.html"
          },
          {
            "cid": 586,
            "sid": "get-cols",
            "name": "get-cols",
            "label": "getCols",
            "data": {
              "body": "> 시트가 갖고있는 열을 ['colName1','colName2']와 같은 배열형태로 추출합니다. > 두개의 인자를 통해 특정 속성을 모두 갖고있는 열들을 찾을 수도 있습니다. > 전체 열의 개수를 알고자 할때도 이 함수를 사용하실 수 있습니다. > **<mark>주의</mark> : getCols()를 통해서 찾을수 있는 속성은 반드시 시트 생성시 Cols를 통해 부여한 값만을 찾을 수 있습니다.** > 가령 열의 편집가능여부 기본값이 `1(true)`라고 하더라도, Cols를 통해 열 생성시 `CanEdit:1`을 별도로 부여하지 않았으면 찾을 수 없습니다. > **`SEQ`컬럼을 설정하지도 않았더라도 포함하여 리턴 합니다.** ### Syntax ```javascript array getCols( attr1, attr2, seq ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |attr1|`string`|<span class='optional'>선택</span>|찾고자 하는 속성명 (`attr1` 속성을 선언하지 않으면 모든 열이 추출됨)| |attr2|`string`|<span class='optional'>선택</span>|찾고자 하는 속성명 (`attr1` 과 `attr2` 를 모두 갖고 있는 열이 리턴)| |seq|`boolean`|<span class='optional'>선택</span>|설정하지 않은 SEQ 컬럼 포함 여부 `0(false)`:설정하지 않은 SEQ 컬럼 포함 (`default`) `1(true)`:설정하지 않은 SEQ 컬럼 미포함| ### Return Value ***array[string]*** : 열이름 배열 ### Example ```javascript //현재 보여지는 모든 열을 찾습니다. var vCol = sheet.getCols(\"Visible\"); //현재 보여지면서 편집도 가능한 열을 찾습니다. var veCol = sheet.getCols(\"Visible\",\"CanEdit\"); //return //[\"ColName1\",\"ColName3\" ... ] //설정하지 않은 SEQ는 제외하고 열 추출, 8.1.0.38버전에서 추가된 기능 var veCol = sheet.getCols(\"\",\"\",1); var veCol = sheet.getCols({seq:1}); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.38|seq 추가|"
            },
            "url": "docs/funcs/core/get-cols.html"
          },
          {
            "cid": 587,
            "sid": "get-count-info-element",
            "name": "get-count-info-element",
            "label": "getCountInfoElement",
            "data": {
              "body": "> [setCountInfoElement](./set-count-info-element) 기능 사용하여 데이터 행수 정보를 시트 외부의 Dom Element 에 표시하고 있을 경우 정보 출력되는 Dom Element 를 반환합니다. ### Syntax ```javascript HTML Element getCountInfoElement (); ``` ### Return Value ***object*** : 데이터 행수 정보가 출력 되는 Dom Element ### Example ```javascript // 데이터 행수 정보가 출력 되는 Dom Element 확인 sheet.getCountInfoElement (); ```",
              "see": [
                {
                  "label": "InfoRowConfig cfg",
                  "url": "/docs/props/cfg/info-row-config"
                },
                {
                  "label": "setCountInfoElement method",
                  "url": "./set-count-info-element"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
            },
            "url": "docs/funcs/core/get-count-info-element.html"
          },
          {
            "cid": 588,
            "sid": "get-current-info",
            "name": "get-current-info",
            "label": "getCurrentInfo",
            "data": {
              "body": "> 현재 시트의 컬럼 정보를 문자열로 가져오는 메소드입니다. ### Syntax ```javascript string getCurrentInfo(); ``` ### Return Value ***string 현재 컬럼들의 숨김, 너비, 위치 정보 값*** ### Example ```javascript // 현재 시트의 컬럼 정보를 담고 있는 문자열을 반환 sheet.getCurrentInfo(); ```",
              "see": [
                {
                  "label": "setCurrentInfo method",
                  "url": "./set-current-info"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-current-info.html"
          },
          {
            "cid": 589,
            "sid": "get-current-style",
            "name": "get-current-style",
            "label": "getCurrentStyle",
            "data": {
              "body": "> 현재 시트의 Def에 설정된 테마, 배경색, 글자색 및 Alternate 색상, 글자크기 정보를 문자열로 가져오는 메소드입니다. > 테마를 제외한 속성의 default 값은 추가되지 않습니다. ### Syntax ```javascript string getCurrentStyle(); ``` ### Return Value ***string 현재 시트의 Def에 설정된 배경색, 글자색 및 Alternate 색상, 글자크기 정보 값*** ### Example ```javascript // 현재 시트의 컬럼 정보를 담고 있는 문자열을 반환 sheet.getCurrentStyle(); ```",
              "see": [
                {
                  "label": "행(Row) 구조에 대한 이해 getting started",
                  "url": "/docs/start/row"
                },
                {
                  "label": "setCurrentStyle method",
                  "url": "./set-current-style"
                },
                {
                  "label": "AlternateColor row",
                  "url": "/docs/props/row/alternate-color.md"
                },
                {
                  "label": "Color row",
                  "url": "/docs/props/row/color.md"
                },
                {
                  "label": "TextColor row",
                  "url": "/docs/props/row/text-color.md"
                },
                {
                  "label": "TextSize row",
                  "url": "/docs/props/row/text-size.md"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.18|기능 추가|"
            },
            "url": "docs/funcs/core/get-current-style.html"
          },
          {
            "cid": 590,
            "sid": "get-data-rows",
            "name": "get-data-rows",
            "label": "getDataRows",
            "data": {
              "body": "> 시트가 가지고 있는 전체 데이터 행을 리턴합니다. > **<mark>주의</mark> :** **- `Type:\"Text\"` 컬럼에 숫자 데이터를 조회 할 경우 리턴 되는 데이터형은 숫자형입니다.** **문자 형태로 리턴 되길 원하는 경우 (Col)[OrigSearchData](/docs/props/col/orig-search-data)를 설정 하세요.** **- `Type:\"Date\", Format, DataFormat, EditFormat` 컬럼에에서 리턴 되는 데이터형은 숫자형(timestamp)입니다.** **20010101과 같은 형태로 리턴 받길 원할경우 [getValue](./get-value) 또는 [dateToString](/docs/static/date-to-string) 함수를 통하여 데이터를 변환 하세요.** **- row 객체에 직접 접근 하여 값 변경시 상태에(Changed) 영향을 미치지 않습니다.** ### Syntax ```javascript array getDataRows( noSubTotal); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |noSubTotal |`boolean`|<span class='optional'>선택</span>|소계/누계 행을 제외할지 여부 `0(false)`:소계/누계 행 포함 (`default`) `1(true)`:소계/누계 행 제외| ### Return Value ***array[row object]*** : [데이터 로우 객체](/docs/appx/row-object)를 담고있는 배열 ### Example ```javascript // 전체 데이터행을 가져온다. var Rows = sheet.getDataRows(); for(var i=0; i<Rows.length; i++){ // 마감열(saveName:close_data)에 값을 일괄변경하는 경우 , render속성을 꺼야 속도가 빠르다. sheet.setValue({row:Rows[i], col:\"close_data\", val:\"변경\", render:0}); //Rows[i].close_data = \"변경\"; row 객체에 접근하여 값 변경. 상태에 영향을 미치지 않는다. } //변경사항 적용한다. sheet.rerender(1); ```",
              "see": [
                {
                  "label": "getTotalRowCount method",
                  "url": "./get-total-row-count"
                },
                {
                  "label": "OrigSearchData col",
                  "url": "/docs/props/col/orig-search-data"
                },
                {
                  "label": "getShownRows method",
                  "url": "./get-shown-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.4|`noSubTotal` 인자 추가로 소계/누계 행을 제외한 데이터 행만 가져오는 기능 추가|"
            },
            "url": "docs/funcs/core/get-data-rows.html"
          },
          {
            "cid": 591,
            "sid": "get-edit-col",
            "name": "get-edit-col",
            "label": "getEditCol",
            "data": {
              "body": "> 현재 편집 중인 열이름을 반환합니다. ### Syntax ```javascript string getEditCol(); ``` ### Return Value ***String*** : 열이름 ### Example ```javascript var eCol = sheet.getEditCol(); ```",
              "see": [
                {
                  "label": "getEditRow method",
                  "url": "./get-edit-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-edit-col.html"
          },
          {
            "cid": 592,
            "sid": "get-edit-row",
            "name": "get-edit-row",
            "label": "getEditRow",
            "data": {
              "body": "> 현재 편집 중인 행 객체를 반환합니다. ### Syntax ```javascript object getEditRow(); ``` ### Return Value ***row Object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript var eRow = sheet.getEditRow(); ```",
              "see": [
                {
                  "label": "getEditCol method",
                  "url": "./get-edit-col"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-edit-row.html"
          },
          {
            "cid": 593,
            "sid": "get-edit-text",
            "name": "get-edit-text",
            "label": "getEditText",
            "data": {
              "body": "> 편집 중인 데이터를 반환합니다. ### Syntax ```javascript string getEditText(); ``` ### Return Value ***string*** : 편집 중인 데이터 ### Example ```javascript sheet.getEditText(); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-edit-text.html"
          },
          {
            "cid": 594,
            "sid": "get-filter",
            "name": "get-filter",
            "label": "getFilter",
            "data": {
              "body": "> 필터행에 설정한 내용을 확인합니다. ### Syntax ```javascript object getFilter( spec ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |spec|`boolean`|<span class='optional'>선택</span>|일반필터 와 [setFilter](./set-filter)에 대한 내용 여부 `0(false)`:일반필터 설정 (`default`) `1(true)`:setFilter 설정| ### Return Value ***object*** : 필터 설정 값(이차원 배열) |입력값|유형|리턴 데이터 형식| |---|---|---| |`0`|일반필터|`[[\"colName1\" , \"필터값\" , 연산자 ], [\"colName2\",\"필터값\",연산자] ...]`| |`1`|setFilter|`[[\"필터명\", \"cardAmt>=5000?1:0\"], [\"필터명\", \"deptNm=='자재부서'?1:0\"] ...]`| ### Example ```javascript //필터 초기화 var filterDesc = sheet.getFilter(0); ```",
              "see": [
                {
                  "label": "setFilter method",
                  "url": "./set-filter"
                },
                {
                  "label": "doFilter method",
                  "url": "./do-filter"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-filter.html"
          },
          {
            "cid": 595,
            "sid": "get-first-col",
            "name": "get-first-col",
            "label": "getFirstCol",
            "data": {
              "body": "> 최 좌측 열이름을 확인합니다. > section을 통해 특정 영역의 최 좌측 열을 확인할 수도 있습니다. > 해당 함수는 기본적으로 보여지는 열을 기준으로 확인합니다. > `includeHideCol` 또는 `Cfg: GetColWithHide` 를 설정하여 `Visible` 관계없이 가져옵니다. > 우선 순위는 `includeHideCol` > `GetColWithHide` 임으로, `GetColWithHide`를 `true`로 설정 하여도 `includeHideCol`을 `false`로 설정시에는 보여지는 열을 기준으로 동작하게 할 수 있습니다. ### Syntax ```javascript string getFirstCol( section, includeHideCol ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |section|`number`|<span class='optional'>선택</span>|틀고정 기준 영역 지정 `0`:좌측 (`default`) `1`:가운데 (LeftCols(좌측) 정보가 없을 경우 `default`) `2`:우측 (LeftCols(좌측), Cols(가운데) 정보가 없을 경우 `default`)| |includeHideCol|`boolean`|<span class='optional'>선택</span>|`true` 설정시 `Col.Visible` 관계없이 콜을 추출함 `0(false)`:숨김 열을 계산 대상으로 포함하지 않음 (`default`) `1(true)`:숨김 열도 계산 대상으로 포함| ### Return Value ***string*** : 좌측에 위치한 열이름 ### Example ```javascript //최 좌측의 열이름을 확인한다. var fcol = sheet.getFirstCol(); ```",
              "see": [
                {
                  "label": "getLastCol method",
                  "url": "./get-last-col"
                },
                {
                  "label": "GetColWithHide cfg",
                  "url": "/docs/props/cfg/get-col-with-hide"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.11|`includeHideCol` 인자 추가|"
            },
            "url": "docs/funcs/core/get-first-col.html"
          },
          {
            "cid": 596,
            "sid": "get-first-row",
            "name": "get-first-row",
            "label": "getFirstRow",
            "data": {
              "body": "> 최 상단행을 확인합니다. > 트리 기능 사용시 row 인자를 설정하면 행이 갖고있는 첫번째 자식행이 리턴됩니다. ### Syntax ```javascript object getFirstRow( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //최 상단행을 얻습니다. var frow = sheet.getFirstRow(); ```",
              "see": [
                {
                  "label": "getFirstVisibleRow method",
                  "url": "./get-first-visisble-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-first-row.html"
          },
          {
            "cid": 597,
            "sid": "get-first-visible-row",
            "name": "get-first-visible-row",
            "label": "getFirstVisibleRow",
            "data": {
              "body": "> `Visible`이 `1`인 최 상단행을 확인합니다. > 트리 기능 사용시 row 인자를 설정하면 행이 갖고있는 자식행 중 보여지는 첫번째 자식행이 리턴됩니다. ### Syntax ```javascript object getFirstVisibleRow( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //AR12행의 첫번째 자식행을 리턴합니다. var fchildrow = sheet.getFirstVisibleRow(\"AR12\"); ```",
              "see": [
                {
                  "label": "getFirstRow method",
                  "url": "./get-first-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-first-visible-row.html"
          },
          {
            "cid": 598,
            "sid": "get-focused-col",
            "name": "get-focused-col",
            "label": "getFocusedCol",
            "data": {
              "body": "> 시트 내에 현재 포커스된 셀의 열이름을 반환합니다. ### Syntax ```javascript string getFocusedCol(); ``` ### Return Value ***string*** : 열이름 ### Example ```javascript //현재 포커스된 셀의 열이름을 반환합니다. var row = sheet.getFocusedCol(); ```",
              "see": [
                {
                  "label": "getFocusedRow method",
                  "url": "./get-focused-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-focused-col.html"
          },
          {
            "cid": 599,
            "sid": "get-focused-page",
            "name": "get-focused-page",
            "label": "getFocusedPage",
            "data": {
              "body": "> 현재 포커스가 위치한 데이터 [페이지 객체](/docs/appx/page-object)를 리턴합니다. ### Syntax ```javascript object getFocusedPage(); ``` ### Return Value ***page object*** : [페이지 객체](/docs/appx/page-object) ### Example ```javascript //현재 포커스가 있는 페이지 객체 var pageObj = sheet.getFocusedPage(); ```",
              "see": [
                {
                  "label": "getPageIndex method",
                  "url": "./get-page-index"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-focused-page.html"
          },
          {
            "cid": 600,
            "sid": "get-focused-row",
            "name": "get-focused-row",
            "label": "getFocusedRow",
            "data": {
              "body": "> 시트 내에 현재 포커스된 셀(또는 행)의 [데이터 로우 객체](/docs/appx/row-object)를 반환합니다. ### Syntax ```javascript object getFocusedRow(); ``` ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //현재 포커스된 셀의 데이터 로우 객체를 반환합니다. var row = sheet.getFocusedRow(); ```",
              "see": [
                {
                  "label": "getFocusedCol method",
                  "url": "./get-focused-col"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-focused-row.html"
          },
          {
            "cid": 601,
            "sid": "get-format",
            "name": "get-format",
            "label": "getFormat",
            "data": {
              "body": "> 특정 셀의 Format을 확인합니다. ### Syntax ```javascript string getFormat( row, col, edit ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| |edit|`boolean`|<span class='optional'>선택</span>|EditFormat 확인 `0(false)`:`Format` 값을 리턴 (`default`) `1(true)`:`EditFormat` 값을 리턴| ### Return Value ***string*** : 셀에 설정한 Format 문자열 (Format이 설정되지 않은 셀은 공백(\"\")을 리턴) ### Example ```javascript //날짜 셀에서 포맷 확인 var f = sheet.getFormat( sheet.getFocusedRow(), \"EnterDate\" ); var ef = sheet.getFormat( sheet.getFocusedRow(), \"EnterDate\", 1); if(f==\"yyyy/MM/dd\" && ef == \"yyyyMMdd\"){ alert(\"'년/월/일' 순서 포맷입니다. \"); } ```",
              "see": [
                {
                  "label": "getType method",
                  "url": "./get-type"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-format.html"
          },
          {
            "cid": 602,
            "sid": "get-formula-row-position",
            "name": "get-formula-row-position",
            "label": "getFormulaRowPosition",
            "data": {
              "body": "> `FormulaRow`(합계행)의 위치 (하단(기본값), 상단) 값을 얻어 올 수 있습니다. ### Syntax ```javascript number getFormulaRowPosition(); ``` ### Return Value ***number*** : FormulaRow의 위치 값 ### Example ```javascript //합계행의 위치를 가져옵니다. var pos = sheet.getFormulaRowPosition(); ```",
              "see": [
                {
                  "label": "setFormulaRow method",
                  "url": "./set-formula-row"
                },
                {
                  "label": "setFormulaRowPosition method",
                  "url": "./set-formula-row-position"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-formula-row-position.html"
          },
          {
            "cid": 603,
            "sid": "get-group-rows",
            "name": "get-group-rows",
            "label": "getGroupRows",
            "data": {
              "body": "> 그룹으로 생성된 그룹행들을 반환합니다. > 리턴 값은 다음과 같습니다 > {그룹 컬럼명1: [컬럼명1로 생성된 그룹 행들], 그룹 컬럼명2 : [컬럼명2로 생성된 그룹 행들], ...} ### Syntax ```javascript object getGroupRows(); ``` ### Return Value ***object*** ### Example ```javascript //그룹 행을 얻습니다. var groupRows = sheet.getGroupRows(); ```",
              "see": [
                {
                  "label": "GroupMain cfg",
                  "url": "/docs/props/cfg/group-main"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-group-rows.html"
          },
          {
            "cid": 604,
            "sid": "get-header-rows",
            "name": "get-header-rows",
            "label": "getHeaderRows",
            "data": {
              "body": "> 헤더 영역에 있는 [헤더 로우 객체](/docs/appx/row-object)들의 배열을 반환합니다. ### Syntax ```javascript object getHeaderRows( ); ``` ### Return Value ***array[row object]*** : 헤더 영역에 있는 [헤더 로우 객체](/docs/appx/row-object)들의 배열 ### Example ```javascript //행의 유형을 확인 var headers = sheet.getHeaderRows(); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-header-rows.html"
          },
          {
            "cid": 605,
            "sid": "get-last-col",
            "name": "get-last-col",
            "label": "getLastCol",
            "data": {
              "body": "> 최 우측 열이름을 확인합니다. > section을 통해 특정 영역의 최 우측 열을 확인할 수도 있습니다. > 해당 함수는 기본적으로 보여지는 열을 기준으로 확인합니다. > `includeHideCol` 또는 `Cfg: GetColWithHide` 를 설정하여 `Visible` 관계없이 가져옵니다. > 우선 순위는 `includeHideCol` > `GetColWithHide` 임으로, `GetColWithHide`를 `true`로 설정 하여도 `includeHideCol`을 `false`로 설정시에는 보여지는 열을 기준으로 동작하게 할 수 있습니다. ### Syntax ```javascript string getLastCol( section, includeHideCol ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |section|`number`|<span class='optional'>선택</span>|틀고정 기준 영역 지정 `0`:좌측 (RightCols(우측), Cols(가운데) 정보가 없을 경우 `default`) `1`:가운데 (RightCols(우측) 정보가 없을 경우 `default`) `2`:우측 (`default`)| |includeHideCol|`boolean`|<span class='optional'>선택</span>|`true` 설정시 `Col.Visible` 관계없이 콜을 추출함 `0(false)`:숨김 열을 계산 대상으로 포함하지 않음 (`default`) `1(true)`:숨김 열도 계산 대상으로 포함| ### Return Value ***string*** : 우측에 위치한 열이름 ### Example ```javascript //최 우측의 열이름을 확인한다. var lcol = sheet.getLastCol(); ```",
              "see": [
                {
                  "label": "getFirstCol method",
                  "url": "./get-first-col"
                },
                {
                  "label": "GetColWithHide cfg",
                  "url": "/docs/props/cfg/get-col-with-hide"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.11|`includeHideCol` 인자 추가|"
            },
            "url": "docs/funcs/core/get-last-col.html"
          },
          {
            "cid": 606,
            "sid": "get-last-pageindex",
            "name": "get-last-pageindex",
            "label": "getLastPageIndex",
            "data": {
              "body": "> 페이징 조회 방식에서 마지막 페이지의 인덱스를 반환합니다. ### Syntax ```javascript number getLastPageIndex(); ``` ### Return Value ***number*** : 마지막 페이지 인덱스 ### Example ```javascript // 현재 조회된 마지막 페이지의 인덱스를 얻습니다. var lastIndex = sheet.getLastPageIndex(); ``` ### Since |product|version|desc| |---|---|---| |core|8.1.0.78|기능 추가|",
              "since": "|product|version|desc||---|---|---||core|8.1.0.78|기능 추가|"
            },
            "url": "docs/funcs/core/get-last-pageindex.html"
          },
          {
            "cid": 607,
            "sid": "get-last-row",
            "name": "get-last-row",
            "label": "getLastRow",
            "data": {
              "body": "> 최 하단행을 확인합니다. > 트리 기능 사용시 row 인자를 설정하면 행이 갖고있는 마지막 자식행이 리턴됩니다. ### Syntax ```javascript object getLastRow( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //최 하단행을 얻습니다. var lrow = sheet.getLastRow(); ```",
              "see": [
                {
                  "label": "getLastVisibleRow method",
                  "url": "./get-last-visible-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-last-row.html"
          },
          {
            "cid": 608,
            "sid": "get-last-visible-row",
            "name": "get-last-visible-row",
            "label": "getLastVisibleRow",
            "data": {
              "body": "> 보여지는 최 하단행(`Visible: 1`)인 속성을 확인합니다. > 트리 기능 사용시 row 인자를 설정하면 행이 갖고있는 보여지는 마지막 자식행이 리턴됩니다. ### Syntax ```javascript object getLastVisibleRow( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //보여지는 최 하단행을 얻습니다. var lrow = sheet.getLastVisibleRow(); ```",
              "see": [
                {
                  "label": "getLastRow method",
                  "url": "./get-last-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-last-visible-row.html"
          },
          {
            "cid": 609,
            "sid": "get-locale",
            "name": "get-locale",
            "label": "getLocale",
            "data": {
              "body": "> 시트에 설정된 언어 코드를 가져오는 메소드입니다. ### Syntax ```javascript void getLocale(); ``` ### Return Value ***string*** : 시트에 설정된 언어 코드 ### Example ```javascript sheet.getLocale(); ```",
              "see": [
                {
                  "label": "setLocale method",
                  "url": "./set-locale"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.2|기능 추가|"
            },
            "url": "docs/funcs/core/get-locale.html"
          },
          {
            "cid": 610,
            "sid": "get-merge-range",
            "name": "get-merge-range",
            "label": "getMergeRange",
            "data": {
              "body": "> 특정 셀을 기준으로 머지된 영역(RowSpan,Span)을 확인합니다. > 지정한 셀을 기준으로 머지 시작셀(좌측 상단 셀)과 종료셀(우측 하단 셀)을 배열로 리턴합니다. ### Syntax ```javascript array getMergeRange( row, col); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|병합기준 [데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|병합기준 열이름| ### Return Value ***object (array[])*** : 머지 시작 행, 머지 시작 열, 머지 종료 행, 머지 종료 열 순차적으로 들어있는 배열 리턴 [시작[데이터 로우 객체](/docs/appx/row-object) , 시작열이름 , 종료[데이터 로우 객체](/docs/appx/row-object) , 종료열이름 ] *머지되지 않은 셀의 경우 파라미터로 입력한 row와 리턴되는 시작 행,종료 행이 동일하고 마찬가지로 파라미터로 입력한 col과 리턴되는 시작 열,종료 열이 동일합니다.* ### Example ```javascript //AR2행, deptCd열이 주변과 병합된 경우 병합영역을 리턴 var mergeArr = sheet.getMergeRange( sheet.getRowById(\"AR2\"), \"deptCd\"); var mergeStartRow = mergeArr[0]; // 머지 시작 행 var mergeStartCol = mergeArr[1]; // 머지 시작 열 var mergeEndRow = mergeArr[2]; // 머지 종료 행 var mergeEndCol = mergeArr[3]; // 머지 종료 열 ```",
              "see": [
                {
                  "label": "setMergeRange method",
                  "url": "./set-merge-range"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
            },
            "url": "docs/funcs/core/get-merge-range.html"
          },
          {
            "cid": 611,
            "sid": "get-message",
            "name": "get-message",
            "label": "getMessage",
            "data": {
              "body": "> 시트에서 메시지를 가져옵니다. ### Syntax ```javascript string getMessage( key, type ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |key|`string`|<span class='required'>필수</span>|메시지 이름| |type|`string`|<span class='optional'>선택</span>|가져올 메시지 종류 `'Alert'`, `'Text'(default)` 중 선택| ### Return Value ***String*** ### Example ```javascript // msg 파일의 Alert 밑에 있는 CanCancelChanges 메시지 내용을 가져옵니다. var message1 = sheet.getMessage(\"CanCancelChanges\", \"Alert\"); // msg 파일의 Text 밑에 있는 CanCancelChanges 메시지 내용을 가져옵니다. var message2 = sheet.getMessage(\"Render\"); ```",
              "see": [
                {
                  "label": "setMessage method",
                  "url": "./set-message"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-message.html"
          },
          {
            "cid": 612,
            "sid": "get-mouse-col",
            "name": "get-mouse-col",
            "label": "getMouseCol",
            "data": {
              "body": "> 현재 마우스 아래에 있는 열이름을 반환합니다. ### Syntax ```javascript string getMouseCol(); ``` ### Return Value ***String*** : 열이름 ### Example ```javascript var mCol = sheet.getMouseCol(); ```",
              "see": [
                {
                  "label": "getMouseRow method",
                  "url": "./get-mouse-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-mouse-col.html"
          },
          {
            "cid": 613,
            "sid": "get-mouse-row",
            "name": "get-mouse-row",
            "label": "getMouseRow",
            "data": {
              "body": "> 현재 마우스 아래에 있는 행 객체를 반환합니다. ### Syntax ```javascript object getMouseRow(); ``` ### Return Value ***row Object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript var eRow = sheet.getMouseRow(); ```",
              "see": [
                {
                  "label": "getMouseCol method",
                  "url": "./get-mouse-col"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-mouse-row.html"
          },
          {
            "cid": 614,
            "sid": "get-next-col",
            "name": "get-next-col",
            "label": "getNextCol",
            "data": {
              "body": "> 지정한 컬럼의 다음 컬럼명을 리턴합니다. > 해당 함수는 기본적으로 보여지는 열을 기준으로 확인합니다. > `includeHideCol` 또는 `Cfg: GetColWithHide` 를 설정하여 `Visible` 관계없이 가져옵니다. > 우선 순위는 `includeHideCol` > `GetColWithHide` 임으로, `GetColWithHide`를 `true`로 설정 하여도 `includeHideCol`을 `false`로 설정시에는 보여지는 열을 기준으로 동작하게 할 수 있습니다. ### Syntax ```javascript string getNextCol( col, includeHideCol ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |col|`string`|<span class='required'>필수</span>|열이름 |includeHideCol|`boolean`|<span class='optional'>선택</span>숨김 열을 기준에 포함 여부 `0(false)`:숨김 열을 계산 대상으로 포함하지 않음 (`default`) `1(true)`:숨김 열도 계산 대상으로 포함| ### Return Value ***string*** : 열 이름 ### Example ```javascript //다음 컬럼명을 리턴합니다. var fcol = sheet.getNextCol(sheet.getFocusedCol()); ```",
              "see": [
                {
                  "label": "getPrevCol method",
                  "url": "./get-prev-col"
                },
                {
                  "label": "GetColWithHide cfg",
                  "url": "/docs/props/cfg/get-col-with-hide"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가||core|8.0.0.11|`includeHideCol` 인자 추가|"
            },
            "url": "docs/funcs/core/get-next-col.html"
          },
          {
            "cid": 615,
            "sid": "get-next-row",
            "name": "get-next-row",
            "label": "getNextRow",
            "data": {
              "body": "> 지정한 행의 바로 아래 행을 리턴합니다. > 마지막 행인 경우 `null`이 리턴됩니다. ### Syntax ```javascript object getNextRow( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //AR5행의 다음 행을 확인. var row = sheet.getRowById(\"AR55\"); var nrow = sheet.getNextRow(row); ```",
              "see": [
                {
                  "label": "getPrevRow method",
                  "url": "./get-prev-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-next-row.html"
          },
          {
            "cid": 616,
            "sid": "get-next-shift",
            "name": "get-next-shift",
            "label": "getNextShift",
            "data": {
              "body": "> [데이터 로우 객체](/docs/appx/row-object)를 대상으로 사용가능한 탐색 메소드입니다. > 기준이 되는 [데이터 로우 객체](/docs/appx/row-object)에서 2번째 인자의 수만큼 이후에 위치한 [데이터 로우 객체](/docs/appx/row-object)를 탐색해서 리턴합니다. ### Syntax ```javascript object getNextShift(row, cnt); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|검색 기준이 되는 [데이터 로우 객체](/docs/appx/row-object)| |cnt|`number`|<span class='optional'>선택</span>|기준으로부터 탐색하고자 하는 개수| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //AR55행의 7번째 위에 위치한 행을 확인. var row = sheet.getRowById(\"AR55\"); var nrow = sheet.getNextShift(row, 7); ```",
              "see": [
                {
                  "label": "getPrevShift method",
                  "url": "./get-prev-shift"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-next-shift.html"
          },
          {
            "cid": 617,
            "sid": "get-next-sibling-row",
            "name": "get-next-sibling-row",
            "label": "getNextSiblingRow",
            "data": {
              "body": "> 트리나 그룹사용시 같은 부모를 갖는 동일 레벨의 아래 행을 리턴합니다. > 같은 부모 내에서 더 이상 동일레벨이 없는 경우 `null`이 리턴됩니다. ### Syntax ```javascript object getNextSiblingRow( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //AR55행의 아래 자식행들 안에 CHK값이 1인 행을 찾는다. var row = sheet.getRowById(\"AR55\"); var crow = sheet.getFirstRow(row); //첫번째 자식을 얻음 if(crow){ var chkRows = []; do{ if (crow[\"CHK\"] == 1) { chkRows.push(crow); } crow = sheet.getNextSiblingRow(crow); }while(crow); } ```",
              "see": [
                {
                  "label": "getPrevSiblingRow method",
                  "url": "./get-prev-sibling-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-next-sibling-row.html"
          },
          {
            "cid": 618,
            "sid": "get-next-sibling-visible-row",
            "name": "get-next-sibling-visible-row",
            "label": "getNextSiblingVisibleRow",
            "data": {
              "body": "> 트리나 그룹 사용시 같은 부모를 갖는 동일 레벨의 보여지는(`Visible:1`) 아래 행을 리턴합니다. > 같은 부모 내에서 더 이상 보여지는 동일레벨이 없는 경우 `null`이 리턴됩니다. ### Syntax ```javascript object getNextSiblingVisibleRow( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //선택한 행과 같은 레벨의 보여지는 아래 행을 얻는다. var frow = sheet.getFocusedRow() var crow = sheet.getNextSiblingVisibleRow(frow); ```",
              "see": [
                {
                  "label": "getPrevSiblingVisibleRow method",
                  "url": "./get-prev-sibling-visible-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-next-sibling-visible-row.html"
          },
          {
            "cid": 619,
            "sid": "get-next-visible-row",
            "name": "get-next-visible-row",
            "label": "getNextVisibleRow",
            "data": {
              "body": "> 인자로 받은 행으로부터 아래에 보이는 행을 리턴합니다. ### Syntax ```javascript object getNextVisibleRow(row); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript // 포커스된 행으로부터 바로 아래에에 있는 행을 얻는다. var frow = sheet.getFocusedRow(); var crow = sheet.getNextVisibleRow(frow); ```",
              "see": [
                {
                  "label": "getPrevSiblingVisibleRow method",
                  "url": "./get-prev-sibling-visible-row"
                },
                {
                  "label": "getNextSiblingVisibleRow method",
                  "url": "./get-next-sibling-visible-row"
                },
                {
                  "label": "getPrevVisibleRow method",
                  "url": "./get-prev-visible-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가|"
            },
            "url": "docs/funcs/core/get-next-visible-row.html"
          },
          {
            "cid": 620,
            "sid": "get-page-by-index",
            "name": "get-page-by-index",
            "label": "getPageByIndex",
            "data": {
              "body": "> 특정 `index`를 갖는 [페이지 객체](/docs/appx/page-object)를 리턴합니다. > `index`는 `0`부터 시작합니다. ### Syntax ```javascript object getPageByIndex( index ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |index|`number`|<span class='required'>필수</span>|얻고자하는 페이지 순서 번호 ### Return Value ***page object*** : 지정한 순서에 해당하는 [페이지 객체](/docs/appx/page-object) ### Example ```javascript //15번 페이지 객체를 얻음 var pageObj = sheet.getPageByIndex(15); ```",
              "see": [
                {
                  "label": "getPageIndex method",
                  "url": "./get-page-index"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-page-by-index.html"
          },
          {
            "cid": 621,
            "sid": "get-page-by-row",
            "name": "get-page-by-row",
            "label": "getPageByRow",
            "data": {
              "body": "> 특정 [데이터 로우 객체](/docs/appx/row-object)가 위치한 [페이지 객체](/docs/appx/page-object)를 리턴합니다. ### Syntax ```javascript object getPageByRow( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object) ### Return Value ***page object*** : row를 포함하고 있는 [페이지 객체](/docs/appx/page-object) ### Example ```javascript //마지막 페이지 객체를 얻는다. var lastRow = sheet.getLastRow(); var lastPageObj = sheet.getPageByRow(lastRow); ```",
              "see": [
                {
                  "label": "getPageIndex method",
                  "url": "./get-page-index"
                },
                {
                  "label": "getPageByIndex method",
                  "url": "./get-page-by-index"
                },
                {
                  "label": "getPageIndexByRow method",
                  "url": "./get-page-index-by-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-page-by-row.html"
          },
          {
            "cid": 622,
            "sid": "get-page-index",
            "name": "get-page-index",
            "label": "getPageIndex",
            "data": {
              "body": "> 페이지의 `index`를 확인합니다. > `index`는 `0`부터 시작합니다. ### Syntax ```javascript number getPageIndex( page ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |page|`object`|<span class='required'>필수</span>|페이지 데이터 객체 ### Return Value ***number*** : [페이지 객체](/docs/appx/page-object)의 index 번호 ### Example ```javascript //현재 포커스가 위치한 페이지 var page = sheet.getFocusedPage(); //페이지 인덱스 확인 var pidx = sheet.getPageIndex(page); ```",
              "see": [
                {
                  "label": "getPageByIndex method",
                  "url": "./get-page-by-index"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-page-index.html"
          },
          {
            "cid": 623,
            "sid": "get-parent-rows",
            "name": "get-parent-rows",
            "label": "getParentRows",
            "data": {
              "body": "> 특정 행의 전체 부모 행 객체를 배열 형태로 반환합니다. ### Syntax ```javascript array getParentRows( row ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***array[row object]*** : [데이터 로우 객체](/docs/appx/row-object) 배열 ### Example ```javascript // 포커스된 행의 부모 행들을 가져옵니다. var childNodes = sheet.getParentRows(sheet.getFocusedRow()); ```",
              "see": [
                {
                  "label": "getChildRows method",
                  "url": "./get-child-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-parent-rows.html"
          },
          {
            "cid": 624,
            "sid": "get-pivot-filter-rows",
            "name": "get-pivot-filter-rows",
            "label": "getPivotFilterRows",
            "data": {
              "body": "> 피벗 시트에서 특정 셀의 데이터를 구성하는 원본 시트의 행을 가져오는 함수입니다. > <mark>**주의!: 해당 API는 원본 시트의 필터링 내용을 제거합니다. API 사용시 원본 시트의 필터링 내용이 변경될 수 있습니다.**</mark> ### Syntax ```javascript object getPivotFilterRows( row, col ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| ### Return Value ***array[row object]*** : 필터된 원본 시트 [데이터 로우 객체](/docs/appx/row-object)들의 배열 ### Example ```js var focusRow = pivotSheet_sheet.getFocusedRow(); var focusCol = pivotSheet_sheet.getFocusedCol(); // 피벗 데이터를 구성하는 행을 가져오기 var datas = pivotSheet_sheet.getPivotFilterRows(focusRow, focusCol); ```",
              "see": [
                {
                  "label": "makePivotTable method",
                  "url": "./make-pivot-table"
                },
                {
                  "label": "switchPivotSheet method",
                  "url": "./switch-pivot-sheet"
                },
                {
                  "label": "ClickPivotFilter",
                  "url": "/docs/props/cfg/click-pivot-filter"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.28|기능 추가|"
            },
            "url": "docs/funcs/core/get-pivot-filter-rows.html"
          },
          {
            "cid": 625,
            "sid": "get-prev-col",
            "name": "get-prev-col",
            "label": "getPrevCol",
            "data": {
              "body": "> 지정한 열의 바로 앞에 위치한 열을 리턴합니다. > 지정한 열이 첫번째 열인 경우 `null`이 리턴됩니다. > 해당 함수는 기본적으로 보여지는 열을 기준으로 확인합니다. > `includeHideCol` 또는 `Cfg: GetColWithHide` 를 설정하여 `Visible` 관계없이 가져옵니다. > 우선 순위는 `includeHideCol` > `GetColWithHide` 임으로, `GetColWithHide`를 `true`로 설정 하여도 `includeHideCol`을 `false`로 설정시에는 보여지는 열을 기준으로 동작하게 할 수 있습니다. ### Syntax ```javascript string getPrevCol( col, includeHideCol ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |col|`string`|<span class='required'>필수</span>|열이름 |includeHideCol|`boolean`|<span class='optional'>선택</span>|숨김 열을 기준에 포함 여부 `0(false)`:숨김 열을 계산 대상으로 포함하지 않음 (`default`) `1(true)`:숨김 열도 계산 대상으로 포함| ### Return Value ***string*** : 열 이름 ### Example ```javascript //3번째 index의 열의 앞 열을 확인. var col = sheet.getColByIndex(3); var prevCol = sheet.getPrevCol(col); ```",
              "see": [
                {
                  "label": "getNextCol method",
                  "url": "./get-next-col"
                },
                {
                  "label": "GetColWithHide cfg",
                  "url": "/docs/props/cfg/get-col-with-hide"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가||core|8.0.0.11|`includeHideCol` 인자 추가|"
            },
            "url": "docs/funcs/core/get-prev-col.html"
          },
          {
            "cid": 626,
            "sid": "get-prev-row",
            "name": "get-prev-row",
            "label": "getPrevRow",
            "data": {
              "body": "> 지정한 행의 바로 위에 위치한 행을 리턴합니다. > 지정한 행이 첫번째 행인 경우 `null`이 리턴됩니다. ### Syntax ```javascript object getPrevRow( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //AR55행의 위행을 확인. var row = sheet.getRowById(\"AR55\"); var nrow = sheet.getPrevRow(row); ```",
              "see": [
                {
                  "label": "getNextRow method",
                  "url": "./get-next-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-prev-row.html"
          },
          {
            "cid": 627,
            "sid": "get-prev-shift",
            "name": "get-prev-shift",
            "label": "getPrevShift",
            "data": {
              "body": "> [데이터 로우 객체](/docs/appx/row-object)를 대상으로 사용가능한 탐색 메소드입니다. > 기준이 되는 [데이터 로우 객체](/docs/appx/row-object)에서 2번째 인자의 수만큼 이전에 위치한 [데이터 로우 객체](/docs/appx/row-object)를 탐색해서 리턴합니다. ### Syntax ```javascript object getPrevShift( row, cnt ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|검색 기준이 되는 [데이터 로우 객체](/docs/appx/row-object)| |cnt|`number`|<span class='optional'>선택</span>|기준으로부터 탐색하고자 하는 개수| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //AR55행의 7번째 위에 위치한 행을 확인. var row = sheet.getRowById(\"AR55\"); var nrow = sheet.getPrevShift(row,7); ```",
              "see": [
                {
                  "label": "getNextShift method",
                  "url": "./get-next-shift"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-prev-shift.html"
          },
          {
            "cid": 628,
            "sid": "get-prev-sibling-row",
            "name": "get-prev-sibling-row",
            "label": "getPrevSiblingRow",
            "data": {
              "body": "> 트리나 그룹사용시 같은 부모를 갖는 동일 레벨의 위에 위치한 행을 리턴합니다. > 같은 부모 내에서 더 이상 동일레벨이 없는 경우 `null`이 리턴됩니다. ### Syntax ```javascript object getPrevSiblingRow( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //현재 선택된 행의 자식 노드 중에 chk열에 값이 1인 행들을 찾아 배경색을 변경한다. function work(){ var row = sheet.getFocusedRow();//현재 선택된 행 var crow = sheet.getLastRow(row); //마지막 자식을 얻음 if(crow){ var chkRows = []; do{ if(crow[\"chk\"] == 1){ //배경색을 회색으로 변경 sheet.setAttribute( {row:crow , attribute:\"Color\" , val:\"#AAAAAA\",render:0} ); } crow = sheet.getPrevSiblingRow(crow); }while(crow); //수정 후 한꺼번에 렌더링 sheet.renderBody(); } } ```",
              "see": [
                {
                  "label": "getNextSiblingRow method",
                  "url": "./get-next-sibling-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-prev-sibling-row.html"
          },
          {
            "cid": 629,
            "sid": "get-prev-sibling-visible-row",
            "name": "get-prev-sibling-visible-row",
            "label": "getPrevSiblingVisibleRow",
            "data": {
              "body": "> 트리나 그룹사용시 같은 부모를 갖는 동일 레벨의 보여지는(`Visible:1`) 위에 위치한 행을 리턴합니다. > 같은 부모 내에서 더 이상 보여지는 동일레벨이 없는 경우 `null`이 리턴됩니다. ### Syntax ```javascript object getPrevSiblingVisibleRow( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //현재 선택된 행과 같은 레벨을 갖는 위의 행을 리턴 var row = sheet.getFocusedRow(); var crow = sheet.getPrevSiblingVisibleRow(row); ```",
              "see": [
                {
                  "label": "getNextSiblingVisibleRow method",
                  "url": "./get-next-sibling-visible-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-prev-sibling-visible-row.html"
          },
          {
            "cid": 630,
            "sid": "get-prev-visible-row",
            "name": "get-prev-visible-row",
            "label": "getPrevVisibleRow",
            "data": {
              "body": "> 인자로 받은 행으로부터 위에 보이는 행을 리턴합니다. ### Syntax ```javascript object getPrevVisibleRow( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript // 포커스된 행으로부터 바로 위에 있는 행을 얻는다. var frow = sheet.getFocusedRow(); var crow = sheet.getPrevVisibleRow(frow); ```",
              "see": [
                {
                  "label": "getPrevSiblingVisibleRow method",
                  "url": "./get-prev-sibling-visible-row"
                },
                {
                  "label": "getNextSiblingVisibleRow method",
                  "url": "./get-next-sibling-visible-row"
                },
                {
                  "label": "getNextVisibleRow method",
                  "url": "./get-next-visible-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가|"
            },
            "url": "docs/funcs/core/get-prev-visible-row.html"
          },
          {
            "cid": 631,
            "sid": "get-row-by-id",
            "name": "get-row-by-id",
            "label": "getRowById",
            "data": {
              "body": "> ID를 기준으로 [데이터 로우 객체](/docs/appx/row-object)를 반환합니다. ### Syntax ```javascript string getRowById( id ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |id|`string`|<span class='required'>필수</span>|행의 id| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //AR5 행객체를 얻어 상태를 삭제로 변경한다. var row = sheet.getRowById(\"AR5\"); row[\"Deleted\"] = 1; sheet.renderBody(); ```",
              "see": [
                {
                  "label": "getRowIndex method",
                  "url": "./get-row-index"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-row-by-id.html"
          },
          {
            "cid": 632,
            "sid": "get-row-by-index",
            "name": "get-row-by-index",
            "label": "getRowByIndex",
            "data": {
              "body": "> 인덱스를 기준으로 [데이터 로우 객체](/docs/appx/row-object)를 확인합니다. > 인덱스는 `1`부터 시작 ### Syntax ```javascript object getRowByIndex( index ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |index|`number`|<span class='required'>필수</span>|행 인덱스(1부터 시작)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //5번 index행의 데이터 로우 객체를 얻습니다. var rowObj = sheet.getRowByIndex(5); ```",
              "see": [
                {
                  "label": "getRowById method",
                  "url": "./get-row-by-id"
                },
                {
                  "label": "getRowIndex method",
                  "url": "./get-row-index"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-row-by-index.html"
          },
          {
            "cid": 633,
            "sid": "get-row-height",
            "name": "get-row-height",
            "label": "getRowHeight",
            "data": {
              "body": "> 특정행의 높이를 pixel 단위로 확인합니다. ### Syntax ```javascript number getRowHeight( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***number*** : 행의 높이 (pixel 단위) ### Example ```javascript var r = sheet.getFirstVisibleRow(); //첫번째 행의 높이를 확인 var height = sheet.getRowHeight(r); ```",
              "see": [
                {
                  "label": "getBodyHeight method",
                  "url": "./get-body-height"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-row-height.html"
          },
          {
            "cid": 634,
            "sid": "get-row-index",
            "name": "get-row-index",
            "label": "getRowIndex",
            "data": {
              "body": "> [데이터 로우 객체](/docs/appx/row-object)의 인덱스를 반환합니다. > 인덱스는 `1`부터 시작합니다. > [Visible](/docs/props/row/visible):0 인 Row는 인덱스가 반환되지 않습니다. ### Syntax ```javascript number getRowIndex( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***number*** : 행의 index ### Example ```javascript //AR5 행의 index를 확인합니다. var row = sheet.getRowById(\"AR5\"); var idx = sheet.getRowIndex(row); ```",
              "see": [
                {
                  "label": "getRowById method",
                  "url": "./get-row-by-id"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-row-index.html"
          },
          {
            "cid": 635,
            "sid": "get-row-kind",
            "name": "get-row-kind",
            "label": "getRowKind",
            "data": {
              "body": "> 행의 유형을 확인합니다. > 행이 유형은 `Data(데이터영역), Header(헤더영역), Head(상단고정), Foot(합계행 혹은 하단고정), Filter(필터행), Group(그룹행), Space(건수정보표시행 혹은 솔리드행)` 등이 있습니다. ### Syntax ```javascript string getRowKind( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***string*** : 행의 유형 ### Example ```javascript //행의 유형을 확인 var rowKind = sheet.getRowKind(rowObj); ```",
              "see": [
                {
                  "label": "Kind appedix",
                  "url": "/docs/appx/kind"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-row-kind.html"
          },
          {
            "cid": 636,
            "sid": "get-row-top",
            "name": "get-row-top",
            "label": "getRowTop",
            "data": {
              "body": "> 데이터 행 내에서 y좌표값을 확인합니다. > 최상단 행은 `0`을 리턴합니다. ### Syntax ```javascript number getRowTop( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***number*** : 데이터 영역 최상단을 기준으로 행의 y좌표 (pixel 단위) ### Example ```javascript //선택행의 RowTop 값을 가져온다. var w = sheet.getRowTop( sheet.getFocusedRow() ); ```",
              "see": [
                {
                  "label": "getBodyHeight method",
                  "url": "./get-body-height"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-row-top.html"
          },
          {
            "cid": 637,
            "sid": "get-row-value",
            "name": "get-row-value",
            "label": "getRowValue",
            "data": {
              "body": "> 특정 [데이터 로우 객체](/docs/appx/row-object)에 해당하는 값을 json 형식의 객체로 반환합니다. ### Syntax ```javascript object getRowValue( row, saveExtraAttr, saveAttr ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |saveExtraAttr|`boolean`|<span class='optional'>선택</span>|시트에 (col)[Name](/docs/props/col/name)으로 정의하지 않은 데이터가 [doSearch](/docs/funcs/core/do-search)나 [loadSearchData](/docs/funcs/core/load-search-data)함수를 통해 로드 된 경우, 함수 호출시 해당 데이터를 같이 추출할 지 여부. 로드 데이터 첫번째 행의 keyset을 기준으로 추출됨. `0(false)`:시트에 (col)[Name](/docs/props/col/name)으로 정의 된 데이터만 추출 `(default)` `1(true)`:시트에 (col)[Name](/docs/props/col/name)으로 정의 되지 않은 데이터도 추출| |saveAttr|`string`|<span class='optional'>선택</span>|각 셀의 속성값을 같이 추출하고자 하는 경우 Name+속성명 형식으로 설정 여러개 속성을 추출하고자 하는 경우 \",\"를 구분자로 작성 ex) \"sNameColor,sNoCanEdit\"| ### Return Value ***json 형식의 object*** ```json { \"ColName1\":\"12345\",\"ColName2\":\"ABCDE\" ...} ``` ### Example ```javascript var rowValue = sheet.getRowValue(sheet.getRowById(\"AR5\")); ```",
              "see": [
                {
                  "label": "getValue method",
                  "url": "./get-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가||core|8.1.0.32|`saveExtraAttr` 인자 추가||core|8.2.0.3|`saveAttr` 인자 추가|"
            },
            "url": "docs/funcs/core/get-row-value.html"
          },
          {
            "cid": 638,
            "sid": "get-rows-by-checked",
            "name": "get-rows-by-checked",
            "label": "getRowsByChecked",
            "data": {
              "body": "> 인자 열의 [Type](/docs/appx/type)이 Bool인 경우 해당 열에 체크된 모든 [데이터 로우 객체](/docs/appx/row-object)를 배열로 리턴합니다. ### Syntax ```javascript object getRowsByChecked( col ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |col|`string`|<span class='required'>필수</span>|열이름| ### Return Value ***mixed ( `array` \\| `boolean` )*** : 열이 Bool 타입이 아닌 경우 false를 리턴하고, 그 외는 [데이터 로우 객체](/docs/appx/row-object)의 배열을 리턴합니다. ### Example ```javascript // sCheck 열이 체크된 데이터 로우 객체들을 가져옵니다. var rows = sheet.getRowsByChecked( \"sCheck\" ); if (rows && rows.length == 0) { ... } else { ... } ```",
              "see": [
                {
                  "label": "setCheck method",
                  "url": "./set-check"
                },
                {
                  "label": "setAllCheck method",
                  "url": "./set-all-check"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.3|name 인자명 변경 -> col, 다른 API와 통일|"
            },
            "url": "docs/funcs/core/get-rows-by-checked.html"
          },
          {
            "cid": 639,
            "sid": "get-rows-by-dup",
            "name": "get-rows-by-dup",
            "label": "getRowsByDup",
            "data": {
              "body": "> 열 내에 중복된 데이터를 가진 [데이터 로우 객체](/docs/appx/row-object)들을 리턴합니다. > 여러 개의 열이름을 설정 시 열이름에 해당하는 열들의 셀 값이 모두 같은 경우에만 [데이터 로우 객체](/docs/appx/row-object)를 반환합니다. ### Syntax ```javascript object getRowsByDup( cols, firstOnly, emptyVal, subsum, exceptStatus ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |cols|`string`|<span class='required'>필수</span>|비교할 대상이 되는 열이름 \",\"를 구분자로 사용하여 복수 개의 열이름들을 지정 가능| |firstOnly|`boolean`|<span class='optional'>선택</span>|처음으로 중복된 행을 반환할지 여부 설정 시 가장 먼저 중복된 행을 리턴합니다(원래 값을 가지는 [데이터 로우 객체](/docs/appx/row-object), 중복된 [데이터 로우 객체](/docs/appx/row-object)로 이루어진 배열). `0(false)`:처음으로 중복된 행 반환 사용 안함 (`default`) `1(true)`:처음으로 중복된 행 반환 사용| |emptyVal|`boolean`|<span class='optional'>선택</span>|\"\", undefined, null 값을 가지는 행을 비교 대상에 포함할지 여부 `0(false)`:중복된 값 비교 대상에 \"\", undefined, null 값을 가진 행을 포함 안함 (`default`) `1(true)`:중복된 값 비교 대상에 \"\", undefined, null 값을 가진 행을 포함| |subsum|`boolean`|<span class='optional'>선택</span>|중복된 값 비교할 때 소계행을 사용할 지 여부 `0(false)`:중복된 값 비교대상에 소계행 포함 안함 (`default`) `1(true)`:중복된 값 비교대상에 소계행 포함| |exceptStatus|`string`|<span class='optional'>선택</span>|비교대상에서 제외할 행의 상태 \",\"를 구분자로 사용하여 복수 개의 상태값들을 지정 가능| ### Return Value ***array[row object]*** : 중복된 값을 가지는 [데이터 로우 객체](/docs/appx/row-object)들의 배열의 배열(각기 다른 중복된 값 마다 생성된 [데이터 로우 객체](/docs/appx/row-object)들의 배열) ### Example ```javascript // sName, sSalary의 열이 서로 같은 값을 가지는 데이터 로우 객체들의 배열의 배열을 리턴합니다. // ex) [ [r1, r2...] [r5, r9...] ] // r1과 r2는 sName, sSalary의 값이 같습니다. r5과 r9..는 sName, sSalary의 값이 같습니다. // Added, Deleted 상태의 로우 객체는 제외하여 리턴합니다. sheet.getRowsByDup( \"sName,sSalary\" , false, false, false, \"Added,Deleted\" ); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.8|exceptStatus 기능 추가|"
            },
            "url": "docs/funcs/core/get-rows-by-dup.html"
          },
          {
            "cid": 640,
            "sid": "get-rows-by-status",
            "name": "get-rows-by-status",
            "label": "getRowsByStatus",
            "data": {
              "body": "> 특정 상태의 행을 배열로 리턴 합니다. > 행이 상태는 `Added, Changed, Deleted`이 있습니다. > 속성명 앞에 `!`를 붙이면 해당 속성의 값이 참(`true` or `1`)이더라도 건너뛸 수 있습니다. ### Syntax ```javascript array getRowsByStatus( status ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |status|`string`|<span class='required'>필수</span>|상태값(여러개 상태를 동시에 확인하고자 하는 경우에는 \",\"구분자로 연결| ### Return Value ***array[row object]*** : [데이터 로우 객체](/docs/appx/row-object) 배열 ### Example ```javascript // 수정된 행을 모두 얻습니다. var chgRows = sheet.getRowsByStatus(\"Changed\"); // 신규로 추가되거나 수정된 행을 모두 얻습니다. var rows = sheet.getRowsByStatus(\"Added,Changed\"); // Added 속성이 설정되어 있으면서, Deleted 속성이 설정되지 않은 행을 추출 var rows = sheet.getRowsByStatus(\"Added,!Deleted\"); // Changed 속성이 설정되어 있으면서, Added, Deleted 속성이 설정되지 않은 행만 추출 var rows = sheet.getRowsByStatus(\"!Added,Changed,!Deleted\"); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-rows-by-status.html"
          },
          {
            "cid": 641,
            "sid": "get-rows-from-page",
            "name": "get-rows-from-page",
            "label": "getRowsFromPage",
            "data": {
              "body": "> 특정 페이지 내에 위에서부터 pos 번째에 위치한 [데이터 로우 객체](/docs/appx/row-object)를 리턴합니다. > pos값은 보여지는 행을 기준으로 합니다. ### Syntax ```javascript object getRowsFromPage( page , pos ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |page|`object`|<span class='required'>필수</span>|[데이터 페이지 객체](/docs/appx/page-object)| |pos|`number`|<span class='optional'>선택</span>|페이지 내에 위에서부터 순서 (default: `0`)| ### Return Value ***row object*** : [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript //4번 페이지의 10번째 행을 얻습니다. var page = sheet.getPageByIndex(4); var rowObject = sheet.getRowsFromPage(page,10); ```",
              "see": [
                {
                  "label": "getRowByIndex method",
                  "url": "./get-row-by-index"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-rows-from-page.html"
          },
          {
            "cid": 642,
            "sid": "get-save-json",
            "name": "get-save-json",
            "label": "getSaveJson",
            "data": {
              "body": "> 시트 내에 변경된 내용(`입력(Added)`, `수정(Changed)`, `삭제(Deleted)`, `이동(Moved)`)을 json 형식의 객체로 추출합니다. ### Syntax ```javascript object getSaveJson( saveMode, col, validRequired, showAlert, saveAttr, useLevel, formData, saveExtraAttr, rows ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |saveMode|`number`|<span class='optional'>선택</span>|상태별 데이터 추출 여부 `0`:전체데이터 `1`:전체데이터 중 `Deleted` 만 제외 `2`:수정된 데이터(`Added`,`Changed`,`Deleted`) (`default`) `3`:수정된 데이터(`Added`,`Changed`,`Deleted`)+이동한 데이터(`Moved`)| |col|`string`|<span class='optional'>선택</span>|저장 기준 열의 열이름 특정 열을 지정하면 행의 상태(`Added`,`Changed`,`Deleted`)를 무시하고 지정한 열의 데이터 유무에 따라 저장됨.| |validRequired|`boolean`|<span class='optional'>선택</span>|데이터 필수 입력 항목([Required col](/docs/props/col/required) 설정된 열)에 대한 검사 여부 설정. `0(false)`:필수 입력 항목 검사 안함 `1(true)`:필수 입력 항목 검사 실행 (`default`)| |showAlert|`boolean`|<span class='optional'>선택</span>|`validRequired` 검사를 통과하지 못할 시 메세지 표시 여부 `0(false)`:메시지 표시 안함 (`default`) `1(true)`:메세지 표시 ![테이블](/assets/imgs/doSaveRequired1.png \"테이블\") ![경고창](/assets/imgs/doSaveRequired2.png \"경고창\")| |saveAttr|`string`|<span class='optional'>선택</span>|각 셀의 속성값을 같이 추출하고자 하는 경우 Name+속성명 형식으로 설정 여러개 속성을 추출하고자 하는 경우 \",\"를 구분자로 작성 ex) `\"sNameColor,sNoCanEdit\"`| |useLevel|`boolean`|<span class='optional'>선택</span>|Tree기능 사용시 각 행의 Level(Depth)값을 추출되는 데이터에 포함할지 여부 (default: `1(true)`) 최 상위 노드를 1부터 시작하여 계산하며, `\"tLEVEL\"`이라는 이름으로 행 데이터에 추가됩니다. `\"tLEVEL\"`은 각 메세지 파일(ex:`ko.js`)에서 `\"TreeLevelName\"`으로 변경할 수 있습니다. Tree기능을 사용하는 시트에서 해당 속성을 `0(false)`로 설정시 `saveMode:0`을 통해 추출되는 데이터는 계층구조를 갖게 됩니다. `saveMode`를 이용하여 전체 데이터가 아닌 일부 데이터를 추출 할 경우 데이터는 계층 구조를 가지지 않으며 `\"tLEVEL\"` 값은 모두 1이 됩니다.| |formData|`boolean`|<span class='optional'>선택</span>|저장 데이터를 Form Data로 추출 할지 여부 (default: `0(false)`) ***File 타입 저장 시 사용***| |saveExtraAttr|`boolean`|<span class='optional'>선택</span>|시트에 (col)[Name](/docs/props/col/name)으로 정의하지 않은 데이터가 [doSearch](/docs/funcs/core/do-search)나 [loadSearchData](/docs/funcs/core/load-search-data)함수를 통해 로드 된 경우, 함수 호출시 해당 데이터를 같이 추출할 지 여부. 로드 데이터 첫번째 행의 keyset을 기준으로 추출됨. `0(false)`:시트에 (col)[Name](/docs/props/col/name)으로 정의 되지 않은 데이터 서버 전송 시 미포함 (`default`) `1(true)`:시트에 (col)[Name](/docs/props/col/name)으로 정의 되지 않은 데이터 서버 전송 시 포함| |rows|`array[object]`|<span class='optional'>선택</span>| [데이터 로우 객체](/web-service/manuals/ibsheet8/-/wikis/docs/appx/row-object) 배열로 입력한 행에 대한 정보를 추출합니다. (default: `null`)| |validSize|`boolean`|<span class='optional'>선택</span>|사이즈 설정([Size col](/docs/props/col/size))에 대한 유효성 검사 여부 설정. `0(false)`:사이즈 유효성 검사 안함 (`default`) `1(true)`:사이즈 유효성 검사 실행| |validEditMask|`boolean`|<span class='optional'>선택</span>|EditMask 설정([EditMask col](/docs/props/col/edit-mask))에 대한 유효성 검사 여부 설정. `0(false)`:EditMask 유효성 검사 안함 (`default`) `1(true)`:EditMask 유효성 검사 실행| |validResultMask|`boolean`|<span class='optional'>선택</span>|ResultMask 설정([ResultMask col](/docs/props/col/result-mask))에 대한 유효성 검사 여부 설정. `0(false)`:ResultMask 유효성 검사 안함 (`default`) `1(true)`:ResultMask 유효성 검사 실행| Parameter 설정 시 결과에 대응하는 코드는 다음과 같습니다. | Code | Message | Description | |------| --------------- |-------------| | `IBS000` |NoTargetRows | 저장(Added, Changed, Deleted) 대상이 없는 경우 | | `IBS010` |RequiredError| `validRequired` 설정 시 Validation 오류인 경우 | | `IBS020` |InvalidRows | `rows` 설정 시 처리대상이 없는 경우 | | `IBS040` |SizeError | `validSize` 설정 시 Validation 오류인 경우 | | `IBS050` |EditMaskError | `validEditMask` 설정 시 Validation 오류인 경우 | | `IBS060` |ResultMaskError| `validResultMask` 설정 시 Validation 오류인 경우 | ### Return Value **json 형식의 object** ```json // 정상적인 처리시 { \"data\":[ {\"id\":\"AR1\",\"ColName1\":\"12345\",\"ColName2\":\"ABCDE\" ...}, {\"id\":\"AR4\",\"ColName1\":\"76411\",\"ColName2\":\"HIJKL\" ...}, ... ] } ``` ```json // validRequired 오류시 { \"Message\":\"RequiredError\", \"Code\":\"IB010\", \"row\":오류 발생 행 객체, \"col\":오류 발생 열 Name, \"data\":[] } // rows에 입력한 행 객체가 유효하지 않을 경우 { \"Message\":\"InvalidRows\", \"Code\":\"IB020\", \"data\":[] } ``` ### Example ```javascript // 각 컬럼에 수정된 데이터와 DESC 컬럼의 Color 속성값을 추출한다. var saveJson = sheet.getSaveJson({saveMode:2, saveAttr:\"DESCColor\"}); $.ajax({ type: 'post' ,async: true ,dataType: 'json' ,headers: {\"X-Requested-With\":\"XMLHttpRequest\"} ,contentType: \"application/json; charset=utf-8\" ,url: \"/xgs/manage/sys/sawonTelSave.do\" ,data: JSON.stringify(saveJson) , success: function(data) { // 저장 결과 반영 sheet.acceptChangedData(); } , error: function(data, status, err) { alert('서버와의 통신이 실패했습니다.'); } }); ```",
              "see": [
                {
                  "label": "getSaveString method",
                  "url": "./get-save-string"
                },
                {
                  "label": "acceptChangedData method",
                  "url": "./accept-changed-data"
                },
                {
                  "label": "Required col",
                  "url": "/docs/props/col/required"
                },
                {
                  "label": "ValidCheck cfg",
                  "url": "/docs/props/cfg/valid-check"
                },
                {
                  "label": "ValidateMessage cfg",
                  "url": "/docs/props/cfg/validate-message"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.4|`saveAttr`,`useLevel` 기능 추가||core|8.0.0.5|`formData` 기능 추가||core|8.1.0.32|`saveExtraAttr` 기능 추가||core|8.1.0.43|`rows` 기능 추가||core|8.3.0.24|`validSize`, `validEditMask`, `validResultMask` 기능 추가|"
            },
            "url": "docs/funcs/core/get-save-json.html"
          },
          {
            "cid": 643,
            "sid": "get-save-string",
            "name": "get-save-string",
            "label": "getSaveString",
            "data": {
              "body": "> 시트 내에 변경된 내용(`입력(Added)`, `수정(Changed)`, `삭제(Deleted)`, `이동(Moved)`)을 querystring 형식의 문자열로 추출합니다. ### Syntax ```javascript string getSaveString( saveMode, col, urlEncode, delim, queryMode, validRequired, prefix, showAlert, saveAttr, saveExtraAttr ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |saveMode|`number`|<span class='optional'>선택</span>|상태별 데이터 추출 여부 `0`:전체데이터 `1`:전체데이터 중 `Deleted` 만 제외 `2`:수정된 데이터(`Added`,`Changed`,`Deleted`) (`default`) `3`:수정된 데이터(`Added`,`Changed`,`Deleted`)+이동한 데이터(`Moved`)| |col|`string`|<span class='optional'>선택</span>|저장 기준 열의 열이름 특정 열을 지정하면 행의 상태(`Added`,`Changed`,`Deleted`)를 무시하고 지정한 열의 데이터 유무에 따라 저장됨.| |urlEncode|`boolean`|<span class='optional'>선택</span>|조합되는 문자열의 인코딩 여부(encodeURIComponent로 문자열을 인코딩함 ) **`queryMode`별로 `default`가 달라짐** `0(false)`:`queryMode:0 (default)` `1(true)`:`queryMode:1/2 (default)`| |delim|`string`|<span class='optional'>선택</span>|queryMode값이 2인 경우에 데이터 사이 구분자 지정 (`default : \"\\|\"`)| |queryMode|`number`|<span class='optional'>선택</span>|서버로 전달될 데이터 구조 설정 **`0`:json 구조로 전달** ex) Data={ \"data\":[ {\"STATUS\":\"Added\",\"ColName1\":\"홍길동\",\"ColName2\":25}, {\"STATUS\":\"Changed\",\"ColName1\":\"심청\",\"ColName2\":18} ]} *단 **reqHeader**속성에 {\"Content-Type\":\"application/json\"}를 추가시 앞에 \"Data=\"이 제거되고 순수하게 json형식만 서버로 전송* **`1`:QueryString 구조 전달** (`default`) ex) STATUS=Added&ColName1=홍길동&ColName2=25&STATUS=Changed&ColName1=심청&ColName2=18 **`2`:열데이터 기준 QueryString 구조 전달** ex) STATUS=Added\\|Changed&ColName1=홍길동\\|심청&ColName2=25\\|18| |validRequired|`boolean`|<span class='optional'>선택</span>|데이터 필수 입력 항목([Required col](/docs/props/col/required) 설정된 열)에 대한 검사 여부 `0(false)`:필수 입력 항목 검사 안함 `1(true)`:필수 입력 항목 검사 실행 (`default`) **`Validation`결과가 실패인 경우 규격** 1. Validation 오류인 경우 - Code: `IBS010`, Message: `RequiredError`| |prefix|`string`|<span class='optional'>선택</span>|열의 이름 앞에 설정할 문자열 여러개 시트를 한번에 서버로 보낼때 시트id_colName 형식으로 보낼 수 있음 ex) `sheet_saName=홍길동&sheet_saId=839212` 식으로 queryString이 만들어짐 (`default : \"\"`)| |showAlert|`boolean`|<span class='optional'>선택</span>| `validRequired` 검사를 통과하지 못할 시 메세지 표시 여부 `0(false)`:메시지 표시 안함 (`default`) `1(true)`:메세지 표시 ![테이블](/assets/imgs/doSaveRequired1.png \"테이블\") ![경고창](/assets/imgs/doSaveRequired2.png \"경고창\")| |saveAttr|`string`|<span class='optional'>선택</span>|각 셀의 속성값을 같이 추출하고자 하는 경우 Name+속성명 형식으로 설정 여러개 속성을 추출하고자 하는 경우 \",\"를 구분자로 작성 ex) `\"sNameColor,sNoCanEdit\"`| |saveExtraAttr|`boolean`|<span class='optional'>선택</span>|시트에 (col)[Name](/docs/props/col/name)으로 정의하지 않은 데이터가 [doSearch](/docs/funcs/core/do-search)나 [loadSearchData](/docs/funcs/core/load-search-data)함수를 통해 로드 된 경우, 함수 호출시 해당 데이터를 같이 추출할 지 여부. 로드 데이터 첫번째 행의 keyset을 기준으로 추출됨 `0(false)`:시트에 (col)[Name](/docs/props/col/name)으로 정의 되지 않은 데이터 서버 전송 시 미포함 (`default`) `1(true)`:시트에 (col)[Name](/docs/props/col/name)으로 정의 되지 않은 데이터 서버 전송 시 포함| |validSize|`boolean`|<span class='optional'>선택</span>|사이즈 설정([Size col](/docs/props/col/size))에 대한 유효성 검사 여부 설정. `0(false)`:사이즈 유효성 검사 안함 (`default`) `1(true)`:사이즈 유효성 검사 실행| |validEditMask|`boolean`|<span class='optional'>선택</span>|EditMask 설정([EditMask col](/docs/props/col/edit-mask))에 대한 유효성 검사 여부 설정. `0(false)`:EditMask 유효성 검사 안함 (`default`) `1(true)`:EditMask 유효성 검사 실행| |validResultMask|`boolean`|<span class='optional'>선택</span>|ResultMask 설정([ResultMask col](/docs/props/col/result-mask))에 대한 유효성 검사 여부 설정. `0(false)`:ResultMask 유효성 검사 안함 (`default`) `1(true)`:ResultMask 유효성 검사 실행| ### Return Value | 결과 | Description | |------|-------------| |sa_name=홍길동&sa_id=02712&sa_dept=031&...| 정상 처리일 경우(querystring 형태) | |\"\"| 저장(Added, Changed, Deleted) 대상이 없는 경우 | |RequiredError\\|IBS010\\|오류발생 행 id\\|오류발생 열 Name| `validRequired` 설정 시 Validation 오류인 경우 | ### Example ```javascript // 열이름이 CHK인 열에 체크된 데이터만 추출한다. // 데이터를 추출하면서 AA 컬럼에 Checked 속성도 추출한다. var saveStr = sheet.getSaveString({col:\"CHK\",saveAttr:\"AAChecked\"}); $.ajax({ url:\"sheetSaveWorx.do\", data:saveStr, success:function(data){ // 저장성공시 처리 sheet.acceptChangedData(); } }) ```",
              "see": [
                {
                  "label": "getSaveJson method",
                  "url": "./get-save-json"
                },
                {
                  "label": "acceptChangedData method",
                  "url": "./accept-changed-data"
                },
                {
                  "label": "Required col",
                  "url": "/docs/props/col/required"
                },
                {
                  "label": "ValidCheck cfg",
                  "url": "/docs/props/cfg/valid-check"
                },
                {
                  "label": "ValidateMessage cfg",
                  "url": "/docs/props/cfg/validate-message"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.4|`saveAttr` 기능 추가||core|8.1.0.32|`saveExtraAttr` 기능 추가||core|8.3.0.24|`validSize`, `validEditMask`, `validResultMask` 기능 추가|"
            },
            "url": "docs/funcs/core/get-save-string.html"
          },
          {
            "cid": 644,
            "sid": "get-saved-current-info",
            "name": "get-saved-current-info",
            "label": "getSavedCurrentInfo",
            "data": {
              "body": "> 현재 로컬 스토리지 혹은 세션 스토리지에 저장되어 있는 시트의 컬럼 정보를 문자열로 가져옵니다. ### Syntax ```javascript string getSavedCurrentInfo(); ``` ### Return Value ***string 현재 로컬 스토리지, 혹은 세션 스토리지에 저장되어 있는 컬럼들의 숨김, 너비, 위치 정보 값*** ### Example ```javascript // 현재 로컬 스토리지 혹은 세션 스토리지에 저장되어 있는 시트의 컬럼 정보를 담고 있는 문자열을 반환 sheet.getSavedCurrentInfo(); ```",
              "see": [
                {
                  "label": "getCurrentInfo method",
                  "url": "./get-current-info"
                },
                {
                  "label": "setCurrentInfo method",
                  "url": "./set-current-info"
                },
                {
                  "label": "saveCurrentInfo method",
                  "url": "./save-current-info"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.28|기능 추가|"
            },
            "url": "docs/funcs/core/get-saved-current-info.html"
          },
          {
            "cid": 645,
            "sid": "get-scale",
            "name": "get-scale",
            "label": "getScale",
            "data": {
              "body": "> 시트의 배율(zoom factor)정보를 확인합니다. ### Syntax ```javascript number getScale(); ``` ### Return Value ***number*** : 시트에 설정된 배율 정보 ### Example ```javascript sheet.getScale(); ```",
              "see": [
                {
                  "label": "[setScale method] (./set-scale)"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.11|기능 추가|"
            },
            "url": "docs/funcs/core/get-scale.html"
          },
          {
            "cid": 646,
            "sid": "get-scroll-left",
            "name": "get-scroll-left",
            "label": "getScrollLeft",
            "data": {
              "body": "> 가로스크롤 바의 위치를 pixel단위로 확인합니다. ### Syntax ```javascript number getScrollLeft( section ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |section|`number`|<span class='optional'>선택</span>|틀고정을 기준으로 한 좌우 영역 `0`:좌측 `1`:가운데 (`default`) `2`:우측| ### Return Value ***number*** : 가로 스크롤바에 대해 x축으로 이동한 거리(pixel단위) ### Example ```javascript //현재 가로스크롤 바의 위치를 얻는다. var offset = sheet.getScrollLeft(1); //다시 렌더링 sheet.rerender(); //원래 위치로 이동시킴 sheet.setScrollLeft(offset , 1 ); ```",
              "see": [
                {
                  "label": "setScrollLeft method",
                  "url": "./set-scroll-left"
                },
                {
                  "label": "getScrollTop method",
                  "url": "./get-scroll-top"
                },
                {
                  "label": "setScrollTop method",
                  "url": "./set-scroll-top"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-scroll-left.html"
          },
          {
            "cid": 647,
            "sid": "get-scroll-top",
            "name": "get-scroll-top",
            "label": "getScrollTop",
            "data": {
              "body": "> 세로스크롤바의 위치를 확인합니다. ### Syntax ```javascript number getScrollTop(); ``` ### Return Value ***number*** : 세로 스크롤바에 대해 y축으로 이동한 거리(pixel단위) ### Example ```javascript //현재 세로스크롤 바의 위치를 얻는다. var offset = sheet.getScrollTop(); //다시 렌더링 sheet.rerender(); //원래 위치로 이동시킴 sheet.setScrollTop(offset); ```",
              "see": [
                {
                  "label": "setScrollTop method",
                  "url": "./set-scroll-top"
                },
                {
                  "label": "getScrollLeft method",
                  "url": "./get-scroll-left"
                },
                {
                  "label": "setScrollLeft method",
                  "url": "./set-scroll-left"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-scroll-top.html"
          },
          {
            "cid": 648,
            "sid": "get-selected-range",
            "name": "get-selected-range",
            "label": "getSelectedRanges",
            "data": {
              "body": "> 현재 선택된 영역을 이중 배열로 리턴합니다. > 가령 다음과 같이 선택 후 `default` 형태로 값을 얻을시 리턴되는 값은 다음과 같습니다. ### ![선택영역얻기](/assets/imgs/getSelectedRanges.png \"선택영역얻기\") ``` [ [row1객체, \"CONTRACTNO\", row2객체, \"CARNO\", 4, 3, 6, 3] ,[row1객체, \"RENTFEE\", row2객체, \"RENTDATE\", 5, 7, 4, 2] ,[row1객체, \"CARNO\", row2객체, \"RENTFEE\", 11, 5, 4, 3] ] ``` ### Syntax ```javascript object getSelectedRanges( rowtype, coltype ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |rowtype|`number`|<span class='optional'>선택</span>|`0`:구분없이 선택영역 모두 추출 (`default`) `1`:트리사용시 접힌 자식은 빼고 추출 `2`:페이지 단위로 구분해서 추출| |coltype|`number`|<span class='optional'>선택</span>|`0`:구분없이 모두 추출 (`default`) `1`:영역(Left/Center/Right)별로 구분해서 추출| ### Return Value ***object (array[array])*** : 선택된 영역들에 대한 이중 배열 [시작[데이터 로우 객체](/docs/appx/row-object) , 시작열이름 , 종료[데이터 로우 객체](/docs/appx/row-object) , 종료열이름 , 시작행인덱스 , 시작열인덱스 , 선택행의개수 , 선택열의 개수] ### Example ```javascript //선택된 셀의 개수를 알아봄 var selectRange = sheet.getSelectedRanges(); var selectCellCnt = 0; for(var i=0;i<selectRange.length;i++){ selectCellCnt += parseInt(selectRange[i][6]) * parseInt(selectRange[i][7]); } alert(\"총 \"+selectCellCnt+\"개 셀을 선택하셨습니다.\"); ```",
              "see": [
                {
                  "label": "selectRange method",
                  "url": "./select-range"
                },
                {
                  "label": "getSelectedRows method",
                  "url": "./get-selected-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-selected-range.html"
          },
          {
            "cid": 649,
            "sid": "get-selected-rows",
            "name": "get-selected-rows",
            "label": "getSelectedRows",
            "data": {
              "body": "> 선택된 행 객체를 리턴한다. > type 인자에 따라 셀단위 선택한 행이나 행전체 선택한 행에 대해 추출할 수 있습니다. > attr 인자를 통해 선택된 행들 중에서도 특정 속성이 있는 행만 추출할 수 있습니다. ### Syntax ```javascript object getSelectedRows( type , attr ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |type|`number`|<span class='optional'>선택</span>|`0`:행이나 셀 중 선택된 것은 모두 추출 (`default`) `1`:행단위 선택만 추출 `2`:셀단위 선택만 추출| |attr|`string`|<span class='optional'>선택</span>|같이 확인하고자 하는 속성명| ### Return Value ***array[row object]*** : 선택된 [데이터 로우 객체](/docs/appx/row-object) (배열형태) ### Example ```javascript //일부 행을 선택 sheet.setAttribute(sheet.getRowById(\"AR5\"), null, \"Selected\", 1, 1); sheet.setAttribute(sheet.getRowById(\"AR10\"), \"RENTFEE\", \"Selected\", 1, 1); //일부 영역을 선택 sheet.selectRange(sheet.getRowById(\"AR6\"),\"CARNO\",sheet.getRowById(\"AR8\"),\"PROMOCODE\"); //행의 Edit 속성을 변경 sheet.setAttribute(sheet.getRowById(\"AR7\"), null, \"CanEdit\", 0, 1); //선택된 행(Selected=1)을 추출 var rows = sheet.getSelectedRows(1); //[\"AR5\" , \"AR10\"] //선택된 셀을 추출 var rows = sheet.getSelectedRows(2); //[\"AR6\" , \"AR7\" , \"AR8\"] //선택된 셀,행 모두 추출 var rows = sheet.getSelectedRows(0); //[\"AR5\" , \"AR6\" , \"AR7\" , \"AR8\" , \"AR10\"] //선택된 셀,행 중에 CanEdit=1 인 데이터 로우 객체 추출 var rows = sheet.getSelectedRows(0, \"CanEdit\"); //[\"AR5\" , \"AR6\" , \"AR8\" , \"AR10\"] ```",
              "see": [
                {
                  "label": "getSelectedRanges method",
                  "url": "./get-selected-ranges"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-selected-rows.html"
          },
          {
            "cid": 650,
            "sid": "get-selection-summary-info-element",
            "name": "get-selection-summary-info-element",
            "label": "getSelectionSummaryInfoElement",
            "data": {
              "body": "> 선택한 영역의 셀 개수 및 합계/평균 값 정보를 시트 외부의 Dom Element 에 표시하고 있을 경우 정보 출력되는 Dom Element 를 반환합니다. ### Syntax ```javascript HTML Element getCountInfoElement (); ``` ### Return Value ***object*** : 선택한 영역의 셀 개수 및 합계/평균 값 정보가 출력 되는 Dom Element ### Example ```javascript // 선택한 영역의 셀 개수 및 합계/평균 값 정보가 출력 되는 Dom Element 확인 sheet.getSelectionSummaryInfoElement (); ```",
              "see": [
                {
                  "label": "InfoRowConfig cfg",
                  "url": "/docs/props/cfg/info-row-config"
                },
                {
                  "label": "SelectionSummary cfg",
                  "url": "/docs/props/cfg/selection-summary"
                },
                {
                  "label": "setSelectionSummaryInfoElement method",
                  "url": "./set-selection-summary-info-element"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.6|기능 추가|"
            },
            "url": "docs/funcs/core/get-selection-summary-info-element.html"
          },
          {
            "cid": 651,
            "sid": "get-shown-cols",
            "name": "get-shown-cols",
            "label": "getShownCols",
            "data": {
              "body": "> 현재 화면에 보여지는 열 이름을 배열로 리턴합니다. > section인자를 설정하지 않으면 가운데 영역에서 보여지는 열 이름을 배열로 리턴합니다. > 시트의 너비가 넓을수록 더 많은 열 이름이 리턴됩니다. ### Syntax ```javascript object getShownCols(section); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |section|`number`|<span class='optional'>선택</span>|틀고정을 기준으로 한 영역지정 `0`:왼쪽 `1`:가운데 (`default`) `2`:오른쪽| ### Return Value ***array[string]*** : 열 이름 배열 ### Example ```javascript //가운데 영역에 보여지는 열 이름을 확인 var colNameArr = sheet.getShownCols(1); ```",
              "see": [
                {
                  "label": "getShownRows method",
                  "url": "./get-shown-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-shown-cols.html"
          },
          {
            "cid": 652,
            "sid": "get-shown-rows",
            "name": "get-shown-rows",
            "label": "getShownRows",
            "data": {
              "body": "> 현재 화면에 보여지는 [데이터 로우 객체](/docs/appx/row-object)를 리턴합니다. > 시트의 높이가 클수록 더 많은 [데이터 로우 객체](/docs/appx/row-object)가 리턴됩니다. > `current: 0(false)`인 경우 전체 영역에서 보여질 모든 행을 리턴합니다. > 트리 사용시 접혀있는 행들은 리턴되지 않습니다. ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |current|`boolean`|<span class='optional'>선택</span>|현재 보여지는 행을 리턴할 영역 설정 `0(false)`:전체 영역 `1(true)`:현재 화면에 보여지는 영역 (`default`) ### Syntax ```javascript object getShownRows(current); ``` ### Return Value ***array[row object]*** : 배열 형태의 [데이터 로우 객체](/docs/appx/row-object) ### Example ```javascript // 전체 영역 중 보여지는 행의 개수를 확인 var rowArr = sheet.getShownRows(1); var cnt = rowArr.length; ```",
              "see": [
                {
                  "label": "getShownCols method",
                  "url": "./get-shown-cols"
                },
                {
                  "label": "행 객체(Row Object) appendix",
                  "url": "/docs/appx/row-object"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.17|`current` 인자 추가|"
            },
            "url": "docs/funcs/core/get-shown-rows.html"
          },
          {
            "cid": 653,
            "sid": "get-string",
            "name": "get-string",
            "label": "getString",
            "data": {
              "body": "> 포맷이 적용된 문자열로 셀의 값을 가져옵니다. ### Syntax ```javascript string getString( row, col); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| ### Return Value ***string*** : 적용된 포맷형태에 따른 셀값 리턴 ### Example ```javascript var r5 = sheet.getRowById(\"AR5\"); //format yyyy/MM/dd 인경우 '2015/12/31' 형태로 추출 var sdata = sheet.getString(r5, \"StartDate\"); ```",
              "see": [
                {
                  "label": "setString method",
                  "url": "./set-string"
                },
                {
                  "label": "setValue method",
                  "url": "./set-value"
                },
                {
                  "label": "getValue method",
                  "url": "./get-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-string.html"
          },
          {
            "cid": 654,
            "sid": "get-sub-total-rows",
            "name": "get-sub-total-rows",
            "label": "getSubTotalRows",
            "data": {
              "body": "> 생성된 소계/누계 행들을 반환합니다. > 리턴 값은 다음과 같습니다 > {subTotal:[[첫번 째 기준 열 관련 소계행들], [두번 째 기준 열 관련 소계행들] ... ], Total:[[첫번 째 기준 열 관련 누계 행들], [두번 째 기준 열 관련 누계 행들] ... ]} ### Syntax ```javascript object getSubTotalRows(); ``` ### Return Value ***object*** ### Example ```javascript //소계 누계 행을 얻습니다. var totalRows = sheet.getSubTotalRows(); ```",
              "see": [
                {
                  "label": "makeSubTotal method",
                  "url": "./make-sub-total"
                },
                {
                  "label": "removeSubTotal method",
                  "url": "./remove-sub-total"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-sub-total-rows.html"
          },
          {
            "cid": 655,
            "sid": "get-total-row-count",
            "name": "get-total-row-count",
            "label": "getTotalRowCount",
            "data": {
              "body": "> 조회모드에 따라 조회된 전체 데이터 건수 또는 DB 에서 가져올 전체 데이터 행수를 리턴합니다. > [(Cfg)SearchMode](/docs/props/cfg/search-mode) 가 0, 1, 2 로 설정된 경우 조회된 전체 데이터 행수를 리턴합니다. > [(Cfg)SearchMode](/docs/props/cfg/search-mode) 가 3, 4, 5 인 경우 조회 데이터의 Total 에 설정된 값을 리턴합니다. 이 때 Total 값은 조회조건에 따라 가져올 DB 의 전체 건수가 설정되어야 합니다. ### Syntax ```javascript number getTotalRowCount(); ``` ### Return Value ***number*** : 조회된 전체 데이터 건수 또는 조회데이터에 포함된 Total 값 ### Example ```javascript //전체 데이터 건수를 얻음 var tRow = sheet.getTotalRowCount(); ```",
              "see": [
                {
                  "label": "getDataRows method",
                  "url": "./get-data-rows"
                },
                {
                  "label": "getShownRows method",
                  "url": "./get-shown-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-total-row-count.html"
          },
          {
            "cid": 656,
            "sid": "get-type",
            "name": "get-type",
            "label": "getType",
            "data": {
              "body": "> 특정 셀의 Type을 확인합니다. ### Syntax ```javascript string getType( row, col ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| ### Return Value ***string*** : 셀의 타입 (Text,Int,Float,Date 등) ### Example ```javascript function cellClick(evt){ if( evt.Col == \"EntDate\" && sheet.getType( evt.Row , evt.Col ) == \"Text\"){ $( \"#entDate-confirm\" ).dialog('open'); } } ```",
              "see": [
                {
                  "label": "getFormat method",
                  "url": "./get-format"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-type.html"
          },
          {
            "cid": 657,
            "sid": "get-user-data",
            "name": "get-user-data",
            "label": "getUserData",
            "data": {
              "body": "> IBSheet.create 함수 호출시 설정한 데이터를 리턴 합니다. > data의 값이 없으면 조회한 데이터를 리턴 합니다. > 수정한 데이터는 반영되어 추출되지 않습니다. ### Syntax ```javascript object getUserData(); ``` ### Return Value ***array*** : 시트 생성시 초기화된 데이터 배열 ### Example ```javascript IBSheet.create({ id: 'sheet', // 생성할 시트의 id el: 'sheetDiv', // 시트를 생성할 Dom 객체 및 id options: options, // 생성될 시트의 속성 data: [{ \"ItemNo\": 59993940, \"Title\": \"공부머리 독서법\", \"Price\": 14850, \"Author\": \"최승필\", \"Publisher\": \"책구루\", \"Category1\": \"A0\", \"Category2\": \"AA1\", \"Category3\": \"AAB0\" } ] // 생성될 시트의 정적데이터 }); //시트 초기화시 생성된 데이터를 확인합니다. var data = sheet.getUserData(); //리턴된 data [{ \"ItemNo\": 59993940, \"Title\": \"공부머리 독서법\", \"Price\": 14850, \"Author\": \"최승필\", \"Publisher\": \"책구루\", \"Category1\": \"A0\", \"Category2\": \"AA1\", \"Category3\": \"AAB0\" ] ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-user-data.html"
          },
          {
            "cid": 658,
            "sid": "get-user-options",
            "name": "get-user-options",
            "label": "getUserOptions",
            "data": {
              "body": "> 시트 초기화 설정값을 리턴합니다. > 시트 생성시 [IBSheet.create({options})](/docx/static/create)으로 설정한 내용을 리턴합니다. > [IBSheet.CommonOptions](/docx/static/common-options) 이나 [IBSheet.onBeforeCreate](on-before-create)를 통해 공통으로 적용받은 내용도 같이 리턴되나, 생성 후 추가하거나 수정한 내용은 리턴되지 않습니다. > `mode`에 따라 리턴하는 설정값이 달리짐. ### Syntax ```javascript object getUserOptions( mode ); ``` ### Parameters |Name|Type|Required| Description | |----|----|--------|-------------| |mode|`number`|<span class='optional'>선택</span>|`0`:시트 생성시 설정한 옵션을 리턴 (`default`) `1`:엑셀 다이얼로그전용 옵션 리턴 (`mode: 0` 에서 `Cfg`에 `ZIndex` 변경, `CanSort: 0` 추가) `2`:시트 생성시 설정한 옵션을 리턴하되 컬럼은 현재의 컬럼 정보를 리턴 (`mode: 0` 에서 컬럼은 현재 마지막 컬럼 정보를 가져옴.) `3`:엑셀 다이얼로그 전용 옵션 리턴 (`mode: 2` 에서 `Cfg`에 `ZIndex` 변경, `CanSort: 0` 추가)| ### Return Value ***object*** : 시트 생성시 사용된 초기화(options) 내용 ### Example ```javascript //시트 초기화시 Cfg 설정 값의 일부 내용을 확인합니다. var opts = sheet.getUserOptions( ); alert(opts.Cfg.CanEdit); //시트 현재 컬럼의 정보를 확인합니다. var opts = sheet.getUserOptions( 2 ); alert(opts.Cols); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.7|1,3 추가|"
            },
            "url": "docs/funcs/core/get-user-options.html"
          },
          {
            "cid": 659,
            "sid": "get-value",
            "name": "get-value",
            "label": "getValue",
            "data": {
              "body": "> 특정 셀의 값을 구분자를 제거하고 가져오는 함수입니다. ### Syntax ```javascript mixed getValue( row, col ); ``` ### Parameters |Name|Type|Required| Description | |----|----|--------|-------------| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| ### Return Value ***mixed ( `number` \\| `string` )*** : 셀의 타입에 따른 값을 리턴 ### Example ```javascript var r = sheet.getFirstRow(); //구분자 없이 yyyyMMdd 형태로 추출 var sdate = sheet.getValue( r , \"StartDate\" ); var edate = sheet.getValue({row:r,col:\"EndDate\"}); ```",
              "see": [
                {
                  "label": "getString method",
                  "url": "./get-string"
                },
                {
                  "label": "setString method",
                  "url": "./set-string"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/get-value.html"
          },
          {
            "cid": 660,
            "sid": "go-to-next-page",
            "name": "go-to-next-page",
            "label": "goToNextPage",
            "data": {
              "body": "> 현재 페이지의 다음 페이지로 이동합니다. ### Syntax ```javascript boolean goToNextPage(); ``` ### Return Value ***boolean*** : 페이지 이동 성공여부(이미 마지막 페이지인 경우 false가 리턴) ### Example ```javascript //다음페이지로 이동 function NextPage(){ var rtn = sheet.goToNextPage(); if(!rtn) { alert(\"마지막 페이지 입니다.\"); } } ```",
              "see": [
                {
                  "label": "goToPage method",
                  "url": "./go-to-page"
                },
                {
                  "label": "goToPrevPage method",
                  "url": "./go-to-prev-page"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/go-to-next-page.html"
          },
          {
            "cid": 661,
            "sid": "go-to-page-by-index",
            "name": "go-to-page-by-index",
            "label": "goToPageByIndex",
            "data": {
              "body": "> 특정 페이지로 이동합니다. > 클라이언트/서버 페이징에서 사용 가능합니다. ### Syntax ```javascript void goToPageByIndex(index); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |index|`number`|<span class='required'>필수</span>|조회할 페이지 순서 번호 ### Return Value ***none*** ### Example ```javascript //12번째 페이지로 이동 sheet.goToPageByIndex(12); ```",
              "see": [
                {
                  "label": "goToNextPage method",
                  "url": "./go-to-next-page"
                },
                {
                  "label": "goToPrevPage method",
                  "url": "./go-to-prev-page"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/go-to-page-by-index.html"
          },
          {
            "cid": 662,
            "sid": "go-to-page",
            "name": "go-to-page",
            "label": "goToPage",
            "data": {
              "body": "> 특정 페이지로 이동합니다. ### Syntax ```javascript void goToPage( page ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |page|`object`|<span class='required'>필수</span>|[데이터 페이지 객체](/docs/appx/page-object)| ### Return Value ***none*** ### Example ```javascript //마지막 페이지를 얻음 var page = sheet.getPageByRow(sheet.getLastRow() ); //마지막 페이지로 이동 sheet.goToPage(page); ```",
              "see": [
                {
                  "label": "goToNextPage method",
                  "url": "./go-to-next-page"
                },
                {
                  "label": "goToPrevPage method",
                  "url": "./go-to-prev-page"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/go-to-page.html"
          },
          {
            "cid": 663,
            "sid": "go-to-prev-page",
            "name": "go-to-prev-page",
            "label": "goToPrevPage",
            "data": {
              "body": "> 현재 페이지의 이전 페이지로 이동합니다. ### Syntax ```javascript boolean goToPrevPage(); ``` ### Return Value ***boolean*** : 페이지 이동 성공여부(현재 페이지가 첫페이지인 경우 false가 리턴) ### Example ```javascript //이전페이지로 이동 function PrevPage(){ var rtn = sheet.goToPrevPage(); if (!rtn) { alert(\"첫 페이지 입니다.\"); } } ```",
              "see": [
                {
                  "label": "goToPage method",
                  "url": "./go-to-page"
                },
                {
                  "label": "goToNextPage method",
                  "url": "./go-to-next-page"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/go-to-prev-page.html"
          },
          {
            "cid": 664,
            "sid": "has-changed-data",
            "name": "has-changed-data",
            "label": "hasChangedData",
            "data": {
              "body": "> 시트 내에 변경된 내용(입력, 수정, 삭제)이 있는지 확인합니다. ### Syntax ```javascript number hasChangedData(dataonly); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |dataonly|`boolean`|<span class='optional'>선택</span>|수정 여부 확인을 Sheet전체 영역과 Data영역만 대상으로 지정할 지 여부 `0(false)`:Sheet전체 영역 대상 지정(`default`) `1(true)`:Data영역만 대상 지정| ### Return Value ***number*** : 수정된 내용이 있으면 1, 없으면 0 ### Example ```javascript window.onbeforeunload = function() { if(sheet.hasChangedData()) { return \"시트에 수정된 내용이 있습니다.\\n계속 진행시 수정하신 내용은 잃어버리게 됩니다.\"; } } sheet.hasChangedData(true); //데이터 영역에서 수정된 내용이 있는 경우 1, 없으면 0 ```",
              "see": [
                {
                  "label": "acceptChangedData method",
                  "url": "./accept-changed-data"
                },
                {
                  "label": "getChangedData method",
                  "url": "./get-changed-data"
                },
                {
                  "label": "getSaveJson method",
                  "url": "./get-save-json"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.3.0.20|dataonly 인자 추가|"
            },
            "url": "docs/funcs/core/has-changed-data.html"
          },
          {
            "cid": 665,
            "sid": "has-filter",
            "name": "has-filter",
            "label": "hasFilter",
            "data": {
              "body": "> 필터가 사용됐는지 여부를 리턴합니다. > 필터된 결과와 무관하게 필터를 사용했으면 `true`가 리턴됩니다. ### Syntax ```javascript boolean hasFilter(); ``` ### Return Value ***boolean*** : 필터 적용 여부 ### Example ```javascript //필터를 사용했나? var fuse = sheet.hasFilter(); ```",
              "see": [
                {
                  "label": "clearFilter method",
                  "url": "./clear-filter"
                },
                {
                  "label": "setFilter method",
                  "url": "./set-filter"
                },
                {
                  "label": "doFilter method",
                  "url": "./do-filter"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/has-filter.html"
          },
          {
            "cid": 666,
            "sid": "hide-col",
            "name": "hide-col",
            "label": "hideCol",
            "data": {
              "body": "> 특정 열을 감춥니다. > 여러 컬럼을 `hide` 할시 `render` 인자를 `false` 로 하여 작업 후에는 `rerender` 를 무조건 호출하셔야 합니다. ### Syntax ```javascript void hideCol( col, userHidden, merge, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |col|`string`|<span class='required'>필수</span>|감추고자 하는 열이름| |userHidden|`boolean`|<span class='optional'>선택</span>|화면 개발자가 아닌 시트 사용자가 감추고자 하는 열 인지 여부 개인화(*사용자가 열의 위치, 너비, 보임여부를 저장했다가 해당페이지 접속시 설정했던 모습으로 보여주는 기능*)기능 구현시 사용 됩니다. 이 속성값을 `1(true)`로 하면 해당 열은 사용자가 감추었다는 의미로 내부적으로 해당 열에 대한 플래그가 생성되고 [saveCurrentInfo()](./save-current-info)함수 호출시 저장되었다가 추후에 페이지에 재 접속시 시트에 반영되어 보여지게 됩니다. `0(false)`:사용자가 감추고자 하는 열이 아님 (`default`) `1(true)`:사용자가 감추고자 하는 열| |merge|`boolean`|<span class='optional'>선택</span>| 열을 숨기면서 자동 머지합니다. <span style='color:red'>많은 데이터가 있는 시트에서 실행 시 느려질 수 있습니다.</span> `0(false)`:병합 실행 안함 (`default`) `1(true)`:병합 실행| |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***none*** ### Example ```javascript //CPT_NM 열을 감춥니다. sheet.hideCol( \"CPT_NM\" ); //AMT 열을 감추면서 사용자 감춤여부를 설정합니다. sheet.hideCol( \"AMT\" , 1 ); // render 인자를 사용합니다. sheet.hideCol( { col: \"AMT\", render: false } ); sheet.rerender(); ```",
              "see": [
                {
                  "label": "getCurrentInfo method",
                  "url": "./get-current-info"
                },
                {
                  "label": "saveCurrentInfo method",
                  "url": "./save-current-info"
                },
                {
                  "label": "showCol method",
                  "url": "./show-col"
                },
                {
                  "label": "onShowColumn event",
                  "url": "/docs/events/on-show-column"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.6|`merge` 인자 추가||core|8.0.0.17|`render` 인자 추가|"
            },
            "url": "docs/funcs/core/hide-col.html"
          },
          {
            "cid": 667,
            "sid": "hide-filter-dialog",
            "name": "hide-filter-dialog",
            "label": "hideFilterDialog",
            "data": {
              "body": "> 헤더에 필터 다이얼로그 아이콘을 숨깁니다. ### Syntax ```javascript boolean hideFilterDialog(); ``` ### Return Value ***none*** ### Example ```javascript // 헤더행에 필터 다이얼로그 아이콘을 숨깁니다. sheet.hideFilterDialog(); ```",
              "see": [
                {
                  "label": "UseFilterDialog",
                  "url": "/docs/props/cfg/use-filter-dialog"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.1|기능 추가|"
            },
            "url": "docs/funcs/core/hide-filter-dialog.html"
          },
          {
            "cid": 668,
            "sid": "hide-filter-row",
            "name": "hide-filter-row",
            "label": "hideFilterRow",
            "data": {
              "body": "> 필터 행을 감춥니다. ### Syntax ```javascript boolean hideFilterRow( ); ``` ### Return Value ***boolean*** ### Example ```javascript //필터행을 감춥니다. sheet.hideFilterRow( ); ```",
              "see": [
                {
                  "label": "showFilterRow method",
                  "url": "./show-filter-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/hide-filter-row.html"
          },
          {
            "cid": 669,
            "sid": "hide-group-row",
            "name": "hide-group-row",
            "label": "hideGroupRow",
            "data": {
              "body": "> 그룹행을 제거하거나 숨깁니다. ### Syntax ```javascript void hideGroupRow( del ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |del |`string or object`|<span class='optional'>선택</span>|그룹행을 삭제합니다. (`default: 1`)| ### Return Value ***boolean*** : 설정 완료 여부 ### Example ```javascript // 그룹행을 제거합니다. sheet.hideGroupRow(); // 그룹행을 숨깁니다. sheet.hideGroupRow(0); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.3.0.9|기능 추가|"
            },
            "url": "docs/funcs/core/hide-group-row.html"
          },
          {
            "cid": 670,
            "sid": "hide-hint",
            "name": "hide-hint",
            "label": "hideHint",
            "data": {
              "body": "> 현재 보여지고 있는 힌트를 감춥니다. ### ![힌트활성화](/assets/imgs/hint1.png \"마우스 커서가 셀에 올라갔을때 힌트를 통해 감춰진 부분이 보여짐\") [힌트 예시] ### Syntax ```javascript void hideHint(); ``` ### Return Value ***none*** ### Example ```javascript //현재 보여지는 힌트를 감춤 sheet.hideHint(); ```",
              "see": [
                {
                  "label": "showHint method",
                  "url": "./show-hint"
                },
                {
                  "label": "onShowHint event",
                  "url": "/docs/events/on-show-hint"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/hide-hint.html"
          },
          {
            "cid": 671,
            "sid": "hide-message",
            "name": "hide-message",
            "label": "hideMessage",
            "data": {
              "body": "> [showMessage](./show-message)로 띄운 메세지 다이얼로그를 제거합니다. ### ![hideMessage](/assets/imgs/showMessage.png \"시트 영역 위에 메세지 다이얼로그를 띄움\") ### Syntax ```javascript void hideMessage(); ``` ### Return Value ***none*** ### Example ```javascript function popup(){ sheet.showMessage({message:\"<span style='color:black'>결제기한이 만료되었습니다.</span>\",importance:4,type:1}); setTimeout(function(){sheet.hideMessage()} , 1000); } ```",
              "see": [
                {
                  "label": "showMessage method",
                  "url": "./show-message"
                },
                {
                  "label": "onHideMessage event",
                  "url": "/docs/events/on-hide-message"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/hide-message.html"
          },
          {
            "cid": 672,
            "sid": "hide-row",
            "name": "hide-row",
            "label": "hideRow",
            "data": {
              "body": "> 지정한 행을 감춥니다. > 두번째 `del` 인자의 값이 `1(true)` 일 경우 실제 DOM을 삭제하고 숨겨집니다. ([SearchMode](/docs/props/cfg/search-mode) : 2 일 경우 사용) > 대량으로 행을 감추거나 보이게 끔 하고자 할때는 `norender`값을 `1`로 설정하여 작업하신 후, `render()함수`를 호출하여 한꺼번에 화면에 반영하는 것이 좋습니다. ### Syntax ```javascript void hideRow( row, del, norender, nomerge ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|감출 [데이터 로우 객체](/docs/appx/row-object)| |del |`boolean`|<span class='optional'>선택</span><mark>(사용주의)</mark>|DOM 삭제 여부 해당 기능은 **권장하지 않습니다**. `0(false)`:DOM 삭제 안함 (`default`) `1(true)`:DOM 삭제| |norender|`boolean`|<span class='optional'>선택</span><mark>(사용주의)</mark>|즉시 화면에 반영할 것인지 여부 해당 기능을 사용한 뒤, 다른 동작을 실행 할 경우 `renderBody()`를 반드시 먼저 실행 해야 합니다. `0(false)`: 즉시 반영 (`default`) `1(true)`: 반영 안함 |nomerge|`boolean`|<span class='optional'>선택</span>|[DataMerge cfg](/docs/props/cfg/data-merge) 값이 `0` 외의 값일 때, 머지 계산을 바로 할 것인지 여부 `0(false)`:행 삭제 후, 머지 계산 (`default`) `1(true)`:행 삭제 후, 머지 계산 안함| ### Return Value ***none*** ### Example ```javascript //44번째행을 감춥니다. sheet.hideRow( sheet.getRowByIndex(44) ); //특정 행을 모두 감춥니다. var rows = sheet.getDataRows(); for(var i=0; i<rows.length; i++){ if(rows[i][\"deptNm\"] != \"지원부서\"){ // 행을 감출때 렌더링을 일단 막음 sheet.hideRow( {'row':rows[i],'norender':1}); } } //데이터 영역에 변경된 내용을 한꺼번에 렌더링 한다. sheet.renderBody(); ```",
              "see": [
                {
                  "label": "showRow method",
                  "url": "./show-row"
                },
                {
                  "label": "SearchMode cfg",
                  "url": "/docs/props/cfg/search-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/hide-row.html"
          },
          {
            "cid": 673,
            "sid": "hide-tip",
            "name": "hide-tip",
            "label": "hideTip",
            "data": {
              "body": "> 시트가 띄운 풍선도움말을 감춥니다. ### Syntax ```javascript void hideTip(); ``` ### Return Value ***none*** ### Example ```javascript //풍선도움말을 감춤 sheet.hideTip(); ```",
              "see": [
                {
                  "label": "showTip method",
                  "url": "./show-tip"
                },
                {
                  "label": "onShowTip method",
                  "url": "/docs/events/on-show-tip"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/hide-tip.html"
          },
          {
            "cid": 674,
            "sid": "import-data",
            "name": "import-data",
            "label": "importData",
            "data": {
              "body": "> 엑셀 파일의 내용을 시트 위로 `import` 합니다. > 해당 함수를 사용하시려면 `jszip` 라이브러리가 반드시 필요합니다. > [loadExcel](/docs/funcs/excel/load-excel)과 동일한 이벤트를 사용 할 수 있습니다. > [loadExcel](/docs/funcs/excel/load-excel) 기능 중 (서버에서 처리하는 기능을 제외하고) 제외한 동일한 기능을 제공하고 있습니다. > 해당 함수를 호출시 파일 다이얼로그가 나타나고, 사용자가 엑셀 파일을 선택하면 선택된 파일을 클라이언트 단에서 처리합니다.(서버x) > 지원 하는 파일 형식은 **xlsx, txt, csv** 입니다. ### Syntax ```javascript void importData( param ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |append|`boolean`|<span class='optional'>선택</span>|시트의 기존 데이터를 뒤에 엑셀의 데이터를 추가할지 여부(`default: 0(false)`) 설정을 하지 않으면 기존데이터는 모두 삭제한 후 엑셀의 데이터가 추가됨 `주의` 해당 옵션은 `SearchMode:4,5 (서버페이징)` 모드에서는 사용할 수 없습니다. `0(false)`:기존 데이터 제거 후 엑셀 데이터 추가 (`default`) `1(true)`:기존 데이터에 엑셀 데이터 추가| |fileExt|`string`|<span class='optional'>선택</span>|파일 선택창에서 허용하는 파일 확장자를 구분자(\"\\|\")로 연결하여 설정합니다. (`default: \"xlsx\"`)| |mode|`string`|<span class='optional'>선택</span>| `\"HeaderMatch\"`, `\"NoHeader\"`, `\"HeaderSkip\"` 중에 하나의 문자열을 입력합니다. 각 문자의 의미는 다음과 같습니다. <ul><li>`\"HeaderMatch\"` : 시트의 헤더행의 타이틀과 엑셀의 첫번째 행부터 타이틀을 비교해서 읽습니다. StartRow속성이 지정된 경우 StartRow에서 지정한 행부터 해더행의 개수만큼의 행을 읽어 비교합니다.</li><li>`\"NoHeader\"` : 헤더행이 없다고 가정하고 첫행부터 순서대로 각 열에 대입합니다.</li><li>`\"HeaderSkip\"` : 헤더행은 있지만 열비교를 하지 않고 좌측부터 순서대로 읽습니다. 시트의 헤더행의 2개라면 엑셀의 위에서 두개행을 제외하고 그 아래부터 읽는다고 생각하시면 됩니다.</li></ul>(`default: \"HeaderMatch\"`)| | next | `object` | <span dir=\"\">선택</span> | [데이터 로우 객체](/docs/appx/row-object) 지정한 행 위에부터 데이터 `append`. (`append:1(true)`일때만 사용 가능) | |startRow|`number`|<span class='optional'>선택</span>|엑셀에서 시트가 몇번째 행에서 시작하는지 설정합니다. 설정하지 않으면 엑셀의 첫번째 행부터 (1부터시작) 읽어 들임 (`default: 1`) (`xlsx에서만 지원`)| |startCol|`number`|<span class='optional'>선택</span>|엑셀에서 시트가 몇번째 열에서 시작하는지 설정합니다. 설정하지 않으면 엑셀의 첫번째 열부터 (1부터시작) 읽어 들임 `mode: HeaderMatch`의 경우 (7,12)에 있는 시트를 찾을 때, `startRow: 7` 만 설정해 줘도 그 Row에 헤더길이만큼 텍스트를 보기 때문에 `startCol`을 설정할 필요가 없다. 만약, `startCol`을 사용할 경우, 엑셀에 있는 시트에 첫번째 컬럼부터 `startCol`이 시작하게 된다 (`default: 1`) (`xlsx에서만 지원`)| |workSheetName|`string`|<span class='optional'>선택</span>|읽어들일 엑셀 파일의 워크시트 명을 설정합니다. 일치하는 워크시트 명이 없으면 첫번째 워크시트를 읽습니다.| |workSheetNameStrict|`boolean`|<span class='optional'>선택</span>|workSheetName에 설정한 워크시트가 없는 경우 첫번째 워크시트를 로드하지 않고 -17 에러 코드를 반환합니다. `0(false)`:workSheetName에 설정된 워크시트가 없는 경우 첫번째 워크시트를 로드 (`default`) `1(true)`:workSheetName에 설정된 워크시트가 없는 경우 -17 에러 코드를 반환| |workSheetNo|`number`|<span class='optional'>선택</span>|읽어들일 엑셀 파일의 워크시트 순번을 설정합니다. 설정하지 않으면 첫번째 워크시트를 읽습니다. (`default: 1`)| |columnMapping|`string`|<span class='optional'>선택</span>|엑셀 컬럼 번호를 이용해서 시트의 열 순서에 따라 데이터를 로드하는 옵션입니다. 구분자(\"\\|\")로 연결하여 설정합니다.(1번부터 시작) `mode: HeaderMatch`에서 컬럼매핑을 사용 할 경우 `HeaderMatch`의 기능은 무시되고 `HeaderSkip` 처럼 사용됩니다 (`xlsx에서만 지원`)| |colSeparator|`string`|<span class='optional'>선택</span>|열과 열 사이의 구분자 문자, txt 업로드 일 경우 (`default: \\t(탭문자)`, csv 업로드 일 경우(`default: ,(콤마)`) 업로드되는 파일에 따라 기본 구분자가 변경됩니다. `(txt, csv에서만 지원)`| |encoding|`string`|<span class='optional'>선택</span>|텍스트 파일의 인코딩 형식 지정`(txt, csv에서만 지원)` (`default: \"utf-8\"`)| |endRow|`number`|<span class='optional'>선택</span>|엑셀에서 몇번째 행까지 읽어들일 지 설정합니다. 설정하지 않으면 끝까지 읽어들입니다. 0부터 시작합니다.| |file|`object`|<span class='optional'>선택</span>|file 객체 또는 Blob 객체로 된 엑셀 데이터를 직접 읽어들입니다. (`xlsx에서만 지원`) 해당 인자를 사용하게 되면 파일 다이얼로그가 나타나지 않습니다.| |uploadImage|`boolean`|<span class='optional'>선택</span>| 셀 위에 띄워진 이미지를 업로드할지 여부를 결정합니다. `0(false)`: 셀 위에 띄워진 이미지를 업로드하지 않음 `1(true)`:셀 위에 띄워진 이미지를 업로드함 (`default`) | |skipSEQ|`boolean`|<span class='optional'>선택</span>|mode: `NoHeader`, `HeaderSkip`으로 데이터를 업로드할 때 SEQ 컬럼을 스킵하고 데이터를 업로드합니다. `columnMapping`을 설정한 경우에는 해당 인자가 동작하지 않습니다. (`default: 0`) | ### Return Value ***none*** xlsx에서만 지원 ### Example ```javascript // 워크시트이름이 sheet이고 mode: \"HeaderMatch\" 엑셀에 시트가 3번째 행에 있는 경우 업로드 var param = {startRow:3, mode:\"HeaderMatch\", workSheetName:\"sheet\"}; sheet.importData(param); // mode: \"HeaderSkip\" 엑셀에 시트가 3번째 행과 3번째 열에 있는 경우 업로드 var param = {startRow:3, startCol:3, mode:\"HeaderSkip\"}; sheet.importData(param); // mode: \"NoHeader\", workSheet순서가 4번째인 엑셀에 시트가 7번째 행과 3번째 열에 있는 경우 업로드 var param = {startRow:7, startCol:3, mode:\"NoHeader\", workSheetNo:4}; sheet.importData(param); // 1~5번째 까지 있는 엑셀 컬럼을 시트에 3,4,5,2,1 순서로 업로드 var param = {columnMapping: \"3|4|5|2|1\"} sheet.importData(param); // 파일 확장자를 이용하여 텍스트 업로드 var param = {fileExt:\"csv|txt\"}; sheet.importData(param); ```",
              "see": [
                {
                  "label": "exportData method",
                  "url": "./export-data"
                },
                {
                  "label": "loadExcel method",
                  "url": "/docs/funcs/excel/load-excel"
                },
                {
                  "label": "onSelectFile event",
                  "url": "/docs/events/on-select-file"
                },
                {
                  "label": "onImportFinish event",
                  "url": "/docs/events/on-import-finish"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가||core|8.0.0.20|`endRow` 기능 추가, 파일 형식 내용 추가||core|8.1.0.20|`file` 기능 추가||core|8.1.0.33|`workSheetNameStrict` 기능 추가||core|8.2.0.14|`next` 기능 추가||core|8.3.0.22|`uploadImage` 기능 추가||core|8.3.0.45|`skipSEQ` 기능 추가|"
            },
            "url": "docs/funcs/core/import-data.html"
          },
          {
            "cid": 675,
            "sid": "is-focused",
            "name": "is-focused",
            "label": "isFocused",
            "data": {
              "body": "> 특정 행이나 셀에 포커스가 있는지 확인합니다. ### Syntax ```js boolean isFocused( row, col ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='optional'>선택</span>|열이름| ### Return Value ***boolean*** : 포커스 유무 (0:unfocused, 1:focused) ### Example ```javascript //id가 AR33인 행에 포커스가 있는지 확인한다. var isfo = sheet.isFocused(sheet.getRowById(\"AR33\")); //특정 셀에 포커스가 있는지 확인한다. var isfo = sheet.isFocused(sheet.getRowById(\"AR5\"), \"CA_DSC\" ); ```",
              "see": [
                {
                  "label": "focus method",
                  "url": "./focus"
                },
                {
                  "label": "getCanFocus method",
                  "url": "./get-can-focus"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/is-focused.html"
          },
          {
            "cid": 676,
            "sid": "load-search-data",
            "name": "load-search-data",
            "label": "loadSearchData",
            "data": {
              "body": "> json형식의 데이터를 시트에 로드합니다.\\ > `append` 인자를 설정하지 않으면 기존에 시트의 데이터는 클리어 된 후, 로드 됩니다.\\ > 비동기 형식으로 동작하므로, 데이터 로드 이후에 대한 처리는 [onDataLoad](/docs/events/on-data-load) 이벤트에서 로직을 구성하셔야 합니다. ### Syntax ```javascript void loadSearchData( data, append, callback, sync, next, strictParse, parent, ignoreEvent ); ``` ### Parameters | Name | Type | Required | Description | |------|------|----------|-------------| | data | `object` | <span dir=\"\">필수</span> | json형식의 데이터 | | append | `boolean` | <span dir=\"\">선택</span> | 기존 데이터 하단에 `append` 여부 조회 방식의 차이로 인해 `append:1(true)`사용 시 [SearchMode](/docs/props/cfg/search-mode):2인 경우 [onRenderFinish](/docs/events/on-render-finish)이벤트가 발생하지 않습니다.. `0(false)`:기존 데이터 제거 후 조회 데이터 로드 (`default`) `1(true)`:기존 데이터에 조회 데이터 추가| | callback | `function` | <span dir=\"\">선택</span> | 조회 후 호출할 콜백 함수 ex) `sheet`: 시트 객체, `data`: 조회 데이터, `result(0)`: 조회 성공 | | sync | `boolean` | <span dir=\"\">선택</span> | 동기 조회 여부. `0(false)`: 비동기 방식 (`default`) `1(true)`: 동기 방식 | | next | `object` | <span dir=\"\">선택</span> | [데이터 로우 객체](/docs/appx/row-object) 지정한 행 위에부터 데이터 `append`. (`append:1(true)`일때만 사용 가능) | | strictParse | `boolean` | <span dir=\"\">선택</span> | json 파서 선택 일반적으로 유연한 파싱으로 구동되고 true 설정시에 브라우져의 JSON.parse()를 통해 파싱 `0(false)`:유연한 파서 사용 (`default`) `1(true)`: 브라우저에서 제공하는 JSON.parse() 내장함수 사용| | parent | `object` | <span dir=\"\">선택</span> | [데이터 로우 객체](/docs/appx/row-object) (동적 트리 조회 사용시 부모에 해당하는 행 지정) | | ignoreEvent | `boolean` | 선택 | 조회 관련 이벤트를 발생시키지 않도록 하는 인자 `0(false)`:조회 관련 이벤트를 발생 시킴 (`default`) `1(true)`:조회 관련 이벤트를 발생 시키지 않음 | 유연한 파싱이란 일반적인 JSON.parse()를 통해 파싱하는 경우 허용하지 않는 몇가지를 허용합니다. 1. 여분의 콤마 허용 2. 프로퍼티 이름의 쌍따옴표가 없어도 됨. 참고 - [MDN:bad parsing](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Errors/JSON_bad_parse) - JSON.parse()가 유연한 파싱보다 성능이 우수(약 5배)하지만 데이터 로딩과정에서 파싱이 차지하는 시간이 크지 않아 5만건 이내에서는 사용자가 느끼기 어려운 수준임. ### Return Value **_none_** ### Example ```javascript var DATA = {\"data\":[ {\"EMP_ID\":\"08212\",\"EMP_NM\":\"홍길동\",\"DEPT_CD\":\"031\"}, {\"EMP_ID\":\"07417\",\"EMP_NM\":\"허균\",\"DEPT_CD\":\"120\"}, {\"EMP_ID\":\"02600\",\"EMP_NM\":\"홍판서\",\"DEPT_CD\":\"405\"}, ]}; //기존 데이터 밑에 데이터를 append한다.. sheet.loadSearchData( DATA, 1 ); //지정한 행 위에부터 데이터가 append 된다.. sheet.loadSearchData({ data: DATA.data, append: true, next: sheet.getRowByIndex(3) }) ```",
              "see": [
                {
                  "label": "StrictParse cfg",
                  "url": "/docs/props/cfg/strict-parse"
                },
                {
                  "label": "dataStructure appendix",
                  "url": "/docs/appx/data-structure"
                },
                {
                  "label": "doSearch method",
                  "url": "./do-search"
                },
                {
                  "label": "doSearchPaging method",
                  "url": "./do-search-paging"
                },
                {
                  "label": "onReceiveData event",
                  "url": "/docs/events/on-receive-data"
                },
                {
                  "label": "onDataLoad event",
                  "url": "/docs/events/on-data-load"
                }
              ],
              "since": "| product | version | desc ||---------|---------|------|| core | 8.0.0.0 | 기능 추가 || core | 8.0.0.6 | `sync` 인자 추가 || core | 8.0.0.7 | `next` 인자 추가 || core | 8.0.0.7 | `strictParse` 인자 추가 || core | 8.0.0.25 | `parent` 인자 추가 |"
            },
            "url": "docs/funcs/core/load-search-data.html"
          },
          {
            "cid": 677,
            "sid": "make-pivot-table",
            "name": "make-pivot-table",
            "label": "makePivotTable",
            "data": {
              "body": "> 대상 시트의 모든 데이터를 기준으로 피벗 테이블을 생성합니다. > 만약 피벗 생성 시점에 대상 시트가 필터링 되어 있는 경우 필터가 취소된 후 피벗이 생성됩니다. > 생성된 피벗 테이블의 시트는 원본시트의 `\"pivotSheet_\" + id`로 생성됩니다. 예를 들어 원본 시트의 id가 `\"sheet\"`인 경우 피벗 시트의 id는 `\"pivotSheet_sheet\"`가 됩니다. > 피벗 테이블의 시트에서는 `DataMerge` 기능을 지원하지 않습니다. > **<mark>주의</mark> : `makeSubTotal`로 행 5000개, 열 200개 이상의 피벗 테이블을 만들 경우 브라우저 성능을 보장할 수 없습니다. 해당 개수 미만으로 생성되게 `makeSubTotal` 기준 행,열을 설정하도록 권장합니다.** ### Syntax ```javascript object makePivotTable(criterias, init, format, type, callback, hideTotal); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |criterias|`object`|<span class='optional'>선택</span>|피벗테이블 기준 대상 컬럼명들 설정 row, col에는 일반 컬럼 data에는 숫자형 컬럼(`int, float`) 사용| |init|`object`|<span class='required'>필수</span>|피벗테이블의 열, 행, 계산 대상 설정 row, col에는 일반 컬럼 data에는 숫자형 컬럼(`int, float`) 사용| |format|`string`|<span class='optional'>선택</span>|피벗 테이블에서 보여질 포맷| |type|`string`|<span class='optional'>선택</span>|계산 대상 컬럼별 계산 방법 (`default: \"Sum\"`) `\"Sum\"`, `\"Count\"`, `\"Max\"`, `\"Min\"` 사용 가능 컬럼별 계산 방법을 data 컬럼 개수에 맞게 `,(쉼표)` 로 연결하여 여러 개를 설정할 수 있습니다.| |callback|`function`|<span class='optional'>선택</span>|피벗 시트 생성 후 호출할 콜백 함수. 피벗 시트 생성 후 [onRenderFirstFinish](/docs/events/on-render-first-finish) 시점에 발생합니다.| |hideTotal|`object`|<span class='optional'>선택</span>|피벗 테이블에서 총합계 표시 여부| ### criterias |Name|Type|Required|Description| |----------|-----|---|----| |row|`string`|<span class='required'>필수</span>|행 레이블 필드 기준 컬럼 명을 구분자(\",\")로 연결한 문자열| |col|`string`|<span class='required'>필수</span>|열 레이블 필드 기준 컬럼 명을 구분자(\",\")로 연결한 문자열| |data|`string`|<span class='required'>필수</span>|계산 대상 기준 컬럼 명을 구분자(\",\")로 연결한 문자열| ### init |Name|Type|Required|Description| |----------|-----|---|----| |row|`string`|<span class='required'>필수</span>|행 레이블 필드에 설정할 컬럼 명을 구분자(\",\")로 연결한 문자열| |col|`string`|<span class='required'>필수</span>|열 레이블 필드에 설정할 컬럼 명을 구분자(\",\")로 연결한 문자열| |data|`string`|<span class='required'>필수</span>|계산 대상 컬럼의 컬럼 명을 구분자(\",\")로 연결한 문자열| ### hideTotal |Name|Type|Required|Description| |----------|-----|---|----| |hideTotalRow|`boolean`|<span class='optional'>선택</span>|행 총합계 숨김여부 (`default: false`)| |hideTotalRow|`boolean`|<span class='optional'>선택</span>|열 총합계 숨김여부 (`default: false`)| ### Return Value ***object*** : 생성된 피벗 시트 객체 ### Example ```javascript // 피벗 테이블 생성 var criterias = { row: 'sDept,sTeam,sPosition,sName,sGender,sAgeRange,sAddr', col: 'sDept,sTeam,sPosition,sName,sGender,sAgeRange,sAddr', data: 'sAge,sPeriod,sSalary,sBonus' } var init = { row: 'sDept', col: 'sPosition,sTeam', data: 'sSalary,sAge' } var callback = function (evt) { // callback function ... } var hideTotal = { hideTotalRow: false, hideTotalCol: true } // 초기화 data 컬럼이 sSalary,sAge 두 개이므로 각각 Sum,Avg 타입을 적용하며, 열 총합계를 감춥니다. sheet.makePivotTable(criterias, init, '#,### 만원', 'Sum,Avg', callback, hideTotalCol); ```",
              "see": [
                {
                  "label": "showPivotDialog method",
                  "url": "/docs/funcs/dialog/show-pivot-dialog"
                },
                {
                  "label": "switchPivotSheet method",
                  "url": "./switch-pivot-sheet"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.17|`callback` 기능 추가||core|8.1.0.46|`type` 옵션 `Max`, `Min` 추가||core|8.1.0.94|`criterias` 인자 선택으로 변경||core|8.2.0.15|`pivotType` 관련 기능 개선||core|8.3.0.9|`hideTotal` 인자 기능 추가|"
            },
            "url": "docs/funcs/core/make-pivot-table.html"
          },
          {
            "cid": 678,
            "sid": "make-sub-total",
            "name": "make-sub-total",
            "label": "makeSubTotal",
            "data": {
              "body": "> 기준 열의 데이터에 따른 소계/누계 행을 시트에 추가합니다. > 설정된 기준 열의 왼쪽 열에 소계에 대한 설명(\"소계 : 값\")이 보이며, 첫 번째 열의 경우 해당 열 내에 설명이 보이게됩니다. > > 일반적으로 소계 시 머지`usermerge:0(default)`는 `stdCol` 열 기준으로 머지가 이루어지며 여러 개로 지정한다면 각각의 `stdCol` 기준으로 머지가 이루어집니다. > `stdCol`에 지정된 열에 대해 이전 혹은 다음 행의 값이 같은 경우 행들을 머지하는 `DataMerge:1`과 같이 동작합니다. > **<mark>주의</mark> : `SearchMode`:`0, 2`만 지원** > **<mark>주의</mark> : 조회시 소계를 사용하는 경우, [onDataLoad (event)](/docs/events/on-Data-Load) 이벤트에서 사용할 수 있습니다.** > **<mark>주의</mark> : `usermerge:0(default)`를 사용하면 [DataMerge (cfg)](/docs/props/cfg/data-merge), [PrevColumnMerge (cfg)](/docs/props/cfg/prev-column-merge) 설정이 무시됩니다.** > **<mark>주의</mark> : `captionCol` 사용 방법에 따라 머지에 영향을 받을 수 있습니다.** > **<mark>주의</mark> : `addRow` 의 경우, 소계 그룹 안에서 사용할 수 없습니다. 소계가 된 영역이 아닌, 밖의 영역(맨위, 맨아래)에만 행추가가 가능합니다.** > **<mark>주의</mark> : `excludeSubTotalRowCount` 의 경우, 서버페이지 기능 사용 시에는 동작되지 않습니다.** ### [단일소계] ![단일소계](/assets/imgs/makeSubTotal1.png) [`stdCol`: 정책사업(정책사업 컬럼에 `CaptionCol` 설정), 단위사업(`CaptionCol` 설정 안함)] ![단일소계](/assets/imgs/makeSubTotal2.png) [`stdCol`: 정책사업(정책사업 컬럼에 `CaptionCol` 설정), 단위사업(정책사업 컬럼에 `CaptionCol` 설정)] ![단일소계](/assets/imgs/makeSubTotal3.png) [`stdCol`: 정책사업, `CaptionCol({col: '정책사업', val: '%s: %col'}, {col: '단위사업', val: '%capCol'}, {col: '세부사업', val: '%cnt'})`] ![captionCol](/assets/imgs/makeSubTotal_capCol.png) ### Syntax ```javascript void makeSubTotal( subTotalRows, usermerge, excludeSubTotalRowCount ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |subTotalRows|`array[object]`|<span class='required'>필수</span>|소계 행에 대한 설정입니다. `object` **배열** 이며 하나의 배열에 들어갈 `subTotalRows`의 프로퍼티들은 아래 `subTotalRows` 표와 같습니다.| |usermerge|`boolean`|<span class='optional'>선택</span>|사용자가 설정한 `DataMerge`, `PrevColumnMerge`옵션을 사용하여 머지할지 여부 **`usermerge:1` 설정 후 해당 함수 호출 시 사용자가 설정한 `DataMerge`, `PrevColumnMerge`에 따라 머지가 이루어집니다.** `0(false)`:병합 동작 실행 안함 (`default`) `1(true)`:사용자가 설정한 병합 조건에 따라 병합 동작 실행| |excludeSubTotalRowCount|`boolean`|<span class='optional'>선택</span>|소계, 누계 행을 `SEQ` 컬럼과 `InfoRow ` 행의 개수 카운트에서 제외 여부 `0(false)`:소계, 누계 행을 `SEQ` 컬럼과 `InfoRow ` 행의 개수 카운트에 포함 (`default`) `1(true)`:소계, 누계 행을 `SEQ` 컬럼과 `InfoRow ` 행의 개수 카운트에서 제외| ### subTotalRows |Name|Type|Required|Description| |----------|-----|---|----| |stdCol|`string`|<span class='required'>필수</span>|기준 열| |sumCols|`string`|<span class='optional'>선택</span>|소계가 계산(합)되어야 할 열이름들을 '\\|'로 연결한 문자열| |countCols|`string`|<span class='optional'>선택</span>|소계 행에 데이터 행의 수로 계산되어야 할 열이름들을 '\\|'로 연결한 문자열 (Cfg)`CalcMergeMode` 설정시에는 이 값을 설정해야 한다. | |avgCols|`string`|<span class='optional'>선택</span>|소계가 계산(평균값)되어야 할 열이름들을 '\\|'로 연결한 문자열| |color|`string`|<span class='optional'>선택</span>|소계 행의 배경색| |showCumulate|`boolean`|<span class='optional'>선택</span>|소계에 대한 누계 행 표시 여부 `0(false)`:소계에 대한 누계 행 표시 안함(`default`) `1(true)`:소계에 대한 누계 행 표시| |cumulateColor|`string`|<span class='optional'>선택</span>|누계 행의 배경색| |sort|`string`|<span class='optional'>선택</span>|기준 열의 정렬 처리 방법 `\"\"`:사용안함 (`default`) `\"asc\"`:오름차순 정렬 `\"desc\"`:내림차순정렬| |position|`string`|<span class='optional'>선택</span>|소계행 생성 위치 `\"bottom\"`:그룹 하단 표시 (`default`) `\"top\"`:그룹 상단 표시 `\"bottomAll\"`:최하단 표시 `\"topAll\"`:최상단 표시| |captionCol|`array[object]`|<span class='optional'>선택</span>|캡션에 대한 정보 설정. 캡션이 들어갈 열이름과 캡션 값으로 이루어진 객체의 배열 `\"col\"`:캡션이 설정될 열이름(`sumCols, countCols, avgCols` 와 같이 계산된 값이 들어가는 컬럼에는 적용되지 않음.) `\"val\"`:소계 캡션에 들어갈 값, 함수 형태의 포뮬러 연산 제공(숫자 데이터의 천단위 구분자의 경우, 붙여서 리턴.) `ex) [{col: '정책사업', val: '%s: %col'}, {col: '단위사업', val: function(fr) { return fr.Row['단위사업'] + '%' }}]` `\"cumVal\"`:누계 캡션에 들어갈 값 `\"span\"`: 소계행에서 `captionCol`의 `col` 기준으로 열머지 할 값을 결정 **captionCol 에서 사용 가능한 예약어** `\"%s\"`: '소계(누계)'를 의미하는 예약어 `\"%col\"`:소계 기준값 출력 `\"%cnt\"`:소계(누계)건수를 표시 `\"%capCol\"`:**col**에 설정된 컬럼의 가장 마지막 행의 값을 소계행에 표시 (`default: [ { col : “기준 열”, val:”%s: %col” } ]`)| |mode|`number`|<span class='optional'>선택</span>|소계행 표시 방법을 설정 `0`:모든 대상 그룹에 대한 소계행 표시 (`default`) `1`:대상 그룹이 2개 이상인 그룹에 대해서만 소계행 표시 `2`:대상 그룹이 1개 이상인 그룹에 대해서만 소계행 표시 (소계행이 감춰질 뿐 생성되지 않는 것은 아님.)| |hidden|`boolean`|<span class='optional'>선택</span>|`Visible:0(false)` 인 행에 대한 소계 계산 포함 여부 `0(false)`:`Visible:0(false)` 인 행에 대한 소계 계산 대상 제외 (`default: 0`) `1(true)`:`Visible:0(false)` 인 행에 대한 소계 계산 대상 포함| ### Return Value ***none*** ### Example ```javascript Events: { // 조회 후, 머지를 사용하는 경우 소계행 설정 (onDataLoad 를 사용하세요.) onDataLoad: function (evt) { evt.sheet.makeSubTotal([ { stdCol: \"sPolicy\", avgCols: \"A|D\", countCols: \"E\", showCumulate: 1, sort: \"desc\", captionCol: [ { col: 'sPolicy', val: '%s: %col' } ] }, { stdCol: \"sUnit\", sumCols: \"B|C\", showCumulate: 1, }, . . . ]); } } sheet.makeSubTotal([ { stdCol: 'sPolicy', sumCols: 'A|B|C|D', position: 'bottom', captionCol: [ { // E셀에 포뮬러 연산 동작 col: 'E', val: function (fr) { var val = (fr.Row[\"A\"] + fr.Row[\"B\"]) * 10; return \"E: \" + val + \"퍼센트!\"; // \"E: 80퍼센트!\" } }, { col: 'F', val: function (fr) { return '1,000,000' // 숫자 데이터의 경우, 구분자를 붙여서 리턴해야함. } }, ] } ]); //소계, 누계 행을 `SEQ`에서 제외 sheet.makeSubTotal({ subTotalRows:[ { stdCol: 'sPolicy', sumCols: 'B|C|D', avgCols: 'A', position: 'bottom', captionCol: [ { col: 'sPolicy', val: '%s: %col', cumVal: '%s: %col', span: 3 }, { col: 'E', val: ' ', cumVal: ' ', span: 2 } ], } ], excludeSubTotalRowCount:1 }); ``` ### 소계셀에 Format 적용 (`8.0.0.25` 버전부터 동작) - sumCols, avgCols, countCols에 설정한 컬럼의 Format만 변경 가능 ```js Def: { SubSum: { // Def.SubSum을 이용하면 소계행에만 Def 속성을 적용할 수 있다 AFormat: '합계 : #,##0.##', // 소계행 A셀에 합계 Text와 실수형 포맷 적용 BFormat: '#,##0' // 소계행 B셀에 정수형 포맷 적용 } } sheet.makeSubTotal([ { stdCol: 'sPolicy', sumCols: 'B|C|D', avgCols: 'A', position: 'bottom', captionCol: [ { col: 'sPolicy', val: '%s: %col', cumVal: '%s: %col', span: 3 }, { col: 'E', val: ' ', cumVal: ' ', span: 2 } ], } ]); // sheet.makeSubTotal( { subTotalRows:[ { stdCol: 'sPolicy', sumCols: 'B|C|D', avgCols: 'A', position: 'bottom', captionCol: [ { col: 'sPolicy', val: '%s: %col', cumVal: '%s: %col', span: 3 }, { col: 'E', val: ' ', cumVal: ' ', span: 2 } ], } ], excludeSubTotalRowCount:1 } ); ```",
              "see": [
                {
                  "label": "removeSubTotal method",
                  "url": "./remove-sub-total"
                },
                {
                  "label": "getSubTotalRows method",
                  "url": "./get-sub-total-rows"
                },
                {
                  "label": "NoCalculate row",
                  "url": "/docs/props/row/no-calculate"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.7|`mode` 속성 기능 추가||core|8.0.0.11|`usermerge` 기능 추가||core|8.0.0.11|`%capCol` 예약어 추가||core|8.0.0.18|메뉴얼 내용 수정: 해당함수는 조회된 데이터가 생성된 다음에 호출되어야 합니다. 따라서 [onSearchFinish (event)](/docs/events/on-search-finish) 이벤트나 조회된 이후에 버튼 등, 클릭 이벤트에서 호출하셔야 합니다. => 조회시 소계를 사용하는 경우, [onDataLoad (event)](/docs/events/on-Data-Load) 이벤트에서 사용할 수 있습니다.||core|8.0.0.22|`hideen` 속성 추가||core|8.1.0.78|`excludeSubTotalRowCount` 기능 추가|"
            },
            "url": "docs/funcs/core/make-sub-total.html"
          },
          {
            "cid": 679,
            "sid": "move-col",
            "name": "move-col",
            "label": "moveCol",
            "data": {
              "body": "> 지정한 열의 위치를 이동합니다. > `tocol`을 공백(\"\")으로 설정하는 경우 `right` 인자에 따라 section의 맨 앞이나 맨 뒤로 이동됩니다. ### Syntax ```javascript boolean moveCol( col, tocol, right, norender ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |col|`string`|<span class='required'>필수</span>|옮길 열이름| |tocol|`string`|<span class='required'>필수</span>|옮겨질 열이름| |right|`boolean`|<span class='optional'>선택</span>|`toCol`에서 지정한 열에 우측으로 이동할지 여부 `0(false)`:`toCol`에서 지정한 열에 좌측으로 이동 (`default`) `1(true)`:`toCol`에서 지정한 열에 우측으로 이동| |norender|`boolean`|<span class='optional'>선택</span><mark>(사용주의)</mark>|즉시 화면에 반영할 것인지 여부 해당 기능을 사용한 뒤, 다른 동작을 실행 할 경우 `rerender()`를 반드시 먼저 실행 해야 합니다. `0(false)`:즉시 반영 (`default`) `1(true)`:반영 안함 | ### Return Value ***boolean*** : 정상적으로 옮겨졌는지 여부(인자가 잘못되어 이동에 실패한 경우 `undefined` 리턴) ### Example ```javascript //CUSTOMER_NAME 열을 AMOUNT12 열의 오른쪽으로 이동합니다. sheet.moveCol(\"CUSTOMER_NAME\", \"AMOUNT12\", 1, 0); ```",
              "see": [
                {
                  "label": "addCol method",
                  "url": "./add-col"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/move-col.html"
          },
          {
            "cid": 680,
            "sid": "move-row",
            "name": "move-row",
            "label": "moveRow",
            "data": {
              "body": "> 지정한 행을 이동합니다. > `row`로 지정한 행을 `next`로 지정한 행의 위로 이동시킵니다. > 트리의 경우, `row`로 지정한 행을 `parent`에 지정된 행의 하위 노드로 이동시키며, `next`를 통해 하위 노드 내에서 들어갈 위치를 지정할 수 있습니다. > 포커스가 된 행을 `moveRow`시 움직인 위치로 `focus` 동작이 일어납니다. 포커스 동작이 일어나지 않게 할려면, `focus: 0` 을 주셔서 사용하면 됩니다. ### Syntax ```javascript boolean moveRow( row, next, render, parent, spannedMove, focus ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|이동할 [데이터 로우 객체](/docs/appx/row-object)| |next|`object`|<span class='required'>필수</span>|복사할 위치에 있는 [데이터 로우 객체](/docs/appx/row-object) 지정행 위로 이동됩니다.(`next`가 없을시 데이터 마지막 행으로 이동)| |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| |parent|`object`|<span class='optional'>선택</span>|트리기능 사용시 이동할 부모 [데이터 로우 객체](/docs/appx/row-object)| |spannedMove|`boolean`|<span class='optional'>선택</span>|인자를 `1(true)`로 주는 경우 머지의 첫번째 행을 이동하면 머지된 행이 모두 이동 여부 `0(false)`:`row`에서 지정한 행만 이동 (`default`) `1(true)`:`row`에서 지정한 행이 병합된 첫번째 행인 경우, 해당 행에 병합된 행 모두 이동| |focus|`boolean`|<span class='optional'>선택</span>|행 이동한 행으로 포커스 이동 여부 `0(false)`:이동한 행으로 포커스 이동 안함 (`default`) `1(true)`:이동한 행으로 포커스 이동| ### Return Value ***boolean*** : 이동이 성공시 `1(true)`, 실패한 경우(이동할 위치가 원본의 위치와 같은 경우등) `0(false)`를 리턴 ### Example ```javascript //AR5 행을 시트 최 상단으로 이동시킵니다. sheet.moveRow({row:sheet.getRowById(\"AR5\"), next:sheet.getFirstRow()}); //AR8 행을 시트의 현재 포커스된 행의 자식 노드 중 마지막 위치로 이동시킵니다. var target = sheet.getRowById(\"AR8\"); sheet.moveRow({row:target, parent:sheet.getFocusedRow()}); ```",
              "see": [
                {
                  "label": "copyRow method",
                  "url": "./copy-row"
                },
                {
                  "label": "copyRows method",
                  "url": "./copy-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.8|`focus` 인자 추가 및 `moveRow`시 `focus`된 행으로 포커스동작이 발생함.|"
            },
            "url": "docs/funcs/core/move-row.html"
          },
          {
            "cid": 681,
            "sid": "refresh-cell",
            "name": "refresh-cell",
            "label": "refreshCell",
            "data": {
              "body": "> 특정 셀의 변경된 내용을 화면에 반영합니다. > `render` 함수와 달리 화면의 깜빡임이 없습니다. > 행 전체의 변경 내용을 반영할 때는 [refreshRow](./refresh-row)함수를 사용하는게 좋습니다. ### Syntax ```javascript void refreshCell( row, col ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| ### Return Value ***none*** ### Example ```javascript //특정 셀에 변경된 내용(값,속성)을 화면에 반영한다. sheet.refreshCell( sheet.getFirstVisibleRow(), \"EMT_DESC\" ); ```",
              "see": [
                {
                  "label": "refreshRow method",
                  "url": "./refresh-row"
                },
                {
                  "label": "renderBody method",
                  "url": "./render-body"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/refresh-cell.html"
          },
          {
            "cid": 682,
            "sid": "refresh-page",
            "name": "refresh-page",
            "label": "refreshPage",
            "data": {
              "body": "> 지정한 페이지를 렌더링 합니다. > [setAttribute](./set-attribute)함수나 데이터에 대해 직접 접근하여 수정한 내용을 한꺼번에 화면에 반영할 때 사용됩니다. ### Syntax ```javascript void refreshPage( page, always ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |page|`object`|<span class='required'>필수</span>|[페이지 객체](/docs/appx/page-object)| |always|`boolean`|<span class='optional'>선택</span>|보여지지 않는 페이지에 대한 렌더링 여부 `0(false)`:보여지지 않는 페이지에 대해 렌더링 하지 않음 (`default`) `1(true)`:보여지지 않는 페이지에 대해 렌더링 실행| ### Return Value ***none*** ### Example ```javascript var fr = sheet.getFocusedRow(); //선택한 행의 AMOUNT01열의 색상을 붉은색으로 변경한다. fr[\"AMOUNT01Color\"] = \"#FF0000\" var nr = sheet.getNextRow(fr); //선택한 행의 아래 행에 AMOUNT05열의 글자색을 파란색으로 변경한다. nr[\"AMOUNT05FontColor\"] = \"#0000FF\"; //해당 페이지에서 수정된 내용을 화면에 반영한다. sheet.refreshPage( {page:sheet.getFocusedPage()} ); ```",
              "see": [
                {
                  "label": "setAttribute method",
                  "url": "./set-attribute"
                },
                {
                  "label": "rerender method",
                  "url": "./rerender"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/refresh-page.html"
          },
          {
            "cid": 683,
            "sid": "refresh-row",
            "name": "refresh-row",
            "label": "refreshRow",
            "data": {
              "body": "> 특정 행의 변경된 내용을 화면에 반영합니다. > 반영이 이루어질 때 화면이 깜빡이지 않습니다. ### Syntax ```javascript void refreshRow( row ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| ### Return Value ***none*** ### Example ```javascript //특정 행에 변경된 내용(값,속성)을 화면에 반영한다. sheet.refreshRow( row ); ```",
              "see": [
                {
                  "label": "refreshCell method",
                  "url": "./refresh-cell"
                },
                {
                  "label": "rerender method",
                  "url": "./rerender"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/refresh-row.html"
          },
          {
            "cid": 684,
            "sid": "reload-data",
            "name": "reload-data",
            "label": "reloadData",
            "data": {
              "body": "> 시트의 데이터를 처음 생성 시점으로 되돌립니다. > 다시 말해 [IBSheet.create()](/docs/static/create)함수를 통해 로드된 데이터로 되돌립니다. > 생성 후 열에 부여한 속성(색상이나 편집가능 여부 등)은 유지되나, 행이나 셀에 부여한 속성은 초기화 됩니다. > 이 함수는 `Head, Foot, Solid` 영역에는 영향을 주지 않습니다. ### Syntax ```javascript void reloadData( func ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |func |`function`|<span class='optional'>선택</span>|리로드 완료 후 콜백 정의| ### Return Value ***none*** ### Example ```javascript if(confirm(\"작업한 내용을 취소하고 처음 조회된 데이터로 되돌리시겠습니까?\")){ sheet.reloadData( function(){ alert(\"데이터가 초기화 되었습니다.\"); } ); } ```",
              "see": [
                {
                  "label": "reload method",
                  "url": "./reload"
                },
                {
                  "label": "create static",
                  "url": "/docs/static/create"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/reload-data.html"
          },
          {
            "cid": 685,
            "sid": "reload",
            "name": "reload",
            "label": "reload",
            "data": {
              "body": "> 시트를 처음 생성했던 상태로 새롭게 생성합니다. > 여기서 처음 상태란 [IBSheet.create()](/docs/static/create)를 통해 생성되는 시점으로, 이후에 수정거나 조회된 내용은 반영되지 않습니다. > **<mark>주의</mark> : 시트를 초기 상태로 돌리는 동작이 아닌, 초기 상태의 시트를 재생성하는 동작입니다.** ### Syntax ```javascript void reload( callback ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |callback|`function`|<span class='optional'>선택</span>|`reload` 후, 호출할 콜백 함수 (`onRenderFirstFinish` 와 동일 시점)| ### Return Value ***none*** ### Example ```javascript // 시트를 처음 생성 상태로 다시 생성합니다. sheet.reload(); ``` ```javascript // 리로드 후, 첫 렌더링 발생 시점 sheet.reload(function (r) { r.sheet.disable(1); }) ```",
              "see": [
                {
                  "label": "reloadData method",
                  "url": "./reload-data"
                },
                {
                  "label": "dispose method",
                  "url": "./dispose"
                },
                {
                  "label": "create static",
                  "url": "/docs/static/create"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.26|`callback` 기능 추가|"
            },
            "url": "docs/funcs/core/reload.html"
          },
          {
            "cid": 686,
            "sid": "remove-Col",
            "name": "remove-Col",
            "label": "removeCol",
            "data": {
              "body": "> 지정한 열의 데이터와 영역을 삭제합니다. > 여러 컬럼을 `remove` 할 시 `render` 인자를 `false` 로 하여 작업 후에는 `rerender` 를 무조건 호출하셔야 합니다. ### Syntax ```javascript void removeCol( col, render ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |col|`string`|<span class='required'>필수</span>|삭제할 열 이름| |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***none*** ### Example ```javascript // sName 열을 삭제한다. sheet.removeCol(\"sName\"); // render 인자 false for (var i = 0; i < 50; i++) { sheet.removeCol( \"EXT_SUBSUM\" + i, false ); } sheet.rerender(); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.17|`render` 인자 추가|"
            },
            "url": "docs/funcs/core/remove-Col.html"
          },
          {
            "cid": 687,
            "sid": "remove-all",
            "name": "remove-all",
            "label": "removeAll",
            "data": {
              "body": "> 시트의 전체 데이터를 제거합니다. ### Syntax ```javascript void removeAll(); ``` ### Return Value ***none*** ### Example ```javascript //전체 데이터 제거 sheet.removeAll(); ```",
              "see": [
                {
                  "label": "deleteRow method",
                  "url": "./delete-row"
                },
                {
                  "label": "deleteRows method",
                  "url": "./delete-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/remove-all.html"
          },
          {
            "cid": 688,
            "sid": "remove-memo",
            "name": "remove-memo",
            "label": "removeMemo",
            "data": {
              "body": "> 특정 헤더 셀에 저장된 메모를 삭제합니다. > [메모 기능](/docs/props/cfg/memo-id)을 통하여 설정된 메모를 삭제합니다. ### Syntax ```javascript boolean removeMemo( row , col ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col|`string`|<span class='required'>필수</span>|열이름 ### Return Value ***boolean*** : 메모 삭제 성공여부 (메모가 정상적으로 삭제되었으면 true, 그렇지 않을 경우 false 리턴) ### Example ```javascript // 특정 헤더 셀에 저장된 메모를 삭제한다. sheet.removeMemo(sheet.getHeaderRows()[0], \"sCorp\"); ```",
              "see": [
                {
                  "label": "MemoId cfg",
                  "url": "/docs/props/cfg/memo-id"
                },
                {
                  "label": "showMemoDialog method",
                  "url": "./show-memo-dialog"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.19|기능 추가|"
            },
            "url": "docs/funcs/core/remove-memo.html"
          },
          {
            "cid": 689,
            "sid": "remove-page",
            "name": "remove-page",
            "label": "removePage",
            "data": {
              "body": "> 특정 페이지를 삭제합니다. > 현재 포커스가 위치한 페이지는 삭제하실 수 없습니다. ### Syntax ```javascript boolean removePage( page ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |page|`object`|<span class='required'>필수</span>|페이지 데이터 객체 ### Return Value ***boolean*** : 페이지 삭제 성공/실패 여부 ### Example ```javascript //마지막 페이지를 얻음 var page = sheet.getPageByRow( sheet.getLastRow() ); //마지막 페이지를 삭제 sheet.removePage(page); ```",
              "see": [
                {
                  "label": "goToPage method",
                  "url": "./go-to-page"
                },
                {
                  "label": "goToNextPage method",
                  "url": "./go-to-next-page"
                },
                {
                  "label": "goToPrevPage method",
                  "url": "./go-to-prev-page"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/remove-page.html"
          },
          {
            "cid": 690,
            "sid": "remove-row",
            "name": "remove-row",
            "label": "removeRow",
            "data": {
              "body": "> 지정한 행을 삭제 합니다. > [데이터 로우 객체](/docs/appx/row-object)가 삭제되고, 화면에서도 즉시 반영됩니다. > `removeRow`를 사용해서 여러행을 지우는 경우, `norender`인자를 `1`로 설정 후, 작업을 하신 후, `renderBody()`를 무조건 사용하셔야합니다. 또한 머지된 시트에서 사용시에는 `renderBody()`, `setAutoMerge()`까지 무조건 사용하여야 합니다. 여러행을 지우 실 때는 `removeRows` 를 사용하시면 위의 과정을 할 필요가 없습니다. ### Syntax ```javascript void removeRow( row, nomerge, norender ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |nomerge|`boolean`|<span class='optional'>선택</span>|[DataMerge cfg](/docs/props/cfg/data-merge) 값이 `0` 외의 값일 때, 머지 계산을 바로 할 것인지 여부 `0(false)`:행 삭제 후, 머지 계산 (`default`) `1(true)`:행 삭제 후, 머지 계산 안함| |norender|`boolean`|<span class='optional'>선택</span><mark>(사용주의)</mark>|즉시 화면에 반영할 것인지 여부 해당 기능을 사용한 뒤, 다른 동작을 실행 할 경우 `renderBody()`를 반드시 먼저 실행 해야 합니다. `0(false)`:즉시 반영 (`default`) `1(true)`:반영 안함 | ### Return Value ***none*** ### Example ```javascript // AR5 행을 제거합니다. sheet.removeRow({row:sheet.getRowById(\"AR5\")}); // 체크된 행들을 제거 합니다. var rows = sheet.getRowsByChecked(\"chk\"); for (var i = 0; i < rows.length; i++) { sheet.removeRow(rows[i], null, 1); } sheet.renderBody(); // 무조건 해주어야 다른 동작이 일어남. var rows = sheet.getRowsByChecked(\"chk\"); for (var i = 0; i < rows.length; i++) { sheet.removeRow(rows[i], null, 1); } sheet.renderBody(); // 무조건 해주어야 다른 동작이 일어남. sheet.setAutoMerge(3,3,1); // 머지된 시트의 경우 머지 동작까지 다시 해줘야합니다. ```",
              "see": [
                {
                  "label": "deleteRow method",
                  "url": "./delete-row"
                },
                {
                  "label": "deleteRows method",
                  "url": "./delete-rows"
                },
                {
                  "label": "removeRows method",
                  "url": "./remove-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.7|`norender` 추가|"
            },
            "url": "docs/funcs/core/remove-row.html"
          },
          {
            "cid": 691,
            "sid": "remove-rows",
            "name": "remove-rows",
            "label": "removeRows",
            "data": {
              "body": "> 지정한 여러행들을 삭제 합니다. > 여러 행들을 삭제하고 싶은 경우, `removeRow` 보다는 `removeRows`를 사용하는 것이 좋습니다. ### Syntax ```javascript void removeRow( rows ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |rows|`array[object]`|<span class='required'>필수</span>|삭제하고자 하는 행들| ### Return Value ***none*** ### Example ```javascript // 체크된 행들을 제거 합니다. var rows = sheet.getRowsByChecked(\"chk\"); sheet.removeRows(rows); ```",
              "see": [
                {
                  "label": "removeRow method",
                  "url": "./remove-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
            },
            "url": "docs/funcs/core/remove-rows.html"
          },
          {
            "cid": 692,
            "sid": "remove-sub-total",
            "name": "remove-sub-total",
            "label": "removeSubTotal",
            "data": {
              "body": "> 시트 내 존재하는 모든 소계/누계 행을 제거합니다. ### Syntax ```javascript void removeSubTotal(); ``` ### Return Value ***none*** ### Example ```javascript // 소계/누계 행 제거 sheet.removeSubTotal(); ```",
              "see": [
                {
                  "label": "makeSubTotal method",
                  "url": "./make-sub-total"
                },
                {
                  "label": "getSubTotalRows method",
                  "url": "./get-sub-total-rows"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/remove-sub-total.html"
          },
          {
            "cid": 693,
            "sid": "render-body",
            "name": "render-body",
            "label": "renderBody",
            "data": {
              "body": "> Body영역(데이터부분)를 다시 렌더링 합니다. > [setAttribute](./set-attribute)함수나 데이터에 대해 직접 접근하여 수정한 내용을 한꺼번에 화면에 반영할 때 사용됩니다. > 함수 호출시 시트영역이 한 번 깜빡이게 되고, 지금까지 수정한 내용이 한꺼번에 화면에 표시됩니다. > `Head`나 `Foot` 영역은 렌더링 되지 않으므로 `Filter` 행이나 `FormulaRow`에 값을 수정시에는 반영되지 않을 수 있습니다. > 해당 함수는 상당한 리소스를 사용하게 됨으로 빈번하게 호출하지 말고, 업무가 종료되는 시점에서 한 번만 호출하는게 좋습니다. ### Syntax ```javascript void renderBody(); ``` ### Return Value ***none*** ### Example ```javascript var fr = sheet.getFocusedRow(); //속성 변경시 render를 0으로 설정하여 화면에 반영하지 않는다. sheet.setAttribute({row:fr, attr:\"Color\", val:\"#DDDDDD\", render:0}); sheet.setAttribute({row:fr, col:\"AMOUNT02\", attr:\"FontColor\", val:\"#FF0000\", render:0}); //최종 수정된 내용을 화면에 반영한다. sheet.renderBody(); ```",
              "see": [
                {
                  "label": "setAttribute method",
                  "url": "./set-attribute"
                },
                {
                  "label": "rerender method",
                  "url": "./rerender"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/render-body.html"
          },
          {
            "cid": 694,
            "sid": "rerender",
            "name": "rerender",
            "label": "rerender",
            "data": {
              "body": "> 시트 전체 영역을 다시 렌더링 합니다. > [setAttribute](./set-attribute)함수나 데이터에 대해 직접 접근하여 수정한 내용을 한꺼번에 화면에 반영할 때 사용됩니다. > 함수 호출시 시트영역이 한 번 깜빡이게 되고, 지금까지 수정한 내용이 한꺼번에 화면에 표시됩니다. > 해당 함수는 상당한 리소스를 사용하게 됨으로 빈번하게 호출하지 말고, 업무가 종료되는 시점에서 한 번만 호출하는게 좋습니다. ### Syntax ```javascript void rerender( scroll , sync ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |scroll|`boolean`|<span class='optional'>선택</span>|스크롤 바의 위치를 렌더링 이전과 동일하게 유지 여부 `0(false)`:스크롤 바의 위치 유지 안함 `1(true)`:스크롤 바의 위치를 렌더링 후에도 유지 (`default`)| |sync|`boolean`|<span class='optional'>선택</span>|렌더링 작업을 동기로 처리 여부 `0(false)`:비동기 방식 (`default`) `1(true)`:동기 방식| ### Return Value ***none*** ### Example ```javascript //일부 열을 감춘다. sheet.Cols[\"AMT\"][\"Visible\"] = 0; sheet.Cols[\"EMP_ID\"][\"Visible\"] = 0; sheet.Cols[\"INDATE\"][\"Visible\"] = 0; //최종 수정된 내용을 화면에 반영한다. sheet.rerender(); ```",
              "see": [
                {
                  "label": "renderBody method",
                  "url": "./render-body"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/rerender.html"
          },
          {
            "cid": 695,
            "sid": "revert-cell",
            "name": "revert-cell",
            "label": "revertCell",
            "data": {
              "body": "> 특정 셀의 변경된 내용을 처음 조회된 값으로 변경합니다. ### Syntax ```javascript void revertCell( row, col, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| |render |`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 (`default`) `1(true)`:즉시 반영| ### Return Value ***none*** ### Example ```javascript // 특정 셀에 내용(값)을 처음 조회된 값으로 변경한다. sheet.revertCell( sheet.getFirstVisibleRow(), \"EMT_DESC\", true ); ```",
              "see": [
                {
                  "label": "revertRow method",
                  "url": "./revert-row"
                },
                {
                  "label": "refreshRow method",
                  "url": "./refresh-row"
                },
                {
                  "label": "refreshCell method",
                  "url": "./refresh-cell"
                },
                {
                  "label": "renderBody method",
                  "url": "./render-body"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/revert-cell.html"
          },
          {
            "cid": 696,
            "sid": "revert-data",
            "name": "revert-data",
            "label": "revertData",
            "data": {
              "body": "> 시트 전체 데이터를 조회 시점의 값으로 변경합니다 > **<mark>주의</mark> : 시트의 데이터 값만 변경하며 `Added`, `Changed`, `Deleted` 상태값을 제외한 행 속성, 열 속성, 셀 속성 등은 변경하지 않습니다** > [reloadData](./reload-data)와 달리 [doSearch](./do-search), [loadSearchData](./load-search-data) 함수를 통해 조회된 데이터로 변경합니다 ### Syntax ```javascript void revertData( remainAddRow, sync ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |remainAddRow|`boolean`|<span class='optional'>선택</span>|[addRow](./add-row)로 추가된 행을 남길지에 대한 여부 `0(false)`:추가된 행 모두 삭제 (`default`) `1(true)`:추가된 행 유지| |sync|`boolean`|<span class='optional'>선택</span>|렌더링 작업을 동기로 처리 `0(false)`:비동기 방식 (`default`) `1(true)`:동기 방식| ### Return Value ***none*** ### Example ```javascript // 시트 전체 데이터(값,속성)를 처음 조회된 값으로 변경 sheet.revertData(); // 동기로 동작하도록 합니다. sheet.revertData(null, true); ```",
              "see": [
                {
                  "label": "revertRow method",
                  "url": "./revert-row"
                },
                {
                  "label": "revertCell method",
                  "url": "./revert-cell"
                },
                {
                  "label": "reloadData method",
                  "url": "./reload-data"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가||core|8.0.0.26|`sync` 인자 추가|"
            },
            "url": "docs/funcs/core/revert-data.html"
          },
          {
            "cid": 697,
            "sid": "revert-row",
            "name": "revert-row",
            "label": "revertRow",
            "data": {
              "body": "> 특정 행의 변경된 내용을 처음 조회된 값으로 변경합니다. > `render:0` 을 사용하여 화면에 바로 반영하지 않고 `rerender` 호출하여 화면에 반영시 `Formula` 계산 반영이 필요한 경우에는 `calculate` 함수를 호출해 주어야 반영 됩니다. ### Syntax ```javascript void revertRow( row, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |render |`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 (`default`) `1(true)`:즉시 반영| ### Return Value ***none*** ### Example ```javascript // 특정 행에 모든 셀 내용(값)을 처음 조회된 값으로 변경한다. sheet.revertRow( row, true ); ```",
              "see": [
                {
                  "label": "revertCell method",
                  "url": "./revert-cell"
                },
                {
                  "label": "refreshCell method",
                  "url": "./refresh-cell"
                },
                {
                  "label": "renderBody method",
                  "url": "./render-body"
                },
                {
                  "label": "rerender method",
                  "url": "./rerender"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/revert-row.html"
          },
          {
            "cid": 698,
            "sid": "save-current-info",
            "name": "save-current-info",
            "label": "saveCurrentInfo",
            "data": {
              "body": "> 현재 시트의 정보를 로컬 스토리지 혹은 세션 스토리지에 저장하는 메소드입니다. > 기본적으로 Key값은 [StorageKeyPrefix](/docs/props/cfg/storage-key-prefix)+\"^시트id\" 로 설정됩니다. > 저장되는 값은 [StorageCompressMode](/docs/props/cfg/storage-compress-mode)에 따라 압축되어서 저장됩니다. > [StorageSession](/docs/props/cfg/storage-session) 값이 없으면 동작하지 않습니다. > **`주의`** : 시트 초기화 시점 컬럼 정보와 저장하는 시트 컬럼 정보가 다를 경우 로컬 스토리지 혹은 세션 스토리지에 저장된 정보가 지워집니다. ### Syntax ```javascript boolean saveCurrentInfo(); ``` ### Return Value ***boolean*** ```javascript options.Cfg = { StorageSession: 1 // 로컬 스토리지에 현재 시트 정보를 저장할 수 있고 가져올 수 있도록 설정 }; ``` ### Example ```javascript // 현재 시트의 정보를 로컬 스토리지 혹은 세션 스토리지에 저장한다. if (sheet.saveCurrentInfo()) { alert(\"현재 시트 정보를 저장했습니다.\"); } else { alert(\"현재 시트 정보를 저장하는데 실패했습니다.\"); } ```",
              "see": [
                {
                  "label": "StorageSession cfg",
                  "url": "/docs/props/cfg/storage-session"
                },
                {
                  "label": "StorageKeyPrefix cfg",
                  "url": "/docs/props/cfg/storage-key-prefix"
                },
                {
                  "label": "StorageCompressMode cfg",
                  "url": "/docs/props/cfg/storage-compress-mode"
                },
                {
                  "label": "clearCurrentInfo method",
                  "url": "./clear-current-info"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/save-current-info.html"
          },
          {
            "cid": 699,
            "sid": "select-all-rows",
            "name": "select-all-rows",
            "label": "selectAllRows",
            "data": {
              "body": "> 전체 행을 선택 혹은 선택해제 합니다. ### Syntax ```javascript boolean selectAllRows( select, ignoreEvent ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |select|`boolean`|<span class='optional'>선택</span>| 선택 / 선택해제 여부 `0(false)`:선택해제 `1(true)`:선택 `null`:Toogle (`default`)| |ignoreEvent|`boolean`|<span class='optional'>선택</span>| [onSelectEnd](/docs/events/on-select-end) 이벤트 발생 여부 `0(false)`:발생 `1(true)`:발생하지 않음 (`default`)| ### Return Value ***boolean*** : 선택/선택해제 변경 여부 이미 전체 선택되어 있는 상태에서 다시 선택하려 하거나, 해제된 상태에서 다시 해제하려 하면 `false`를 리턴 ### Example ```javascript //전체 행을 선택합니다. sheet.selectAllRows(1); ```",
              "see": [
                {
                  "label": "clearSelection method",
                  "url": "./clear-selection"
                },
                {
                  "label": "selectCol method",
                  "url": "./select-col"
                },
                {
                  "label": "selectRow method",
                  "url": "./select-row"
                },
                {
                  "label": "selectRange method",
                  "url": "./select-range"
                },
                {
                  "label": "getSelectedRange method",
                  "url": "./get-selected-range"
                },
                {
                  "label": "getSelectedRow method",
                  "url": "./cget-selected-row"
                },
                {
                  "label": "onSelectEnd event",
                  "url": "/docs/events/on-select-end"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.3.0.14|`ignoreEvent` 인자 추가|"
            },
            "url": "docs/funcs/core/select-all-rows.html"
          },
          {
            "cid": 700,
            "sid": "select-cell",
            "name": "select-cell",
            "label": "selectCell",
            "data": {
              "body": "> 지정한 셀을 선택 혹은 선택해제 합니다. > 시트 `Cfg`의 `SelectingCells`설정이 `0` 일때는 사용 하실 수 없습니다. ### Syntax ```javascript boolean selectCell( row, col, select, valid, ignoreEvent ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col|`string`|<span class='required'>필수</span>|열이름| |select|`boolean`|<span class='optional'>선택</span>| 선택 / 선택해제 여부 `0(false)`:선택해제 `1(true)`:선택 `null`:Toggle (`default`) |valid|`boolean`|<span class='optional'>선택</span>|실제로 선택/선택해제 가능여부 확인 (실제로 셀 선택/선택해제 되진 않고, 가능/불가능 여부를 확인해서 리턴) `0(false)`:선택/선택해제 가능여부 확인 안함 (`default`) `1(true)`:선택/선택해제 가능여부 확인 사용| |ignoreEvent|`boolean`|<span class='optional'>선택</span>| [onSelectEnd](/docs/events/on-select-end) 이벤트 발생 여부 `0(false)`: 발생 `1(true)`: 발생하지 않음 (`default`)| ### Return Value ***boolean*** : 선택/선택해제 변경 여부 이미 선택한 셀을 다시 선택하려 하거나, 해제된 셀을 다시 해제하려 하면 `false`를 리턴 ### Example ```javascript //현재 포커스가 있는 셀을 선택 var row = sheet.getFocusedRow(); var col = sheet.getFocusedCol(); sheet.selectCell( row, col, 1); ```",
              "see": [
                {
                  "label": "clearSelection method",
                  "url": "./clear-selection"
                },
                {
                  "label": "selectRow method",
                  "url": "./select-row"
                },
                {
                  "label": "selectCol method",
                  "url": "./select-col"
                },
                {
                  "label": "selectRange method",
                  "url": "./select-range"
                },
                {
                  "label": "getSelectedRange method",
                  "url": "./get-selected-range"
                },
                {
                  "label": "getSelectedRow method",
                  "url": "./cget-selected-row"
                },
                {
                  "label": "onSelectEnd event",
                  "url": "/docs/events/on-select-end"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.3.0.14|`ignoreEvent` 인자 추가|"
            },
            "url": "docs/funcs/core/select-cell.html"
          },
          {
            "cid": 701,
            "sid": "select-col",
            "name": "select-col",
            "label": "selectCol",
            "data": {
              "body": "> 지정한 열을 선택 합니다. > 시트 `Cfg`의 `SelectingCells`설정이 `0` 일때는 사용 하실 수 없습니다. ### Syntax ```javascript boolean selectCol( col, select, valid, ignoreEvent ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |col|`string`|<span class='required'>필수</span>|선택할 열이름| |select|`boolean`|<span class='optional'>선택</span>| 선택 / 선택해제 여부 `0(false)`:선택해제 `1(true)`:선택 (`default`)| |valid|`boolean`|<span class='optional'>선택</span>|실제로 열 선택 가능여부 확인 (실제로 열 선택 되진 않고, 가능/불가능 여부를 확인해서 리턴) `0(false)`:열 선택 가능여부 확인 안함 (`default`) `1(true)`:열 선택 기능여부 확인 사용| |ignoreEvent|`boolean`|<span class='optional'>선택</span>| [onSelectEnd](/docs/events/on-select-end) 이벤트 발생 여부 `0(false)`: 발생 `1(true)`: 발생하지 않음 (`default`)| ### Return Value ***boolean*** : 선택/선택해제 변경 여부 이미 선택한 열을 다시 선택하려 하거나, 해제된 행을 다시 해제하려 하면 `false`를 리턴 ### Example ```javascript //AMT,QTY 열을 선택 sheet.selectCol(\"AMT\", 1); sheet.selectCol(\"QTY\", 1); ```",
              "see": [
                {
                  "label": "clearSelection method",
                  "url": "./clear-selection"
                },
                {
                  "label": "selectRow method",
                  "url": "./select-row"
                },
                {
                  "label": "selectRange method",
                  "url": "./select-range"
                },
                {
                  "label": "getSelectedRange method",
                  "url": "./get-selected-range"
                },
                {
                  "label": "onSelectEnd event",
                  "url": "/docs/events/on-select-end"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.3.0.14|`ignoreEvent` 인자 추가|"
            },
            "url": "docs/funcs/core/select-col.html"
          },
          {
            "cid": 702,
            "sid": "select-range",
            "name": "select-range",
            "label": "selectRange",
            "data": {
              "body": "> `row1, col1` 셀부터 `row2, col2` 셀까지 사각형 영역을 선택 혹은 선택해제 합니다. > 열을 설정하지 않으면 (`col1, col2`를 설정하지 않으면), `row1` 부터 `row2` 까지 **행**을 선택,선택해제 합니다. > 행을 설정하지 않으면 (`row1, row2`를 설정하지 않으면), `col1` 부터 `col2` 까지 **열**을 선택,선택해제 합니다. ### Syntax ```javascript number selectRange( row1, col1, row2, col2, select, type, valid, ignoreEvent ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row1|`object`|<span class='optional'>선택</span>|선택 시작 [데이터 로우 객체](/docs/appx/row-object)| |col1|`string`|<span class='optional'>선택</span>|선택 시작 열이름| |row2|`object`|<span class='optional'>선택</span>|선택 종료 [데이터 로우 객체](/docs/appx/row-object)| |col2|`string`|<span class='optional'>선택</span>|선택 종료 열이름| |select|`boolean`|<span class='optional'>선택</span>| 선택 / 선택해제 여부 `0(false)`:선택해제 `1(true)`:선택 `null`:Toggle (`default`)| |type|`number`|<span class='optional'>선택</span>|`1`: 히든된 행은 제외 `2`:트리에서 접힌 자식노드는 제외| |valid|`boolean`|<span class='optional'>선택</span>|실제로 영역 선택/선택해제 가능여부 확인 (실제로 영역 선택/선택해제 되지 않고, 선택/선택해제 될 행,셀 수 리턴) `0(false)`:영역 선택/선택해제 가능여부 확인 안함 (`default`) `1(true)`:영역 선택/선택해제 가능여부 확인 사용| |ignoreEvent|`boolean`|<span class='optional'>선택</span>| [onSelectEnd](/docs/events/on-select-end) 이벤트 발생 여부 `0(false)`: 발생 `1(true)`: 발생하지 않음 (`default`)| ### Return Value ***number*** : 선택이나 선택해제된 행,셀 수 ### Example ```javascript //AR5행 deptName 셀부터 AR10행 bizname 셀까지를 선택 sheet.selectRange( sheet.getRowById(\"AR4\"), \"deptName\", sheet.getRowById(\"AR10\"), \"bizname\", 1 ); ```",
              "see": [
                {
                  "label": "clearSelection method",
                  "url": "./clear-selection"
                },
                {
                  "label": "selectCol method",
                  "url": "./select-col"
                },
                {
                  "label": "selectRow method",
                  "url": "./select-row"
                },
                {
                  "label": "getSelectedRange method",
                  "url": "./get-selected-range"
                },
                {
                  "label": "getSelectedRow method",
                  "url": "./cget-selected-row"
                },
                {
                  "label": "onSelectEnd event",
                  "url": "/docs/events/on-select-end"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.3.0.14|`ignoreEvent` 인자 추가|"
            },
            "url": "docs/funcs/core/select-range.html"
          },
          {
            "cid": 703,
            "sid": "select-row",
            "name": "select-row",
            "label": "selectRow",
            "data": {
              "body": "> 지정한 행을 선택 합니다. ### Syntax ```javascript boolean selectRow( row, select, valid, ignoreEvent ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |select|`boolean`|<span class='optional'>선택</span>| 선택 / 선택해제 여부 `0(false)`:선택해제 `1(true)`:선택 `null`:Toggle (`default`)| |valid|`boolean`|<span class='optional'>선택</span>|행 선택/선택해제 가능여부 확인 (실제로 행이 선택/선택해제 되지 않고, 가능/불가능 여부를 확인해서 리턴) `0(false)`:행 선택/선택해제 확인 안함 (`default`) `1(true)`:행 선택/선택해제 확인 사용| |ignoreEvent|`boolean`|<span class='optional'>선택</span>| [onSelectEnd](/docs/events/on-select-end) 이벤트 발생 여부 `0(false)`: 발생 `1(true)`: 발생하지 않음 (`default`)| ### Return Value ***boolean*** : 선택/선택해제 변경 여부 이미 선택한 행을 다시 선택하려 하거나, 해제된 행을 다시 해제하려 하면 `0(false)`를 리턴 ### Example ```javascript //현재 포커스가 있는 행을 선택 var row = sheet.getFocusedRow(); sheet.selectRow( row, 1); ```",
              "see": [
                {
                  "label": "clearSelection method",
                  "url": "./clear-selection"
                },
                {
                  "label": "selectCol method",
                  "url": "./select-col"
                },
                {
                  "label": "selectRange method",
                  "url": "./select-range"
                },
                {
                  "label": "getSelectedRange method",
                  "url": "./get-selected-range"
                },
                {
                  "label": "getSelectedRow method",
                  "url": "./cget-selected-row"
                },
                {
                  "label": "onSelectEnd event",
                  "url": "/docs/events/on-select-end"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.3.0.14|`ignoreEvent` 인자 추가|"
            },
            "url": "docs/funcs/core/select-row.html"
          },
          {
            "cid": 704,
            "sid": "set-all-check",
            "name": "set-all-check",
            "label": "setAllCheck",
            "data": {
              "body": "> `Bool` 타입의 열 전체를 체크/언체크 합니다. > **셀이 편집불가능한 경우, 값 수정이 이루어지지 않습니다.(불가 여부와 상관없이 수정하시려면 setValue를 사용)** > `ignoreEvent`인자를 사용하여 이벤트([onAfterChange event](/docs/events/on-after-change) 호출 여부를 설정할 수 있습니다.(`default: 0(false)`) ### Syntax ```javascript void setAllCheck( col, val, ignoreEvent ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |col |`string`|<span class='required'>필수</span>|열이름| |val |`boolean`|<span class='required'>필수</span>|체크 여부 `0(false)`:체크해제 (`default`) `1(true)`:체크| |ignoreEvent|`boolean`|<span class='optional'>선택</span>|이벤트([onAfterChange event](/docs/events/on-after-change)) 발생 여부 `0(false)`:이벤트 발생 시킴(`default`) `1(true)`:이벤트 발생 시키지 않음| ### Return Value ***none*** ### Example ```javascript //\"CHK\"열을 전체 체크 sheet.setAllCheck(\"CHK\", 1); //\"CHK\"열을 전체 언체크하고 이벤트를 호출하지 않습니다. sheet.setAllCheck(\"CHK\", 0, true); ```",
              "see": [
                {
                  "label": "setCheck method",
                  "url": "./set-check"
                },
                {
                  "label": "onCheckAllFinish event",
                  "url": "/docs/events/on-check-all-finish"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.7|ignoreEvent 인자 추가|"
            },
            "url": "docs/funcs/core/set-all-check.html"
          },
          {
            "cid": 705,
            "sid": "set-attribute",
            "name": "set-attribute",
            "label": "setAttribute",
            "data": {
              "body": "> 특정 행,열,셀에 속성을 설정합니다. > `row`를 `null`로 설정시 열에 대한 속성으로 설정됩니다. > `col`을 `null`로 설정시 행에 대한 속성으로 설정됩니다. > 모든 속성을 설정할 수 있는 것은 아니기 때문에 해당 속성에 대해 설정하는 함수가 있다면 그 함수를 사용하실 것을 권합니다. > `Visible`, `Width`는 setAttribute보다 관련 함수 호출을 권장합니다. > - `hideCol`, `showCol`, `hideRow`, `setColWidth` ### Syntax ```javascript void setAttribute( row, col, attr, val, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='optional'>선택</span>|열이름| |attr|`string`|<span class='required'>필수</span>|설정하고자 하는 속성명| |val|`mixed`|<span class='required'>필수</span>|설정하고자 하는 속성 값| |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***none*** ### Example ```javascript //특정 셀에 배경색을 붉은색으로 변경 sheet.setAttribute(sheet.getFocusedRow(), sheet.getFocusedCol() ,\"Color\" ,\"#FF0000\" ,1); //특정 열에 편집을 불가능하게 변경 sheet.setAttribute(null, \"ColName\", \"CanEdit\", 0, 1); //특정행의 글자를 두껍게 변경 sheet.setAttribute({row:sheet.getRowById(\"AR20\"), attr:\"TextStyle\", val:1, render:1}); ```",
              "see": [
                {
                  "label": "getAttribute method",
                  "url": "./get-attribute"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-attribute.html"
          },
          {
            "cid": 706,
            "sid": "set-auto-merge-cancel",
            "name": "set-auto-merge-cancel",
            "label": "setAutoMergeCancel",
            "data": {
              "body": "> 데이터 기준으로 셀 병합된 것을 해제합니다. > 인자에 따라 병합 해제될 영역을 선택할 수 있습니다. ### Syntax ```javascript void setAutoMergeCancel( mode ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |mode|`string`|<span class='optional'>선택</span>|병합 해제할 영역을 선택합니다. 미입력시 모든 영역에서 병합이이 해제됩니다. `\"Data\"`:데이터 영역에 있는 병합 해제 `\"Header\"`:헤더 영역에 있는 병합 해제 `\"Head\"`:Head 영역에 있는 병합 해제 `\"Foot\"`:Foot 영역에 있는 병합 해제| ### Return Value ***none*** ### Example ```javascript // 데이터 영역의 셀 병합을 해제합니다. sheet.setAutoMergeCancel( {mode:\"Data\"} ); ```",
              "see": [
                {
                  "label": "setAutoMerge method",
                  "url": "./set-auto-merge"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.2.0.14|`mode`에 `Head`, `Foot` 추가|"
            },
            "url": "docs/funcs/core/set-auto-merge-cancel.html"
          },
          {
            "cid": 707,
            "sid": "set-auto-merge",
            "name": "set-auto-merge",
            "label": "setAutoMerge",
            "data": {
              "body": "> 값이 같은 셀들을 주어진 기준에 따라 하나의 셀로 병합합니다. > `SEQ` 열에 대해서는 병합을 실행하지 않습니다. > 서로 다른 섹션으로 나누어진 열들은 서로 병합되지 않습니다. > 병합된 셀 값을 변경하는 경우 병합된 셀 영역의 첫 번째 행, 첫 번째 열에 위치한 셀 값만 변경됩니다. > 병합된 셀 전체의 값을 변경하시려면 [MergeCellsMatch](/docs/props/cfg/merge-cells-match) 속성을 사용해야합니다. > `dataMerge, headerMerge, headMerge, footMerge` 인자에 대한 설명은 [DataMerge](/docs/props/cfg/data-merge), `prevColumnMerge` 인자에 대한 설명은 [PrevColumnMerge](/docs/props/cfg/prev-column-merge)를 참고하십시오. ### Syntax ```javascript void setAutoMerge( dataMerge, headerMerge, prevColumnMerge, fixPrevColumnMerge, headMerge, footMerge, headPrevColumnMerge, footPrevColumnMerge ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |dataMerge|`number`|<span class='optional'>선택</span>|데이터 영역의 셀들을 병합할 때 적용할 기준 `0`:병합 안함 (`default`) `1`:열 기준 병합 `2`:행 기준 병합 `3`:열 우선 병합 `4`:행 우선 병합 `5`:열 우선 사방 병합 `6`:행 우선 사방 병합| |headerMerge|`number`|<span class='optional'>선택</span>|헤더 영역의 셀들을 병합할 때 적용할 기준 `0`:병합 안함 (`default`) `1`:열 기준 병합 `2`:행 기준 병합 `3`:열 우선 병합 `4`:행 우선 병합 `5`:열 우선 사방 병합 `6`:행 우선 사방 병합| |prevColumnMerge|`number`|<span class='optional'>선택</span>|앞 열 기준으로 셀 병합할 지 여부 `0`:전체영역에 앞컬럼 머지기능을 사용안함 (`default`) `1`:데이터 영역에만 앞컬럼머지기능을 사용 `2`:헤더영역에서만 앞컬럼머지기능을 사용 `3`:데이터 및 헤더 영역에서 앞컬럼머지 기능 사용 | |fixPrevColumnMerge|`string`|<span class='optional'>선택</span>|병합의 기준이 될 열의 `Name` (`default: 0`)| |headMerge|`number`|<span class='optional'>선택</span>|`Head` 영역의 셀들을 병합할 때 적용할 기준 `0`:병합 안함 (`default`) `1`:열 기준 병합 `2`:행 기준 병합 `3`:열 우선 병합 `4`:행 우선 병합 `5`:열 우선 사방 병합 `6`:행 우선 사방 병합| |footMerge|`number`|<span class='optional'>선택</span>|`Foot` 영역의 셀들을 병합할 때 적용할 기준 `0`:병합 안함 (`default`) `1`:열 기준 병합 `2`:행 기준 병합 `3`:열 우선 병합 `4`:행 우선 병합 `5`:열 우선 사방 병합 `6`:행 우선 사방 병합| |headPrevColumnMerge|`boolean`|<span class='optional'>선택</span>| `Head`의 고정행 영역에서 앞 열 기준으로 셀 병합할 지 여부 `0(false)`:`Head`의 고정행 영역에서 앞 열 기준으로 셀 병합 사용 안함 (`default`) `1(true)`:`Head`의 고정행 영역에서 앞 열 기준으로 셀 병합 사용| |footPrevColumnMerge|`boolean`|<span class='optional'>선택</span>| `Foot`의 고정행 영역에서 앞 열 기준으로 셀 병합할 지 여부 `0(false)`:`Foot`의 고정행 영역에서 앞 열 기준으로 셀 병합 사용 안함 (`default`) `1(true)`:`Foot`의 고정행 영역에서 앞 열 기준으로 셀 병합 사용| ### Return Value ***none*** ### Example ```javascript // 데이터 영역에는 열 기준 병합을, 헤더 영역에는 행 기준 병합을 실행합니다. sheet.setAutoMerge( {dataMerge:1, headerMerge:2, prevColumnMerge:0, fixPrevColumnMerge: 'sPolicy'} ); ``` ### Try it - [Demo of setAutoMerge](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/Merge/)",
              "see": [
                {
                  "label": "DataMerge cfg",
                  "url": "/docs/props/cfg/data-merge"
                },
                {
                  "label": "HeaderMerge cfg",
                  "url": "/docs/props/cfg/header-merge"
                },
                {
                  "label": "PrevColumnMerge cfg",
                  "url": "/docs/props/cfg/prev-column-merge"
                },
                {
                  "label": "FixPrevColumnMerge cfg",
                  "url": "/docs/props/cfg/fix-prev-column-merge"
                },
                {
                  "label": "setAutoMergeCancel method",
                  "url": "./set-auto-merge-cancel"
                },
                {
                  "label": "MergeCellsMatch",
                  "url": "/docs/props/cfg/merge-cells-match"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.15|`fixPrevColumnMerge`추가||core|8.2.0.14|`headMerge`, `footMerge`, `headPrevColumnMerge`, `footPrevColumnMerge` 추가|"
            },
            "url": "docs/funcs/core/set-auto-merge.html"
          },
          {
            "cid": 708,
            "sid": "set-cell-style",
            "name": "set-cell-style",
            "label": "setCellStyle",
            "data": {
              "body": "> 특정 셀의 style속성 값을 변경합니다. > `row`를 `null`로 설정시 열에 대한 속성으로 설정됩니다. > `col`을 `null`로 설정시 행에 대한 속성으로 설정됩니다. ### Syntax ```javascript void setCellStyle( row, col, styleAttr, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='optional'>선택</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='optional'>선택</span>|열이름| |styleAttr|`object`|<span class='required'>필수</span>|확인하고 싶은 style 속성값 `'Color'(배경색)`, `'TextColor'(텍스트의 컬러)`, `'TextSize'(텍스트 크기)`, `'TextStyle'(텍스트의 스타일)`, `'TextFamily'(텍스트 폰트)`, `'Align'(정렬)` | |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 (`default`) `1(true)`:즉시 반영| ### Return Value ***none*** ### Example ```javascript //셀의 글자색을 변경한다. sheet.setCellStyle( sheet.getFirstRow(), \"CUST_CD\", {\"TextColor\" : \"#FF0000\"}, 1); //행의 글자크기를 변경한다 sheet.setCellStyle( sheet.getRowByIndex(4), null, {\"TextSize\": 20 }, 1 ); ```",
              "see": [
                {
                  "label": "setAttribute method",
                  "url": "./set-attribute"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-cell-style.html"
          },
          {
            "cid": 709,
            "sid": "set-check",
            "name": "set-check",
            "label": "setCheck",
            "data": {
              "body": "> `Bool` 타입의 셀의 값을 체크/언체크 합니다. > **셀이 편집불가능한 경우, 값 수정이 이루어지지 않습니다.(불가 여부와 상관없이 수정하시려면 setValue를 사용)** > `valid` 인자를 통해 값 변경이 가능한지 여부를 확인할 수 있습니다. > 이미 체크된 셀에 `val`인자를 `1(true)`로 설정하고 `valid:1`로 확인하면 값은 `false`가 리턴됩니다. > 반대로 `val`인자를 `0(false)`으로 설정하고 `valid:1`로 확인하면 값은 `true`가 리턴됩니다. > 해당 셀이 `Bool` 타입이 아닌 경우 혹은 편집이 불가능한 경우, `valid:1`로 확인하면 `false`가 리턴됩니다. ### Syntax ```javascript boolean setCheck( row, col, val, valid); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| |val |`boolean`|<span class='required'>필수</span>|체크 여부 `0(false)`:체크해제 `1(true)`:체크 `null`:Toogle (`default`)| |valid|`boolean`|<span class='optional'>선택</span>|셀에 체크/체크해제 가능여부 확인 (실제로 체크/체크해제가 되지 않고, 가능/불가능 여부를 확인해서 리턴) `0(false)`:체크/체크해제 가능여부 확인 안함 (`default`) `1(true)`:체크/체크해제 가능여부 확인 사용| ### Return Value ***boolean*** : `true`: 값이 변경됨 `false`: 값이 변경되지 않음 ### Example ```javascript var r5 = sheet.getRowById(\"AR5\"); //AR5 행에 \"CHK\"열 값을 체크로 변경 sheet.setCheck(r5, \"CHK\", 1); //AR5 행에 \"CHK\" 열 값이 변경되는지 확인 var isChecked = sheet.setCheck(r5, \"CHK\", 0, 1); ```",
              "see": [
                {
                  "label": "setValue method",
                  "url": "./set-value"
                },
                {
                  "label": "setString method",
                  "url": "./set-string"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-check.html"
          },
          {
            "cid": 710,
            "sid": "set-col-width",
            "name": "set-col-width",
            "label": "setColWidth",
            "data": {
              "body": "> 열의 너비를 가감으로 변경합니다. > `dx` 인자의 값에 따라 열의 너비를 늘리거나 줄입니다. > 정적인 크기로 열의 너비를 변경하고자 하실 때는 [(col)Width](/docs/props/col/width)를 setAttribute로 수정하시면 됩니다. > 멀티레코드([MultiRecord](/docs/props/cfg/multi-record)) 시트 더미컬럼에는 `setColWidth`가 동작하지 않습니다. ### Syntax ```javascript void setColWidth( col, dx ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |col |`string`|<span class='required'>필수</span>|열이름| |dx |`number`|<span class='optional'>선택</span>|열 너비 가감 정도 (양수 설정시 늘어나고, 음수 설정시 설정값 만큼 줄어듬) 설정을 하지 않는 경우 열을 보이거나 감춤(`Visible:0`)| ### Return Value ***none*** ### Example ```javascript //cardNumber 열의 너비를 -100픽셀 줄인다. sheet.setColWidth(\"cardNumber\", -100); ```",
              "see": [
                {
                  "label": "getAttribute method",
                  "url": "./get-attribute"
                },
                {
                  "label": "setAttribute method",
                  "url": "./set-attribute"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-col-width.html"
          },
          {
            "cid": 711,
            "sid": "set-count-info-element",
            "name": "set-count-info-element",
            "label": "setCountInfoElement",
            "data": {
              "body": "> [InfoRowConfig cfg](/docs/props/cfg/info-row-config) 기능 사용시 표시되는 데이터 행수 정보를 시트 외부의 Dom Element 에 표시합니다. ### Syntax ```javascript boolean setCountInfoElement ( element ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |element |`object` \\| `string`|<span class='required'>필수</span>| 데이터 행수 정보를 표시할 Dom Element 또는 해당 id| ### Return Value ***boolean*** : `true`: 외부의 Dom Element 표시 성공 `false`: 실패 ### Example ```javascript // id가 'countElem'인 div 에 데이터 행수 정보 출력 설정 sheet.setCountInfoElement ( 'countElem' ); sheet.setCountInfoElement ( docuemnt.getElementById('countElem') ); ```",
              "see": [
                {
                  "label": "InfoRowConfig cfg",
                  "url": "/docs/props/cfg/info-row-config"
                },
                {
                  "label": "getCountInfoElement method",
                  "url": "./get-count-info-element"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
            },
            "url": "docs/funcs/core/set-count-info-element.html"
          },
          {
            "cid": 712,
            "sid": "set-current-info",
            "name": "set-current-info",
            "label": "setCurrentInfo",
            "data": {
              "body": "> 시트 컬럼 정보 문자열을 통해 현재 시트를 재구성하는 메소드입니다. ### Syntax ```javascript string setCurrentInfo( info ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |info |`string`|<span class='required'>필수</span>|현재 시트 컬럼에 적용하고 싶은 시트 정보| ### Return Value ***boolean*** ### Example ```javascript var info = '[[[\"SEQ\"],[\"sCheck\",\"sNation\",\"sTitle\",\"sShare\",\"sCount\",\"sDate\"],[]],{\"SEQ\":{\"Visible\":1,\"Width\":60,\"RelWidth\":0,\"UserHidden\":false},\"sCheck\":{\"Visible\":1,\"Width\":61,\"RelWidth\":0,\"UserHidden\":false},\"sNation\":{\"Visible\":1,\"Width\":85,\"RelWidth\":0,\"UserHidden\":false},\"sTitle\":{\"Visible\":1,\"Width\":1371,\"RelWidth\":1,\"UserHidden\":false},\"sShare\":{\"Visible\":1,\"Width\":60,\"RelWidth\":0,\"UserHidden\":false},\"sCount\":{\"Visible\":1,\"Width\":95,\"RelWidth\":0,\"UserHidden\":false},\"sDate\":{\"Visible\":1,\"Width\":120,\"RelWidth\":0,\"UserHidden\":false}},\"\"]' // getCurrentInfo에서 얻은 결과와 같은 형식 sheet.setCurrentInfo( info ); ```",
              "see": [
                {
                  "label": "getCurrentInfo method",
                  "url": "./get-current-info"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-current-info.html"
          },
          {
            "cid": 713,
            "sid": "set-current-style",
            "name": "set-current-style",
            "label": "setCurrentStyle",
            "data": {
              "body": "> 문자열을 통해 현재 시트의 테마 및 Def의 `Header`, `Row`에 설정된 스타일 관련 정보를 변경하는 메소드입니다. ### Syntax ```javascript boolean setCurrentStyle( info ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |info|`string`|<span class='required'>필수</span>|현재 시트 컬럼에 적용하고 싶은 스타일 정보| ### Return Value ***boolean*** ### Example ```javascript var info = '{\"HeaderColor\":\"#1d1d1b\",\"HeaderTextSize\":\"14\",\"HeaderTextColor\":\"#efe6e6\",\"AlternateColor\":\"#dfdfe2\",\"RowColor\":\"#f6f6ee\",\"RowTextSize\":\"12\",\"RowTextColor\":\"#211c1c\",\"Theme\":\"IB\"}' // getCurrentStyle에서 얻은 결과와 같은 형식 sheet.setCurrentStyle( info ); ```",
              "see": [
                {
                  "label": "행(Row) 구조에 대한 이해 getting started",
                  "url": "/docs/start/row"
                },
                {
                  "label": "getCurrentStyle method",
                  "url": "./get-current-Style"
                },
                {
                  "label": "AlternateColor row",
                  "url": "/docs/props/row/alternate-color.md"
                },
                {
                  "label": "Color row",
                  "url": "/docs/props/row/color.md"
                },
                {
                  "label": "TextColor row",
                  "url": "/docs/props/row/text-color.md"
                },
                {
                  "label": "TextSize row",
                  "url": "/docs/props/row/text-size.md"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.18|기능 추가|"
            },
            "url": "docs/funcs/core/set-current-style.html"
          },
          {
            "cid": 714,
            "sid": "set-edit-text",
            "name": "set-edit-text",
            "label": "setEditText",
            "data": {
              "body": "> 사용자가 셀을 더블 클릭하여 편집모드로 들어갔을 때 편집중인 데이터를 변경 합니다. > 컬럼 타입에 맞게 value 인자를 전달해야 합니다. ### Syntax ```javascript string setEditText(value); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |value|`string or number`|<span class='required'>필수</span>|변경하려는 문자열 혹은 숫자| ### Return Value ***boolean*** : 처리 여부 ### Example ```javascript // 현재 편집 중인 데이터를 변경합니다. sheet.setEditText(\"변경 데이터\"); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.1.0.91|기능 추가|"
            },
            "url": "docs/funcs/core/set-edit-text.html"
          },
          {
            "cid": 715,
            "sid": "set-enter-mode",
            "name": "set-enter-mode",
            "label": "setEnterMode",
            "data": {
              "body": "> (Cfg) [EnterMode](/docs/props/cfg/enter-mode)설정을 동적으로 변경합니다. ### Syntax ```javascript boolean setEnterMode(enterMode); ``` ### Parameters |Name|Type|Required|Description| |----|----|--------|-----------| |enterMode|`number`|<span class='required'>필수</span>|변경할 [EnterMode](/docs/props/cfg/enter-mode) 속성| ### Return Value ***boolean*** : 함수 정상 동작 여부. (인자값이 잘못되어 수행되지 못한 경우에는 `false` 리턴) ### Example ```javascript // Cfg.EnterMode를 5로 변경 sheet.setEnterMode(5); ``` ### Try it - [Demo of setEnterMode](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/EnterMode/)",
              "see": [
                {
                  "label": "EnterMode cfg",
                  "url": "/docs/props/cfg/enter-mode"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.13|기능 추가|"
            },
            "url": "docs/funcs/core/set-enter-mode.html"
          },
          {
            "cid": 716,
            "sid": "set-expand-row",
            "name": "set-expand-row",
            "label": "setExpandRow",
            "data": {
              "body": "> 트리나 그룹 사용시 특정행을 접거나 펼칩니다. ### Syntax ```javascript boolean setExpandRow(row, col, expand); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col|`string`|<span class='optional'>선택</span>|열이름 (`default: null`)| |expand|`boolean`|<span class='optional'>선택</span>|펼칠지 여부 `0(false)`:접기 `1(true)`:펼치기 `null`:Toggle (`default`)| ### Return Value ***boolean*** : 접거나 펼쳐짐 변경 여부 ### Example ```javascript //특정 행을 toggle로 접거나 펼침 sheet.setExpandRow( sheet.getFocusedRow(), \"GROUPNM\" ); ```",
              "see": [
                {
                  "label": "showTreeLevel method",
                  "url": "./show-tree-level"
                },
                {
                  "label": "Expanded row",
                  "url": "/docs/props/row/expanded"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.5|expand 인자 추가 및 col 인자 <span class='required'>필수</span>에서 <span class='optional'>선택</span>으로 변경|"
            },
            "url": "docs/funcs/core/set-expand-row.html"
          },
          {
            "cid": 717,
            "sid": "set-filter",
            "name": "set-filter",
            "label": "setFilter",
            "data": {
              "body": "> 필터행과 무관하게 현재 시트가 갖고 있는 값을 기준으로 필터링을 합니다. > 설정한 내용은 필터행에 보여지지 않습니다. ### Syntax ```javascript void setFilter( name, filter, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |name|`string`|<span class='required'>필수</span>|다른 필터들과 구별하기 위해 설정할 필터의 이름 |filter|`string`\\|`function`|<span class='required'>필수</span>|필터링 조건 (ex: `\"cardAmt>50000?1:0\"`) |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***none*** ### Example ```javascript //deptName열에 총무부서 이면서 cardAmt 값이 100000 이상인 행만 보여준다. sheet.setFilter({ name: \"총무부서\", filter: \"deptName=='총무부서'?1:0\", render: 0 }); sheet.setFilter({ name: \"카드\", filter: \"cardAmt>100000?1:0\", render: 1 }); //\"DELIVERYDEPTNAME\"컬럼에 \"천안\"이라는 글자가 포함된 행만 보여준다. sheet.setFilter(\"myFilter\", function(obj) { if (obj.Row.DELIVERYDEPTNAME) { return obj.Row.DELIVERYDEPTNAME.indexOf('천안') > -1; } }, 1); ```",
              "see": [
                {
                  "label": "clearFilter method",
                  "url": "./clear-filter"
                },
                {
                  "label": "doFilter method",
                  "url": "./do-filter"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-filter.html"
          },
          {
            "cid": 718,
            "sid": "set-fixed-bottom",
            "name": "set-fixed-bottom",
            "label": "setFixedBottom",
            "data": {
              "body": "> 데이터행을 하단 `Foot` 영역에 고정시킵니다. > 맨 아래 행부터 `count`에 해당하는 숫자의 행 만큼 고정시킵니다. > **제약: 해당 기능은 `SearchMode: 1,2`에서만 사용하실 수 있습니다.** > **`DataMerge`와 함께 사용할 수 없고, 고정 행의 개수가 많아서 시트의 높이 보다 커지는 경우에는 기능이 제한 됩니다.** ### Syntax ```javascript boolean setFixedBottom( count, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |count |`number`|<span class='optional'>선택</span>|하단에 고정시킬 데이터행의 갯수| |render |`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***boolean*** : 설정에 대한 결과 ### Example ```javascript // 맨 아래 데이터 행부터 시작해서 데이터행 4개를 하단에 고정한다. sheet.setFixedBottom(4,1); ```",
              "see": [
                {
                  "label": "setFixedTop method",
                  "url": "./set-fixed-top"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.23|기능 추가|"
            },
            "url": "docs/funcs/core/set-fixed-bottom.html"
          },
          {
            "cid": 719,
            "sid": "set-fixed-cols",
            "name": "set-fixed-cols",
            "label": "setFixedCols",
            "data": {
              "body": "> 시트의 좌우측 `section`에 포함될 열 수를 설정합니다. > 설정시 감춰진 열도 포함하여 고정시킵니다. > **초기화시 `LeftCols`에 `SEQ열`을 생성하지 않았다 하더라도 `SEQ열`은 `Hidden` 상태로 존재하고 있습니다. > 따라서 `setFixedCols` 사용시 `left`인자에는 항상 `SEQ열`을 포함하여 계산해야 합니다.** > 좌측이나 우측 `section`의 컬럼 개수만 수정하고자 할때는 [setFixedLeft](./set-fixed-left)나 [setFixedRight](./set-fixed-right) 함수를 사용하세요. ### ![틀고정](/assets/imgs/setFixedCols1.png) ### Syntax ```javascript array setFixedCols( left, right, reMerge, sync ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |left |`number`|<span class='optional'>선택</span>|왼쪽 영역의 열 개수 (설정을 안하거나 `0`으로 설정시, 해당영역에 열이 모두 center 영역으로 포함됨)| |right|`number`|<span class='optional'>선택</span>|우측 영역의 열 개수 (설정을 안하거나 `0`으로 설정시, 해당영역에 열이 모두 center 영역으로 포함됨)| |reMerge |`boolean`|<span class='optional'>선택</span>|컬럼 이동 후 다시 기존에 설정했던 값과 동일하게 [머지](./set-auto-merge) 다시 적용 여부 `0(false)`:컬럼 이동 후 다시 기존에 설정해던 값과 동일하게 머지 하지 않음 (`default`) `1(true)`:컬럼 이동 후 다시 기존에 설정해던 값과 동일하게 머지| |sync|`boolean`|<span class='optional'>선택</span>|렌더링 작업을 동기로 처리 `0(false)`:비동기 방식 (`default`) `1(true)`:동기 방식| ### Return Value ***array[boolean, boolean]*** : left, right 설정에 대한 각각의 결과 ### Example ```javascript //좌측에 4개 우측에 1개 열을 고정한다. sheet.setFixedCols(4,1); ```",
              "see": [
                {
                  "label": "setFixedLeft method",
                  "url": "./set-fixed-left"
                },
                {
                  "label": "setFixedRight method",
                  "url": "./set-fixed-right"
                },
                {
                  "label": "setColWidth method",
                  "url": "./set-col-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.16|`sync` 기능 추가|"
            },
            "url": "docs/funcs/core/set-fixed-cols.html"
          },
          {
            "cid": 720,
            "sid": "set-fixed-left",
            "name": "set-fixed-left",
            "label": "setFixedLeft",
            "data": {
              "body": "> 지정한 숫자만큼의 열을 시트의 좌측 (`Section:0`)에 위치시킵니다.(틀고정) > 지정한 열 수에는 `Hidden` 열도 포함하여 고정시킵니다. > **초기화시 `LeftCols`에 `SEQ열`을 생성하지 않았다 하더라도 `SEQ열`은 `Hidden` 상태로 존재하고 있습니다. > 따라서 `setFixedCols` 사용시 `left`인자에는 항상 `SEQ열`을 포함하여 계산해야 합니다.** ### ![틀고정](/assets/imgs/setFixedCols1.png) ### Syntax ```javascript array setFixedLeft( count, reMerge, sync ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |count |`number`|<span class='optional'>선택</span>|왼쪽 영역의 열 개수 (설정을 안하거나 `0`으로 설정시, 해당영역에 열이 모두 center 영역으로 포함됨)| |reMerge |`boolean`|<span class='optional'>선택</span>|컬럼 이동 후 다시 기존에 설정했던 값과 동일하게 [머지](./set-auto-merge) 다시 적용 여부 `0(false)`:컬럼 이동 후 다시 기존에 설정해던 값과 동일하게 머지 하지 않음 (`default`) `1(true)`:컬럼 이동 후 다시 기존에 설정해던 값과 동일하게 머지| |sync|`boolean`|<span class='optional'>선택</span>|렌더링 작업을 동기로 처리 `0(false)`:비동기 방식 (`default`) `1(true)`:동기 방식| ### Return Value ***boolean*** : 처리결과 (변동이 없으면 `false`) ### Example ```javascript //좌측에 4개 열을 고정하고, 머지를 다시 한다. sheet.setFixedLeft(4, 1); ```",
              "see": [
                {
                  "label": "setFixedRight method",
                  "url": "./set-fixed-right"
                },
                {
                  "label": "setFixedCols method",
                  "url": "./set-fixed-cols"
                },
                {
                  "label": "setColWidth method",
                  "url": "./set-col-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.16|`sync` 기능 추가|"
            },
            "url": "docs/funcs/core/set-fixed-left.html"
          },
          {
            "cid": 721,
            "sid": "set-fixed-right",
            "name": "set-fixed-right",
            "label": "setFixedRight",
            "data": {
              "body": "> 지정한 숫자만큼의 열을 시트의 우측(`Section:2`)에 위치시킵니다.(틀고정) > 지정한 열 수에는 `Hidden` 열도 포함하여 고정시킵니다. ### ![틀고정](/assets/imgs/setFixedCols1.png) ### Syntax ```javascript array setFixedRight( count, reMerge, sync ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |count |`number`|<span class='optional'>선택</span>|오른쪽 영역에 고정할 열 개수 (설정을 안하거나 `0`으로 설정시, 해당영역에 열이 모두 center 영역으로 포함됨)| |reMerge |`boolean`|<span class='optional'>선택</span>|컬럼 이동 후 다시 기존에 설정했던 값과 동일하게 [머지](./set-auto-merge) 다시 적용 여부 `0(false)`:컬럼 이동 후 다시 기존에 설정해던 값과 동일하게 머지 하지 않음 (`default`) `1(true)`:컬럼 이동 후 다시 기존에 설정해던 값과 동일하게 머지| |sync|`boolean`|<span class='optional'>선택</span>|렌더링 작업을 동기로 처리 `0(false)`:비동기 방식 (`default`) `1(true)`:동기 방식| ### Return Value ***boolean*** : 처리결과 (변동이 없으면 `false`) ### Example ```javascript //우측 2개 열을 고정한다. sheet.setFixedRight(2); ```",
              "see": [
                {
                  "label": "setFixedLeft method",
                  "url": "./set-fixed-left"
                },
                {
                  "label": "setFixedCols method",
                  "url": "./set-fixed-cols"
                },
                {
                  "label": "setColWidth method",
                  "url": "./set-col-width"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.16|`sync` 기능 추가|"
            },
            "url": "docs/funcs/core/set-fixed-right.html"
          },
          {
            "cid": 722,
            "sid": "set-fixed-top",
            "name": "set-fixed-top",
            "label": "setFixedTop",
            "data": {
              "body": "> 데이터행을 상단에 고정시킵니다. > **제약: `SearchMode: 0 or 3`의 경우 해당 기능을 사용할 수 없습니다.** > **제약: `DataMerge` 와 함께 사용할 수 없고 시트의 데이터행이 `최소 4개의 행 이상`이어야 합니다.** ### Syntax ```javascript boolean setFixedTop( count, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |count |`number`|<span class='optional'>선택</span>|상단에 고정시킬 데이터행의 갯수| |render |`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***boolean*** : 설정에 대한 결과 ### Example ```javascript // 헤더행을 제외한 데이터행 4개를 상단에 고정한다. sheet.setFixedTop(4,1); ```",
              "see": [
                {
                  "label": "setFixedBottom method",
                  "url": "./set-fixed-bottom"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.13|`render` 인자 default 변경|"
            },
            "url": "docs/funcs/core/set-fixed-top.html"
          },
          {
            "cid": 723,
            "sid": "set-formula-row-position",
            "name": "set-formula-row-position",
            "label": "setFormulaRowPosition",
            "data": {
              "body": "> `FormulaRow`(합계행)의 위치(하단(기본값), 상단)를 변경할 수 있습니다. ### Syntax ```javascript void setFormulaRowPosition( pos, norender ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |pos |`number`|<span class='required'>필수</span>|`0`: 상단으로 이동 `1`: 하단으로 이동 (`default: 1`)| |norender |`boolean`|<span class='optional'>선택</span><mark>(사용주의)</mark>|즉시 화면에 반영할 것인지 여부 해당 기능을 사용한 뒤, 다른 동작을 실행 할 경우 `renderBody()`를 반드시 먼저 실행 해야 합니다. `0(false)`: 즉시 반영 (`default`) `1(true)`: 반영 안함 | ### Return Value ***boolean*** : 설정 완료 여부 ### Example ```javascript //합계행을 상단으로 이동 sheet.setFormulaRowPosition( 0 ); //합계행을 하단으로 이동 sheet.setFormulaRowPosition({pos:1}); ```",
              "see": [
                {
                  "label": "setFormulaRow method",
                  "url": "./set-formula-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-formula-row-position.html"
          },
          {
            "cid": 724,
            "sid": "set-formula-row",
            "name": "set-formula-row",
            "label": "setFormulaRow",
            "data": {
              "body": "> `FormulaRow`(합계행)에 계산을 변경(`Sum,Avg,Min,Max`)하거나 행을 감출수 있습니다. ### Syntax ```javascript void setFormulaRow( val, cols, visible, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |val |`string`\\|`object`|<span class='required'>필수</span>|설정할 계산 방식 (`'Sum'`,`'Avg'`,`'Min'`,`'Max'` 중 하나) 또는 object 형태로 설정시 `{\"ColName1\":\"Sum\",\"ColName2:\"Avg\"}` 식으로 설정 가능 (object형을 사용시에는 `cols` 인자는 필요 없음)| |cols |`string`|<span class='optional'>선택</span>|계산할 열이름(복수개인 경우 ,를 구분자로 연결한 문자열)| |visible |`boolean`|<span class='optional'>선택</span>|`FormulaRow` 보임 여부 `0(false)`:`FormulaRow`(합계행) 감춤 (`default`) `1(true)`:`FormulaRow`(합계행) 보임| |render |`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 (`default`) `1(true)`:즉시 반영| ### Return Value ***boolean*** : 설정 완료 여부 ### Example ```javascript //합계행에 계산을 평균값으로 변경 sheet.setFormulaRow( \"Avg\", \"AMT1,AMT2\", 1, 1 ); //합계행을 감춘다. sheet.setFormulaRow({visible:0}); ```",
              "see": [
                {
                  "label": "setFormulaRowPosition method",
                  "url": "./set-formula-row-position"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-formula-row.html"
          },
          {
            "cid": 725,
            "sid": "set-icon-check",
            "name": "set-icon-check",
            "label": "setIconCheck",
            "data": {
              "body": "> `Icon`속성이 `Check`인 셀에 체크 값을 변경합니다. ### Syntax ```javascript void setIconCheck( row, col, val ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| |val |`boolean`|<span class='optional'>선택</span>|체크/체크해제 여부 `0(false)`:체크해제 `1(true)`:체크 `null`:Toggle (`default`)| ### Return Value ***none*** ### Example ```javascript //선택 셀에 Icon Check값을 언체크로 수정한다. sheet.setIconCheck(sheet.getFocusedRow(), sheet.getFocusedCol(), 0); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-icon-check.html"
          },
          {
            "cid": 726,
            "sid": "set-info-row",
            "name": "set-info-row",
            "label": "setInfoRow",
            "data": {
              "body": "> 시트 상단 혹은 하단에 건수정보 와 페이지 네비게이션, 사용자 정의 영역을 표시합니다. ### Syntax ```javascript void setInfoRow( visible, layout, space, format, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |visible|`boolean`|<span class='optional'>선택</span>|정보 행 보임/감춤 여부 `0(false)`:정보 행 감춤 (`default`) `1(true)`:정보 행 보임| |layout|`array`\\[`string`\\|`object`\\]|<span class='optional'>선택</span>|페이징, 사용자 정의 영역, 건수 정보 표시 설정<ul><li>`\"Paging\"` : 페이지 네비게이션 활성화</li><li>`\"Paging2\"` : 숫자형 페이지 네비게이션 활성화</li><li>`\"Count\"`: 건수 정보 표시 </li><li>`\"SummaryLabel\"`: 선택영역의 합계/평균 정보 표시 </li><li>`\"StatusLabel\"`: 데이터 편집, 행이동, 필터링, 정렬, 컬럼이동, 파일 업로드/제거 정보 표시</li><li>`\"사용자 영역 문자열\"` : 표시하려는 문자열 `<span>`, `<div>` 태그등 사용가능</li></ul>| |viewCount|`number`|<span class='optional'>선택</span>|layout의 Paging2 설정시 selectBox 표시 여부 설정 `0`:표시안함 (`default`) `1`:표시| |viewFormat|`string`|<span class='optional'>선택</span>|layout의 Paging2 설정시 `viewCount`의 selectBox 옵션을 설정합니다.| |paging2Count|`number`|<span class='optional'>선택</span>|layout의 Paging2 설정시 페이지 네비게이션에 보여지는 숫자의 개수를 설정합니다. (`default: 5, max: 10`)| |space|`string`|<span class='optional'>선택</span>|정보행의 위치 (`\"Top\"`: 상단, `\"Bottom\"`:하단)| |format|`string`|<span class='optional'>선택</span>|건수정보에 들어갈 예약어 조합 | |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 (`default`) `1(true)`:즉시 반영| ### Return Value ***none*** ### Example ```javascript //시트 하단에 페이지 네비게이션과 건수 정보(시트 하단 행번호/전체건수) 표시 sheet.setInfoRow( 1, [\"Paging\", \"Count\"], \"Bottom\", \"[BOTTOMDATAROW / TOTALROWS]\", 1); ``` ```javascript //시트 하단에 페이지 네비게이션과 사용자 정의 문자 표시 sheet.setInfoRow( 1, [\"Paging\",\"테스트 문자열 표시합니다.\"], \"Bottom\"); ``` ```javascript //시트 하단에 건수정보 표시 sheet.setInfoRow( 1, [\"Count\"], \"Bottom\", \"[BOTTOMDATAROW / TOTALROWS]\", 1); ```",
              "see": [
                {
                  "label": "InfoRowConfig cfg",
                  "url": "/docs/props/cfg/info-row-config"
                },
                {
                  "label": "SelectionSummary cfg",
                  "url": "/docs/props/cfg/selection-summary"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.96|StatusLabel 추가||core|8.1.0.97|paging2, viewCount, viewFormat, paging2Count 추가|"
            },
            "url": "docs/funcs/core/set-info-row.html"
          },
          {
            "cid": 727,
            "sid": "set-locale",
            "name": "set-locale",
            "label": "setLocale",
            "data": {
              "body": "> 시트에 설정된 언어의 종류를 변경하는 메소드입니다. ### Syntax ```javascript void setLocale( code, load, path, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |code|`string`|<span class='required'>필수</span>|시트에 설정할 언어 코드 (`'Ko'`, `'En'`, `'Jp'`, `'Cn'`, etc) (`default: 'Ko'`)| |load|`boolean`|<span class='optional'>선택</span>|해당 언어의 메시지가 없을때 동적으로 파일을 로드할지 여부 `0(false)`:`code`에 설정된 언어의 메시지가 없는 경우 파일 로드 하지 않음 (`default`) `1(true)`:`code`에 설정된 언어의 메시지가 없는 경우 `path`에 경로의 언어 파일을 동적으로 로드| |path|`string`|<span class='optional'>선택</span>|메시지 언어팩이 있는 경로 (`default: ibsheet.js 기준 locale 폴더`)| |render |`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 (`default`) `1(true)`:즉시 반영| ### Return Value ***boolean*** : 언어 코드의 적용 여부 (실패 시 `0(false)` 리턴) ### Example ```javascript // 시트에 사용될 메시지를 영문 전용 메시지로 변경 // ibsheet.js에서 locale/en.js 파일을 ajax 호출하여 적용 sheet.setLocale( 'En' ); ------------------------------------------------- <script src=\"/ibsheet/locale/ko.js\"></script> <script src=\"/ibsheet/locale/en.js\"></script> <script src=\"/ibsheet/locale/jp.js\"></script> // 시트에 사용될 메시지를 영문 전용 메시지로 변경 // en.js을 호출하였기 때문에 ajax 통신하지 않고 적용 sheet.setLocale( 'En' ); ------------------------------------------------- // 시트에 사용될 메시지를 영문 전용 메시지로 변경 //ibsheet 폴더의 en.js 파일을 ajax 호출하여 적용 sheet.setLocale({code : \"En\", path:\"/ibsheet/\"} ); ```",
              "see": [
                {
                  "label": "getLocale method",
                  "url": "./get-locale"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.2|기능 추가|"
            },
            "url": "docs/funcs/core/set-locale.html"
          },
          {
            "cid": 728,
            "sid": "set-merge-cancel",
            "name": "set-merge-cancel",
            "label": "setMergeCancel",
            "data": {
              "body": "> 셀의 병합(`span`)을 취소 합니다. > **[SearchMode](/web-service/manuals/ibsheet8/-/wikis/docs/props/cfg/search-mode):0에서는 구조 상의 문제로 스크롤 시 병합 상태가 유지되지 않기 때문에 해당 기능이 정상적으로 지원되지 않습니다.** ### Syntax ```javascript void setMergeCancel( row, col ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|병합 된 [데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|병합 된 열이름| ### Return Value ***none*** ### Example ```javascript //병합된 셀을 다시 분리(split) 함 sheet.setMergeCancel( sheet.getRowById(\"AR2\"), \"deptCd\"); ```",
              "see": [
                {
                  "label": "setMergeRange method",
                  "url": "./set-merge-range"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-merge-cancel.html"
          },
          {
            "cid": 729,
            "sid": "set-merge-range",
            "name": "set-merge-range",
            "label": "setMergeRange",
            "data": {
              "body": "> 특정 영역을 하나의 셀로 병합(`span`)합니다. > 시작셀(`row1, col1`) 부터 종료셀(`row2, col2`)까지를 사각형 형태로 병합합니다. > `row2`는 반드시 `row1`보다 아래 위치하고 있어야 하고, `col2`는 반드시 `col1`보다 우측에 위치하여야 합니다. > **[SearchMode](/docs/props/cfg/search-mode):0에서는 구조 상의 문제로 스크롤 시 병합 상태가 유지되지 않기 때문에 해당 기능이 정상적으로 지원되지 않습니다.** ### ![병합](/assets/imgs/setMergeRange.png \"특정 영역을 병합\") ### Syntax ```javascript void setMergeRange( row1, col1, row2, col2 ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row1 |`object`|<span class='required'>필수</span>|병합시작 [데이터 로우 객체](/docs/appx/row-object)| |col1 |`string`|<span class='required'>필수</span>|병합시작 열이름| |row2 |`object`|<span class='required'>필수</span>|병합종료 [데이터 로우 객체](/docs/appx/row-object)| |col2 |`string`|<span class='required'>필수</span>|병합종료 열이름| ### Return Value ***none*** ### Example ```javascript //AR2행부터 AR4행까지 deptCd열부터 empNm열까지 병합 sheet.setMergeRange( sheet.getRowById(\"AR2\"), \"deptCd\", sheet.getRowById(\"AR4\"), \"empNm\"); ```",
              "see": [
                {
                  "label": "setMergeCancel method",
                  "url": "./set-merge-cancel"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-merge-range.html"
          },
          {
            "cid": 730,
            "sid": "set-message",
            "name": "set-message",
            "label": "setMessage",
            "data": {
              "body": "> 시트에 새로운 메시지를 설정합니다. > 결과로 받은 객체를 통해 메시지의 설정/변경사항을 확인할 수 있습니다. ### Syntax ```javascript object setMessage( key, type, message ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |key|`string`|<span class='required'>필수</span>|메시지 이름| |type|`string`|<span class='required'>필수</span>|메시지 종류 `'Alert'`, `'Text'`(`default`) 중 선택| |message|`string`|<span class='required'>필수</span>|메시지 내용| ### Return Value ***object*** ### Example ```javascript // 시트에 메시지를 설정합니다. var result = sheet.setMessage(\"Warning\", \"Text\", \"잘못된 값입니다.\"); ```",
              "see": [
                {
                  "label": "getMessage method",
                  "url": "./get-message"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-message.html"
          },
          {
            "cid": 731,
            "sid": "set-row-value",
            "name": "set-row-value",
            "label": "setRowValue",
            "data": {
              "body": "> 행 단위별 데이터를 설정 합니다. > [getRowValue](/docs/funcs/core/get-row-value) 로 추출한 데이터를 행 단위별로 set 할 수 있습니다. ### Syntax ```javascript object setRowValue( row, data, render, noCalc ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|데이터를 설정할 대상 행(row)| |data|`object`|<span class='required'>필수</span>|json 형식의 object 데이터| |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| |noCalc|`boolean`|<span class='optional'>선택</span>|포뮬러 계산 여부 해당 기능을 `1(false)`로 설정할 경우 `setValue`시 포뮬러 계산이 이뤄지지 않습니다. 포뮬러를 반영하려면 이후 반드시 `calculate()`를 호출해줘야 됩니다.(`default:0`) | ### Return Value ***none*** ### Example ```javascript var row = sheet.getRowById(\"AR5\"); // ID가 AR5인 행 var data = sheet.getRowValue(row); // ID가 AR5인 행의 json 데이터 추출 var targetRow = sheet.getRowById(\"AR1\"); // ID가 AR1인 행 sheet.setRowValue(targetRow, data); // AR5 행의 데이터를 AR1 행에 set ```",
              "see": [
                {
                  "label": "getRowValue",
                  "url": "/docs/funcs/core/get-row-value"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.25|기능 추가||core|8.3.0.45|render, noCalc 인자 추가|"
            },
            "url": "docs/funcs/core/set-row-value.html"
          },
          {
            "cid": 732,
            "sid": "set-scale",
            "name": "set-scale",
            "label": "setScale",
            "data": {
              "body": "> 배율(zoom factor)을 설정하여 시트를 축소/확대 합니다. > 1.0보다 작은 값은 시트를 축소합니다. > 1.0보다 큰 값은 시트를 확대합니다. > **<mark>주의</mark> : 해당 속성은 `Menu`, `Dialog`, `Message`에는 영향을 주지 않습니다.** ### Syntax ```javascript void setScale( val, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |val|`number`|<span class='optional'>선택</span>|배율(zoom factor) 지정 (`default: 1.0`)| |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***none*** ### Example ```javascript //1.5배로 시트를 확대한다 sheet.setScale({ val: 1.5, render: 1 }); ```",
              "see": [
                {
                  "label": "[getScale method] (./get-scale)"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.11|기능 추가|"
            },
            "url": "docs/funcs/core/set-scale.html"
          },
          {
            "cid": 733,
            "sid": "set-scroll-left",
            "name": "set-scroll-left",
            "label": "setScrollLeft",
            "data": {
              "body": "> 가로스크롤 바를 pixel단위로 이동시킵니다. ### Syntax ```javascript boolean setScrollLeft( pos, section ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |pos|`number`|<span class='required'>필수</span>|x축 기준 이동할 거리| |section|`number`|<span class='optional'>선택</span>|틀고정을 기준으로 한 좌우 영역 `0`:좌측 `1`:가운데(`default`) `2`:우측| ### Return Value ***boolean*** : 이동여부 (동일한 위치로 pos 설정시 `0(false)` 리턴) ### Example ```javascript //현재 가로스크롤 바의 위치를 얻는다. var offset = sheet.getScrollLeft(1); //다시 렌더링 sheet.rerender(); //원래 위치로 이동시킴 sheet.setScrollLeft(offset, 1); ```",
              "see": [
                {
                  "label": "getScrollLeft method",
                  "url": "./get-scroll-left"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-scroll-left.html"
          },
          {
            "cid": 734,
            "sid": "set-scroll-top",
            "name": "set-scroll-top",
            "label": "setScrollTop",
            "data": {
              "body": "> 세로 스크롤 바를 pixel단위로 이동시킵니다. ### Syntax ```javascript boolean setScrollTop( pos ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |pos|`number`|<span class='required'>필수</span>|y축 기준 이동할 거리| ### Return Value ***boolean*** : 이동여부 (동일한 위치로 pos 설정시 `0(false)` 리턴) ### Example ```javascript //현재 세로스크롤 바의 위치를 얻는다. var offset = sheet.getScrollTop(); //다시 렌더링 sheet.rerender(); //원래 위치로 이동시킴 sheet.setScrollTop(offset); ```",
              "see": [
                {
                  "label": "getScrollTop method",
                  "url": "./get-scroll-top"
                },
                {
                  "label": "getScrollLeft method",
                  "url": "./get-scroll-left"
                },
                {
                  "label": "setScrollLeft method",
                  "url": "./set-scroll-left"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-scroll-top.html"
          },
          {
            "cid": 735,
            "sid": "set-selecting-cells",
            "name": "set-selecting-cells",
            "label": "setSelectingCells",
            "data": {
              "body": "> `SelectingCells`의 값을 동적으로 바꿀 수 있습니다. > 단, 멀티레코드([MultiRecord](/docs/props/cfg/multi-record))는 `SelectingCells` 의 값이 `0`으로 고정됩니다. ### Syntax ```javascript boolean setSelectingCells( mode ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |mode|`number`|<span class='optional'>선택</span>|선택할 모드 (`default: 1`)| ### Return Value ***boolean*** : 동적으로 바뀌었는지 확인. ### Example ```javascript // SelectingCells를 0 으로 바꿉니다. sheet.setSelectingCells(0); ```",
              "see": [
                {
                  "label": "SelectingCells cfg",
                  "url": "/docs/props/cfg/selecting-cells"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
            },
            "url": "docs/funcs/core/set-selecting-cells.html"
          },
          {
            "cid": 736,
            "sid": "set-selection-summary-info-element",
            "name": "set-selection-summary-info-element",
            "label": "setSelectionSummaryInfoElement",
            "data": {
              "body": "> 선택한 영역의 셀 개수 및 합계/평균 값 정보를 시트 외부의 Dom Element 에 표시합니다. ### Syntax ```javascript boolean setCountInfoElement ( element, opt ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |element |`object` \\| `string`|<span class='required'>필수</span>| 선택한 영역의 셀 개수 및 합계/평균 값 정보를 표시할 Dom Element 또는 해당 id| |opt |`object`|<span class='optional'>선택</span>| [SelectionSummary cfg](/docs/props/cfg/selection-summary) 옵션 정보 `Align`, `Width` 제외| ### Return Value ***boolean*** : `true`: 외부의 Dom Element 표시 성공 `false`: 실패 ### Example ```javascript var option = { \"Mode\": \"DelRow|AllRange\", \"SumFormat\":\"#,###개\" } // id가 'countElem'인 div 에 선택한 영역의 셀 개수 및 합계/평균 값 정보 출력 설정 sheet.setSelectionSummaryInfoElement ( 'countElem' , option ); sheet.setSelectionSummaryInfoElement ( docuemnt.getElementById('countElem') , option ); ```",
              "see": [
                {
                  "label": "InfoRowConfig cfg",
                  "url": "/docs/props/cfg/info-row-config"
                },
                {
                  "label": "SelectionSummary cfg",
                  "url": "/docs/props/cfg/selection-summary"
                },
                {
                  "label": "getSelectionSummaryInfoElement method",
                  "url": "./get-selection-summary-info-element"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.6|기능 추가|"
            },
            "url": "docs/funcs/core/set-selection-summary-info-element.html"
          },
          {
            "cid": 737,
            "sid": "set-size",
            "name": "set-size",
            "label": "setSize",
            "data": {
              "body": "> [(Cfg) Size](/docs/props/cfg/size) 설정을 동적으로 변경합니다 ### Syntax ```javascript void setSize( size ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |size|`string`|<span class='required'>필수</span>|설정할 `Size` 속성| ### Return Value ***none*** ### Example ```javascript // 시트 Cfg.Size 설정 \"Tiny\"로 변경 sheet.setSize('Tiny'); ``` ### Try it - [Demo of setSize](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Cfg/Size/)",
              "see": [
                {
                  "label": "Size cfg",
                  "url": "/docs/props/cfg/size"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.13|기능 추가|"
            },
            "url": "docs/funcs/core/set-size.html"
          },
          {
            "cid": 738,
            "sid": "set-string",
            "name": "set-string",
            "label": "setString",
            "data": {
              "body": "> 타입이 `Date`인 셀에 대해서 포맷이 적용된 날짜 문자열로 셀의 값을 수정합니다. > [EnumKeys](/docs/props/cell/enum-keys)가 정의되어 있는 `Enum, Radio` 타입인 셀은 지정된 `EnumKeys`값으로 저장됩니다. ### Syntax ```javascript void setString( row, col, val, render); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| |val |`string`|<span class='required'>필수</span>|입력값(셀 타입에 맞는 값) | |render |`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***none*** ### Example ```javascript var r5 = sheet.getRowById(\"AR5\"); //AR5 행에 값을 입력 sheet.setString( r5, \"StartDate\", \"2016/12/23\" ); ```",
              "see": [
                {
                  "label": "EnumKeys cell",
                  "url": "/docs/props/cell/enum-keys"
                },
                {
                  "label": "getValue method",
                  "url": "./get-value"
                },
                {
                  "label": "setValue method",
                  "url": "./set-value"
                },
                {
                  "label": "getString method",
                  "url": "./get-string"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.3|Enum 타입, Radio 타입의 Enum의 값을 EnumKeys와 매칭하는 기능 추가|"
            },
            "url": "docs/funcs/core/set-string.html"
          },
          {
            "cid": 739,
            "sid": "set-theme",
            "name": "set-theme",
            "label": "setTheme",
            "data": {
              "body": "> 시트가 사용하는 css 파일을 변경합니다. > 기본 사용 css 파일(`/default/main.css`)파일 대신해 사용할 css 파일의 경로와 css 내에 `prefix(접두어)`를 설정합니다. > 여기서 `css prefix`란 시트의 css 파일에 각 클레스 시작 이름입니다. > (`/default/main.css` 파일을 열어보면 모든 클레스 명이 `\".IB\"`로 시작하는걸 알 수 있습니다.) > 다른 테마를 사용하실 때는 반드시 이 `prefix명`도 기존과 달라야 합니다. ### Syntax ```javascript void setTheme( prefix, csspath, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |prefix|`string`|<span class='required'>필수</span>|css 파일 내에 사용할 접두어 (`default: \"IB\"`)| |csspath|`string`|<span class='required'>필수</span>|새로 적용할 css 파일 경로| |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***none*** **기본으로 제공하는 테마** |value|Prefix|Description| |---|---|---| |`default` 폴더|`IB`(`default`)|시트에서 사용하는 이미지를 svg 제공| |`default_img` 폴더|`IB`|시트에서 사용하는 이미지를 png, gif 제공| |`grace` 폴더|`IBGR`|시트에서 사용하는 이미지를 svg 제공| |`gray` 폴더|`IBGY`|시트에서 사용하는 이미지를 svg 제공| |`material` 폴더|`IBMR`|시트에서 사용하는 이미지를 svg 제공| |`mint` 폴더|`IBMT`|시트에서 사용하는 이미지를 svg 제공| |`simple` 폴더|`IBSP`|시트에서 사용하는 이미지를 svg 제공| ### Example ```javascript //partnerStyle.css 파일을 시트의 테마로 적용한다. sheet.setTheme(\"SH\", \"./newTheme/partnerStyle.css\", 1); ```",
              "see": [
                {
                  "label": "Style cfg",
                  "url": "/docs/props/cfg/style"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/set-theme.html"
          },
          {
            "cid": 740,
            "sid": "set-total-row-count",
            "name": "set-total-row-count",
            "label": "setTotalRowCount",
            "data": {
              "body": "> [InfoRowConfig cfg](/docs/props/cfg/info-row-config) 기능 사용시 표시되는 전체 데이터 행수를 변경합니다. > DB에서 가저온 건수와 다르게 표시하고 싶을때 유용합니다. ### Syntax ```javascript void setTotalRowCount ( count ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |count |`number`|<span class='required'>필수</span>|전체 데이터 행수로 표시할 숫자| ### Return Value ***none*** ### Example ```javascript // 전체 데이터 행수를 변경 sheet.setTotalRowCount ( 2000 ); ```",
              "see": [
                {
                  "label": "InfoRowConfig cfg",
                  "url": "/docs/props/cfg/info-row-config"
                },
                {
                  "label": "getTotalRowCount method",
                  "url": "./get-total-row-count"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
            },
            "url": "docs/funcs/core/set-total-row-count.html"
          },
          {
            "cid": 741,
            "sid": "set-value",
            "name": "set-value",
            "label": "setValue",
            "data": {
              "body": "> 셀의 값을 지정한 값으로 수정합니다. > 편집상태에서 `setValue`를 할 경우, `onEndEdit` 이벤트가 발생합니다. > `ignoreOnEndEdit` 을 사용하여, 이벤트를 발생을 막을 수 있습니다. ### Syntax ```javascript boolean setValue( row, col, val, render, ignoreOnEndEdit, noCalc ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col|`string`|<span class='required'>필수</span>|열이름| |val|`number`\\|`string`|<span class='required'>필수</span>|입력값(셀 타입에 맞는 값)| |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| |ignoreEvent|`object|boolean`|<span class='optional'>선택</span>|`setValue`시 발생하는 이벤트를 발생시킬지 여부를 제어하는 옵션입니다. Json 형태로 옵션 세팅이 가능하며, 해당 이벤트 이름을 key 값으로 넣고, true를 리턴할시 해당되는 이벤트가 발생하지 않습니다. 해당 옵션을 true/false로 설정할 경우 기존의 `ignoreOnEndEdit`으로 동작합니다.| |noCalc|`boolean`|<span class='optional'>선택</span>|포뮬러 계산 여부 해당 기능을 `1(false)`로 설정할 경우 `setValue`시 포뮬러 계산이 이뤄지지 않습니다. 포뮬러를 반영하려면 이후 반드시 `calculate()`를 호출해줘야 됩니다.(`default:0`) | ### ignoreEvent Options | Name | Type | Required | Description | |------|------|----------|-------------| | OnChange| `boolean` | <span class=\"optional\">선택</span> | `setValue`시 발생하는 `OnChange` 이벤트 발생 여부를 제어합니다. true 리턴시 해당 이벤트가 발생하지 않습니다. (`default: 0(false)`) | | OnSame| `boolean` | <span class=\"optional\">선택</span> | `setValue`시 발생하는 `OnSame` 이벤트 발생 여부를 제어합니다. true 리턴시 해당 이벤트가 발생하지 않습니다. (`default: 0(false)`) | |onEndEdit| `boolean` | <span class=\"optional\">선택</span> | 편집상태에서 `setValue`를 할 경우, 기본적으로 `onEndEdit` 이벤트가 발생합니다. 이때 발생하는 `onEndEdit` 이벤트의 발생 여부를 제어합니다. true를 리턴할 경우, 해당 이벤트가 발생하지 않습니다. (`default: 0(false)`)| ### ignoreEvent를 true/false로 설정할 경우 `ignoreEvent`를 true/false로 설정할 경우, 기존의 5번째 인자 옵션인 `ignoreOnEndEdit`으로 동작합니다. `ignoreOnEndEdit`은 기본적으로 `ignoreEvent`의 `onEndEdit` 인자와 동일하게 동작하며 true를 설정할 경우 `onEndEdit` 이벤트가 발생하지 않게 동작합니다. 다만 해당 옵션은 deprecated되었으니 `ignoreEvent` 사용을 권장하는 바입니다. ### Return Value ***boolean*** : 값의 변경 여부 (값이 변경되면 `1(true)`, 변경되지 않으면(기존값과 동일한 경우) `0(false)`) ### Example ```javascript var r5 = sheet.getRowById(\"AR5\"); //AR5 행에 값을 입력 sheet.setValue( r5, \"StartDate\", \"20160105\"); sheet.setValue({row:r5, col:\"EndDate\", val:\"20160315\", render:1}); ```",
              "see": [
                {
                  "label": "getValue method",
                  "url": "./get-value"
                },
                {
                  "label": "getString method",
                  "url": "./get-string"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.11|`ignoreOnEndEdit` 추가||core|8.2.0.21|`ignoreEvent` 추가, `ignoreOnEndEdit` deprecated 처리||core|8.3.0.34|`noCalc` 추가|"
            },
            "url": "docs/funcs/core/set-value.html"
          },
          {
            "cid": 742,
            "sid": "show-calendar",
            "name": "show-calendar",
            "label": "showCalendar",
            "data": {
              "body": "> 메소드를 통해 시트 내부에서 달력 컨트롤을 사용하실 수 있습니다. ### Syntax ```javascript object showCalendar(row, col, calendar, pos, func, date, always); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| |calendar|`object`|<span class='optional'>선택</span>|캘린더 구성하는 JSON 객체 ([showCalendar](/docs/static/show-calendar)의 `calOption` 참고) |pos|`object`|<span class='optional'>선택</span>|보여질 달력의 좌우/상하 위치 조정 ex) `{x:10, y:10}` |func|`function`|<span class='optional'>선택</span>|컨택스트 메뉴에서 사용자가 선택시 `callback` 함수 |date|`string`|<span class='optional'>선택</span>|보여질 달력의 최초 날짜 지정 |always|`boolean`|<span class='optional'>선택</span>|이미 달력이 보여지고 있다면 계속 보여줄지에 대한 여부 `0(false)`:달력 보임/감춤에 대한 Toogle (`default`) `1(true)`:달력 보임| ### Return Value ***object*** : 달력 객체 ### Example ```javascript // 현재 포커스가 된 행의 sDate 컬럼에 달력을 생성합니다. sheet.showCalendar(sheet.getFocusedRow(), \"sDate\", {Date: \"2020-06-02\", Format: \"yyyy-MM-dd\"}); ```",
              "see": [
                {
                  "label": "showCalendar static",
                  "url": "/docs/static/show-calendar"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가|"
            },
            "url": "docs/funcs/core/show-calendar.html"
          },
          {
            "cid": 743,
            "sid": "show-col",
            "name": "show-col",
            "label": "showCol",
            "data": {
              "body": "> 감췄던 열을 보이게 합니다. > 시트 생성시 `options.Cols = [{Visible:0}];`으로 생성된 열은 최초로 보여질 때 시간이 걸릴 수 있습니다. > 여러 컬럼을 `show` 할시 `render` 인자를 `false` 로 하여 작업 후에는 `rerender` 를 무조건 호출하셔야 합니다. ### Syntax ```javascript void showCol( col, merge, render ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |col |`string`|<span class='optional'>선택</span>|보여줄 열이름 **속성값을 설정하지 않는 경우, [hideCol()](./hide-col)함수에서 `userHidden:1`을 설정해 감춘 열만 모두 보여지게 됩니다.**| |merge|`boolean`|<span class='optional'>선택</span>| 열을 보여주면서 자동 머지합니다. <span style='color:red'>많은 데이터가 있는 시트에서 실행 시 느려질 수 있습니다.</span> `0(false)`:병합 실행 안함 (`default`) `1(true)`:병합 실행| |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***none*** ### Example ```javascript // 감춰진 \"CPT_NM\" 열을 보이게 한다. sheet.showCol( \"CPT_NM\" ); // `render` 인자를 `false` 로 하여 사용합니다. sheet.showCol( \"CPT_NM\", false, false ); // 반드시 rerender 를 하셔야 합니다. sheet.rerender(); ```",
              "see": [
                {
                  "label": "hideCol method",
                  "url": "./hide-col"
                },
                {
                  "label": "onShowCol event",
                  "url": "/docs/events/on-show-col"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.6|`merge` 인자 추가||core|8.0.0.17|`render` 인자 추가|"
            },
            "url": "docs/funcs/core/show-col.html"
          },
          {
            "cid": 744,
            "sid": "show-dialog",
            "name": "show-dialog",
            "label": "showDialog",
            "data": {
              "body": "> 시트의 특정 셀 위에 layer팝업 형태의 다이어로그를 생성합니다. > 다이얼로그에 자세한 설정방법은 [appendix Dialog참고](/docs/appx/dialog)를 참고해 주세요. ### Syntax ```javascript object showDialog( row, col, dialog, pos, always ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|다이얼로그를 띄울 위치의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|<span class='required'>필수</span>|다이얼로그를 띄울 위치의 열이름| |dialog|`object`|<span class='required'>필수</span>|`dialog`에 대한 초기화 설정([appendix Dialog참고](/docs/appx/dialog))| |pos|`object`|<span class='optional'>선택</span>|다이얼로그가 표시될 위치 offset([appendix Position참고](/docs/appx/position))| |always|`boolean`|<span class='optional'>선택</span>|이미 해당 셀에 오픈된 다이얼로그가 있는 경우의 행동 `0(false)`:다이얼로그 열기/닫기에 대한 Toogle (`default`) `1(true)`:닫지 않음| ### Return Value ***dialog object*** 다이얼로그 객체 ### Example ```javascript //첫번째 행에 간단한 형태의 Dialog를 오픈한다. var opt = { row : sheet.getFirstVisibleRow(), col : \"EMP_NM\", dialog : { \"Modal\":1, \"Body\":\"<div>퇴직금 정산이 완료되었습니다. 다음 절차로 진행하시겠습니까?</div>\" +\"<div><button type='button' onclick='func_process(1)'>계속</button>\" +\"<button type='button' onclick='func_process(0)'>중단</button></div>\" } }; sheet.showDialog(opt); function func_process(b){ if(b){ //계속 document.forms[0].submit(); }else{ //중단 sheet.Dialog.close(); } } ```",
              "see": [
                {
                  "label": "showDialog static",
                  "url": "/docs/static/show-dialog"
                },
                {
                  "label": "Dialog appendix",
                  "url": "/docs/appx/dialog"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/show-dialog.html"
          },
          {
            "cid": 745,
            "sid": "show-filter-dialog",
            "name": "show-filter-dialog",
            "label": "showFilterDialog",
            "data": {
              "body": "> 헤더에 필터 다이얼로그 아이콘을 생성합니다. ### Syntax ```javascript boolean showFilterDialog(); ``` ### Return Value ***none*** ### Example ```javascript // 헤더행에 필터 다이얼로그 아이콘을 생성합니다. sheet.showFilterDialog(); ```",
              "see": [
                {
                  "label": "UseFilterDialog",
                  "url": "/docs/props/cfg/use-filter-dialog"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.3.0.1|기능 추가|"
            },
            "url": "docs/funcs/core/show-filter-dialog.html"
          },
          {
            "cid": 746,
            "sid": "show-filter-row",
            "name": "show-filter-row",
            "label": "showFilterRow",
            "data": {
              "body": "> 헤더 밑에 필터 행을 보여지게 합니다. > 필터를 통해 감춰지는 행은 내부적으로 [Visible](/docs/props/row/visible):`0(false)` 값이 설정됩니다. > 예약어의 사용을 원하지 않을 경우 [DisableKeyWord](/docs/props/cfg/disable-keyword) 를 통해 예약어 기능을 off 할 수 있습니다. > 문자열 컬럼에서는 `','(and검색)` 나 `';'(or검색)` 을 사용하실 수 있습니다. > - ex1. `사과;복숭아` ==> 사과나 복숭아 글자를 포함한 행만 남기고 감춤 > - ex2. `사과,복숭아` ==> 사과 복숭아가 함께 있는 행만 남기고 감춤 > 숫자나 날짜 컬럼에 대해서는 `'~'` 를 통해 범위를 설정 할 수 있습니다. 필터 행의 기호(연산자) 1(같음), 2(같지않음) 에서만 사용 할 수 있고 다른 기호 에서는 사용 할 수 없습니다. > - ex1. `20170101~20181231` ==> 2017년 1월 1일 부터 2018년 12월 31일 까지만 남기고 모두 감춤 > - ex2. `20241022~20241025;20241031` ==> 2024년 10월 22일 부터 2024년 10월 25일 까지의 데이터와 2024년 10월 31일의 데이터만 남기고 모두 감춤 > - ex3. `199000~488000` ==> 199000 부터 488000 사이의 데이터만 남기고 모두 감춤 > - ex4. ` 99000;199000~488000` ==> 99000의 데이터와 199000 부터 488000 사이의 데이터만 남기고 모두 감춤 > 구분자는 메세지 파일에서 변경 가능합니다. > \"`ValueSeparator`\": \"`;`\" //or 구분자 > \"`ValueSeparatorHtml`\": \"`;`\" //or 구분자 > \"`ValueAndSeparator`\": \"`,`\" //and 구분자 > \"`RangeSeparator`\": \"`~`\" //범위 연산자 > \"`RangeSeparatorHtml`\": \"`~`\" //범위 연산자 ### Syntax ```javascript boolean showFilterRow(); ``` ### Return Value ***boolean*** : 필터 행 보임 여부 (필터 행이 이미 보여지고 있거나, 보일 수 없는 경우 `0(false)` 리턴) ### Example ```javascript //필터 행을 보여 줍니다. sheet.showFilterRow(); ```",
              "see": [
                {
                  "label": "hideFilterRow method",
                  "url": "./hide-filter-row"
                },
                {
                  "label": "DisableKeyWord",
                  "url": "/docs/props/cfg/disable-keyword"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/show-filter-row.html"
          },
          {
            "cid": 747,
            "sid": "show-fixed-rows",
            "name": "show-fixed-rows",
            "label": "showFixedRows",
            "data": {
              "body": "> `Head` 행, `Foot` 행을 생성합니다. > 인자로 전달하는 `Head,Foot` object 객체의 구조는 [시트 객체구조](/docs/appx/init-structure) 를 참고해주세요. > `object` 의 인자 중 `Kind` 를 통해 `Head` 혹은 `Foot` 을 생성할 수 있습니다. ### Syntax ```javascript void showFixedRows( fixedobject ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |fixedobject |`object`|<span class='required'>필수</span>|object 객체 인자 중 `Kind` 필수 (`Foot` or `Head`)| ### Return Value ***boolean*** : `Head` 행 `Foot` 행 생성 여부 (잘못된 인자 값에 의해 수행되지 못하는 경우 `0(false)` 리턴) ### Example ```javascript // 1. Foot 행 1개 생성 var obj1 = [{ Kind : 'Foot', id: \"myFootRow\", \"chk\": { \"Type\": \"Text\", \"Value\": \"\", \"CanEdit\": 0, \"CanFocus\": 0 },... }]; sheet.showFixedRows(obj1); // 2. Head 행 1개, Foot 행 1개 생성 var obj2 = [{Kind : 'Head', ... },{Kind : 'Foot', ... }]; sheet.showFixedRows(obj2); ```",
              "see": [
                {
                  "label": "시트 객체구조",
                  "url": "/docs/appx/init-structure"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.2.0.4|기능 추가|"
            },
            "url": "docs/funcs/core/show-fixed-rows.html"
          },
          {
            "cid": 748,
            "sid": "show-group-row",
            "name": "show-group-row",
            "label": "showGroupRow",
            "data": {
              "body": "> 그룹행을 생성합니다. ### Syntax ```javascript void showGroupRow( cols, format ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |cols |`string or object`|<span class='optional'>선택</span>|그룹핑 하고자 하는 컬럼. 단일로 설정할 경우 문자열로 설정하고, 여러개를 설정할 경우 배열로 설정합니다.| |format |`string`|<span class='optional'>선택</span>|그룹 기준 컬럼의 데이터 포맷을 설정합니다. - {%s} : 해당 셀의 값 - - {%c} : 자식노드 개수| ### Return Value ***boolean*** : 설정 완료 여부 ### Example ```javascript // 그룹행을 생성합니다. sheet.showGroupRow(); // 그룹행을 생성하고 sName 컬럼으로 그룹핑합니다. sheet.showGroupRow(\"sName\"); // 그룹행을 생성하고 sName, sPrice 컬럼으로 그룹핑합니다. sheet.showGroupRow([\"sName\", \"sPrice\"]); // 그룹행을 생성하고 그룹핑시 '{%s} <font color=\"gray\">({%c}건)</font>' 포맷을 적용합니다. sheet.showGroupRow(null, '{%s} <font color=\"gray\">({%c}건)</font>'); // 그룹행을 생성하고, sName 컬럼으로 그룹핑하며, 그룹핑시 '{%s} <font color=\"gray\">({%c}건)</font>' 포맷을 적용합니다. sheet.showGroupRow(\"sName\", '{%s} <font color=\"gray\">({%c}건)</font>'); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.3.0.9|기능 추가|"
            },
            "url": "docs/funcs/core/show-group-row.html"
          },
          {
            "cid": 749,
            "sid": "show-hint-4",
            "name": "show-hint",
            "label": "showHint",
            "data": {
              "body": "> 셀의 힌트를 활성화 합니다. ### ![힌트활성화](/assets/imgs/hint1.png \"마우스 커서가 셀에 올라갔을때 힌트를 통해 감춰진 부분이 보여짐\") [힌트 예시] ### Syntax ```javascript boolean showHint( row, col, staticMode ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| |staticMode|`boolean`|<span class='optional'>선택</span>|`0(false)` : 시트 위로 마우스 커서가 올라가면(헤더든 데이터든) 기존 활성화 되었던 힌트가 비활성화 됨. (`default`) `1(true)` : 마우스 커서와 무관하게 다른 셀에서 힌트가 활성화 되었을 때, 기존 힌트가 비활성화 됨. ### Return Value ***boolean*** : 힌트가 활성화 되면 `true`, 활성화 되지 않으면 `false` ### Example ```javascript var r5 = sheet.getRowById(\"AR8\"); //AR8 행 \"CPT_WASH_TI_NM\" 열에 힌트를 보여준다. sheet.showHint(r5, \"CPT_WASH_TI_NM\"); ```",
              "see": [
                {
                  "label": "hideHint method",
                  "url": "./hide-hint"
                },
                {
                  "label": "onHint event",
                  "url": "/docs/events/on-show-hint"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.1|인자명 변경(`static`->`staticMode`)|"
            },
            "url": "docs/funcs/core/show-hint.html"
          },
          {
            "cid": 750,
            "sid": "show-memo-dialog",
            "name": "show-memo-dialog",
            "label": "showMemoDialog",
            "data": {
              "body": "> 특정 헤더 셀에 메모를 입력할 수 있는 다이얼로그 창을 띄웁니다. > 메모기능은 시트의 헤더 셀에만 설정 가능합니다. > 메모 값 설정을 위해서는 [MemoId cfg](/docs/props/cfg/memo-id) 가 설정되어 있어야 합니다. > 하나의 헤더 셀에 하나의 메모 값만 설정 가능합니다. > 메모 데이터는 브라우저의 localStorage에 관리됩니다. ![MemoId](/assets/imgs/showMemoDialog.png) ### Syntax ```javascript boolean showMemoDialog( row , col ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col|`string`|<span class='required'>필수</span>|열이름 ### Return Value ***boolean*** : 다이얼로그 띄우기 성공여부 (메모 입력 다이얼로그가 정상적으로 띄워졌으면 true, 실패했을 경우 false 리턴) ### Example ```javascript // 특정 헤더 셀에 메모를 입력하기 위한 다이얼로그를 띄운다. sheet.showMemoDialog(sheet.getHeaderRows()[0], \"sCorp\"); ```",
              "see": [
                {
                  "label": "MemoId cfg",
                  "url": "/docs/props/cfg/memo-id"
                },
                {
                  "label": "removeMemo method",
                  "url": "./remove-memo"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.19|기능 추가|"
            },
            "url": "docs/funcs/core/show-memo-dialog.html"
          },
          {
            "cid": 751,
            "sid": "show-menu",
            "name": "show-menu",
            "label": "showMenu",
            "data": {
              "body": "> 특정 셀 위치에 컨텍스트 메뉴을 보여 줍니다. ### ![컨텍스트 메뉴](/assets/imgs/showMenu.png \"마우스 커서가 있는 위치에 컨텍스트메뉴를 띄움\") ### Syntax ```javascript mixed showMenu( row, col, menu, pos, func, init, always, cursor ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='required'>필수</span>|열이름| |menu|`object`|<span class='required'>필수</span>|컨텍스트 메뉴를 구성하는 JSON 객체 |pos|`object`|<span class='optional'>선택</span>|보여질 메뉴의 좌우/상하 위치 조정 ex) {x:10, y:10} |func|`function`|<span class='optional'>선택</span>|컨택스트 메뉴에서 사용자가 선택시 `callback` 함수 |init|`array[string]`|<span class='optional'>선택</span>|메뉴 내 Enum, Edit, Bool 타입인 아이템들의 초기값 설정 Bool : 메뉴 아이템 Name의 배열로 체크 표시 - ex) [\"aa\",\"bb\"]는 Name이 aa, bb인 체크박스들은 체크 표시. Edit, Bool : 메뉴 아이템 Name과 Value의 key-value 문자열 배열 - ex) 1[\"aa:1\",\"bb:2\"]는 Name이 aa, bb인 아이템에 1,2가 각 화면에 표시. |always|`boolean`|<span class='optional'>선택</span>|이미 메뉴가 보여지고 있다면 계속 보여줄지에 대한 여부 `0(false)`:컨텍스트 메뉴 보임/감춤 Toogle (`default`) `1(true)`:컨텍스트 메뉴 보임| |cursor|`boolean`|<span class='optional'>선택</span>|메뉴의 `Value` 값과 셀 값이 일치하는 경우 해당 메뉴에 포커스를 위치 시킬 지에 대한 여부 `0(false)`:포커스 발생 시키지 않음 (`default`) `1(true)`: 메뉴의 `Value`와 셀 값이 일치하는 경우 해당 메뉴에 포커스 발생 **<mark>주의</mark> : 해당 기능은 `init` 기능과 같이 사용할 수 없습니다. `init` 기능을 사용하는 경우 `cursor` 기능은 무시됩니다.** ### Return Value ***mixed( `object` )*** 메뉴가 나타나면 메뉴 객체 ex( {Items:[...],Names:[...]} ) 안나타나는 경우(이미 보여지던 메뉴가 있어서 닫히는 경우)에는 `null`이 리턴 ### Example ```javascript function popup(){ //메뉴 구조 var menu = { Items : [ // 메뉴에서 아이템들간 트리 구조를 형성합니다. { Text:'결제문서 상신',Name:\"A01\"}, { Text:'결제문서 임시저장',Name:\"A02\"}, { Text:'결제문서 파기/제거',Name:\"A03\"} ] }; //특정 셀 위에 컨텍스트 메뉴를 보여준다. sheet.showMenu( { row:sheet.getRowById(\"AR2\"), col:\"image02\", menu:menu, func:function(evt){ if(evt.Name == \"A01\"){ //상신작업 } } }); } ```",
              "see": [
                {
                  "label": "Menu appendix",
                  "url": "/docs/appx/menu"
                },
                {
                  "label": "closeDialog method",
                  "url": "./close-dialog"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.9|`cursor` 기능 추가|"
            },
            "url": "docs/funcs/core/show-menu.html"
          },
          {
            "cid": 752,
            "sid": "show-message-time",
            "name": "show-message-time",
            "label": "showMessageTime",
            "data": {
              "body": "> 시트 영역 가운데에 특정 시간동안 메세지 `Dialog`를 띄웁니다. > 특정 시간 이후에는 자동으로 메세지가 `Dialog` 가 닫힙니다. > **`time` 속성을 설정하지 않으면 메세지 아래 반투명 레이어가 생기고 확인 버튼을 누를때까지 닫히지 않습니다. (alert같이 동작)** > `type` 속성은 `time` 속성을 설정하지 않으면 `1(true)`이 기본으로 동작하고, `time` 속성을 설정하면 `0(false)`이 기본으로 동작한다 > 메세지 `Dialog` 오픈 전에 [onShowMessage event](/docs/events/on-show-message) 이벤트가 발생합니다. ### ![showMessageTime](/assets/imgs/showMessageTime.png \"showMessageTime\") ### Syntax ```javascript void showMessageTime( message, time, func, buttons, importance, type ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |message|`string`|<span class='required'>필수</span>|시트 위에 다이얼로그 형태로 보여질 메세지 내용| |time|`number`|<span class='optional'>선택</span>|메세지가 보여질 시간(ms단위). 설정을 안하거나 `0`으로 설정시 계속 보여짐| |func|`function`|<span class='optional'>선택</span>|메세지에서 표시되는 버튼을 눌렀을 때 콜백함수 버튼의 순서대로 `1,2,3,4` 숫자가 `args`로 넘어옴 ex) `func`:function(args) { &nbsp;&nbsp;if(args===1){alert('첫번째버튼 클릭'} }| |buttons|`array[string]`|<span class='optional'>선택</span>|메세지가 표시될때 같이 보여질 버튼들 정의 ex) `buttons`:['계속', '중단']| |importance|`number`|<span class='optional'>선택</span>|메세지 중요도 (시트 초기화시 `Cfg`설정에 `SuppressMessage`(`default: 3`) 속성값보다 커야만 화면에 보여짐)| |type|`number`|<span class='optional'>선택</span>|메세지 다이얼로그 생성시 시트 위에 반투명한 레이어로 덮을지 여부 `0`:안덮음 (`default`) `1`:덮음| ### Return Value ***none*** ### Example ```javascript function popup() { sheet.showMessageTime({ message: \"<span style='color:black'>상신하시겠습니까?</span>\", time: 10000, buttons: [\"OK\", \"취소\"], func: function (args) { if (args==1) { //OK에 대한 처리 } else if (args==2) { //취소에 대한 처리 } } }); } ```",
              "see": [
                {
                  "label": "SuppressMessage cfg",
                  "url": "/docs/props/cfg/suppress-message"
                },
                {
                  "label": "showMessage method",
                  "url": "./show-message"
                },
                {
                  "label": "hideMessage method",
                  "url": "./hide-message"
                },
                {
                  "label": "onShowMessage event",
                  "url": "/docs/events/on-show-message"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.27|`type` 기능 추가|"
            },
            "url": "docs/funcs/core/show-message-time.html"
          },
          {
            "cid": 753,
            "sid": "show-message",
            "name": "show-message",
            "label": "showMessage",
            "data": {
              "body": "> 시트 영역 가운데에 메세지 `Dialog`를 띄웁니다. > 메세지를 제거하기 전까지는 시트는 비활성화 됩니다 > 특정 시간 이후에 메세지를 닫거나, 메세지에 확인 등에 버튼을 표시하려면 [showMessageTime()](./show-message-time)함수를 참고해 주세요. > 메세지 `Dialog` 오픈 전에 [onShowMessage event](/docs/events/on-show-message) 이벤트가 발생합니다. ### ![showMessage](/assets/imgs/showMessage.png \"시트 영역 위에 메세지 다이얼로그를 띄움\") ### Syntax ```javascript void showMessage( message, importance, type ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |message|`string`|<span class='required'>필수</span>|시트 위에 다이얼로그 형태로 보여질 메세지 내용| |importance|`number`|<span class='optional'>선택</span>|메세지 중요도 [ 시트 초기화시 `Cfg`설정에 `SuppressMessage`(`default: 3`) 속성값보다 커야만 화면에 보여짐 ]| |type|`number`|<span class='optional'>선택</span>|메세지 다이얼로그 생성시 시트 위에 반투명한 레이어로 덮을지 여부 `0`:안덮음 (`default`) `1`:덮음| ### Return Value ***none*** ### Example ```javascript function popup(){ sheet.showMessage({message:\"<span style='color:black'>결제기한이 만료되었습니다.</span>\", importance:4, type:1}); } ```",
              "see": [
                {
                  "label": "showMessageTime method",
                  "url": "./show-message-time"
                },
                {
                  "label": "hideMessage method",
                  "url": "./hide-message"
                },
                {
                  "label": "SuppressMessage cfg",
                  "url": "/docs/props/cfg/suppress-message"
                },
                {
                  "label": "onShowMessage event",
                  "url": "/docs/events/on-show-message"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/show-message.html"
          },
          {
            "cid": 754,
            "sid": "show-popup-menu",
            "name": "show-popup-menu",
            "label": "showPopupMenu",
            "data": {
              "body": "> 마우스 커서가 있는 위치에 컨텍스트 메뉴을 보여 줍니다. > static [showMenu](/docs/static/show-menu)와 기능은 동일하나, `callback` 이벤트에서 this를 통해 호출한 시트객체를 얻을 수 있다는 점이 다릅니다. ### ![showPopupMenu](/assets/imgs/showPopupMenu.png \"마우스 커서가 있는 위치에 컨텍스트메뉴를 띄움\") ### Syntax ```javascript void showPopupMenu( menu, func ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |menu|`object`|<span class='required'>필수</span>|컨텍스트 메뉴를 구성하는 `JSON 객체`| |func|`function`|<span class='optional'>선택</span>|컨택스트 메뉴에서 사용자가 선택시 `callback` 함수| ### Return Value ***none*** ### Example ```javascript //화면 전체에서 마우스 우클릭시 컨텍스트 메뉴를 보여줍니다. $(document).ready(function(){ //마우스 우측 클릭시 이벤트 document.oncontextmenu = function(evt){ evt.preventDefault(); //메뉴 구조 var menu = { Items : [ // 메뉴에서 아이템들간 트리 구조를 형성합니다. { Text:'결제문서 상신',Name:\"A01\"}, { Text:'결제문서 임시저장',Name:\"A02\"}, { Text:'결제문서 파기/제거',Name:\"A03\"} ] }; //컨텍스트 메뉴를 보여준다. sheet.showPopupMenu( menu , function(str){ switch(str.Name){ case \"A01\": //결제 상신 작업 break; case \"A02\": //임시 저장 작업 break; case \"A03\": //파기/제거 작업 break; }//end swicth }); return false; }//end oncontextmenu });//end ready ```",
              "see": [
                {
                  "label": "closeDialog method",
                  "url": "./close-dialog"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/show-popup-menu.html"
          },
          {
            "cid": 755,
            "sid": "show-popup-sheet",
            "name": "show-popup-sheet",
            "label": "showPopupSheet",
            "data": {
              "body": "> 특정 셀 위치에 시트 객체를 다이얼로그 형태로 띄웁니다. ### ![showPopupSheet](/assets/imgs/showPopupSheet.png \"마우스 커서가 있는 위치에 시트객체를 띄움\") ### Syntax ```javascript void showPopupSheet( row, col, data, width, height, dialog, pos); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='optional'>선택</span>|팝업을 띄울 [데이터 로우 객체](/docs/appx/row-object) (`row, col` 중에 한 인자라도 없으면 시트 가운데에 생성)| |col |`string`|<span class='optional'>선택</span>|팝업을 띄울 열이름 (`row, col` 중에 한 인자라도 없으면 시트 가운데에 생성)| |data|`object`|<span class='required'>필수</span>|팝업으로 보여질 시트객체 (객체에 대한 초기화 및 데이터 설정)| |width|`number`|<span class='optional'>선택</span>|팝업의 너비| |height|`number`|<span class='optional'>선택</span>|팝업의 높이| |dialog|`object`|<span class='optional'>선택</span>|부모 팝업 객체| |pos|`object`|<span class='optional'>선택</span>|보여질 메뉴의 좌우/상하 위치 조정 ex) `{x:10, y:10}`| ### Return Value ***object*** 생성된 시트 객체 ### Example ```javascript function popup(){ // popup으로 나타날 시트에 대한 정의 // PSheet 는 showPopupSheet 를 호출하는 시트객체 입니다. 해당 예제에서는 이를 PSheet 라는 변수 이름으로 정의했을 뿐 입니다. var sheetInfo = {}; sheetInfo.Cols = [ {Header: \"사원번호\", Type:\"Text\", MinWidth:80, Name:\"EMPNO\", Align:\"Center\", CanEdit:0}, {Header: \"사원명\", Type:\"Text\", MinWidth:80, Name:\"EMPNM\", Align:\"Center\", CanEdit:0}, {Header: \"부서명\", Type:\"Text\", MinWidth:80, Name:\"DEPT\", Align:\"Center\", CanEdit:0}, {Header: \"직급\", Type:\"Text\", Width:80, Name:\"POSITION\", Align:\"Center\", CanEdit:0} ]; sheetInfo.Events = { //팝업시트에서 더블클릭시 행동 \"onDblClick\":function(evt){ if(PSheet.getFocusedRow()){ PSheet.setValue( PSheet.getFocusedRow() , \"empNm\" , evt.sheet.getValue(evt.row,\"EMPNM\") , 1); PSheet.closeDialog(); } } }; sheetInfo.Data = [ {EMPNO:\"01514\",EMPNM:\"한득열\",DEPT:\"총무\",POSITION:\"부장\"}, {EMPNO:\"04140\",EMPNM:\"김하임\",DEPT:\"기획\",POSITION:\"부장\"}, {EMPNO:\"01794\",EMPNM:\"이수용\",DEPT:\"기획\",POSITION:\"대리\"}, {EMPNO:\"03414\",EMPNM:\"전수학\",DEPT:\"예산\",POSITION:\"과장\"} ]; var popSheet = PSheet.showPopupSheet( {row:PSheet.getRowById(\"AR2\"),col:\"empNm\",data:sheetInfo,width:300,height:400}); } ```",
              "see": [
                {
                  "label": "closeDialog method",
                  "url": "./close-dialog"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/show-popup-sheet.html"
          },
          {
            "cid": 756,
            "sid": "show-progress",
            "name": "show-progress",
            "label": "showProgress",
            "data": {
              "body": "> 시트 영역 가운데에 진행상태를 표시하는 `Dialog`를 띄웁니다. > 다이얼로그를 제거하기 전까지 시트는 비활성화 됩니다. > [hideMessage](./hide-message)를 호출하시면 다이얼로그가 제거됩니다. > [SuppressMessage](/docs/props/cfg/suppress-message) : 0, 1 에서만 동작합니다. ### ![showProgress](/assets/imgs/showProgress.png \"시트 영역 위에 진행율 다이얼로그를 띄움\") ### Syntax ```javascript void showProgress( caption, text, cancel, pos, cnt ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |caption|`string`|<span class='required'>필수</span>|다이얼로그의 제목| |text|`string`|<span class='required'>필수</span>|다이얼로그의 내용| |cancel|`string`|<span class='optional'>선택</span>|다이얼로그에 표시될 버튼 내용(버튼을 클릭시 다이얼로그는 제거되고 시트 내부에 `CancelProgress` 속성이 `1`로 수정됨) (`default: null`)| |pos|`number`|<span class='optional'>선택</span>|cnt(전체)중 진행 정도 (`default: 0`)| |cnt|`number`|<span class='optional'>선택</span>|진행 정도 마지노선 (`cnt:5, pos:1`이면 프로그레스 바는 1/5 진행으로 표시됨) (`default: 0`)| ### Return Value ***none*** ### Example ```javascript function popup(){ sheet.showProgress({caption: \"회계 년도 계산 중\", text: \"잠시만 기다려주세요.\", pos: 2, cnt: 5}); } ```",
              "see": [
                {
                  "label": "SuppressMessage cfg",
                  "url": "/docs/props/cfg/suppress-message"
                },
                {
                  "label": "hideMessage method",
                  "url": "./hide-message"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/show-progress.html"
          },
          {
            "cid": 757,
            "sid": "show-row",
            "name": "show-row",
            "label": "showRow",
            "data": {
              "body": "> 숨겨진 행을 보여지게 합니다. > 대량으로 행을 감추거나 보이게 끔 하고자 할때는 `norender`값을 `1`로 설정하여 작업하신 후, [renderBody()](./renderBody)나 [rerender()](./rerender)함수를 호출하여 한꺼번에 화면에 반영하는 것이 좋습니다. ### Syntax ```javascript void showRow( row, norender ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row |`object`|<span class='required'>필수</span>|감춰진 [데이터 로우 객체](/docs/appx/row-object)| |norender|`boolean`|<span class='optional'>선택</span><mark>(사용주의)</mark>|즉시 화면에 반영할 것인지 여부 해당 기능을 사용한 뒤, 다른 동작을 실행 할 경우 `renderBody()`를 반드시 먼저 실행 해야 합니다. `0(false)`:즉시 반영 (`default`) `1(true)`:반영 안함 | ### Return Value ***none*** ### Example ```javascript //35번 행을 보이게 한다. sheet.showRow( sheet.getRowByIndex(35) ); //특정 행을 모두 보입니다. var rows = sheet.getDataRows(); for(var i=0; i<rows.length; i++){ if(rows[i][\"deptNm\"] != \"지원부서\"){ // 행을 보일때 렌더링을 일단 막음 sheet.showRow( {'row':rows[i],'norender':1}); } } //데이터 영역에 변경된 내용을 한꺼번에 렌더링 한다. sheet.renderBody(); ```",
              "see": [
                {
                  "label": "hideRow method",
                  "url": "./hide-row"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/show-row.html"
          },
          {
            "cid": 758,
            "sid": "show-time-picker",
            "name": "show-time-picker",
            "label": "showTimePicker",
            "data": {
              "body": "> 특정 셀에 시분초 다이얼로그를 띄웁니다. > [Type](/docs/appx/type)이 `Date` / `Text` 일 경우에만 다이얼로그가 표시됩니다. > `확인` 클릭 시 `Text` 타입의 셀의 경우 `HH:mm:ss` 의 형태로 값이 셋팅 됩니다. ![TimePicker](/assets/imgs/timepicker.png) ### Syntax ```javascript boolean showTimePicker( row , col , format ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|[데이터 로우 객체](/docs/appx/row-object)| |col|`string`|<span class='required'>필수</span>|열이름| |format|`string`|<span class='optional'>선택</span>|시분 / 시분초 TimePicker 선택 (`\"HHmmss\"` or `\"HHmm\"` 만 지원) (`defualt: \"HHmmss\"`)| ### Return Value ***boolean*** : 다이얼로그 표시 성공여부 (정상적으로 표시가 되면 true, 표시에 실패하면 false 리턴) ### Example ```javascript sheet.showTimePicker({row:sheet.getRowById(\"AR5\"), col:\"Date1\", foramt:\"HHmm\"}); ```",
              "see": [
                {
                  "label": "TimePicker col",
                  "url": "/docs/props/col/time-picker"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.6|기능 추가||core|8.1.0.10|`format` 인자 `default` 지정|"
            },
            "url": "docs/funcs/core/show-time-picker.html"
          },
          {
            "cid": 759,
            "sid": "show-tip",
            "name": "show-tip",
            "label": "showTip",
            "data": {
              "body": "> 현재 마우스커서가 위치한 곳에 원하는 내용의 풍선도움말을 띄웁니다. > `tip` 인자에 html태그를 넣으면 더 다양한 표현도 가능합니다. ### Syntax ```javascript void showTip( tip ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |tip |`string`|<span class='required'>필수</span>|풍선 도움말에 보여질 내용| ### Return Value ***none*** ### Example ```javascript //현재 마우스 커서 위치에 다음 내용을 풍선도움말 형식으로 띄운다. sheet.showTip(\"<span style='color:red'>You</span> are so <span style='font-weight:700;color:black'>beautiful</span>\"); ```",
              "see": [
                {
                  "label": "hideTip method",
                  "url": "./hide-tip"
                },
                {
                  "label": "onShowTip event",
                  "url": "/docs/events/on-show-tip"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/show-tip.html"
          },
          {
            "cid": 760,
            "sid": "show-tree-level",
            "name": "show-tree-level",
            "label": "showTreeLevel",
            "data": {
              "body": "> 지정한 레벨만큼 트리를 접거나 펼칩니다. ### Syntax ```javascript void showTreeLevel( level, ignoreEvent, childMode ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |level|`number`|<span class='required'>필수</span>|보고자 하는 레벨 값 (최상위 노드는 `1`부터 시작)| |ignoreEvent|`boolean`|<span class='optional'>선택</span>|이벤트([onBeforeExpand event](/docs/events/on-before-expand), [onAfterExpand event](/docs/events/on-after-expand)) 호출 여부를 설정 `0(false)`:이벤트 호출 (`default`) `1(true)`:이벤트 호출하지 않음| |childMode|`number`|<span class='optional'>선택</span>|지정한 레벨의 하위 로우들의 접힘, 펼침 여부를 설정합니다. `0`:접거나 펼쳐진 내용 유지 (`default`) `1`:하위 노드 모두 접음 `2`:하위 노드 모두 펼침| ### Return Value ***none*** ### Example ```javascript //3레벨까지만 접습니다. sheet.showTreeLevel(3); //최상위 노드까지 접습니다. sheet.showTreeLevel(1); //2레벨까지 접고 이벤트를 호출하지 않습니다. sheet.showTreeLevel(2, 1); //3레벨까지 접고 하위 모든 노드를 접습니다. sheet.showTreeLevel(3, 0, 1); ```",
              "see": [
                {
                  "label": "onBeforeExpand event",
                  "url": "/docs/events/on-before-expand"
                },
                {
                  "label": "onAfterExpand event",
                  "url": "/docs/events/on-after-expand"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.4|`ignoreEvent` 인자 추가||core|8.0.0.7|`childMode` 인자 추가|"
            },
            "url": "docs/funcs/core/show-tree-level.html"
          },
          {
            "cid": 761,
            "sid": "start-edit",
            "name": "start-edit",
            "label": "startEdit",
            "data": {
              "body": "> 셀의 편집모드로 들어값니다. > 지정한 셀에 커서가 깜빡이는 편집상태가 활성화 됩니다. > `row, col` 인자를 설정하지 않으면 포커스가 있는 셀이 편집상태로 변경됩니다. ### Syntax ```javascript void startEdit( row, col, empty, valid ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |row |`object`|<span class='optional'>선택</span>|편집할 [데이터 로우 객체](/docs/appx/row-object)| |col |`string`|<span class='optional'>선택</span>|편집할 열이름| |empty |`boolean`|<span class='optional'>선택</span>|편집 시작시 기존 셀의 값을 지울지 여부 `0(false)`:편집 시작 시 기존 셀의 값 유지 (`default`) `1(true)`:편집 시작시 기존 셀의 값 제거| |vaild |`boolean`|<span class='optional'>선택</span>|셀의 편집 가능여부 확인 (실제로 셀이 편집상태가 활성화 되지 않고, 편집상태로 활성화가 가능/불가능 여부를 확인해서 리턴. 이미 활성화 되어 있는 경우 `0(false)`를 리턴) `0(false)`:셀의 편집 가능여부 확인 안함 (`default`) `1(true)`:셀의 편집 가능여부 확인 사용| ### Return Value ***none*** ### Example ```javascript //편집 시작 sheet.startEdit({ empty:1 }); ```",
              "see": [
                {
                  "label": "endEdit method",
                  "url": "./end-edit"
                },
                {
                  "label": "onStartEdit event",
                  "url": "/docs/events/on-start-edit"
                },
                {
                  "label": "onShowEdit event",
                  "url": "/docs/events/on-show-edit"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/start-edit.html"
          },
          {
            "cid": 762,
            "sid": "switch-pivot-sheet",
            "name": "switch-pivot-sheet",
            "label": "switchPivotSheet",
            "data": {
              "body": "> 피벗 테이블 결과 시트와 원본 데이터 시트를 pivot 인자에 따라 스위치하여 보여줍니다. ### Syntax ```javascript void switchPivotSheet(pivot); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |pivot|`number`|<span class='optional'>선택</span>|원본 테이블 또는 피벗 테이블 선택 (`default: 0`)| ### Return Value ***none*** ### Example ```javascript // 피벗 테이블의 원본 데이터 시트 보기 pivotSheet_sheet.switchPivotSheet(0); // 피벗 테이블 보기 pivotSheet_sheet.switchPivotSheet(1); // 피벗 테이블 제거 후 원본 시트 보기 sheet.PivotSheet.dispose(); sheet.PivotSheet.switchPivotSheet(); delete sheet.PivotSheet; ```",
              "see": [
                {
                  "label": "showPivotDialog method",
                  "url": "/docs/funcs/dialog/show-pivot-dialog"
                },
                {
                  "label": "makePivotTable method",
                  "url": "./make-pivot-table"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/switch-pivot-sheet.html"
          },
          {
            "cid": 763,
            "sid": "update-client-paging",
            "name": "update-client-paging",
            "label": "updateClientPaging",
            "data": {
              "body": "> 클라이언트 페이징(`(Cfg)SearchMode: 1`)일 때 한 페이지에 표시할 행의 수를 사용자가 동적으로 변경할 수 있습니다. ### Syntax ```javascript boolean updateClientPaging( length, render ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |length|`number`|<span class='required'>필수</span>|한 페이지에 표시할 행의 수| |render|`boolean`|<span class='optional'>선택</span>|즉시 화면 반영 여부 해당 기능을 `0(false)`로 사용했을 경우, 작업 마무리 시에 `rerender()`를 실행해야 화면에 반영 됩니다. `0(false)`:반영 안함 `1(true)`:즉시 반영 (`default`)| ### Return Value ***boolean*** ### Example ```javascript // 한 화면에 보여질 행의 수를 30개로 업데이트 합니다. sheet.updateClientPaging(30); ```",
              "see": [
                {
                  "label": "SearchMode cfg",
                  "url": "/docs/props/cfg/search-mode"
                },
                {
                  "label": "PageLength cfg",
                  "url": "/docs/props/cfg/page-length"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/update-client-paging.html"
          },
          {
            "cid": 764,
            "sid": "update-page-length",
            "name": "update-page-length",
            "label": "updatePageLength",
            "data": {
              "body": "> 서버 페이징2 (`(Cfg)SearchMode: 5`)일 때 한 페이지에 표시할 행의 수를 동적으로 변경할 수 있습니다. ### Syntax ```javascript boolean updatePageLength( length, cPage ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |length|`number`|<span class='required'>필수</span>|한 페이지에 표시할 행의 수| |cPage|`number`|<span class='optional'>선택</span>|한 페이지에 표시할 행의 수 변경 후 이동할 페이지 번호 (`default: 1`)| ### Return Value ***boolean*** ### Example ```javascript // 한 페이지에 보여질 행의 수를 20개로 업데이트 합니다. sheet.updatePageLength(20); // 한 페이지에 보여질 행의 수를 30개로 업데이트 하고, 3페이지로 이동합니다. sheet.updatePageLength(30, 3); ```",
              "see": [
                {
                  "label": "SearchMode cfg",
                  "url": "/docs/props/cfg/search-mode"
                },
                {
                  "label": "PageLength cfg",
                  "url": "/docs/props/cfg/page-length"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.54|기능 추가|"
            },
            "url": "docs/funcs/core/update-page-length.html"
          },
          {
            "cid": 765,
            "sid": "version",
            "name": "version",
            "label": "version",
            "data": {
              "body": "> 인스턴스화된 시트 객체의 버전을 확인합니다. ### Syntax ```javascript string version(); ``` ### Return Value ***string***: 인스턴스화된 시트 객체의 버전 및 로드된 플러그인들의 버전 문자열 ### Example ```javascript // 인스턴스화된 시트 객체의 버전 확인 sheet.version(); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/core/version.html"
          }
        ]
      },
      {
        "gid": 2,
        "name": "funcs-excel",
        "label": "Excel Plugin",
        "children": [
          {
            "cid": 766,
            "sid": "direct-down-to-excel",
            "name": "direct-down-to-excel",
            "label": "directDown2Excel",
            "data": {
              "body": "> 시트에 조회된 데이터는 무시하고, 헤더 정보만 서버로 전송하여, 서버에서 만든 데이터와 결합해 엑셀파일을 생성/다운로드 하는 기능입니다. > 이 기능은 조회된 데이터가 많아 이를 엑셀로 다운로드 시키기에는 서버측에 부하가 예상되는 경우 사용하는 기능으로, 서버측에서는 별도로 조회 데이터에 해당하는 내용을 `List<Map>` 구조로 생성하여 데이터를 `SHEETDATA` 라는 이름으로 `request` 객체에 담은 뒤, `DirectDown2Excel.jsp` 또는 `DirectDown2Excel.aspx` 파일로 `forward` 해 주셔야 합니다. > > 엑셀파일이 다운로드 되는 과정은 아래와 같습니다. > ![DirectDown2Excel과정](/assets/imgs/directdown2excel_process.png) > > > 따라서 해당 함수를 사용하시려면 자바 서버모듈의 경우 `DirectDown2Excel.jsp`와 더불어 `ibsheet8-1.0.x.jar` 파일과 `apache POI 라이브러리`가 필요하고, 닷넷 서버모듈의 경우 `DirectDown2Excel.aspx`와 더불어 `IBSheet8-4.0.dll` 파일과 `Syncfusion 라이브러리 dll`이 필요합니다. > 그리고 import/export 관련 기능을 사용하시려면, 배포시 같이 제공되는 `/plugins/ibsheet-excel.js` 파일을 include 하셔야 합니다. > ### Syntax ```javascript void directDown2Excel( param ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |url|`string`|<span class='required'>필수</span>|데이터를 조회할 서버 url| |extendParam|`string`|<span class='optional'>선택</span>|url로 전달할 parameter(querystring형식으로 작성)| |extendParamMethod|`string`|<span class='optional'>선택</span>|`extendParam`의 내용을 `GET` 또는 `POST`로 전달할지를 설정합니다. (`default: \"GET\"`)| |multipart|`boolean`|<span class='optional'>선택</span>|url로 전송시 Content-Type 설정 `0(false)`:일반적인 POST로 전송 `1(true)`:Content-Type을 multipart로 전송 (`default`)| |fileName|`string`|<span class='optional'>선택</span>|생성할 엑셀파일 명 (`default: \"Excel.xlsx\"`) **이 속성에서 파일명과 함께 확장자를 xls, xlsx로 붙이느냐에 따라서 생성 파일이 xls형식이나, xlsx형식으로 만들어집니다. 가급적 xlsx 형식으로 다운로드 하실 것을 권합니다.**| |sheetName|`string`|<span class='optional'>선택</span>|만들어지는 엑셀 파일의 WorkSheet에 부여할 이름| |downCols|`string`|<span class='optional'>선택</span>|구분자를 통해 지정한 열만 다운로드 합니다. 별도의 설정이 없으시 모든 열이 다운로드 됩니다. (ex: \"Price\\|AMT\\|TotalReward\" 식의 컬럼 명을 구분자(\"\\|\")로 연결한 문자열)| |sheetDesign|`boolean`|<span class='optional'>선택</span>|`main.css` 파일에 설정된 시트의 디자인 요소를 엑셀에도 반영할지 여부를 설정합니다. 반영되는 디자인 요소는 다음과 같습니다. 헤더의 배경색,폰트명,폰트크기 `0(false)`:시트의 디자인 요소 엑셀에 반영 안함 `1(true)`:시트의 디자인 요소 엑셀에 반영 (`default`)| |merge|`boolean`|<span class='optional'>선택</span>|헤더 영역에 대한 머지 정보를 엑셀에 반영할지 여부 `0(false)`:헤더 영역에 대한 머지 정보 엑셀에 반영 안함 (`default`) `1(true)`:헤더 영역에 대한 머지 정보 엑셀에 반영| |numberFormatMode|`number`|<span class='optional'>선택</span>|실수 형태의 데이터 타입에 대한 셀 서식 설정 방식을 설정합니다. `0`:시트의 컬럼 포맷을 따릅니다. (`default`) `1`:셀의 값 기준에 따라 정수 또는 실수 형태로 셀 서식을 설정합니다. `2`:일반 서식으로 설정합니다.| |titleText|`string`|<span class='optional'>선택</span>|엑셀 문서의 상단에 원하는 문자를 추가합니다. 문자는 열구분자(\"\\|\")와 행구분자(\"\\r\\n\")을 통해서 작성하실수 있습니다. 가령 \"A\\|B\\|C\\r\\nD\\|E\\|F\" 와 같이 입력한 경우 첫 행에 3개의 셀에 각각 A,B,C 값이 들어가고 두번째 행의 3개의 셀에 각각 D,E,F 값이 입력됩니다. 값 안에서 엔터를 포함하려면 \\r 이나 \\n 을 삽입하면 됩니다. \\r\\n 이 10개가 포함되면 11줄을 차지하게 되고 12번째 행부터 시트 내용이 출력됩니다.| |titleAlign|`string`|<span class='optional'>선택</span>|titleText로 삽입한 문자들에 대한 좌우 정렬 (`default: \"center\"`, \"left\",\"right\"선언가능)| |downCombo|`string`|<span class='optional'>선택</span>|`Enum` 타입의 선택 항목을 `Enum` 속성과 `EnumKeys` 속성 어떤 형태로 다운로드를 받을 지 설정합니다. `TEXT`: `Enum` 속성을 사용하여 다운로드 합니다. (`default`) `CODE`: `EnumKeys` 속성을 사용하여 다운로드합니다.| |userMerge|`string`|<span class='optional'>선택</span>|TitleText와 더불어 사용하면서 엑셀 안에 원하는 영역을 머지(병합)합니다. 입력방법은 4개의 숫자로 \"머지시작셀 row index,머지시작셀 col index,아래로 병합할 행 개수(1을 설정하면 병합 없음),우측으로 병합할 개수\" 로 이루어 집니다.(여러개 병합시에는 띄어쓰기로 구분) 가령 \"2,2,1,6 3,2,3,3\"위와 같이 설정하였다면 2,2 셀부터 오른쪽으로 6칸이 병합되고, 3,2 셀부터 아래로 3칸,오른쪽으로 3칸이 병합 됩니다. ![userMerge](/assets/imgs/userMerge.png)| |excelRowHeight|`number`|<span class='optional'>선택</span>|엑셀 문서의 행 높이를 설정합니다.| |excelHeaderRowHeight|`number`|<span class='optional'>선택</span>|엑셀의 헤더행의 높이를 설정합니다.| |comboValidation|`boolean`|<span class='optional'>선택</span>|Enum 타입으로 만들어진 열에 대해 엑셀에서도 데이터 기능을 통해 드롭다운리스트 형태로 표현합니다. Enum의 종류가 많은 경우 무시됩니다. `0(false)`:드롭다운리스트 형태 사용 안함 (`default`) `1(true)`:드롭다운리스트 형태 사용| |reqHeader|`object`|<span class='optional'>선택</span>|서버 전송 헤더에 사용자가 지정한 헤더 정보를 설정합니다.| |useXhr|`boolean`|<span class='optional'>선택</span>| xhr 통신을 이용해 엑셀 파일을 다운로드받습니다. `0(false)`:xhr 통신 사용 안함 (`default`) `1(true)`:xhr 통신 사용| ### Return Value ***none*** ### Example ```javascript var param = { url:\"./apex/yearApexDataList.do\", extendParam:\"year=2019&deptNo=0041\", fileName:\"년단위 결산 정보.xlsx\" }; sheet.directDown2Excel(param); ``` ```java //directDown2Excel 자바 서버모듈 예시 String[] sido = { \"서울특별시\", \"수원시\", \"성남시\" }; String[] sigungu = { \"관악구\", \"팔달구\", \"분당구\" }; List<Map<String, Object>> data = new ArrayList<>(); for (int i = 0; i < sido.length(); i++) { Map<String, Object> row = new HashMap<>(); row.put(\"sSido\", sido[i]); row.put(\"sSiGunGu\", sigungu[i]); data.add(row); } request.setAttribute(\"SHEETDATA\", data); String forwardPath = \"./DirectDown2Excel.jsp\"; if (!\"\".equals(forwardPath)) { RequestDispatcher rd = request.getRequestDispatcher(forwardPath); rd.forward(request, response); } ``` ```cs // directDown2Excel 닷넷 서버모듈 예시 // 엑셀로 내려질 데이터를 DB에서 조회 String connectionString = \"Provider=Microsoft.JET.OLEDB.4.0;data source=C:\\\\mdb\\\\bussinessList.mdb\"; String query = \"SELECT * FROM bussinessList\"; OleDbConnection conn = new OleDbConnection(connectionString); OleDbCommand cmd = new OleDbCommand(query, conn); conn.Open(); OleDbDataReader reader = cmd.ExecuteReader(); // 데이터를 List(Dictionary -> Object)형태로 전환. // Dictionary 데이터 생성 시 이름은 반드시 시트의 SaveName과 동일 해야 함. List<Object> li = new List<object>(); while (reader.Read()) { Dictionary<String, String> row = new Dictionary<string, string>(); for (int i = 0; i < reader.FieldCount; i++) { row[reader.GetName(i)] = reader.GetValue(i).ToString(); } li.Add(row); } reader.Close(); conn.Close(); this.Context.Items[\"SHEETDATA\"] = li; // DirectDown2Excel.aspx 페이지로 forwarding String forwardPath = \"./DirectDown2Excel.aspx\"; if(forwardPath != \"\") { Server.Execute(forwardPath); } ```",
              "see": [
                {
                  "label": "down2Excel method",
                  "url": "./down-to-excel"
                },
                {
                  "label": "onBeforeExport event",
                  "url": "/docs/events/on-before-export"
                },
                {
                  "label": "onExportFinish event",
                  "url": "/docs/events/on-export-finish"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|0.0.0|기능 추가||excel|0.0.8|`reqHeader` 기능 추가|"
            },
            "url": "docs/funcs/excel/direct-down-to-excel.html"
          },
          {
            "cid": 767,
            "sid": "direct-load-excel",
            "name": "direct-load-excel",
            "label": "directLoadExcel",
            "data": {
              "body": "> 사용자가 선택한 엑셀파일의 내용을 시트에 로드하지 않고 원하는 서블릿으로 전달하여 해당 서블릿에서 데이터베이스에 저장하게 끔 도와주는 기능입니다. > 이 기능은 대량의 데이터가 담긴 엑셀파일의 내용을 사용자 피씨로 불러오고 이후 다시 저장하는 절차를 단순화 시켜는데 목적이 있습니다. > > 엑셀파일이 서블릿에 전달되는 과정은 아래와 같습니다. > ![DirectLoadExcel과정](/assets/imgs/directloadexcel_process.png) > > > 해당 함수를 사용하시려면 자바 서버모듈의 경우 `DirectLoadExcel.jsp`와 더불어 `ibsheet8-1.0.x.jar` 파일과 `apache POI 라이브러리`가 필요로 하고, 닷넷 서버모듈의 경우 `DirectLoadExcel.aspx`와 더불어 `IBSheet8-4.0.dll` 파일과 `Syncfusion 라이브러리 dll`이 필요합니다. > 그리고 import/export 관련 기능을 사용하시려면, 배포시 같이 제공되는 `/plugins/ibsheet-excel.js` 파일을 include 하셔야 합니다. > ### Syntax ```javascript void directLoadExcel( param ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |extendParam|`string`|<span class='optional'>선택</span>|전달할 parameter(querystring형식으로 작성, String 형태로 rquest.setAttribute(\"extendParam에 설정한 파라미터 이름\")으로 담음) <mark>DirectLoadExcel.jsp에서 파싱한 정보를 처리할 서블릿(혹은 jsp)경로를 **FP**라는 이름으로 전달해야 함</mark>| |fileExt|`string`|<span class='optional'>선택</span>|업로드 가능한 파일 확장자를 구분자(\"\\|\")로 연결하여 설정합니다. (`default: \"xls\\|xlsx\"`)| |mode|`string`|<span class='optional'>선택</span>| \"HeaderMatch\", \"NoHeader\", \"HeaderSkip\" 중에 하나의 문자열을 입력합니다. 각 문자의 의미는 다음과 같습니다. <ul><li>\"HeaderMatch\" : 시트의 헤더행의 타이틀과 엑셀의 첫번째 행부터 타이틀을 비교해서 읽습니다. StartRow속성이 지정된 경우 StartRow에서 지정한 행부터 해더행의 개수만큼의 행을 읽어 비교합니다.</li><li>\"NoHeader\" : 헤더행이 없다고 가정하고 첫행부터 순서대로 각 열에 대입합니다.</li><li>\"HeaderSkip\" : 헤더행은 있지만 열비교를 하지 않고 좌측부터 순서대로 읽습니다. 시트의 헤더행의 2개라면 엑셀의 위에서 두개행을 제외하고 그 아래부터 읽는다고 생각하시면 됩니다.</li></ul>(`default: \"HeaderMatch\"`)| |startRow|`number`|<span class='optional'>선택</span>|엑셀에서 시트가 몇번째 행에서 시작하는지 설정합니다. 설정하지 않으면 엑셀의 첫번째 행부터 (1부터시작) 읽어들임.| |endRow|`number`|<span class='optional'>선택</span>|엑셀에서 시트가 몇번째 행까지 읽어들일지를 설정합니다. 설정하지 않으면 엑셀의 마지막 행까지 읽어들임.| |workSheetName|`string`|<span class='optional'>선택</span>|읽어들일 엑셀 파일의 워크시트 명을 설정합니다. 일치하는 워크시트 명이 없으면 첫번째 워크시트를 읽습니다.| |workSheetNo|`number`|<span class='optional'>선택</span>|읽어들일 엑셀 파일의 워크시트 순번을 설정합니다. 설정하지 않으면 첫번째 워크시트를 읽습니다.| |reqHeader|`object`|<span class='optional'>선택</span>|서버 전송 헤더에 사용자가 지정한 헤더 정보를 설정합니다.| |useXhr|`boolean`|<span class='optional'>선택</span>| xhr 통신을 이용해 엑셀 파일을 로드합니다. `0(false)`:xhr 통신 사용 안함 (`default`) `1(true)`:xhr 통신 사용| ### Return Value ***none*** ### Example ```javascript //FP로 최종 데이터를 받을 서블릿(혹은 jsp) 경로를 지정해야 함 var param = { startRow:5, workSheetName:\"sheet4\", extendParam:\"year=2019&deptNo=0041&FP=./save/empExcelData.do\" }; sheet.directLoadExcel(param); ``` ```java //directLoadExcel 자바 서버모듈 예시 List<Map<String, Object>> data = (List<Map<String, Object>>)request.getAttribute(\"SHEETDATA\"); Map<String, Object> header = (Map<String, Object>)data.get(0); for (String key : header.keySet()) { System.out.print(key + \"|\"); } System.out.println(); for (Map<String, Object> row : li) { for (String key : row.keySet()) { System.out.print(row.get(key) + \"|\"); } System.out.println(); } ``` ```cs //directLoadExcel 닷넷 서버모듈 예시 List<Object> data = (List<Object>)this.Context.Items[\"sheetData\"]; Dictionary<String, String> header = (Dictionary<String, String>)data[0]; foreach (String key in header.Keys) { System.Diagnotics.Debug.Write(key + \"|\"); } System.Diagnotics.Debug.WriteLine(); foreach (Dictionary<String, String> row in data) { foreach (String key in row.Keys) { System.Diagnotics.Debug.Write(row[key] + \"|\"); } System.Diagnotics.Debug.WriteLine(); } ```",
              "see": [
                {
                  "label": "loadExcel method",
                  "url": "./load-excel"
                },
                {
                  "label": "onSelectFile event",
                  "url": "/docs/events/on-select-file"
                },
                {
                  "label": "onImportFinish event",
                  "url": "/docs/events/on-import-finish"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|0.0.0|기능 추가||excel|0.0.8|`reqHeader` 기능 추가|"
            },
            "url": "docs/funcs/excel/direct-load-excel.html"
          },
          {
            "cid": 768,
            "sid": "down-to-excel-buffer",
            "name": "down-to-excel-buffer",
            "label": "down2ExcelBuffer",
            "data": {
              "body": "> 여러개의 `ibsheet`를 하나의 엑셀파일에 다운로드 하고자 할때 사용됩니다. > **이 기능을 사용하시려면, 배포시 같이 제공되는 `/plugins/ibsheet-excel.js` 파일을 include 하셔야 합니다.** > > `down2ExcelBuffer(1(true))`로 실행하면 이후 각 시트에서 [down2Excel](./down-to-excel)를 호출하더라도 다운로드가 이루어지지 않고, `down2ExcelBuffer(0(false))` 호출하는 순간 각 시트의 내용이 엑셀파일 안에 각기 다른 worksheet에 다운로드 됩니다. > 해당 기능을 이용하여 하나의 시트로 여러개의 워크시트를 갖는 엑셀파일을 만드는 것도 가능합니다. [다운로드/업로드 관련 기본 정보](/docs/appx/import-export) ### Syntax ```javascript void down2ExcelBuffer( isBuffer ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |isBuffer|`boolean`|<span class='required'>필수</span>|버퍼링 여부 `0(false)`:버퍼링 사용 안함 (`default`) `1(true)`:버퍼링 사용| ### Return Value ***none*** ### Example ```javascript //1. 일반적인 사용 방법 //버퍼링 시작 sheet1.down2ExcelBuffer(true); //첫번째 시트 데이터 버퍼링 var param1 = { fileName:\"여행경비 내역.xlsx\", sheetName:\"교통비\" //엑셀파일내 워크시트 명 }; sheet1.down2Excel(param1); //두번째 시트 데이터 버퍼링 var param2 = { sheetName:\"식비\" //엑셀파일내 워크시트 명 }; sheet2.down2Excel(param2); //세번째 시트 데이터 버퍼링 var param3 = { sheetName:\"숙박비/기타\" //엑셀파일내 워크시트 명 }; sheet3.down2Excel(param3); //전체 시트 다운로드(실제 다운로드가 시작됨) sheet1.down2ExcelBuffer(false); //2. 하나의 시트에서 컬럼별로 나누어 엑셀파일을 생성 //버퍼링 시작 sheet.down2ExcelBuffer(true); //4개 컬럼만 첫번째 워크시트로 다운 var param1 = { sheetName:\"12분기\", downCols:\"1QTCost|1QTProfit|2QTCost|2QTProfit\" }; sheet.down2Excel(param1); //나머지 컬럼을 두번째 워크시트로 다운 var param2 = { sheetName:\"34분기 및 종합\", downCols:\"3QTCost|3QTProfit|4QTCost|4QTProfit|Total|Summary\" }; sheet.down2Excel(param2); //버퍼링 종료 (실제 다운로드가 시작됨) sheet.down2ExcelBuffer(false); ```",
              "see": [
                {
                  "label": "down2Excel method",
                  "url": "./down-to-excel"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|0.0.3|기능 추가|"
            },
            "url": "docs/funcs/excel/down-to-excel-buffer.html"
          },
          {
            "cid": 769,
            "sid": "down-to-excel",
            "name": "down-to-excel",
            "label": "down2Excel",
            "data": {
              "body": "> 시트의 내용을 엑셀 파일로 다운로드 합니다. > 이 함수는 시트의 내용을 제품과 같이 배포되는 `Down2Excel.jsp` 파일로 전달하고, 이 파일에서 실제 엑셀 파일을 생성하여 클라이언트 측으로 전송하게 됩니다. > 따라서 해당 함수를 사용하시려면 자바 서버모듈의 경우 `Down2Excel.jsp`와 더불어 `ibsheet8-1.0.x.jar` 파일과 `apache POI 라이브러리`가 필요로 하고, 닷넷 서버모듈의 경우 `Down2Excel.aspx`와 더불어 `IBSheet8-4.0.dll` 파일과 `Syncfusion 라이브러리 dll`가 필요합니다. > **이 기능을 사용하시려면, 배포시 같이 제공되는 `/plugins/ibsheet-excel.js` 파일을 include 하셔야 합니다.** > > `Down2Excel.jsp` 또는 `Down2Excel.aspx` 파일에 대한 경로는 `Cfg`에 `Export` 속성을 통해 설정됩니다. > 매 시트 생성시 마다 `Export`속성을 설정하기 번거로운 경우에는 [IBSheet.CommonOptions](/docs/static/common-options) 속성을 통해 모든 시트에 공통으로 설정할 수도 있습니다. > 다시 정리해 보자면 다음과 같은 작업이 필요 합니다. ### **자바 서버모듈** 1. `ibsheet8-1.0.x.jar` 파일과 `공통 라이브러리(POI jar)`을 WEB-INF/lib에 추가. 2. `/plugins/ibsheet-excel.js` 파일을 해당 페이지에 include. 3. 시트 생성시 `Cfg`에 `Export` 속성을 통해 `Down2Excel.jsp` 파일에 대한 경로 설정 **닷넷 서버모듈** 1. `IBSheet8-4.0.dll` 파일과 `공통 라이브러리(Syncfusion dll)`을 bin 또는 참조에 추가. 2. `/plugins/ibsheet-excel.js` 파일을 해당 페이지에 include. 3. 시트 생성시 `Cfg`에 `Export` 속성을 통해 `Down2Excel.aspx` 파일에 대한 경로 설정 [다운로드/업로드 관련 기본 정보](/docs/appx/import-export) ### Syntax ```javascript void down2Excel( param ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |fileName|`string`|<span class='optional'>선택</span>|생성할 엑셀파일 명 (`default: \"Excel.xlsx\"`) **이 속성에서 파일명과 함께 확장자를 xls, xlsx로 붙이느냐에 따라서 생성 파일이 xls형식이나, xlsx형식으로 만들어집니다.**| |sheetName|`string`|<span class='optional'>선택</span>|만들어지는 엑셀 파일의 WorkSheet에 부여할 이름| |downRows|`string`|<span class='optional'>선택</span>|지정한 행만 다운로드 합니다. 별도의 설정이 없을 시 모든 행이 다운로드 됩니다. 보여지는 행만 다운로드하고 싶을 경우 `\"Visible\"`로 설정하면 됩니다. (ex: \"1\\|3\\|4\\|5\\|9\" 식의 문자열) `downRows`를 사용하면 머지 기능이 동작하지 않습니다. 데이터 행만 설정할 수 있으며, 데이터 행의 시작 Index는 1부터 시작합니다.| |downCols|`string`|<span class='optional'>선택</span>|지정한 열만 다운로드 합니다. 별도의 설정이 없을시 모든 열이 다운로드 됩니다. 보여지는 열만 다운로드하고 싶을 경우 `\"Visible\"`로 설정하면 됩니다. (ex: \"Price\\|AMT\\|TOTAL\" 식의 문자열)| |downTreeHide|`boolean`|<span class='optional'>선택</span>|tree를 사용하는 경우, 접혀진 행도 엑셀에 다운로드 할지 여부 `0(false)`:접혀진 행(자식노드)들 다운로드 대상 제외 (`default`) `1(true)`:접혀진 행(자식노드)들 다운로드 대상 포함| |downHeader|`boolean`|<span class='optional'>선택</span>|헤더행을 다운로드 할지 여부를 설정합니다. `0(false)`:다운로드 시 헤더행 미포함 `1(true)`:다운로드 시 헤더행 포함 (`default`)| |sheetDesign|`number`|<span class='optional'>선택</span>|`main.css` 파일에 설정된 시트의 디자인 요소를 엑셀에도 반영할지 여부를 설정합니다. 반영되는 디자인 요소는 다음과 같습니다. 헤더의 배경색, 헤더의 폰트 색상, 폰트명(main.css 파일에 설정한 IBMain class 속성값), 폰트크기(excelFontSize 속성값),데이터 배경색 `0`:셀 외곽선을 제외한 모든 디자인을 적용하지 않습니다. `1`:셀 외곽선을 포함해 모든 디자인을 적용합니다. (`default`) `2`:셀 외곽선을 제외한 셀 스타일을 적용합니다. `3`:셀 외곽선 및 스타일을 모두 적용하지 않습니다. `4`:헤더행에만 모든 디자인을 적용합니다. **해당 옵션을 사용하시려면 서버모듈을 1.1.16 이후 버전으로 업데이트해주셔야 합니다.** |titleText|`string`|<span class='optional'>선택</span>|엑셀 문서의 상단에 원하는 문자를 추가합니다. 문자는 열구분자(\"\\|\")와 행구분자(\"\\r\\n\")을 통해서 작성하실수 있습니다. 가령 \"A\\|B\\|C\\r\\nD\\|E\\|F\" 와 같이 입력한 경우 첫 행에 3개의 셀에 각각 A,B,C 값이 들어가고 두번째 행의 3개의 셀에 각각 D,E,F 값이 입력됩니다. 값 안에서 엔터를 포함하려면 \\r 이나 \\n 을 삽입하면 됩니다. \\r\\n 이 10개가 포함되면 11줄을 차지하게 되고 12번째 행부터 시트 내용이 출력됩니다.| |userMerge|`string`|<span class='optional'>선택</span>|`TitleText`와 더불어 사용하면서 엑셀 안에 원하는 영역을 머지(병합)합니다. 입력방법은 4개의 숫자로 `\"머지시작셀 row index,머지시작셀 col index,아래로 병합할 행 개수(1을 설정하면 병합 없음),우측으로 병합할 개수\"` 로 이루어 집니다.(여러개 병합시에는 띄어쓰기로 구분) 가령 `\"2,2,1,6 3,2,3,3\"`위와 같이 설정하였다면 2,2 셀부터 오른쪽으로 6칸이 병합되고, 3,2 셀부터 아래로 3칸, 오른쪽으로 3칸이 병합 됩니다. ![userMerge](/assets/imgs/userMerge.png)| |excelRowHeight|`number`|<span class='optional'>선택</span>|엑셀 문서의 행 높이를 설정합니다. -1 설정시 셀의 내용물 크기에 맞춰 엑셀 문서의 행 높이가 조절됩니다.| |excelHeaderRowHeight|`number`|<span class='optional'>선택</span>|엑셀의 헤더행의 높이를 설정합니다.| |wordWrap|`boolean`|<span class='optional'>선택</span>|엑셀 문서의 \"텍스트 줄바꿈\" 여부를 설정합니다. `0(false)`:줄바꿈 미적용 `1(true)`:줄바꿈 적용 (`default`)| |comboValidation|`boolean`|<span class='optional'>선택</span>|Enum 타입으로 만들어진 열에 대해 엑셀에서도 데이터 기능을 통해 드롭다운리스트 형태로 표현합니다. Enum의 종류가 많은 경우 무시됩니다. `0(false)`:드롭다운리스트 형태 사용 안함 (`default`) `1(true)`:드롭다운리스트 형태 사용| |hiddenColumn|`boolean`|<span class='optional'>선택</span>|숨은 컬럼들을 엑셀로 다운로드 받은 경우, 해당 컬럼이 눈에 보이지는 않지만 엑셀 메뉴중 \"숨기기 취소\"를 선택한 경우 해당 컬럼이 다시 보일 수 있도록 엑셀 문서에 다운로드 받는다. `hiddenColumn:1` 은 `downCols`와 **절대 같이 사용하시면 안됩니다.** `0(false)`: 엑셀 다운로드 시 감춰진 열도 Visible:1 컬럼과 동일하게 일반 컬럼처럼 표현됨 (`default`) `1(true)`:감춰진 열 다운로드 시 \"열 숨기기\" 형태로 엑셀 다운로드| |merge|`number`|<span class='optional'>선택</span>|시트의 머지 상태를 엑셀에 그대로 반영할지를 설정합니다. `0`:사용 안 함 (`default`) `1`:사용함 (셀 병합 시, 부속 셀의 값을 원본으로 유지함) `2`:사용함 (셀 병합 시, 부속 셀의 값을 비움)| |textToGeneral|`boolean`|<span class='optional'>선택</span>|Type:`Text`의 엑셀 서식 형식 `0(false)`: Type:`Text`의 엑셀 서식을 텍스트 서식으로 지정 `1(true)`: Type:`Text`의 엑셀 서식을 일반 서식으로 지정(`default`)| |allTypeToText|`boolean`|<span class='optional'>선택</span>|시트의 `Int`, `Float` 타입을 제외한 모든 컬럼의 엑셀 서식을 `Text` 타입으로 받고자 하는 경우 설정합니다. `0(false)`:`Int`, `Float` 타입을 제외한 모든 컬럼의 엑셀 서식을 `Text` 타입으로 설정 안함 (`default`) `1(true)`:`Int`, `Float` 타입을 제외한 모든 컬럼의 엑셀 서식을 `Text` 타입으로 설정| |appendPrevSheet|`boolean`|<span class='optional'>선택</span>|[down2ExcelBuffer](./down-to-excel-buffer) 메소드를 사용하여 2개 이상의 시트를 엑셀로 다운로드 할 때 이전의 시트 내용을 마지막으로 작성한 워크시트에 시트 내용을 덧붙일지 여부를 설정합니다. `0(false)`: 워크시트를 새로 생성하여 작성합니다. (`default`) `1(true)`: 마지막으로 작성한 워크시트에 시트 내용을 덧붙입니다.| |checkBoxOnValue|`string`|<span class='optional'>선택</span>|체크박스와 라디오 박스에서 체크를 한 경우 `1`값 대신 지정한 값을 사용합니다.| |checkBoxOffValue|`string`|<span class='optional'>선택</span>|체크박스와 라디오 박스에서 체크 해제를 한 경우 `0`값 대신 지정한 값을 사용합니다.| |downSum|`boolean`|<span class='optional'>선택</span>|합계 행 다운로드 여부를 설정합니다. `0(false)`:합계 행 다운로드 시 미포함 `1(true)`:합계 행 다운로드 시 포함 (`default`)| |excelFontSize|`number`|<span class='optional'>선택</span>|엑셀의 폰트 크기를 설정합니다.| |excludeFooterRow|`boolean`|<span class='optional'>선택</span>|푸터 행 제외 여부를 설정합니다. `0(false)`:푸터 행 포함 (`default`) `1(true)`:푸터 행 제외| |numberTypeToText|`boolean`|<span class='optional'>선택</span>|`Int`, `Float` 타입의 컬럼을 `Text` 타입으로 다운로드 받을지 여부를 설정합니다. `0(false)`:`Int`, `Float` 타입의 컬럼을 `Text` 타입으로 설정 안함 (`default`) `1(true)`:`Int`, `Float` 타입의 컬럼을 `Text` 타입으로 설정| |reqHeader|`object`|<span class='optional'>선택</span>|서버 전송 헤더에 사용자가 지정한 헤더 정보를 설정합니다.| |extendParam|`string`|<span class='optional'>선택</span>|서버로 전달해야 하는 내용이 있는 경우 `GET` 방식의 `QueryString`으로 연결하여 서버로 같이 전달됩니다. (ex: `sheet.down2Excel({extendParam: \"sido=서울시&sigungu=관악구\"}`)| |extendParamMethod|`string`|<span class='optional'>선택</span>|`extendParam`의 내용을 `GET` 또는 `POST`로 전달할지를 설정합니다. (`default: \"GET\"`)| |requiredMark|`boolean`|<span class='optional'>선택</span>|필수 입력 항목 마크(`*`)를 다운로드 받을지 여부를 설정합니다. `0(false)`:필수 입력 항목 마크(`*`) 다운로드 시 미포함 `1(true)`:필수 입력 항목 마크(`*`) 다운로드 시 포함 (`default`)| |titleAlign|`string`|<span class='optional'>선택</span>|`titleText`로 설정한 내용에 대하여 `left`, `center`, `right` 중 정렬을 설정합니다. (`default: \"center\"`)| |downCombo|`string`|<span class='optional'>선택</span>|`Enum` 타입의 선택 항목을 `Enum` 속성과 `EnumKeys` 속성 어떤 형태로 다운로드를 받을 지 설정합니다. `TEXT`: `Enum` 속성을 사용하여 다운로드 합니다. (`default`) `CODE`: `EnumKeys` 속성을 사용하여 다운로드합니다.| |onlyHeaderMerge|`boolean`|<span class='optional'>선택</span>|시트의 데이터 영역의 머지를 강제로 제한하고 헤더 영역의 머지만을 엑셀에 반영 여부 `0(false)`:헤더 영역과 데이터 영역의 머지 사항을 다운로드 시 반영 (`default`) `1(true)`:헤더 영역의 머지 사항만 다운로드 시 반영| |numberExMode|`boolean`|<span class='optional'>선택</span>|시트의 `Int`, `Float` 타입의 컬럼을 숫자 서식으로 다운로드 받을 지 여부를 설정합니다. 설정하지 않을 시, 통화나 사용자 지정 서식으로 다운로드됩니다. `0(false)`:다운로드 시, 시트의 `Int`, `Float` 타입의 컬럼을 통화나 사용자 지정 서식으로 받습니다 (`default`) `1(true)`:다운로드 시, 시트의 `Int`, `Float` 타입의 컬럼을 숫자 서식으로 다운로드 받습니다| |numberFormatMode|`number`|<span class='optional'>선택</span>|실수 형태의 데이터 타입에 대한 셀 서식 설정 방식을 설정합니다. `0`:시트의 컬럼 포맷을 따릅니다. (`default`) `1`:셀의 값 기준에 따라 정수 또는 실수 형태로 셀 서식을 설정합니다. `2`:일반 서식으로 설정합니다.| |useXhr|`boolean`|<span class='optional'>선택</span>| xhr 통신을 이용해 엑셀 파일을 다운로드받습니다. `0(false)`:xhr 통신 사용 안함 (`default`) `1(true)`:xhr 통신 사용| |exHead|`object`|<span class='optional'>선택</span>|시트 상단에 표시하고 싶은 내용을 설정합니다. titleText, userMerge, header, footer 속성과 같이 사용할 수 없으며, 같이 사용시 titleText, userMerge, header, footer속성은 무시됩니다. 해당 속성은 poi를 사용하는 경우에만 설정이 가능합니다.| |exFoot|`object`|<span class='optional'>선택</span>|시트 하단에 표시하고 싶은 내용을 설정합니다. titleText, userMerge, header, footer 속성과 같이 사용할 수 없으며, 같이 사용시 titleText, userMerge, header, footer속성은 무시됩니다. 해당 속성은 poi를 사용하는 경우에만 설정이 가능합니다.| |tempFile|`string`|<span class='optional'>선택</span>|템플릿으로 사용할 엑셀 파일명을 설정합니다. **반드시 `Down2Excel.jsp` 또는 `Down2Excel.aspx`에서 템플릿 경로를 설정해야합니다.**| |sheetNo|`number`|<span class='optional'>선택</span>|`tempFile`인자로 지정한 엑셀 파일에서 템플릿으로 사용할 워크시트 번호를 설정합니다. (`default: 0`)| |startCol|`number`|<span class='optional'>선택</span>|템플릿 적용 다운로드 시, 엑셀 파일 내 데이터를 쓰기 시작할 컬럼 번호를 설정합니다. (`default: 0`)| |startRow|`number`|<span class='optional'>선택</span>|템플릿 적용 다운로드 시, 엑셀 파일 내 데이터를 쓰기 시작할 행 번호를 설정합니다. (`default: 0`)| |freezePane|`number`|<span class='optional'>선택</span>|상단 행과 왼쪽 열을 틀 고정하여 다운로드하는 옵션입니다. 옵션 설정에 따라 다르게 틀 고정이 적용되어 다운로드되며, 비트 연산으로 동작합니다. `0`: 틀 고정을 적용하지 않음(`default`) `1`: 헤더 틀 고정 적용 (`2`과 함께 적용시 헤드 영역 틀 고정으로 동작) `2`: 헤드 영역 틀 고정 적용 `4`: 왼쪽 고정 열 틀 고정 적용| |workbookPassword|`string`|<span class='optional'>선택</span>| 다운받을 엑셀 파일에 비밀번호를 설정하려는 경우 사용하는 옵션입니다. xlsx 확장자 파일에서만 지원됩니다.| ### downCols, downRows 사용시 merge 적용 정리 | downCols |화면과 동일하게 컬럼 설정 | 화면과 다르게 컬럼 설정 | | ------ | ------ | ------ | | downRows 사용| X | X | | downRows 사용 안함 | O | 아래 설명 참고| merge 옵션을 적용해 downCols를 사용하시려면 downCols에 머지가 이뤄진 컬럼을 **순서대로** **모두** 포함하고 있어야만 합니다. **Visible: 0이 설정된 컬럼이 있다면 해당 컬럼도 반드시 downCols에 포함해둬야만 합니다.** 머지가 이뤄진 컬럼 중 특정 컬럼이 빠지거나, 머지가 이뤄진 컬럼을 모두 포함하고 있더라도 다운로드받는 컬럼의 순서가 다르면 엑셀 다운시 머지가 정상적으로 이뤄지지 않습니다. ![downCols사용시 머지](/assets/imgs/downcols_merge.png \"downCols사용시 머지\") 이미지로 예를 들자면, \"머지 컬럼\" 컬럼을 온전히 머지가 적용된 채로 다운로드받고 싶다면 downCols: \"컬럼1|컬럼2|컬럼3|컬럼4\"와 같이 설정하셔야 합니다. downCols: \"컬럼2|컬럼3|컬럼4\"와 같이 특정 컬럼을 제외하거나 downCols: \"컬럼4|컬럼1|컬럼3|컬럼2\"와 같이 컬럼 순서를 바꾸시면 머지가 온전히 적용되지 않습니다. ### exHead,exFoot options |Name|Type|Required|Description| |----------|-----|---|----| |Height|`number`|<span class='optional'>선택</span>|행의 높이| |Cells|`array[object]`|<span class='optional'>선택</span>|행의 각셀에 표시될 내용,속성 설정| |Cells[{Value}]|`string`|<span class='optional'>선택</span>|셀에 표시될 내용| |Cells[{Color}]|`string`|<span class='optional'>선택</span>|셀의 배경색 (ex `#FFDDEE`)| |Cells[{TextColor}]|`string`|<span class='optional'>선택</span>|셀의 글자색 (ex `#446622`)| |Cells[{TextSize}]|`number`|<span class='optional'>선택</span>|셀의 글자 크기| |Cells[{TextStyle}]|`number`|<span class='optional'>선택</span>|셀의 글자 style 8, 16, 32는 설정이 불가합니다. ([참고](/docs/props/cell/text-style))| |Cells[{Wrap}]|`boolean`|<span class='optional'>선택</span>|자동 줄바꿈 여부 `0(false)`:자동 줄바꿈 적용 안함 `1(true)`:자동 줄바꿈 적용 (`default`)| |Cells[{Type}]|`string`|<span class='optional'>선택</span>|셀타입(Image를 사용해야 하는 경우에만 Img로 설정)| |Cells[{ColSpan}]|`number`|<span class='optional'>선택</span>|가로 병합 셀 개수(`default: 1`) (주의: 가로 병합 옵션은 시트에 걸쳐서 사용할 수는 없습니다.)| |Cells[{RowSpan}]|`number`|<span class='optional'>선택</span>|세로 병합 셀 개수(`default: 1`) (주의: 세로 병합 옵션은 시트에 걸쳐서 사용할 수는 없습니다.)| |Cells[{BorderTop}]|`string`|<span class='optional'>선택</span>|`상단 보더` 굵기,스타일,색상을 구분자 \" \"로 연결한 문자열 (ex: \"1 solid #FF0000\")| |Cells[{BorderBottom}]|`string`|<span class='optional'>선택</span>|`하단 보더` 굵기,스타일,색상을 구분자 \" \"로 연결한 문자열 (ex: \"1 solid #FF0000\")| |Cells[{BorderLeft}]|`string`|<span class='optional'>선택</span>|`좌측 보더` 굵기,스타일,색상을 구분자 \" \"로 연결한 문자열 (ex: \"1 solid #FF0000\")| |Cells[{BorderRight}]|`string`|<span class='optional'>선택</span>|`우측 보더` 굵기,스타일,색상을 구분자 \" \"로 연결한 문자열 (ex: \"1 solid #FF0000\")| #### Cells 내에 Border 속성 설정시 주의 사항 1. 굵기는 px단위가 아니며, 1은 가늘게 2는 굵게 표시하도록 설정합니다. 스타일은 `solid`,`dashed`,`dotted` 세 가지 스타일을 제공합니다. 색상은 hex code로 설정합니다. (ex `#FF00FF`) 2. 좌우로 붙어있는 셀에 각각 우측보더와 좌측보더를 다르게 설정했을 때는 우측셀에 설정한 좌측 보더값이 적용됩니다. 상하로 붙어있는 셀에 각각 하단보더와 상단보더를 다르게 설정했을 때는 하단셀에 설정하 상단 보더값이 적용됩니다. 3. RowSpan,ColSpan속성으로 통해 병합된 셀이라도 각 셀별로 보더 설정이 필요합니다. ### 템플릿을 적용하여 엑셀 파일 다운로드하기 `tempFile` 옵션은 미리 서버에 템플릿을 준비해둔 뒤, 해당 템플릿에 시트 데이터만 삽입해 엑셀 파일을 다운로드하고 싶으실 때 사용하는 옵션입니다. 템플릿 기능을 사용하시려면 `Down2Excel.jsp`또는 `Down2Excel.aspx`에 미리 `TempRoot` 설정을 이용해 템플릿 파일 폴더 위치를 지정해주셔야 됩니다. `startRow`, `startCol` 옵션으로 템플릿 파일에서 데이터를 작성하기 시작할 위치를 지정하실 수 있으며, `sheetNo` 옵션으로 템플릿 파일에서 데이터를 작성할 워크시트를 지정하실 수 있습니다. 더불어 `tempFile` 옵션을 이용해 엑셀 파일을 다운로드받는 경우, 디자인은 온전히 템플릿 파일에 설정된 디자인을 따라가게 되며 `excelFontSize`, `excelRowHeight`, `sheetDesign` 등 옵션은 무시됩니다. ```js // 5번째 행, 3번째 컬럼부터 데이터 작성 시작 sheet.down2Excel({ fileName: \"sheet.xlsx\", tempFile: \"template.xlsx\", startRow: 4, startCol: 2, }) ``` ```java // 서버 사이드 설정 // 템플릿 파일이 위치한 폴더 경로 설정 down.setTempRoot(\"D:/\"); ``` [템플릿 파일 예시] <img src=\"../../../assets/imgs/down2ExcelTempFile1.png\" width=\"700\" height=\"400\"/> [템플릿 파일을 활용해 다운로드받은 파일 결과물] <img src=\"../../../assets/imgs/down2ExcelTempFile2.png\" width=\"700\" height=\"400\"/> ### Return Value ***none*** ### Example ```javascript var param = { fileName:\"홍길동 교통비 내역.xlsx\", titleText:\"||2019년 3월 교통비\\r\\n|||||||홍길동\", userMerge:\"0,2,1,4\" }; sheet.down2Excel(param); ```",
              "see": [
                {
                  "label": ""
                },
                {
                  "label": "Down2ExcelConfig cfg",
                  "url": "/docs/props/cfg/down-to-excel-config"
                },
                {
                  "label": "AutoExcelMode cfg",
                  "url": "/docs/props/cfg/auto-excel-mode"
                },
                {
                  "label": "exportData method",
                  "url": "/docs/funcs/core/export-data"
                },
                {
                  "label": "loadExcel method",
                  "url": "./load-excel"
                },
                {
                  "label": "down2Text method",
                  "url": "./down-to-text"
                },
                {
                  "label": "onBeforeExport event",
                  "url": "/docs/events/on-before-export"
                },
                {
                  "label": "onExportFinish event",
                  "url": "/docs/events/on-export-finish"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|0.0.0|기능 추가||excel|0.0.8|`reqHeader` 기능 추가||excel|1.0.19|`sheetDesign: 4` 옵션 추가||excel|1.0.18|`requiredMark` 기능 수정: 소문자로 사용 가능||excel, servermodule|1.1.0, 1.1.24|`exHead`, `exFoot` 기능 추가||excel, servermodule|1.1.15, 1.1.37|`freezePane` 기능 추가|"
            },
            "url": "docs/funcs/excel/down-to-excel.html"
          },
          {
            "cid": 770,
            "sid": "down-to-hwpx-buffer",
            "name": "down-to-hwpx-buffer",
            "label": "down2HwpxBuffer",
            "data": {
              "body": "> 여러개의 `ibsheet`를 하나의 한글파일에 다운로드 하고자 할때 사용됩니다. > **이 기능을 사용하시려면, 배포시 같이 제공되는 `/plugins/ibsheet-excel.js` 파일을 include 하셔야 합니다.** > > `down2HpwxBuffer(1(true))`로 실행하면 이후 각 시트에서 [down2Hwpx](./down-to-hwpx)를 호출하더라도 다운로드가 이루어지지 않고, `down2HwpxBuffer(0(false))` 호출하는 순간 각 시트의 내용이 `down2Hwpx` 호출 순서대로 한글의 표로 그려집니다. > 또한 템플릿 기능과 `down2Hwpx` 의 `sheetField` 속성을 활용하여 원하는 위치에 원하는 테이블을 생성 할 수 있습니다. [다운로드/업로드 관련 기본 정보](/docs/appx/import-export) ### Syntax ```javascript void down2HwpxBuffer( isBuffer ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |isBuffer|`boolean`|<span class='required'>필수</span>|버퍼링 여부 `0(false)`:버퍼링 사용 안함 (`default`) `1(true)`:버퍼링 사용| ### Return Value ***none*** ### Example ```javascript //1. 템플릿을 사용하지 않고 한글 파일에 여러개의 시트를 그리는 방법 //버퍼링 시작 sheet.down2HwpxBuffer(true); //4개 컬럼만 한글 표로 다운 var param1 = { downCols:\"1QTCost|1QTProfit|2QTCost|2QTProfit\" }; sheet.down2Hwpx(param1); //나머지 컬럼을 두번째 다음 문장의 한글 표로 다운 var param2 = { downCols:\"3QTCost|3QTProfit|4QTCost|4QTProfit|Total|Summary\" }; sheet.down2Hwpx(param2); //버퍼링 종료 (실제 다운로드가 시작됨) sheet.down2HwpxBuffer(false); //2. 템플릿을 사용 하여 원하는 위치에 시트를 생성하는 방법. //버퍼링 시작 sheet1.down2HwpxBuffer(true); //첫번째 시트 데이터 버퍼링 var param1 = { fileName:\"이력서.hwpx\", //tempFile과 keyField는 첫번째에서만 설정. tempFile:\"Resume.hwpx\", keyField: { \"name\": \"홍길동\", \"engName\": \"Hong Gil Dong\" }, sheetField : \"sheet1\" }; sheet1.down2Hwpx(param1); //두번째 시트 데이터 버퍼링 var param2 = { sheetField : \"shee2\" }; sheet2.down2Hwpx(param2); //세번째 시트 데이터 버퍼링 var param3 = { sheetField : \"shee3\" }; sheet3.down2Hwpx(param3); //네번째 시트 데이터 버퍼링 var param4 = { sheetField : \"shee4\" }; sheet4.down2Hwpx(param4); //전체 시트 다운로드(실제 다운로드가 시작됨) sheet1.down2HwpxlBuffer(false); ``` * 템플릿 화면 예시 ![image](/assets/imgs/Resume.png)",
              "see": [
                {
                  "label": "down2Hwpx method",
                  "url": "./down-to-hwpx"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.85|Down2Hwpx 기능 추가||excel|1.1.2|Down2Hwpx 기능 추가||jar|1.0.0|Down2Hwpx 기능 추가|"
            },
            "url": "docs/funcs/excel/down-to-hwpx-buffer.html"
          },
          {
            "cid": 771,
            "sid": "down-to-hwpx",
            "name": "down-to-hwpx",
            "label": "down2Hwpx",
            "data": {
              "body": "> 시트의 내용을 한글(Hwpx) 파일로 다운로드 합니다. > 이 함수는 시트의 내용을 제품과 같이 배포되는 `Down2Hwpx.jsp` 파일로 전달하고, 이 파일에서 실제 한글(Hwpx) 파일을 생성하여 클라이언트 측으로 전송하게 됩니다. > 따라서 해당 함수를 사용하시려면 `Down2Hwpx.jsp`와 더불어 `hwpx.jar` 파일이 필요합니다. > **이 기능을 사용하시려면, 배포시 같이 제공되는 `/plugins/ibsheet-excel.js` 파일을 include 하셔야 합니다.** > > `Down2Hwpx.jsp` 파일에 대한 경로는 `Cfg`에 `Export` 속성을 통해 설정됩니다. > 매 시트 생성시 마다 `Export`속성을 설정하기 번거로운 경우에는 [IBSheet.CommonOptions](/docs/static/common-options) 속성을 통해 모든 시트에 공통으로 설정할 수도 있습니다. > 다시 정리해 보자면 다음과 같은 작업이 필요 합니다. ### 1. `ibsheet8-hwpx-1.0.x.jar` 파일을 WEB-INF/lib에 추가 2. `/plugins/ibsheet-excel.js` 파일을 해당 페이지에 include 3. 시트 생성시 `Cfg`에 `Export` 속성을 통해 `Down2Hwpx.jsp` 파일에 대한 경로 설정 [다운로드/업로드 관련 기본 정보](/docs/appx/import-export) ### Syntax ```javascript void down2Hwpx( param ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |fileName|`string`|<span class='optional'>선택</span>|생성할 한글파일 명 (`default: \"Hwpx.hwpx\"`) **한글 (hwpx)파일명을 지정합니다.**| |downRows|`string`|<span class='optional'>선택</span>|지정한 행만 다운로드 합니다. 별도의 설정이 없을시 모든 행이 다운로드 됩니다. 보여지는 행만 다운로드하고 싶을 경우 `\"Visible\"`로 설정하면 됩니다. (ex: \"1\\|3\\|4\\|5\\|9\" 식의 문자열) `downRows`를 사용하면 머지 기능이 동작하지 않습니다.| |downCols|`string`|<span class='optional'>선택</span>|지정한 열만 다운로드 합니다. 별도의 설정이 없을시 모든 열이 다운로드 됩니다. 보여지는 열만 다운로드하고 싶을 경우 `\"Visible\"`로 설정하면 됩니다. (ex: \"Price\\|AMT\\|TOTAL\" 식의 문자열)| |downHeader|`boolean`|<span class='optional'>선택</span>|헤더행을 다운로드 할지 여부를 설정합니다. `0(false)`:다운로드 시 헤더행 미포함 `1(true)`:다운로드 시 헤더행 포함 (`default`)| |sheetDesign|`number`|<span class='optional'>선택</span>|`main.css` 파일에 설정된 시트의 디자인 요소를 한글 문서의 표에도 반영할지 여부를 설정합니다. 반영되는 디자인 요소는 다음과 같습니다: 헤더의 배경색,폰트명,폰트크기,데이터 배경색 `0`:셀 외곽선을 제외한 모든 디자인을 적용하지 않습니다. `1`:셀 외곽선을 포함해 모든 디자인을 적용합니다. (`default`) `2`:셀 외곽선을 제외한 셀 스타일을 적용합니다. `3`:셀 외곽선 및 스타일을 모두 적용하지 않습니다. `4`:헤더행에만 모든 디자인을 적용합니다. |merge|`boolean`|<span class='optional'>선택</span>|시트의 머지 상태를 표에 그대로 반영할지를 설정합니다. `0(false)`:시트의 머지 상태를 표에 반영 안함 (`default`) `1(true)`:시트에 머지 상태를 표에 반영| |downSum|`boolean`|<span class='optional'>선택</span>|합계 행 다운로드 여부를 설정합니다. `0(false)`:합계 행 다운로드 시 미포함 `1(true)`:합계 행 다운로드 시 포함 (`default`)| |sheetFontSize|`number`|<span class='optional'>선택</span>|시트의 폰트 크기를 설정합니다. 설정된 폰트 크기는 한글 문서의 표에만 적용됩니다.| |excludeFooterRow|`boolean`|<span class='optional'>선택</span>|푸터 행 제외 여부를 설정합니다. `0(false)`:푸터 행 포함 (`default`) `1(true)`:푸터 행 제외| |reqHeader|`object`|<span class='optional'>선택</span>|서버 전송 헤더에 사용자가 지정한 헤더 정보를 설정합니다.| |extendParam|`string`|<span class='optional'>선택</span>|서버로 전달해야 하는 내용이 있는 경우 `GET` 방식의 `QueryString`으로 연결하여 서버로 같이 전달됩니다. (ex: `sheet.down2Excel({extendParam: \"sido=서울시&sigungu=관악구\"}`)| |extendParamMethod|`string`|<span class='optional'>선택</span>|`extendParam`의 내용을 `GET` 또는 `POST`로 전달할지를 설정합니다.(`default: \"GET\"`)| |excludeSubSum|`boolean`|<span class='optional'>선택</span>|소계/누계 행 제외 여부를 설정합니다. `0(false)`: 소계/누계 모두 제외하지 않습니다. (`default`) `1(true)`: 소계/누계 모두 제외합니다.| |landScape|`boolean`|<span class='optional'>선택</span>|한글 문서의 편집용지 방향을 설정합니다. `0(false)`:세로방향 (`default`) `1(true)`:가로방향| |top|`object`|<span class='optional'>선택</span>|시트를 기준으로 상단에 표현할 문자열을 삽입합니다. <table><tr><td>**Name**</td><td>**Type**</td><td>**Required**</td><td>**Description**</td></tr><tr><td>topAlign</td><td>`string`</td><td><span class='optional'>선택</span></td><td>`left, center, right` 중 정렬을 설정합니다.(`default: \"center\"`)</td></tr><tr><td>topFontBold</td><td>`boolean`</td><td><span class='optional'>선택</span></td><td>폰트의 굵기를 설정합니다. (`default: 0(false)`)</td></tr><tr><td>topFontColor</td><td>`string`</td><td><span class='optional'>선택</span></td><td>폰트 색상을 설정합니다.</td></tr><tr><td>topFontSize</td><td>`number`</td><td><span class='optional'>선택</span></td><td>폰트 크기를 설정합니다.</td></tr><tr><td>topText</td><td>`string`</td><td><span class='optional'>선택</span></td><td>상단에 표현할 문자열을 설정합니다.\\r\\n 을 사용하면 줄바꿈이 가능합니다.</td></tr></table>(ex: `top: [{topText: \"상단영역 첫번째 줄\", topAlign: \"center\", topFontSize: 10, topFontBold: true, topFontColor:\"#ff0000\"},` `{topText: \"상단영역 두번째 줄\", topAlign: \"right\", topFontSize: 8, topFontBold: false, topFontColor:\"#000000\"}]`)| |bottom|`object`|<span class='optional'>선택</span>|시트를 기준으로 하단에 표현할 문자열을 삽입합니다.<table><tr><td>**Name**</td><td>**Type**</td><td>**Required**</td><td>**Description**</td></tr><tr><td>bottomAlign</td><td>`string`</td><td><span class='optional'>선택</span></td><td>`left, center, right` 중 정렬을 설정합니다.(`default: \"center\"`)</td></tr><tr><td>bottomFontBold</td><td>`boolean`</td><td><span class='optional'>선택</span></td><td>폰트의 굵기를 설정합니다(`default: 0(false)`)</td></tr><tr><td>bottomFontColor</td><td>`string`</td><td><span class='optional'>선택</span></td><td>폰트 색상을 설정합니다.</td></tr><tr><td>bottomFontSize</td><td>`number`</td><td><span class='optional'>선택</span></td><td>폰트 크기를 설정합니다.</td></tr><tr><td>bottomText</td><td>`string`</td><td><span class='optional'>선택</span></td><td>하단에 표현할 문자열을 설정합니다.\\r\\n 을 사용하면 줄바꿈이 가능합니다.</td></tr></table>(ex: `bottom: [{bottomText: \"하단영역 첫번째 줄\", bottomAlign: \"center\", bottomFontSize: 10, bottomFontBold: true, bottomFontColor:\"#ff0000\"},` `{bottomText: \"하단영역 두번째 줄\", bottomAlign: \"right\", bottomFontSize: 8, bottomFontBold: false, bottomFontColor:\"#000000\"}]`)| |hwpxHeader|`object`|<span class='optional'>선택</span>|머리말 영역에 표현할 문자열을 삽입합니다.<table><tr><td>**Name**</td><td>**Type**</td><td>**Required**</td><td>**Description**</td></tr><tr><td>hwpxHeaderAlign</td><td>`string`</td><td><span class='optional'>선택</span></td><td>`left, center, right` 중 정렬을 설정합니다.(default: \"center\")</td></tr><tr><td>hwpxHeaderFontBold</td><td>`boolean`</td><td><span class='optional'>선택</span></td><td>폰트의 굵기를 설정합니다(default: false)</td></tr><tr><td>hwpxHeaderFontColor</td><td>`string`</td><td><span class='optional'>선택</span></td><td>폰트 색상을 설정합니다.</td></tr><tr><td>hwpxHeaderFontSize</td><td>`number`</td><td><span class='optional'>선택</span></td><td>폰트 크기를 설정합니다.</td></tr><tr><td>hwpxHeaderText</td><td>`string`</td><td><span class='optional'>선택</span></td><td>하단에 표현할 문자열을 설정합니다.\\r\\n 을 사용하면 줄바꿈이 가능합니다.</td></tr></table>(ex: `hwpxHeader: [{hwpxHeaderText: \"머리말 영역 첫번째 줄\", hwpxHeaderAlign: \"center\", hwpxHeaderFontSize: 10, hwpxHeaderFontBold: true, hwpxHeaderFontColor:\"#ff0000\"},` `{hwpxHeaderText: \"머리말 영역 두번째 줄\", hwpxHeaderAlign: \"right\", hwpxHeaderFontSize: 8, hwpxHeaderFontBold: false, hwpxHeaderFontColor:\"#000000\"}]`)| |hwpxFooter|`object`|<span class='optional'>선택</span>|꼬리말 영역에 표현할 문자열을 삽입합니다.<table><tr><td>**Name**</td><td>**Type**</td><td>**Required**</td><td>**Description**</td></tr><tr><td>hwpxFooterAlign</td><td>`string`</td><td><span class='optional'>선택</span></td><td>`left, center, right` 중 정렬을 설정합니다.(default: \"center\")</td></tr><tr><td>hwpxFooterFontBold</td><td>`boolean`</td><td><span class='optional'>선택</span></td><td>폰트의 굵기를 설정합니다(default: false)</td></tr><tr><td>hwpxFooterFontColor</td><td>`string`</td><td><span class='optional'>선택</span></td><td>폰트 색상을 설정합니다.</td></tr><tr><td>hwpxFooterFontSize</td><td>`number`</td><td><span class='optional'>선택</span></td><td>폰트 크기를 설정합니다.</td></tr><tr><td>hwpxFooterText</td><td>`string`</td><td><span class='optional'>선택</span></td><td>하단에 표현할 문자열을 설정합니다.\\r\\n 을 사용하면 줄바꿈이 가능합니다.</td></tr></table>(ex: `hwpxFooter: [{hwpxFooterText: \"꼬리말 영역 첫번째 줄\", hwpxFooterAlign: \"center\", hwpxFooterFontSize: 10, hwpxFooterFontBold: true, hwpxFooterFontColor:\"#ff0000\"},` `{hwpxFooterText: \"꼬리말 영역 두번째 줄\", hwpxFooterAlign: \"right\", hwpxFooterFontSize: 8, hwpxFooterFontBold: false, hwpxFooterFontColor:\"#000000\"}]`)| |topMargin|`number`|<span class='optional'>선택</span>|편집 용지 위쪽 여백을 설정합니다.(`단위:mm`) (`default: 20`)| |bottomMargin|`number`|<span class='optional'>선택</span>|편집 용지 아래쪽 여백을 설정합니다.(`단위:mm`) (`default: 20`)| |leftMargin|`number`|<span class='optional'>선택</span>|편집 용지 왼쪽 여백을 설정합니다.(`단위:mm`) (`default: 30`)| |rightMargin|`number`|<span class='optional'>선택</span>|편집 용지 오른쪽 여백을 설정합니다.(`단위:mm`) (`default: 30`)| |headerMargin|`number`|<span class='optional'>선택</span>|편집 용지 머리말 영역 여백을 설정합니다.(`단위:mm`) (`default: 15`)| |footerMargin|`number`|<span class='optional'>선택</span>|편집 용지 꼬리말 영역 여백을 설정합니다.(`단위:mm`) (`default: 15`)| |botPage|`boolean`|<span class='optional'>선택</span>|한글 문서 하단 부분 페이지 표시 여부를 설정합니다. `0(false)`:한글 문서 하단 부분 페이지 미표시 (`default`) `1(true)`:한글 문서 하단 부분 페이지 표시| |repeatHeader|`boolean`|<span class='optional'>선택</span>|시트가 페이지를 넘어가는 경우 시트의 헤더를 반복 출력 여부를 설정합니다. `0(false)`:시트가 페이지를 넘어가는 경우 시트의 헤더 반복 출력하지 않음 `1(true)`:시트가 페이지를 넘어가는 경우 시트의 헤더 반복 출력 (`default`)| |tempFile|`string`|<span class='optional'>선택</span>|템플릿 파일명을 설정합니다. 템플릿 파일의 경우 `Down2Hwpx.jsp`의 `setTempRoot`가 설정되어있어야 합니다. `setTempRoot` 의 경우 템플릿 파일이 존재하는 서버의 경로입니다. |keyField|`object`|<span class='optional'>선택</span>|템플릿기능 사용시 한글의 `필드`기능을 사용한 경우 사용하는 속성입니다. `필드`에서 `필드 이름`이 `keyField`의 키값과 동일한 경우 해당 값으로 매핑됩니다. (ex: `sheet.down2Excel({keyField: {\"name\": \"홍길동\"}}` `필드 이름` 중 `name`으로 설정된 필드 값이 `홍길동`으로 매핑 됨) |sheetField|`string`|<span class='optional'>선택</span>|템플릿기능 사용시 한글의 `필드`기능을 사용한 경우 사용하는 속성입니다. `필드`에서 `필드 이름`이 `sheetField` 의 값과 동일한 필드가 한글의 표로 변환됩니다. (ex: `sheet.down2Excel({sheetField: \"ibsheet\"}` `필드 이름` 이 `ibsheet `으로 설정된 필드가 내려받을 `ibsheet`의 위치) ### 한글의 필드 기능 사용 정리 한글에서는 `필드` 기능을 지원합니다. 쉽게 생각하면 <input> 태그의 placeholder 속성 기능이라고 생각하시면 되겠습니다. `down2Hwpx`에서는 필드 기능을 활용해 원하는 위치에 시트를 표현 및 원하는 값을 입력할 수 있습니다. ![image](/assets/imgs/hanField1.png) ![image](/assets/imgs/hanField2.png) `필드 이름`을 year로 설정한 경우 `keyField`속성을 아래와 같이 설정하면 year가 2024로 표현됩니다. ```javascript var param1 = { fileName:\"문서.hwpx\", //tempFile과 keyField는 첫번째에서만 설정. tempFile:\"template.hwpx\", keyField: { \"year\": \"2024\", }, sheetField : \"sheet1\" }; sheet1.down2Hwpx(param1); ``` ### downCols, downRows 사용시 merge 적용 정리 | downCols |화면과 동일하게 컬럼 설정 | 화면과 다르게 컬럼 설정 | | ------ | ------ | ------ | | downRows 사용| X | X | | downRows 사용 안함 | O | 아래 설명 참고| merge 옵션을 적용해 downCols를 사용하시려면 downCols에 머지가 이뤄진 컬럼을 **순서대로** **모두** 포함하고 있어야만 합니다. **Visible: 0이 설정된 컬럼이 있다면 해당 컬럼도 반드시 downCols에 포함해둬야만 합니다.** 머지가 이뤄진 컬럼 중 특정 컬럼이 빠지거나, 머지가 이뤄진 컬럼을 모두 포함하고 있더라도 다운로드 받는 컬럼의 순서가 다르면 한들 문서에서 머지가 정상적으로 이뤄지지 않습니다. ![downCols사용시 머지](/assets/imgs/downcols_merge.png \"downCols사용시 머지\") 이미지로 예를 들자면, \"머지 컬럼\" 컬럼을 온전히 머지가 적용된 채로 다운로드받고 싶다면 downCols: \"컬럼1|컬럼2|컬럼3|컬럼4\"와 같이 설정하셔야 합니다. downCols: \"컬럼2|컬럼3|컬럼4\"와 같이 특정 컬럼을 제외하거나 downCols: \"컬럼4|컬럼1|컬럼3|컬럼2\"와 같이 컬럼 순서를 바꾸시면 머지가 온전히 적용되지 않습니다. ### Return Value ***none*** ### Example ```javascript var param = { merge: 1, hwpxHeader: [{ hwpxHeaderText: \"머릿글 영역\", hwpxHeaderAlign: \"Center\", hwpxHeaderFontSize: 8, hwpxHeaderFontColor: '#945151' }], top: [{ topText: \"시트 상단 영역 첫번째 줄\", topAlign: \"center\", topFontSize: 10, topBorder: true }, { topText: \"시트 상단 영역 두번째 줄\", topAlign: \"center\", topFontSize: 30, topFontColor: '#821751' }], sheetDesign: 1, fileName: \"test\", bottom: [{ bottomText: \"시트 하단 영역 첫번째 줄\", bottomAlign: \"center\", bottomFontSize: 20 }, { bottomText: \"시트 하단 영역 두번째 줄\", bottomAlign: \"right\", bottomFontSize: 10 }], topMargin: 10, leftMargin: 10, rightMargin: 10, headerMargin: 10, hwpxFooter: [{ hwpxFooterText: \"바닥글 영역\", hwpxFooterAlign: \"Center\", hwpxFooterFontSize: 8, hwpxFooterFontColor: '#245151' }, { hwpxFooterText: \"바닥글 영역 두번째 줄\", hwpxFooterAlign: \"Center\", hwpxFooterFontSize: 5, hwpxFooterFontColor: '#142991' }], sheetFontSize: 10, // 용지 방향 설정 landScape: false }; sheet.down2Hwpx(param); ```",
              "see": [
                {
                  "label": "onBeforeExport event",
                  "url": "/docs/events/on-before-export"
                },
                {
                  "label": "onExportFinish event",
                  "url": "/docs/events/on-export-finish"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.1.0.85|Down2Hwpx 기능 추가||excel|1.1.2|Down2Hwpx 기능 추가||jar|1.0.0|Down2Hwpx 기능 추가|"
            },
            "url": "docs/funcs/excel/down-to-hwpx.html"
          },
          {
            "cid": 772,
            "sid": "down-to-pdf",
            "name": "down-to-pdf",
            "label": "down2Pdf",
            "data": {
              "body": "> 시트의 내용을 PDF 파일로 다운로드 합니다. > 이 함수는 시트의 내용을 제품과 같이 배포되는 `Down2Pdf.jsp` 파일로 전달하고, 이 파일에서 PDF 파일을 생성하여 클라이언트 측으로 전송하게 됩니다. > 따라서 해당 함수를 사용하시려면 `Down2Pdf.jsp`와 더불어 `ibsheet8-x.x.x.jar` 파일과 `ib-itext 라이브러리`가 필요로 합니다. > **<mark>주의</mark>: 멀티레코드([MultiRecord](/docs/props/cfg/multi-record)) 기능을 사용하는 시트에서는 제약이 있습니다** > **<mark>주의</mark>: 이 기능을 사용하시려면, 배포시 같이 제공되는 `/plugins/ibsheet-excel.js` 파일을 include 하셔야 합니다.** > `Down2Pdf.jsp` 파일에 대한 경로는 `Cfg`에 `Export` 속성을 통해 설정됩니다. > 매 시트 생성시 마다 `Export`속성을 설정하기 번거로운 경우에는 [IBSheet.CommonOptions](/docs/static/common-options) 속성을 통해 모든 시트에 공통으로 설정할 수도 있습니다. > 다시 정리해 보자면 다음과 같은 작업이 필요 합니다. **자바 서버모듈** 1. `ibsheet8-1.0.x.jar` 파일과 `공통 라이브러리(ib-itext.jar)`을 WEB-INF/lib에 추가. 2. `/plugins/ibsheet-excel.js` 파일을 해당 페이지에 include. 3. 시트 생성시 `Cfg`에 `Export` 속성을 통해 `Down2Pdf.jsp` 파일에 대한 경로 설정 4. `Down2Pdf.jsp` 파일에서 폰트 경로 설정 **닷넷 서버모듈** 1. `IBSheet8-4.0.dll` 파일을 bin 또는 참조에 추가. 2. `/plugins/ibsheet-excel.js` 파일을 해당 페이지에 include. 3. 시트 생성시 `Cfg`에 `Export` 속성을 통해 `Down2Pdf.aspx` 파일에 대한 경로 설정 4. `Down2Pdf.aspx` 파일에서 `wkhtmltopdf.exe` 및 폰트가 위치한 경로 설정 ### Syntax ```javascript void down2Pdf( param ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |fileName|`string`|<span class='optional'>선택</span>|생성할 PDF 파일명. 파일 확장자는 반드시 `.pdf`여야 합니다. 확장자를 생략할 경우 자동으로 `.pdf`를 붙여 다운로드 합니다. (`default: \"ibsheet.pdf\"`) | |downCols|`string`|<span class='optional'>선택</span>|지정한 열만 다운로드 합니다. 별도의 설정이 없을시 모든 열이 다운로드 됩니다. 보여지는 열만 다운로드하고 싶을 경우 `\"Visible\"`로 설정하면 됩니다. (ex: \"Price\\|AMT\\|TOTAL\" 식의 문자열)| |dpi|`number`|<span class='optional'>선택</span>|축소/확대 비율로 값이 작을 수록 크게 출력됩니다. 50~32840 사이 값으로 설정 가능합니다. (`defalut: 2000`)| |fontTo|`string`|<span class='optional'>선택</span>|PDF에 사용할 한글 폰트를 설정. \"Gothic\", \"Gulim\" 중 선택 (`default: \"Gulim\"`) **<mark>주의</mark> : `Gothic` 폰트는 서버모듈 제품에 포함되어 있지 않습니다.**| |paper|`string`|<span class='optional'>선택</span>|용지의 방향을 설정합니다. 가로: `landscape` 또는 세로: `portrait` (`default: \"portrait\"`)| |title|`string`|<span class='optional'>선택</span>|PDF 파일에 출력할 제목 설정 (`default: \"\"`) **<mark>주의</mark> : 해당 기능은 닷넷 서버모듈에서 지원하지 않습니다.** | |titleStyle|`string`|<span class='optional'>선택</span>|PDF 파일에 출력할 제목에 적용할 css style (`default: \"\"`)| |url|`string`|<span class='optional'>선택</span>|`down2Pdf`와 더불어 서버에서 처리해야 하는 내용이 있는 경우 로직을 처리할 URL을 넣어주면 `Down2Pdf.jsp` 페이지를 호출하기 전에 먼저 URL인자에서 설정한 페이지를 호출한다. 따라서 설정 페이지에서는 작업이 끝난 후, request를 `Down2Pdf.jsp` 페이지로 전달해야 한다. (`default: \"\"`)| |extendParam|`string`|<span class='optional'>선택</span>|서버로 전달해야 하는 내용이 있는 경우 `GET` 방식의 QueryString으로 연결하여 설정 (`default: \"\"`)| |extendParamMethod|`string`|<span class='optional'>선택</span>|extendParam을 전달하는 방식을 설정 (`default: \"POST\"`)| |reqHeader|`object`|<span class='optional'>선택</span>|서버 전송 헤더에 사용자가 지정한 헤더 정보를 설정합니다.| |useXhr|`boolean`|<span class='optional'>선택</span>| xhr 통신을 이용해 파일을 다운로드받습니다. `0(false)`:xhr 통신 사용 안함 (`default`) `1(true)`:xhr 통신 사용| ### Return Value ***none*** ### Example ```javascript var param = { fileName: \"홍길동 교통비 내역.pdf\", title: \"홍길동 교통비 내역\", titleStyle: \"color:red; font-size:100px;\" }; sheet.down2Pdf(param); ```",
              "see": [
                {
                  "label": "doPrint method",
                  "url": "/docs/funcs/core/do-print"
                },
                {
                  "label": "CanPrint row",
                  "url": "/docs/props/row/can-print"
                },
                {
                  "label": "CanPrint col",
                  "url": "/docs/props/col/can-print"
                },
                {
                  "label": "onBeforeExport event",
                  "url": "/docs/events/on-before-export"
                },
                {
                  "label": "onExportFinish event",
                  "url": "/docs/events/on-export-finish"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|0.0.0|기능 추가||excel|0.0.8|`reqHeader` 기능 추가|"
            },
            "url": "docs/funcs/excel/down-to-pdf.html"
          },
          {
            "cid": 773,
            "sid": "down-to-text",
            "name": "down-to-text",
            "label": "down2Text",
            "data": {
              "body": "> 시트의 내용을 `txt`파일이나 `csv`파일로 내보내기 합니다. > 해당함수는 시트의 내용을 `Down2Text.jsp` 파일로 전달하고, 이 파일에서 실제 `txt파일(혹은 csv)`을 생성하여 클라이언트 측으로 전송하게 됩니다. > 따라서 해당 함수를 사용하시려면 자바 서버모듈의 경우 `Down2Text.jsp`와 더불어 `ibsheet8-1.0.x.jar` 파일과 `apache POI 라이브러리`가 필요로 하고, 닷넷 서버모듈의 경우 `Down2Text.aspx`와 더불어 `IBSheet8-4.0.dll` 파일과 `Syncfusion 라이브러리 dll`가 필요합니다. > **이 기능을 사용하시려면, 배포시 같이 보내드리는 `/plugins/ibsheet-excel.js` 파일을 include 하셔야 합니다.** > > `Down2Text.jsp` 파일에 대한 경로는 Cfg에 `Export` 속성을 통해 설정해야 합니다. > 매 시트 생성시 마다 `Export`속성을 설정하기 번거로운 경우에는 [IBSheet.CommonOptions](/docs/static/common-options) 속성을 통해 모든 시트에 공통으로 설정할 수도 있습니다. > 다시 정리해 보자면 다음과 같은 작업이 필요 합니다. **자바 서버모듈** 1. `ibsheet8-1.0.x.jar` 파일과 `공통 라이브러리(POI jar)`를 WEB-INF/lib에 추가. 2. `/plugins/ibsheet-excel.js` 파일을 해당 페이지에 include. 3. 시트 생성시 `Cfg` 에 `Export`을 통해 `Down2Text.jsp` 파일에 대한 경로 설정 **닷넷 서버모듈** 1. `IBSheet8-4.0.dll` 파일과 `공통 라이브러리(Syncfusion dll)`을 bin 또는 참조에 추가. 2. `/plugins/ibsheet-excel.js` 파일을 해당 페이지에 include. 3. 시트 생성시 `Cfg`에 `Export` 속성을 통해 `Down2Text.aspx` 파일에 대한 경로 설정 ### Syntax ```javascript void down2Text( param ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |fileName|`string`|<span class='optional'>선택</span>|다운로드 받을 파일명입니다. 확장자를 설정하지 않으면 `txt` 파일로 다운로드 됩니다.| |rowDelim|`string`|<span class='optional'>선택</span>|text파일을 만들때 행 구분자(기본은 줄넘김 문자: `\"\\r\\n\"`) |colDelim|`string`|<span class='optional'>선택</span>|txt 다운로드 일 경우(`default: \\t(탭문자)`, csv 다운로드 일 경우(`default: ,(콤마)` 업로드되는 파일에 따라 기본 구분자가 변경됩니다. |downRows|`string`|<span class='optional'>선택</span>|다운로드 받을 행 인덱스(구분자 \"\\|\"로 연결 ex: \"1\\|3\\|4\\|5\\|7\")| |downCols|`string`|<span class='optional'>선택</span>|다운로드 받을 열 Name(구분자 \"\\|\"로 연결 ex: \"amt\\|qty1\\|qty2\\|qty3\\|years\")| |downHeader|`boolean`|<span class='optional'>선택</span>|헤더행을 다운로드 받을지 여부 `0(false)`:다운로드 시 헤더행 미포함 `1(true)`:다운로드 시 헤더행 포함 (`default`)| |downSum|`boolean`|<span class='optional'>선택</span>|합계행도 다운로드 받을지 여부 `0(false)`:합계 행 다운로드 시 미포함 `1(true)`:합계 행 다운로드 시 포함 (`default`)| |downTreeHide|`boolean`|<span class='optional'>선택</span>|tree를 사용하는 경우, 접혀진 행도 엑셀에 다운로드 할지 여부를 설정합니다. `0(false)`:접혀진 행(자식노드)들 다운로드 대상 제외 (`default`) `1(true)`:접혀진 행(자식노드)들 다운로드 대상 포함| |reqHeader|`object`|<span class='optional'>선택</span>|서버 전송 헤더에 사용자가 지정한 헤더 정보를 설정합니다.| |downloadEncoding|`string`|<span class='optional'>선택</span>|다운로드받는 텍스트 파일의 인코딩 형식을 지정합니다. UTF-8(BOM) 설정시 BOM을 삽입한 UTF-8 인코딩 형식으로 텍스트 파일을 다운로드합니다. (`default: \"txt: UTF-8, csv: EUC-KR\"`)| |extendParam|`string`|<span class='optional'>선택</span>|서버로 전달해야 하는 내용이 있는 경우 `GET` 방식의 `QueryString`으로 연결하여 서버로 같이 전달됩니다. (ex: `sheet.down2Excel({extendParam: \"sido=서울시&sigungu=관악구\"}`)| |extendParamMethod|`string`|<span class='optional'>선택</span>|`extendParam`의 내용을 `GET` 또는 `POST`로 전달할지를 설정합니다.(`default: \"GET\"`)| |useXhr|`boolean`|<span class='optional'>선택</span>| xhr 통신을 이용해 파일을 다운로드받습니다. `0(false)`:xhr 통신 사용 안함 (`default`) `1(true)`:xhr 통신 사용| ### Return Value ***none*** ### Example ```javascript //1. text 확장자로 다운로드 sheet.down2Text({fileName:\"yearsProfit.txt\"}); //2. csv 확장자로 다운로드 sheet.down2Text({fileName:\"yearsProfit.csv\", colDelim:\",\"}); ``` ### downloadEncoding 설정시 유의사항 ![downloadEncoding_utf_8](/assets/imgs/downloadencoding_utf_8.png \"downloadEncoding_utf_8\") `downloadEncoding`을 `UTF-8`로 설정해 csv 파일을 다운로드하시면 엑셀로 열였을 때 한글이 깨지는 현상이 발생합니다. 엑셀로 열었을 때 한글이 깨지는 현상을 예방하면서 `UTF-8` 인코딩을 적용하기 위해서는 `downloadEncoding`을 `UTF-8(BOM)`으로 설정해주세요 (서버모듈 1.1.18 버전 이후 설정 가능). ### csv 다운로드시 기본 인코딩에 관해 엑셀 플러그인 1.0.21 버전 이후로 csv 다운로드시 기본 인코딩 형식이 EUC-KR에서 UTF-8(BOM)으로 변경되었습니다. 그런데 해당 인코딩 형식은 서버모듈 1.1.18 버전 이후로 지원되는 형식이기에, 엑셀 플러그인 1.0.21 버전을 사용하시며 down2Text 기능을 사용하시려면 반드시 서버모듈 버전을 1.1.18 버전 이후의 버전으로 업그레이드하시거나 downloadEncoding 옵션을 UTF-8(BOM) 이외의 값으로 별도 설정해주셔야 됩니다.",
              "see": [
                {
                  "label": "AutoExcelMode cfg",
                  "url": "/docs/props/cfg/auto-excel-mode"
                },
                {
                  "label": "down2Excel method",
                  "url": "./down-to-excel"
                },
                {
                  "label": "exportData method",
                  "url": "/docs/funcs/core/export-data"
                },
                {
                  "label": "loadText method",
                  "url": "./load-text"
                },
                {
                  "label": "onBeforeExport event",
                  "url": "/docs/events/on-before-export"
                },
                {
                  "label": "onExportFinish event",
                  "url": "/docs/events/on-export-finish"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|0.0.0|기능 추가||excel|0.0.8|`reqHeader` 기능 추가||servermodule|1.1.18|`downloadEncoding: UTF-8(BOM)` 설정 추가||excel|1.0.21|csv 다운로드시 디폴트 인코딩 형식 `EUC-KR`에서 `UTF-8(BOM)`으로 변경 |"
            },
            "url": "docs/funcs/excel/down-to-text.html"
          },
          {
            "cid": 774,
            "sid": "get-sheet-data",
            "name": "get-sheet-data",
            "label": "getSheetData",
            "data": {
              "body": "> 시트의 데이터를 인자의 형식으로 추출 합니다. > 대상 컬럼을 설정하지 않은 경우는 모든 컬럼을 대상으로 합니다. ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |type|`string`|<span class='optional'>선택</span>|시트 데이터를 JSON으로 추출할지, `CSV`로 추출할지 선택합니다.(`default: json`)| |cols|`string`|<span class='optional'>선택</span>|추출할 컬럼을 지정합니다. 설정하지 않는 경우 모든 컬럼 데이터를 추출합니다. 보여지는 열만 추출하고 싶다면 \"Visible\"로 설정하면 됩니다.| |colDelim|`string`|<span class='optional'>선택</span>|출력 대상의 컬럼 구분자를 지정합니다. 해당 옵션은 type을 `CSV`로 지정한 경우만 사용하실 수 있습니다.(`default: ,`)| |newLine|`string`|<span class='optional'>선택</span>|셀 데이터에 개행이 포함되어 있는 경우, 출력 데이터의 개행 구분자를 설정합니다. 해당 옵션은 type을 `CSV`로 지정한 경우만 사용하실 수 있습니다.(`default: \\r\\n`)| |rowDelim|`string`|<span class='optional'>선택</span>|출력 대상의 행 구분자를 설정합니다. 해당 옵션은 type을 `CSV`로 지정한 경우만 사용하실 수 있습니다.(`default: \\r\\n`)| |styleProperty|`string`|<span class='optional'>선택</span>|행과 셀에 관한 스타일 관련 속성값을 포함하여 추출할지 여부를 설정합니다. 해당 옵션은 type을 `JSON`으로 지정한 경우만 사용하실 수 있습니다.(`default: 0`)| <!-- |formattedText|`string`|<span class='optional'>선택</span>|데이터를 포맷이 적용된 문자열로 추출할지 여부를 설정합니다.(`default: 0`)| --> ### styleProperty로 추출되는 데이터 |Target|Propery|Description| |----------|-----|---|----| |Row|CanEdit|대상 행의 편집 허용 여부| |Row|Color|대상 행의 배경색| |Row|TextColor|대상 행의 폰트 색상| |Cell|CanEdit|대상 셀의 편집 허용 여부| |Cell|Color|대상 셀의 배경색| |Cell|TextColor|대상 셀의 폰트 색상| |Cell|TextBold|대상 셀의 폰트 굵게(Bold) 여부| |Cell|TextItalic|대상 셀의 폰트 기울임(Italic) 여부| |Cell|TextUnderLine|대상 셀의 폰트 밑줄(Underline) 여부| |Cell|TextStrike|대상 셀의 폰트 취소선(Strike) 여부| |Cell|TextOverline|대상 셀의 폰트 윗줄(Overline) 여부| |Cell|Text|대상 셀의 작은 대문자(Small Caps) 여부| ### Return Value ***none*** ### Example ```javascript // 시트의 데이터를 json 형식으로 추출합니다. sheet.getSheetData({type: \"json\"}); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||excel|1.1.12|기능 추가|"
            },
            "url": "docs/funcs/excel/get-sheet-data.html"
          },
          {
            "cid": 775,
            "sid": "load-excel-buffer",
            "name": "load-excel-buffer",
            "label": "loadExcelBuffer",
            "data": {
              "body": "> 하나의 엑셀파일에서 여러개의 시트에 한 번에 로드하는 기능을 제공합니다. > **이 기능을 사용하시려면, 배포시 같이 제공되는 `/plugins/ibsheet-excel.js` 파일을 include 하셔야 합니다.** > > `loadExcelBuffer(true)`를 호출하면 이후에 여러개 시트에서 [loadExcel](./load-excel)를 호출하더라도 실제로는 동작하지 않다가, 최종적으로 `loadExcelBuffer(false)`가 호출될 때 파일다이얼로그를 통해 선택한 엑셀파일의 내용을 각 시트에 로드할 수 있습니다. ### Syntax ```javascript void loadExcelBuffer( isBuffer ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |isBuffer|`boolean`|<span class='required'>필수</span>|버퍼링 여부 `0(false)`:버퍼링 사용 안함 (`default`) `1(true)`:버퍼링 사용| ### Return Value ***none*** ### Example ```javascript //버퍼링 시작 sheet1.loadExcelBuffer(true); //정규직 워크시트의 내용을 sheet1에 업로드 var param1 = {workSheetName:\"정규직\"}; sheet1.loadExcel(param1); //비정규직 워크시트의 내용을 sheet1에 업로드 var param2 = {workSheetName:\"비정규직\"}; sheet2.loadExcel(param2); //버퍼링 종료 (파일다이얼로그 오픈) sheet1.loadExcelBuffer(false); ```",
              "see": [
                {
                  "label": "loadExcel method",
                  "url": "./load-excel"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|0.0.3|기능 추가|"
            },
            "url": "docs/funcs/excel/load-excel-buffer.html"
          },
          {
            "cid": 776,
            "sid": "load-excel",
            "name": "load-excel",
            "label": "loadExcel",
            "data": {
              "body": "> 엑셀 파일의 내용을 시트 위로 `import` 합니다. > 해당 함수를 호출시 파일 다이얼로그가 나타나고, 사용자가 엑셀 파일을 선택하면 선택된 파일을 서버측에 지정한 jsp(통상적으로 `LoadExcel.jsp`)파일로 전달 됩니다. > 전달받은 `LoadExcel.jsp` 파일에서는 엑셀 파일을 파싱하여 JSON string 형태로 클라이언트로 리턴하게 됩니다. > **이 기능을 사용하시려면, 배포시 같이 제공되는 `/plugins/ibsheet-excel.js` 파일을 include 하셔야 합니다.** > > `LoadExcel.jsp` 파일에 대한 경로는 Cfg속성 안에 [Export](/docs/props/cfg/export) 속성을 통해 설정되어야 합니다. > 매 시트 생성시 마다 Export속성을 설정하기 번거로운 경우에는 [IBSheet.CommonOptions](/docs/static/common-options) 속성을 통해 모든 시트에 공통으로 설정할 수도 있습니다. > 다시 정리해 보자면 다음과 같은 작업이 필요 합니다. **자바 서버모듈** 1. `ibsheet8-1.0.x.jar` 파일과 관련 `서버 라이브러리(POI jar파일)`를 WEB-INF/lib에 추가. 2. `/plugins/ibsheet-excel.js` 파일을 해당 페이지에 include. 3. 시트 생성시 `(cfg)Export` 속성을 통해 `LoadExcel.jsp` 파일에 대한 경로 설정 **닷넷 서버모듈** 1. `IBSheet8-4.0.dll` 파일과 `공통 라이브러리(Syncfusion dll)`을 bin 또는 참조에 추가. 2. `/plugins/ibsheet-excel.js` 파일을 해당 페이지에 include. 3. 시트 생성시 `(cfg)Export` 속성을 통해 `LoadExcel.aspx` 파일에 대한 경로 설정 ### Syntax ```javascript void loadExcel( param ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |append|`boolean`|<span class='optional'>선택</span>|시트의 기존 데이터를 뒤에 엑셀의 데이터를 추가할지 여부 설정을 하지 않으면 기존데이터는 모두 삭제한 후 엑셀의 데이터가 추가됨. `0(false)`:기존 데이터 제거 후 엑셀 데이터 추가 (`default`) `1(true)`:기존 데이터에 엑셀 데이터 추가| |fileExt|`string`|<span class='optional'>선택</span>|업로드 가능한 파일 확장자를 구분자(\"\\|\")로 연결하여 설정합니다. (`default: \"xls|xlsx\"`)| |maxFileSize|`string`|<span class='optional'>선택</span>|최대 업로드 가능한 파일 사이즈. (MB단위이며 설정하지 않으면 무제한입니다.)| |mode|`string`|<span class='optional'>선택</span>| `\"HeaderMatch\"`, `\"NoHeader\"`, `\"HeaderSkip\"` 중에 하나의 문자열을 입력합니다. 각 문자의 의미는 다음과 같습니다. <ul><li>`\"HeaderMatch\"` : 시트의 헤더행의 타이틀과 엑셀의 첫번째 행부터 타이틀을 비교해서 읽습니다. `StartRow`속성이 지정된 경우 `StartRow`에서 지정한 행부터 해더행의 개수만큼의 행을 읽어 비교합니다.</li><li>`\"NoHeader\"` : 헤더행이 없다고 가정하고 첫행부터 순서대로 각 열에 대입합니다.</li><li>`\"HeaderSkip\"` : 헤더행은 있지만 열비교를 하지 않고 좌측부터 순서대로 읽습니다. 시트의 헤더행의 2개라면 엑셀의 위에서 두개행을 제외하고 그 아래부터 읽는다고 생각하시면 됩니다.</li><li>`\"FullLoad\"` : 파일의 모든 워크시트를 'NoHeader' 모드로 업로드 다이얼로그에 로드합니다. (아래 설명 참고)</li></ul>(`default: \"HeaderMatch\"`)| | next | `object` | <span dir=\"\">선택</span> | [데이터 로우 객체](/docs/appx/row-object) 지정한 행 위에부터 데이터 `append`. (`append:1(true)`일때만 사용 가능) | |startRow|`number`|<span class='optional'>선택</span>|엑셀에서 시트가 몇번째 행에서 시작하는지 설정합니다. 설정하지 않으면 엑셀의 첫번째 행부터 (1부터시작) 읽어들임.| |startCol|`number`|<span class='optional'>선택</span>|엑셀에서 시트가 몇번째 열에서 시작하는지 설정합니다. 설정하지 않으면 엑셀의 첫번째 열부터 (1부터시작) 읽어들임. `mode: HeaderMatch`의 경우 (7,12)에 있는 시트를 찾을 때, `startRow: 7` 만 설정해 줘도 그 Row에 헤더길이만큼 텍스트를 보기 때문에 `startCol`을 설정할 필요가 없다. 만약, `startCol`을 사용할 경우, 엑셀에 있는 시트에 첫번째 컬럼부터 `startCol`이 시작하게 된다.| |workSheetName|`string`|<span class='optional'>선택</span>|읽어들일 엑셀 파일의 워크시트 명을 설정합니다. 일치하는 워크시트 명이 없으면 첫번째 워크시트를 읽습니다.| |workSheetNameStrict|`boolean`|<span class='optional'>선택</span>|workSheetName에 설정한 워크시트가 없는 경우 첫번째 워크시트를 로드하지 않고 -17 에러 코드를 반환합니다 `0(false)`:workSheetName에 설정된 워크시트가 없는 경우 첫번째 워크시트를 로드 (`default`) `1(true)`:workSheetName에 설정된 워크시트가 없는 경우 -17 에러 코드를 반환| |workSheetNo|`number`|<span class='optional'>선택</span>|읽어들일 엑셀 파일의 워크시트 순번을 설정합니다. 설정하지 않으면 첫번째 워크시트를 읽습니다.| |columnMapping|`string`|<span class='optional'>선택</span>|엑셀 컬럼 번호를 이용해서 시트의 열 순서에 따라 데이터를 로드하는 옵션입니다. 구분자(\"\\|\")로 연결하여 설정합니다.(1번부터 시작) mode 속성값은 무시된다.| |sendParam|`object`|<span class='optional'>선택</span>|엑셀 로드시 서버로 전달할 파라미터를 설정합니다.| |endRow|`number`|<span class='optional'>선택</span>|엑셀에서 몇번째 행까지 읽어들일 지 설정합니다. 설정하지 않으면 끝까지 읽어들입니다. 0부터 시작합니다.| |reqHeader|`object`|<span class='optional'>선택</span>|서버 전송 헤더에 사용자가 지정한 헤더 정보를 설정합니다.| |skipEmptyRow|`boolean`|<span class='optional'>선택</span>|엑셀 로드 시 빈 행을 생략할 지 설정합니다. `0(false)`:엑셀 로드 데이터에 빈 행 정보 포함 `1(true)`:엑셀 로드 데이터에 빈 행 정보 제외 (`default`)| |workbookPassword|`string`|<span class='optional'>선택</span>| 읽어들일 엑셀 파일에 비밀번호가 설정된 경우 사용하는 옵션입니다. xlsx 확장자 파일에서만 지원됩니다.| |useXhr|`boolean`|<span class='optional'>선택</span>| xhr 통신을 이용해 엑셀 파일을 로드합니다. `0(false)`:xhr 통신 사용 안함 (`default`) `1(true)`:xhr 통신 사용| |uploadImage|`boolean`|<span class='optional'>선택</span>| 셀 위에 띄워진 이미지를 업로드할지 여부를 결정합니다. `0(false)`: 셀 위에 띄워진 이미지를 업로드하지 않음 `1(true)`:셀 위에 띄워진 이미지를 업로드함 (`default`) | |skipSEQ|`boolean`|<span class='optional'>선택</span>|mode: `NoHeader`, `HeaderSkip`으로 데이터를 업로드할 때 SEQ 컬럼을 스킵하고 데이터를 업로드합니다. `columnMapping`을 설정한 경우에는 해당 인자가 동작하지 않습니다. (`default: 0`) | ### FullLoad 모드 ![FullLoad 모드](/assets/imgs/loadexcel_mode_fullload.png \"FullLoad 모드\") `FullLoad` 모드는 엑셀 업로드시 파일에 존재하는 모든 워크시트를 'NoHeader' 모드 상태로 업로드 다이얼로그에 로드하는 모드입니다. 로드된 워크 시트 중 한 가지를 선택한 뒤, 확인 버튼을 클릭해 선택된 워크 시트를 원본 시트에 로드하실 수 있습니다. **`FullLoad` 모드를 사용하시려면 반드시 다이얼로그 플러그인을 `1.0.11` 이후 버전으로, 서버모듈을 `1.1.21` 이후 버전으로, 엑셀 플러그인을 `1.0.21` 이후 버전으로 패치해주셔야 됩니다.** ### Return Value ***none*** ### Example ```javascript // 모드가 HeaderMatch, 엑셀이 5번째 로우의 위치, 워크시트 이름은 12월결산인 엑셀을 로드 var param = {startRow:5, mode:\"HeaderMatch\", workSheetName:\"12월결산\"}; sheet.loadExcel(param); // 모드가 HeaderSkip, 엑셀이 4번째 로우, 3번째 컬럼부터 시작. var param = {startRow:4, startCol:3, mode:\"HeaderMatch\"} sheet.loadExcel(param); // IBSheet의 첫번째 컬럼에 엑셀의 5번째 컬럼의 값을 로딩하고, IBSheet 의 5번째 컬럼에 엑셀의 1번째 컬럼의 값을 로딩 sheet.loadExcel({columnMapping:\"5|4|3|2|1\"}); ```",
              "see": [
                {
                  "label": ""
                },
                {
                  "label": "LoadExcelConfig cfg",
                  "url": "/docs/props/cfg/load-excel-config"
                },
                {
                  "label": "loadText method",
                  "url": "./load-text"
                },
                {
                  "label": "down2Excel method",
                  "url": "./down-to-excel"
                },
                {
                  "label": "down2Text method",
                  "url": "./down-to-text"
                },
                {
                  "label": "onImportFinish event",
                  "url": "../events/on-import-finish"
                },
                {
                  "label": "onSelectFile event",
                  "url": "../events/on-select-file"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|0.0.0|기능 추가||excel|0.0.8|`reqHeader` 기능 추가||excel|1.0.12|`workSheetNameStrict` 기능 추가||dialog|1.0.11|`FullLoad` 기능 추가 (`servermodule`: 1.1.21, `excel`: 1.0.21)||excel|1.1.8|`next` 기능 추가||excel|1.1.23|`uploadImage` 기능 추가 (`servermodule`: 2.0.2)||excel|1.1.31|`skipSEQ` 기능 추가 (`servermodule`: 2.0.13)|"
            },
            "url": "docs/funcs/excel/load-excel.html"
          },
          {
            "cid": 777,
            "sid": "load-text",
            "name": "load-text",
            "label": "loadText",
            "data": {
              "body": "> txt 파일의 내용을 시트 위로 `import` 합니다. > 해당 함수를 호출시 파일 다이얼로그가 나타나고, 사용자가 txt(혹은 csv)을 선택하면 선택된 파일을 서버측에 지정한 jsp(통상적으로 `LoadText.jsp`)파일로 전달 됩니다. 전달받은 `LoadText.jsp`에서는 txt 파일을 파싱하여 JSON string 형태로 클라이언트로 리턴하게 됩니다. > **이 기능을 사용하시려면, 배포시 같이 보내드리는 `/plugins/ibsheet-excel.js` 파일을 include 하셔야 합니다.** > > `LoadText.jsp` 파일에 대한 경로는 Cfg속성 안에 [Export](/docs/props/cfg/export) Url로 설정한 위치에 있어야합니다. > 매 시트 생성시 마다 `Export`속성을 설정하기 번거로운 경우에는 [IBSheet.CommonOptions](/docs/static/common-options) 속성을 통해 모든 시트에 공통으로 설정할 수도 있습니다. > `/plugins/ibsheet-common.js` 파일을 참고해 주세요. > > 다시 정리해 보자면 다음과 같은 작업이 필요 합니다. **자바 서버모듈** 1. `ibsheet8-1.0.x.jar` 파일을 WEB-INF/lib에 추가. 2. `/plugins/ibsheet-excel.js` 파일을 해당 페이지에 include. 3. 시트 생성시 `Cfg`에 `Export`속성을 통해 `LoadText.jsp` 파일에 대한 경로 설정 **닷넷 서버모듈** 1. `IBSheet8-4.0.dll` 파일을 bin 또는 참조에 추가. 2. `/plugins/ibsheet-excel.js` 파일을 해당 페이지에 include. 3. 시트 생성시 `Cfg`에 `Export` 속성을 통해 `LoadText.aspx` 파일에 대한 경로 설정 ### Syntax ```javascript void loadText( param ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |append|`boolean`|<span class='optional'>선택</span>|시트의 기존 데이터를 뒤에 text파일의 내용을 추가할지 여부 설정을 하지 않으면 기존데이터는 모두 삭제한 후 데이터가 추가됨. `0(false)`:기존 데이터 제거 후 엑셀 데이터 추가 (`default`) `1(true)`:기존 데이터에 엑셀 데이터 추가| |fileExt|`string`|<span class='optional'>선택</span>|업로드 가능한 파일 확장자를 구분자(\"\\|\")로 연결하여 설정합니다. (`defualt: \"txt|csv\"`)| |mode|`string`|<span class='optional'>선택</span>| `\"HeaderMatch\"`, `\"NoHeader\"`, `\"HeaderSkip\"` 중에 하나의 문자열을 입력합니다. 각 문자의 의미는 다음과 같습니다. <ul><li>`\"HeaderMatch\"` : 시트의 헤더행의 타이틀과 엑셀의 첫번째 행부터 타이틀을 비교해서 읽습니다. </li><li>`\"NoHeader\"` : 헤더행이 없다고 가정하고 첫행부터 순서대로 각 열에 대입합니다.</li><li>`\"HeaderSkip\"` : 헤더행은 있지만 열비교를 하지 않고 좌측부터 순서대로 읽습니다. 시트의 헤더행의 2개라면 엑셀의 위에서 두개행을 제외하고 그 아래부터 읽는다고 생각하시면 됩니다.</li></ul>(`default: \"HeaderMatch\"`)| |colSeparator|`string`|<span class='optional'>선택</span>|열과 열 사이의 구분자 문자 (`default: '\\t'(탭문자)`)| |encoding|`string`|<span class='optional'>선택</span>|텍스트 파일의 인코딩 형식 지정 (`default: \"utf-8\"`)| |sendParam|`object`|<span class='optional'>선택</span>|텍스트 로드시 서버로 전달할 파라미터를 설정합니다.| |reqHeader|`object`|<span class='optional'>선택</span>|서버 전송 헤더에 사용자가 지정한 헤더 정보를 설정합니다.| |useXhr|`boolean`|<span class='optional'>선택</span>| xhr 통신을 이용해 파일을 로드합니다. `0(false)`:xhr 통신 사용 안함 (`default`) `1(true)`:xhr 통신 사용| ### Return Value ***none*** ### Example ```javascript //text 파일 업로드 var param = {mode:\"NoHeader\", append:1}; sheet.loadText(param); ```",
              "see": [
                {
                  "label": "loadExcel method",
                  "url": "./load-excel"
                },
                {
                  "label": "down2Excel method",
                  "url": "./down-to-excel"
                },
                {
                  "label": "down2Text method",
                  "url": "./down-to-text"
                }
              ],
              "since": "|product|version|desc||---|---|---||excel|0.0.0|기능 추가||excel|0.0.8|`reqHeader` 기능 추가|"
            },
            "url": "docs/funcs/excel/load-text.html"
          }
        ]
      },
      {
        "gid": 3,
        "name": "funcs-dialog",
        "label": "Dialog Plugin",
        "children": [
          {
            "cid": 778,
            "sid": "show-chart-dialog",
            "name": "show-chart-dialog",
            "label": "showChartDialog",
            "data": {
              "body": "> 시트의 선택된 영역을 기준으로 차트를 보여주는 다이얼로그 창을 보여줍니다. > > <mark>해당 함수는 `\"/plugins/ibsheet-dialog.js\"` 파일과 `IBChart` 가 포함되어 있어야 사용하실 수 있습니다.</mark> > 다이얼로그에 대한 자세한 수정은 `ibsheet-dialog.js` 파일에서 하실 수 있습니다. ### 상세 설명 > `chartType` 인자로 다이얼로그 생성 시 차트 종류를 정할 수 있습니다. > 선택된 영역에 반드시 선택 시 `Int`, `Float`의 숫자형 열을 포함해야 합니다. > `Text`, `Lines`, `Enum`의 [Type](/docs/appx/type)만 카테고리로 설정됩니다. > 선택된 영역 중간에 숨겨진 열이 존재할 경우 다이얼로그가 생성되지 않습니다. > `MultiRecord` 사용 시 사용할 수 없습니다. ### 화면 설명 ![다운로드](../../../assets/imgs/showChartDialog.png) #### 다이얼로그 버튼 메뉴 ![다운로드](../../../assets/imgs/showChartDialog_menu2.png) > 다운로드 버튼 클릭 시 이미지 또는 엑셀 파일로 차트를 다운로드할 수 있습니다. > 설정 버튼을 클릭 시 관련 메뉴가 나타납니다. > 설정 메뉴가 보이면 확대/축소 버튼은 비활성화됩니다. > 확대/축소 버튼 클릭 시 브라우저 창의 크기만큼 다이얼로그의 크기를 확대시킵니다. #### 설정 버튼 메뉴 ##### 1. 차트 유형 ![다운로드](../../../assets/imgs/showChartDialog_menu3.png) > 차트 유형을 변경할 수 있습니다. ##### 2. 차트 데이터 ![다운로드](../../../assets/imgs/showChartDialog_menu4.png) > 1. 카테고리: 가로축 기준을 설정할 수 있습니다. > 2. 데이터 영역: 세로축 기준을 설정할 수 있습니다. > 3. 전체 영역 선택: `showChartDialog` 시 선택한 행이 아닌 현재의 시트 화면에 있는 모든 행의 데이터를 포함하여 차트를 생성합니다. ##### 3. 기타 설정 ![다운로드](../../../assets/imgs/showChartDialog_menu5.png) > 1. 툴팁/데이터 레이블 사용 여부: 차트에 툴팁/데이터 레이블을 표시하거나 감출 수 있습니다. > 2. 색상 팔레트: 차트의 색상을 변경할 수 있습니다. > 3. 범례 위치: 범례의 표시 위치를 설정할 수 있습니다. > 4. 데이터 피벗: 가로축과 세로축의 기준을 반전시킵니다. ### Syntax ```javascript void showChartDialog(chartType); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |chartType|`string`|<span class='optional'>선택</span>|차트의 종류 (`default: line`)| ### chartType Options |Value|Description| |----------|-----| |`line`|선형 일반 차트| |`spline`|꺽은선 차트| |`lineStep`|계단형 차트| |`column`|수직막대 일반차트| |`columnStacked`|수직막대 누적차트| |`columnStacked100`|수직막대 100% 누적차트| |`bar`|수평막대 일반차트| |`barStacked`|수평막대 누적차트| |`barStacked100`|수평막대 100% 누적차트| |`pie`|파이형 차트| |`doughnut`|도넛형 차트| |`area`|일반영역차트| |`areaStacked`|누적영역차트| |`areaStacked100`|100% 누적영역차트| |`combination1`|세로막대+영역 차트| |`combination2`|세로막대+꺽은선 차트| ### Return Value ***none*** ### Example ```javascript // 막대형 차트 생성 sheet.showChartDialog(\"bar\"); // 선형 차트 생성 sheet.showChartDialog(\"line\"); ```",
              "see": [
                {
                  "label": "showDialog static",
                  "url": "/docs/static/show-dialog"
                },
                {
                  "label": "Dialog appendix",
                  "url": "/docs/appx/dialog"
                }
              ],
              "since": "|product|version|desc||---|---|---||dialog|1.0.17|기능 추가|"
            },
            "url": "docs/funcs/dialog/show-chart-dialog.html"
          },
          {
            "cid": 779,
            "sid": "show-download-dialog",
            "name": "show-download-dialog",
            "label": "showDownloadDialog",
            "data": {
              "body": "> 시트의 내용을 엑셀이나 Text형식으로 다운로드 받기 위한 다이얼로그 창을 오픈합니다. > 해당 기능은 `Cfg.Export.Url` 에 `jsp(aspx)`파일에 대한 경로가 설정되어 있어야 합니다. > <mark>해당 함수는 `\"/plugins/ibsheet-dialog.js\"` 파일이 포함되어 있어야 사용하실 수 있습니다.</mark> > 다이얼로그에 대한 자세한 수정은 `ibsheet-dialog.js`파일에서 하실 수 있습니다. ### 상세 설명 > `sheet.showDownloadDialog()`를 호출하여 동일한 기능 사용 가능합니다. > `rowchk` 인자를 사용하여 `1(default)`인 경우 행 선택 열 생성, `0`인 경우 행 선택 열을 생성하지 않습니다. > `title` 인자에는 원하고자 하는 타이틀명을 입력 할 수 있음. 입력하지 않을 시 기본적으로 파일 다운로드라는 타이틀명을 사용합니다. > `title` 에 `html 태그`를 사용 할 수 있습니다. ex) `<span style='color:red;'>사내 정규직 지원 리스트</span>` > `downParams.downCols` 값이 `\"Visible\"`일 경우 `Visible:1` 값인 컬럼들만 다이얼로그에 보여집니다. ![다운로드](/assets/imgs/DownloadDialog.png) ### Syntax ```javascript void showDownloadDialog(width, height, name, rowchk, title, downParams); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |width|`number`|<span class='optional'>선택</span>|다이얼로그 창의 너비 (`default: 700`)| |height|`number`|<span class='optional'>선택</span>|다이얼로그 창의 높이 (`default: 400`)| |name|`string`|<span class='optional'>선택</span>|다이얼로그 시트 이름 (`default: \"excelDownloadSheet_\" + 시트id`)| |rowchk|`number`|<span class='optional'>선택</span>|행 선택 열 기능 사용 (`default: 1`)| |title|`string`|<span class='optional'>선택</span>|다이얼로그 타이틀 (`default: \"파일 다운로드\"`)| |downParams|`object`|<span class='optional'>선택</span>|[down2Excel](/docs/funcs/excel/down-to-excel) 인자 모두 사용 가능 | ### Return Value ***none*** ### Example ```javascript //다운로드 다이얼로그 오픈 sheet.showDownloadDialog(600, 400); //객체방식 sheet.showDownloadDialog({ width: 600, height: 400, name: \"excelDownSheet\", downParams: { titleText:\"||2020년 4월 교통비\\r\\n|||||||홍길동\", userMerge:\"0,2,1,4\", downCols:\"Visible\" } }); ```",
              "see": [
                {
                  "label": "showDialog static",
                  "url": "/docs/static/show-dialog"
                },
                {
                  "label": "Dialog appendix",
                  "url": "/docs/appx/dialog"
                },
                {
                  "label": "down2Excel method",
                  "url": "/docs/funcs/excel/down-to-excel"
                },
                {
                  "label": "down2Text method",
                  "url": "/docs/funcs/excel/down-to-text"
                },
                {
                  "label": "showUploadDialog method",
                  "url": "./show-upload-dialog"
                }
              ],
              "since": "|product|version|desc||---|---|---||dialog|0.0.0|기능 추가||dialog|0.0.2|다운로드할 시트가 `Cfg.MultiRecord` 기능을 사용할 때 대응 할 수 있도록 수정||dialog|0.0.3|`showExcelDownloadDialog`에서 `showDownloadDialog`로 이름 변경||dialog|0.0.5|`downParams.downCols` 값이 `\"Visible\"`일 경우 보여지는 컬럼 변경|"
            },
            "url": "docs/funcs/dialog/show-download-dialog.html"
          },
          {
            "cid": 780,
            "sid": "show-edit-dialog",
            "name": "show-edit-dialog",
            "label": "showEditDialog",
            "data": {
              "body": "> 한 행의 내용을 다이얼로그로 열어 보여줍니다. > 다이얼로그 내에서 값을 수정하실 수도 있으나, `Formula`, `Related`(관계형 Enum)는 동작하지 않습니다. > (가급적 다이얼로그 내에서 직접 수정보다는 확인 용도로 사용하실 것을 권합니다.) > <mark>해당 함수는 `\"/plugins/ibsheet-dialog.js\"` 파일이 포함되어 있어야 사용하실 수 있습니다.</mark> > 다이얼로그에 대한 자세한 수정은 `ibsheet-dialog.js`파일에서 하실 수 있습니다. ### ![다운로드](/assets/imgs/showEditDialog.png) ### Syntax ```javascript object showEditDialog( row, width, height, headerIndex, name, excludeHideCol, nav ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |row|`object`|<span class='required'>필수</span>|다이얼로그로 보여질 [데이터 로우 객체](/docs/appx/row-object) |width|`number`|<span class='optional'>선택</span>|다이얼로그 창의 너비 (`default: 700`)| |height|`number`|<span class='optional'>선택</span>|다이얼로그 창의 높이 (`default: 400`)| |headerIndex|`number`|<span class='optional'>선택</span>|헤더행이 여러 줄인 경우 몇 번째 헤더행을 다이얼로그의 타이틀로 표시할 지 여부 (`default: 모든 헤더행의 타이틀을 구분자 \"/\"로 연결하여 표시`)| |name|`string`|<span class='optional'>선택</span>|다이얼로그 이름 (`default: \"editSheet_\" + 시트id`)| |excludeHideCol|`boolean`|<span class='optional'>선택</span>|숨겨진 컬럼에 대한 처리 여부 `0(false)`:다이알로그 출력 시, 숨겨진 컬럼 포함(`default`) `1(true)`:다이알로그 출력 시 숨겨진 컬럼 제외| |nav|`boolean`|<span class='optional'>선택</span>|네비게이션 기능 사용 여부 `0(false)`:네비게이션 기능 사용 안함 (`default`) `1(true)`:네비게이션 기능 사용| ### Return Value ***none*** ### Example ```javascript // 특정 열의 셀 클릭 시 다이얼로그 오픈 options.Events = { onClick:function(evtParam){ if(evtParam.col == \"DetailBtn\"){ sheet.showEditDialog(evtParam.row); return true; } } } // 객체 방식 sheet.showEditDialog({row: sheet.getFocusedRow(), width: 700, height: 700}); ```",
              "see": [
                {
                  "label": "showDialog static",
                  "url": "/docs/static/show-dialog"
                },
                {
                  "label": "Dialog appendix",
                  "url": "/docs/appx/dialog"
                }
              ],
              "since": "|product|version|desc||---|---|---||dialog|0.0.0|기능 추가||dialog|0.0.8|`excludeHideCol` 기능 추가||dialog|0.0.10|`nav` 기능 추가|"
            },
            "url": "docs/funcs/dialog/show-edit-dialog.html"
          },
          {
            "cid": 781,
            "sid": "show-find-dialog",
            "name": "show-find-dialog",
            "label": "showFindDialog",
            "data": {
              "body": "> 시트 내에 데이터(텍스트 기준)를 찾기 위한 다이얼로그를 오픈합니다. > 바꾸기 기능을 통해 검색 데이터를 변경할 수 있습니다. > <mark>해당 함수는 `\"/plugins/ibsheet-dialog.js\"` 파일이 포함되어 있어야 사용하실 수 있습니다.</mark> ### **검색 기능** ![찾기다이얼로그](/assets/imgs/findDialog_search.png) **바꾸기 기능** ![찾기다이얼로그](/assets/imgs/findDialog_replace.png) **모두 찾기 기능** ![찾기다이얼로그](/assets/imgs/findDialog_searchAll.png) ### Syntax ```javascript object showFindDialog(); ``` ### Return Value ***none*** ### Example ```javascript //모든 시트에서 ctrl+shift+F 입력시 찾기창 오픈 IBSheet.CommonOptions = { Events:{ \"onKeyDown\":function(evtParam){ //Ctrl+Shift+F 입력시 찾기 창 오픈 if(evtParam.prefix == \"ShiftCtrl\" && evtParam.key == 70 ){ evtParam.sheet.showFindDialog(); } } } }; ```",
              "see": [
                {
                  "label": "showDialog static",
                  "url": "/docs/static/show-dialog"
                },
                {
                  "label": "Dialog appendix",
                  "url": "/docs/appx/dialog"
                }
              ],
              "since": "|product|version|desc||---|---|---||dialog|0.0.0|기능 추가||dialog|0.0.9|찾기 다이얼로그 리뉴얼 (바꾸기 기능, 전체 셀 내용 일치, 컬럼 선택 기능 추가)||dialog|1.0.12|찾기 다이얼로그 리뉴얼 (모두찾기 기능 추가 및 UI 리뉴얼)||dialog|1.0.79|ctrl+f 단축키로 다이얼로그 뜨도록 기능 개선|"
            },
            "url": "docs/funcs/dialog/show-find-dialog.html"
          },
          {
            "cid": 782,
            "sid": "show-pivot-dialog",
            "name": "show-pivot-dialog",
            "label": "showPivotDialog",
            "data": {
              "body": "> 피벗 데이터를 확인하기 위한 다이얼로그를 오픈합니다. > 피벗 데이터를 만들 열을 우측으로 드래그하여 설정하신 후, 피벗 테이블 생성 버튼을 클릭하시면 원본시트 위치에 동적으로 생성된 피벗 시트가 보여집니다. > <mark>해당 함수는 `\"/plugins/ibsheet-dialog.js\"` 파일이 포함되어 있어야 사용하실 수 있습니다.</mark> > **<mark>주의</mark> : 피벗 다이얼로그 사용 시, 필터 다이얼로그([UseFilterDialog (cfg)](/docs/props/cfg/use-filter-dialog))는 사용 하실 수 없습니다.** ### ![피봇다이얼로그](/assets/imgs/showPivotDialog.png) ### Syntax ```javascript object showPivotDialog(width, height, name, pivotParams, useStorage); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |width|`number`|<span class='optional'>선택</span>|다이얼로그 창의 너비 (`default: 500`)| |height|`number`|<span class='optional'>선택</span>|다이얼로그 창의 높이 (`default: 600`)| |name|`string`|<span class='optional'>선택</span>|다이얼로그 이름 (`default: \"pivotDialog_\" + 시트id`)| |pivotParams|`object`|<span class='optional'>선택</span>|[makePivotTable method](/docs/funcs/core/make-pivot-table) 옵션 사용 (`format`, `callback`, `hideTotal` 사용 가능)| |useStorage|`boolean`|<span class='optional'>선택</span>|피벗 생성 정보 저장 기능 보여지기 여부 (`default: 0(false)`) 해당 기능을 사용할 때에는 [StorageSession](/docs/props/cfg/storage-session)를 설정해야 합니다 `0(false)`:피벗 생성 정보 저장 기능 미표시 (`default`) `1(true)`:피벗 생성 정보 저장 기능 표시| ### Return Value ***none*** ### Example ```javascript //피봇 다이얼로그 오픈 sheet.showPivotDialog(); //객체 방식 sheet.showPivotDialog({ width: 700, height: 700 }); sheet.showPivotDialog({ width: 700, height: 700, pivotParams: { format: '#,### 만원', callback: function (evt) { var dataRows = evt.sheet.getDataRows(); for (var i = 0; i < dataRows.length; i++) { if (evt.sheet.getValue(dataRows[i], 'SUMsSalary') > 20000000) { evt.sheet.setAttribute(dataRows[i], 'SUMsSalary', 'TextColor', '#FF0000', 1); evt.sheet.setAttribute(dataRows[i], 'MainCol', 'Color', '#FF0000', 1); evt.sheet.setAttribute(dataRows[i], 'MainCol', 'TextColor', '#FFFFFF', 1); } else { evt.sheet.setAttribute(dataRows[i], 'SUMsSalary', 'TextColor', '#0000FF', 1); } } } }, useStorage: true }); ```",
              "see": [
                {
                  "label": "makePivotTable method",
                  "url": "/docs/funcs/core/make-pivot-table"
                },
                {
                  "label": "switchPivotSheet method",
                  "url": "/docs/funcs/core/switch-pivot-sheet"
                },
                {
                  "label": "showDialog static",
                  "url": "/docs/static/show-dialog"
                },
                {
                  "label": "Dialog appendix",
                  "url": "/docs/appx/dialog"
                },
                {
                  "label": "StorageSession cfg",
                  "url": "/docs/props/cfg/storage-session"
                }
              ],
              "since": "|product|version|desc||---|---|---||dialog|0.0.0|기능 추가||dialog|0.0.6|`showType` 기능 추가||dialog|0.0.7|`pivotParams` 기능 추가||dialog|0.0.8|기능 명 변경 (`createPivotDialog` -> `showPivotDialog`)||dialog|0.0.11|`useStorage` 기능 추가||dialog|1.0.29|`showPivotDialog` 의 `pivotType` 관련 기능 개선||dialog|1.0.39|`pivotParams`에 `hideTotal` 파라미터 기능 추가|"
            },
            "url": "docs/funcs/dialog/show-pivot-dialog.html"
          },
          {
            "cid": 783,
            "sid": "show-sort-dialog",
            "name": "show-sort-dialog",
            "label": "showSortDialog",
            "data": {
              "body": "> 시트의 정렬을 설정할 수 있는 다이얼로그 창을 오픈합니다. > 확인 버튼 클릭시 다이얼로그에서 설정한 순서대로 정렬이 실행됩니다. > <mark>해당 함수는 `\"/plugins/ibsheet-dialog.js\"` 파일이 포함되어 있어야 사용하실 수 있습니다.</mark> > 다이얼로그에 대한 자세한 수정은 `ibsheet-dialog.js`파일에서 하실 수 있습니다. ### ![다운로드](/assets/imgs/showSortDialog.png) ### Syntax ```javascript object showSortDialog( width, height, headerIndex, name, excludeHideCol, useOptions ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |width|`number`|<span class='optional'>선택</span>|다이얼로그 창의 너비 (`default: 600`)| |height|`number`|<span class='optional'>선택</span>|다이얼로그 창의 높이 (`default: 200`)| |headerIndex|`number`|<span class='optional'>선택</span>|헤더행이 여러 줄인 경우 몇 번째 헤더행을 다이얼로그의 기준 컬럼 셀 값으로 표시할 지 여부 (`default: 모든 헤더행의 타이틀을 구분자 \"/\"로 연결하여 표시`)| |name|`string`|<span class='optional'>선택</span>|다이얼로그 이름 (`default: \"sortSheet_\" + 시트id`)| |excludeHideCol|`boolean`|<span class='optional'>선택</span>|숨겨진 컬럼에 대한 처리 여부 `true`로 설정하는 경우 숨겨진 컬럼은 기준 컬럼 셀에서 보이지 않는다 `0(false)`:다이알로그 출력 시, 숨겨진 컬럼 포함 (`default`) `1(true)`:다이알로그 출력 시 숨겨진 컬럼 제외| |useOptions|`boolean`|<span class='optional'>선택</span>|정렬에 대한 추가 옵션을 설정할 수 있는 컬럼들을 보일지 여부 `true`로 설정하는 경우 [NumberSort](/docs/props/col/number-sort), [RawSort](/docs/props/col/raw-sort), [CaseSensitive](/docs/props/col/case-sensitive) 설정 컬럼이 보여진다. `0(false)`:다이알로그 출력 시 정렬에 대한 추가 옵션 설정 컬럼 숨김 (`default`) `1(true)`:다이알로그 출력 시 정렬에 대한 추가 옵션 설정 컬럼 보임| ### Return Value ***none*** ### Example ```javascript // 정렬 다이얼로그 오픈 sheet.showSortDialog(600, 400); // 객체 방식 sheet.showSortDialog({ width: 600, height: 400, excludeHideCol: 1, // 숨긴 열 기준 컬럼으로 사용 안함 useOptions: 1 // 추가 옵션 기능 사용 }); ```",
              "see": [
                {
                  "label": "showDialog static",
                  "url": "/docs/static/show-dialog"
                },
                {
                  "label": "Dialog appendix",
                  "url": "/docs/appx/dialog"
                },
                {
                  "label": "NumberSort col",
                  "url": "/docs/props/col/number-sort"
                },
                {
                  "label": "RawSort col",
                  "url": "/docs/props/col/raw-sort"
                },
                {
                  "label": "CaseSensitive col",
                  "url": "/docs/props/col/case-sensitive"
                }
              ],
              "since": "|product|version|desc||---|---|---||dialog|0.0.8|기능 추가|"
            },
            "url": "docs/funcs/dialog/show-sort-dialog.html"
          },
          {
            "cid": 784,
            "sid": "show-upload-dialog",
            "name": "show-upload-dialog",
            "label": "showUploadDialog",
            "data": {
              "body": "> 엑셀 업로드할때 옵션을 선택할 수 있는 다이얼로그입니다. > 팝업에 로드된 데이터 중 일부를 사용자가 수정할 수 있습니다. > 앞 쪽 체크박스를 통해 팝업에 로드된 데이터 중 일부 행을 로드에서 제외할 수 있습니다. > 엑셀 뿐만 아니라 `txt, csv` 파일도 업로드 가능하고 `txt` 파일의 경우 열 구분자를 사용자가 직접 선택할 수 있습니다. > 과도한 `colCount` 설정은 성능에 문제가 될 수 있기 때문에 기본값을 20으로 설정했습니다. > 마스터 헤더의 Value를 업로드 시트 Head에서 `value/value..` 형식으로 만들고 있습니다. > `Header`가 예를 들어 `[\"캠페인\",\"시작일\"], [\"시즌\",\"시작일\"] `인 경우가 있기 때문에 `Enum`에 `\"캠페인\"/\"시작일\", \"시즌\"/\"시작일\"` 로 표현합니다. > 마스터 시트의 컬럼을 가져와 `Head - Enum`을 만들고 원하는 컬럼 위치를 스왑 할 수 있습니다. 필수항목의 경우 이름 옆에 (필수)가 붙습니다. > 오류건의 경우 셀의 배경이 노란색으로 나오며 업로드가 되지 않습니다. 너비, 높이의 최솟값은 기본값으로 설정하고 있습니다. > <mark>해당 함수는 `\"/plugins/ibsheet-dialog.js\"` 파일이 포함되어 있어야 사용하실 수 있습니다.</mark> ### ![다운로드](/assets/imgs/showuploaddialog_recent.png) ### Syntax ```javascript void showUploadDialog( uploadType, width, height, name, colCount ); ``` ### Parameters |Name|Type|Required| Description | |----------|-----|---|----| |uploadType|`text`|<span class='required'>필수</span>|업로드 할 파일 (`'excel'`, `'txt'`, `'csv'`)| |width|`number`|<span class='optional'>선택</span>|다이얼로그 가로 크기 (`default: 700`)| |height|`number`|<span class='optional'>선택</span>|다이얼로그 세로 크기 (`default: 400`)| |name|`string`|<span class='optional'>선택</span>|다이얼로그 시트 이름 (`defulat: \"excelUploadSheet_\"+ 시트id`)| |colCount|`number`|<span class='optional'>선택</span>|실제 엑셀 파일의 컬럼 갯수가 더 많을 때 업로드 해야함으로 임의 컬럼을 만듬 (`default: 20`)| ### Return Value ***none*** ### Example ```javascript //excel 업로드 다이얼로그 생성 sheet.showUploadDialog(\"excel\"); //txt 업로드 다이얼로그 생성 sheet.showUploadDialog(\"txt\"); //객체 형식 sheet.showUploadDialog({ uploadType:\"excel\", colCount: 25 }); ```",
              "see": [
                {
                  "label": "showDialog static",
                  "url": "/docs/static/show-dialog"
                },
                {
                  "label": "Dialog appendix",
                  "url": "/docs/appx/dialog"
                },
                {
                  "label": "loadExcel method",
                  "url": "/docs/funcs/excel/load-excel"
                },
                {
                  "label": "loadText method",
                  "url": "/docs/funcs/excel/load-text"
                },
                {
                  "label": "showDownloadDialog method",
                  "url": "./show-download-dialog"
                }
              ],
              "since": "|product|version|desc||---|---|---||dialog|0.0.2|기능 추가 및 업로드할 시트가 `Cfg.MultiRecord` 기능을 사용할때 대응 할 수 있도록 수정|"
            },
            "url": "docs/funcs/dialog/show-upload-dialog.html"
          }
        ]
      },
      {
        "gid": 4,
        "name": "funcs-common",
        "label": "Common Plugin",
        "children": [
          {
            "cid": 785,
            "sid": "get-data-visible-rows",
            "name": "get-data-visible-rows",
            "label": "getDataVisibleRows",
            "data": {
              "body": "> 시트에서 보여지고 있는 데이터 로우 객체들을 확인합니다. ### Syntax ```javascript void getDataVisibleRows( noSubTotal ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |noSubTotal|`boolean`|<span class='optional'>선택</span>|소계/누계 행을 제외할지 여부| ### Return Value ***none*** ### Return Value ***array[row object]*** : 데이터 로우 객체 배열 ### Example ```javascript // 시트에서 보여지고 있는 데이터 로우 객체들을 반환합니다. sheet.getDataVisibleRows(); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/common/get-data-visible-rows.html"
          },
          {
            "cid": 786,
            "sid": "get-footer-rows",
            "name": "get-footer-rows",
            "label": "getFooterRows",
            "data": {
              "body": "> 푸터 영역에 있는 푸터 데이터 로우 객체들의 배열을 반환합니다. ### Syntax ```javascript void getFooterRows(); ``` ### Return Value ***array[row object]*** : 데이터 로우 객체 배열 ### Example ```javascript // 푸터 영역에 있는 푸터 데이터 로우 객체들의 배열을 반환합니다. sheet.getFooterRows(); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/common/get-footer-rows.html"
          },
          {
            "cid": 787,
            "sid": "get-row-status",
            "name": "get-row-status",
            "label": "getRowStatus",
            "data": {
              "body": "> 특정 행의 상태값을 반환합니다. > 상태값 반환 우선순위는 아래와 같습니다. > > 1. 행 상태에 Added가 포함된 경우 우선 무조건적으로 Added를 반환합니다. > 2. 행 상태에 Deleted가 포함된 경우 그 다음 무조건적으로 Deleted를 반환합니다. > 3. 그 이외의 경우에는 Changed를 반환합니다. > 4. 상태가 없는 경우에는 \"\"를 반환합니다. ### Syntax ```javascript void getRowStatus(); ``` ### Return Value ***string*** 행 상태 ### Example ```javascript sheet.getRowStatus( row ); // 파라미터로 기입한 행의 상태값을 반환합니다. ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||common|1.0.27|기능 추가|"
            },
            "url": "docs/funcs/common/get-row-status.html"
          },
          {
            "cid": 788,
            "sid": "get-sheet-focused",
            "name": "get-sheet-focused",
            "label": "getSheetFocused",
            "data": {
              "body": "> 현재 포커스된 시트 객체를 반환합니다. ### Syntax ```javascript void getSheetFocused(); ``` ### Return Value ***Sheet*** 시트 객체 ### Example ```javascript // 푸터 영역에 있는 푸터 데이터 로우 객체들의 배열을 반환합니다. sheet.getSheetFocused(); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/common/get-sheet-focused.html"
          },
          {
            "cid": 789,
            "sid": "get-sheet-height",
            "name": "get-sheet-height",
            "label": "getSheetHeight",
            "data": {
              "body": "> 시트의 높이를 반환합니다. ### Syntax ```javascript void getSheetHeight(); ``` ### Return Value ***number*** 시트의 높이 ### Example ```javascript // 시트의 높이를 반환합니다. sheet.getSheetHeight(); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/common/get-sheet-height.html"
          },
          {
            "cid": 790,
            "sid": "get-sheet-tag",
            "name": "get-sheet-tag",
            "label": "getSheetTag",
            "data": {
              "body": "> 시트의 태그를 반환합니다. 기본으로 div 태그, 인자 사용시 table 태그를 반환할 수 있습니다. ### Syntax ```javascript void getSheetTag( tableTag ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |tableTag|`boolean`|<span class='optional'>선택</span>|시트의 테이블 태그를 가져올지 여부| ### Return Value ***element*** 시트 태그 ### Example ```javascript // 소계에 설정된 옵션을 배열 형태로 반환합니다. sheet.getSheetTag(); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/common/get-sheet-tag.html"
          },
          {
            "cid": 791,
            "sid": "get-sheet-width",
            "name": "get-sheet-width",
            "label": "getSheetWidth",
            "data": {
              "body": "> 시트의 너비를 반환합니다. ### Syntax ```javascript void getSheetWidth(); ``` ### Return Value ***number*** 시트의 높이 ### Example ```javascript // 시트의 높이를 반환합니다. sheet.getSheetWidth(); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/common/get-sheet-width.html"
          },
          {
            "cid": 792,
            "sid": "get-subsum-options",
            "name": "get-subsum-options",
            "label": "getSubSumOptions",
            "data": {
              "body": "> [makeSubTotal()](../core/make-sub-total)로 시트에 소계 기능을 사용시, 설정된 옵션을 확인합니다. ### Syntax ```javascript object getSubSumOptions(); ``` ### Return Value ***array[option]*** makeSubTotal()에 설정된 옵션 ``` [ { \"stdCol\": 3, \"avgCols\": \"B|C\", \"captionCol\": [ { \"col\": \"sUnit\", \"val\": \"%s: %col\" } ], \"position\": \"bottom\", \"color\": \"#dbe2eb\", \"stdColName\": \"sUnit\" }, { \"stdCol\": 2, \"sumCols\": \"B|C\", \"position\": \"bottom\", \"color\": \"#b2c4d9\", \"stdColName\": \"sPolicy\", \"captionCol\": [ { \"col\": \"sPolicy\", \"val\": \"%s : %col\", \"cumVal\": \"%s : %col\" } ] } ] ``` ### Example ```javascript // 소계에 설정된 옵션을 배열 형태로 반환합니다. var opt = sheet.getSubSumOptions(); ```",
              "see": [
                {
                  "label": "makeSubTotal method",
                  "url": "../core/make-sub-total"
                }
              ],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/common/get-subsum-options.html"
          },
          {
            "cid": 793,
            "sid": "hide-rows",
            "name": "hide-rows",
            "label": "hideRows",
            "data": {
              "body": "> 여러 개의 행을 한꺼번에 숨깁니다. ### Syntax ```javascript void hideRows( rows ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |rows|`array[object]`|<span class='optional'>선택</span>|숨길 [데이터 로우 객체](/docs/appx/row-object)의 배열| ### Return Value ***none*** ### Example ```javascript // AR1 행과 AR2행을 한꺼번에 숨깁니다. sheet.hideRows([sheet.getRowById(\"AR1\"), sheet.getRowById(\"AR2\")]); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/common/hide-rows.html"
          },
          {
            "cid": 794,
            "sid": "set-all-col-value",
            "name": "set-all-col-value",
            "label": "setAllColValue",
            "data": {
              "body": "> setValue를 이용하여 하나 컬럼의 전체 데이터행 값을 일괄적으로 변경합니다. ### Syntax ```javascript void setAllColValue( colName, value ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |colName|`string`|<span class='optional'>선택</span>|열 이름| |value|`string`|<span class='optional'>선택</span>|입력값| ### Return Value ***none*** ### Example ```javascript // StartDate 컬럼의 값을 20210124로 일괄 변경합니다. sheet.setAllColValue(\"StartDate\", \"20210124\"); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/common/set-all-col-value.html"
          },
          {
            "cid": 795,
            "sid": "set-all-fit-size",
            "name": "set-all-fit-size",
            "label": "setAllFitSize",
            "data": {
              "body": "> fitSize 를 이용하여 전체 컬럼의 너비를 조정합니다. ### Syntax ```javascript void setAllFitSize(); ``` ### Return Value ***none*** ### Example ```javascript // fitSize를 이용하여 전체 컬럼의 너비를 조정합니다. sheet.setAllFitSize(); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/common/set-all-fit-size.html"
          },
          {
            "cid": 796,
            "sid": "set-range-attribute",
            "name": "set-range-attribute",
            "label": "setRangeAttribute",
            "data": {
              "body": "> setAttribute를 이용하여 범위 내의 속성 값을 일괄적으로 설정합니다. ### Syntax ```javascript void setRangeAttribute( startRow, startCol, endRow, endCol, attr, val ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |startRow|`object`|<span class='optional'>선택</span>|속성값 일괄 설정 시작 데이터 로우 객체| |startCol|`string`|<span class='optional'>선택</span>|속성값 일괄 설정 시작 열이름| |endRow|`object`|<span class='optional'>선택</span>|속성값 일괄 설정 종료 데이터 로우 객체| |endCol|`string`|<span class='optional'>선택</span>|속성값 일괄 설정 종료 열이름| |attr|`string`|<span class='optional'>선택</span>|설정하고자 하는 속성명| |val|`string`|<span class='optional'>선택</span>|설정하고자 하는 속성 값| ### Return Value ***none*** ### Example ```javascript // AR1행 ~ AR2행, Col1 ~ Col2 열 범주 셀의 TextColor 값을 blue로 일괄 변경합니다. sheet.setRangeAttribute(sheet.getRowById(\"AR1\"), \"Col1\", sheet.getRowById(\"AR3\"), \"Col2\", \"TextColor\", \"blue\"); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/common/set-range-attribute.html"
          },
          {
            "cid": 797,
            "sid": "set-range-value",
            "name": "set-range-value",
            "label": "setRangeValue",
            "data": {
              "body": "> setValue, 혹은 setString를 이용하여 범위 내의 셀 값을 일괄적으로 변경합니다. ### Syntax ```javascript void setRangeValue( val, startRow, startCol, endRow, endCol, colSeparator, rowSeparator, type ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |val|`mixed`|<span class='optional'>선택</span>|설정하고자 하는 값| |startRow|`object`|<span class='optional'>선택</span>|값 일괄 변경 시작 데이터 로우 객체| |startCol|`object`|<span class='optional'>선택</span>|값 일괄 변경 시작 열이름| |endRow|`object`|<span class='optional'>선택</span>|값 일괄 변경 종료 데이터 로우 객체| |endCol|`object`|<span class='optional'>선택</span>|값 일괄 변경 종료 열이름| |colSeparator|`object`|<span class='optional'>선택</span>|컬럼 구분자 사용시 사용할 컬럼 구분자| |rowSeparator|`object`|<span class='optional'>선택</span>|행 구분자 사용시 사용할 행 구분자| |type|`object`|<span class='optional'>선택</span>|setValue를 사용할지, setString을 사용할지 여부 1: setValue 사용 2: setString 사용| ### Return Value ***none*** ### Example ```javascript // AR1행 ~ AR3행, Col1 ~ Col2 열 범주 셀의 TextColor 값을 '사과'로 일괄 변경합니다. sheet.setRangeValue(\"사과\", sheet.getRowById(\"AR1\"), \"Col1\", sheet.getRowById(\"AR3\"), \"Col2\",); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/common/set-range-value.html"
          },
          {
            "cid": 798,
            "sid": "set-sheet-size",
            "name": "set-sheet-size",
            "label": "setSheetSize",
            "data": {
              "body": "> 시트의 태그 사이즈를 조정합니다. 해당 기능은 시트를 감싸고 있는 div 크기를 변화시킵니다. > number 입력시 px 로 자동으로 치환합니다. > 단위를 붙여서 입력시 그대로 입력됩니다. ### Syntax ```javascript void setSheetSize( width, height ); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |width|`number`|<span class='optional'>선택</span>|설정할 시트 태그 너비| |height|`number`|<span class='optional'>선택</span>|설정할 시트 태그 높이| ### Return Value ***none*** ### Example ```javascript // 시트의 태그 사이즈를 너비 500 px, 높이 800px로 설정합니다. sheet.setSheetSize(500, 800); ```",
              "see": [],
              "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
            },
            "url": "docs/funcs/common/set-sheet-size.html"
          }
        ]
      }
    ]
  },
  {
    "gid": 5,
    "name": "events",
    "label": "Events",
    "children": [
      {
        "cid": 799,
        "sid": "event",
        "name": "event",
        "label": "event 사용법 기초",
        "data": {
          "body": "> 시트의 이벤트는 아래와 같이 두 가지 방법으로 설정할 수 있습니다. ## 1. 객체 생성시점에서 이벤트 설정하기 시트를 초기화하는 `options` 속성 설정 시 `Events` 속성을 통해 다음과 같이 설정합니다. ```javascript var OPTS = { Cfg:{ ... }, Cols:[ ... ], \"Events\":{ onAfterChange:function(evtParam){ ... 이벤트 발생 시 로직 구현 ... } } }; IBSheet.create( id:\"sheet\", el:\"sheet_div\", options:OPTS ) ``` ## 2. 객체 생성 이후 이벤트 설정하기 객체가 생성되고 난 이후에는 `bind` 함수를 통해 이벤트를 설정하실 수 있습니다. ```javascript // 이벤트 명, 발생시 콜백함수 sheet.bind(\"onAfterChange\", function(evtParam) { }); ``` 이벤트 발생시 `callback` 함수에 넘어오는 `evtParam`에는 각 이벤트 별로 이벤트가 발생한 `시트 객체나, 행 객체, 열이름` 등이 들어 있습니다. > **<mark>주의</mark> : 객체 생성 이후에 이벤트를 추가하는 것은 [onBeforeCreate](/docs/static/on-before-create)에서 공통으로 처리한 로직을 무시할 수 있으므로 권장하지 않습니다.** ### Example ```javascript options.Events = { onAfterChange :function(evtParam){ if(evtParam.row[\"ConFirmYn\"]==\"Y\"){ alert(\"금월 결산이 종료되었습니다.</br>마감 정보를 확인하시고 수정해 주세요.\"); }else if(evtParam.value > evtParam.row[\"MaxBud\"]){ alert(\"입력값이 최대 예산치보다 높습니다.\"); } }, onClick:function(evtParam){ if(evtParam.col == \"myBtn1\"){ if(formValidWork()){ document.frm.submit(); } } } } ```",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/event.html"
      },
      {
        "cid": 800,
        "sid": "on-after-change",
        "name": "on-after-change",
        "label": "onAfterChange",
        "data": {
          "body": "> 사용자의 입력에 의해 셀의 값이 수정된 후 호출되는 이벤트입니다. > `method`를 통한 수정에는 호출되지 않습니다. > 기존의 값과 동일한 값으로 수정되었을 경우에도 호출되지 않습니다. ### Syntax ``` onAfterChange : function(paramObject) { } or sheet.bind(\"onAfterChange\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|값 변경이 일어난 시트 객체| |row |`object`|[데이터 행 객체](/docs/appx/row-object)| |col |`string`|열이름| |val |`number` \\| `string` \\| `object`|변경된 값 ### Return ***none***| ### Example ```javascript options.Events = { onAfterChange:function(evtParam){ // 값 수정 후 이벤트 로직. alert(\"셀 값이 \" + evtParam.val + \"로 변경되었습니다.\"); } } ```",
          "see": [
            {
              "label": "onBeforeChange event",
              "url": "./on-before-change"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-change.html"
      },
      {
        "cid": 801,
        "sid": "on-after-click",
        "name": "on-after-click",
        "label": "onAfterClick",
        "data": {
          "body": "> 마우스로 셀 내부를 클릭했을 때 맨 마지막에 호출되는 이벤트입니다. > 특정 셀을 클릭 시 포커스에 대한 이동 및 값 변경(`Bool 타입`)이나 편집 시작(`Text 타입`) 등에 대한 이벤트가 모두 발생한 뒤에 발생합니다. > `ibsheet7` 제품의 [OnClick 이벤트를 마이그레이션](/docs/appx/ibsheet7-migration) 할 때는 해당 이벤트를 사용하실 것을 권합니다. ### Syntax ``` onAfterClick : function(paramObject) { } or sheet.bind(\"onAfterClick\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|마우스 클릭 이벤트가 발생된 시트 객체| |row|`object`|클릭된 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|클릭된 셀의 열이름| |x|`number`|셀 내에서 마우스 클릭이 발생한 `x좌표`| |y|`number`|셀 내에서 마우스 클릭이 발생한 `y좌표`| |event|`object`|`javascript` 마우스 이벤트 객체| ### Return ***none*** ### Example ```javascript options.Events = { onAfterClick:function(evtParam){ if(evtParam.row[\"CloseQ\"] == 1 && evtParam.col == \"ConfirmYN\" && evtParam.row[col] == 1){ if(confirm(\"해당 건에 대해 상신하시겠습니까?\")){ window.open(\"processBuild.do?swid=\"+evtParam.row[\"SWID\"],\"width=200,height=100\"); } } } } ```",
          "see": [
            {
              "label": "onClick event",
              "url": "./on-click"
            },
            {
              "label": "onRightClick event",
              "url": "./on-right-click"
            },
            {
              "label": "onDblClick event",
              "url": "./on-dbl-click"
            },
            {
              "label": "onLongClick event",
              "url": "./on-long-click"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-click.html"
      },
      {
        "cid": 802,
        "sid": "on-after-col-add",
        "name": "on-after-col-add",
        "label": "onAfterColAdd",
        "data": {
          "body": "> 시트에 새로운 열이 추가되어 렌더링된 후 호출되는 이벤트입니다. ### Syntax ``` onAfterColAdd : function(paramObject) { } or sheet.bind(\"onAfterColAdd\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |col|`string`|시트에 추가된 열이름| ### Return ***none*** ### Example ```javascript options.Events = { onAfterColAdd:function(evtParam){ console.log(evtParam.col); } } ```",
          "see": [
            {
              "label": "addCol method",
              "url": "/docs/funcs/core/add-col"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.2.0.12|기능 추가|"
        },
        "url": "docs/events/on-after-col-add.html"
      },
      {
        "cid": 803,
        "sid": "on-after-col-move",
        "name": "on-after-col-move",
        "label": "onAfterColMove",
        "data": {
          "body": "> 열을 드래그를 통해 다른 위치로 움직인 후 호출되는 이벤트입니다. ### Syntax ``` onAfterColMove : function(paramObject) { } or sheet.bind(\"onAfterColMove\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |col|`string`|드래그된 열의 열이름| ### Return ***none*** ### Example ```javascript options.Events = { onAfterColMove:function(evtParam){ // 변경된 열이름과 그 변화량을 alert로 보여줍니다. alert(params.col+\"열의 드래깅이 완료되었습니다.\"); } } ```",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-col-move.html"
      },
      {
        "cid": 804,
        "sid": "on-after-col-resize",
        "name": "on-after-col-resize",
        "label": "onAfterColResize",
        "data": {
          "body": "> 열의 너비가 사용자에 의해 변경 시 호출되는 이벤트입니다. > [setColWidth](/docs/funcs/core/set-col-width) 메소드 사용 시 호출되지 않습니다. ### Syntax ``` onAfterColResize : function(paramObject) { } or sheet.bind(\"onAfterColResize\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |col|`string`|너비가 변경된 열의 열이름| |row|`object`|열의 너비를 변경시키기 위해 드래그 된 [헤더 로우 객체](/docs/appx/row-object)| |chg|`number`|너비의 변화량| ### Return ***none*** ### Example ```javascript options.Events = { onAfterColResize:function(evtParam){ // 변경된 열이름과 그 변화량을 alert로 보여줍니다. alert(evtParam.col + \"열이 \" + evtParam.chg+\"px 만큼 변경되었습니다.\"); } } ```",
          "see": [
            {
              "label": "setColWidth method",
              "url": "/docs/funcs/core/set-col-width"
            },
            {
              "label": "onColResize event",
              "url": "./on-col-resize"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-col-resize.html"
      },
      {
        "cid": 805,
        "sid": "on-after-edit",
        "name": "on-after-edit",
        "label": "onAfterEdit",
        "data": {
          "body": "> 셀 편집이 완료되기 전 편집모드의 문자열을 셀값으로 변환할 때 호출되는 이벤트입니다. > [onEndEdit](./on-end-edit) 이벤트 이후와 [onBeforeChange](./on-before-change) 이벤트 이전 시점에 호출되며, 셀 값에 적용될 편집모드의 최종 값을 수정해서 리턴가능합니다. > 타입([Type](/docs/props/col/type))이 편집모드가 되지 않는 `Enum, Radio, Bool`과 같은 경우 해당 이벤트가 호출되지 않습니다. ### Syntax ``` onAfterEdit : function(paramObject) { } or sheet.bind(\"onAfterEdit\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|편집모드가 종료될 시트 객체| |row|`object`|편집모드가 종료될 셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|편집모드가 종료될 셀의 열이름| |val|`string`|편집모드가 종료되기전 입력된 값| ### Return ***string*** ### Example ```javascript options.Events = { onAfterEdit:function(evtParam){ // 사용자가 입력한 결과 값이 0보다 작은 경우 0으로 초기화 시켜줍니다. if (evtParam.val < 0) return 0; } } ```",
          "see": [
            {
              "label": "onStartEdit event",
              "url": "./on-start-edit"
            },
            {
              "label": "onShowEdit event",
              "url": "./on-show-edit"
            },
            {
              "label": "onEndEdit event",
              "url": "./on-end-edit"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-edit.html"
      },
      {
        "cid": 806,
        "sid": "on-after-expand",
        "name": "on-after-expand",
        "label": "onAfterExpand",
        "data": {
          "body": "> 트리 사용시 트리가 접히거나 펼쳐진 후 호출됩니다. ### Syntax ``` onAfterExpand : function(paramObject) { } or sheet.bind(\"onAfterExpand\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|펼쳐진/접힌 행 [데이터 로우 객체](/docs/appx/row-object)| ### Return ***none*** ### Example ```javascript options.Events = { onAfterExpand:function(evtParam){ // 펼쳐진 행의 레벨이 4 이상인 경우 카운트 if(evtParam.row[\"Level\"] >= 4){ LevCount++; } } } ```",
          "see": [
            {
              "label": "setExpandRow method",
              "url": "/docs/funcs/core/set-expand-row"
            },
            {
              "label": "showTreeLevel method",
              "url": "/docs/funcs/core/show-tree-level"
            },
            {
              "label": "onBeforeExpand event",
              "url": "/docs/events/on-before-expand"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.4|기능 추가|"
        },
        "url": "docs/events/on-after-expand.html"
      },
      {
        "cid": 807,
        "sid": "on-after-filter",
        "name": "on-after-filter",
        "label": "onAfterFilter",
        "data": {
          "body": "> 시트에서 필터링이 진행된 후 호출되는 이벤트입니다. ### Syntax ``` onAfterFilter:function(paramObject) { } or sheet.bind(\"onAfterFilter\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|필터링이 적용된 시트 객체| |type|`number`|필터링 동작 정보 `0`:필터 값이 바뀐경우 `2`:렌더링 도중 필터링을 실행하거나 그룹의 변경이 필터링과 같이 발생한 경우| ### Return ***none*** ### Example ```javascript options.Events = { onAfterFilter:function(evtParam){ // 필터링 완료 여부에 대한 메시지를 띄울수 있습니다. alert(\"필터링이 완료되었습니다.\"); } } ```",
          "see": [
            {
              "label": "onBeforeFilter event",
              "url": "./on-before-filter"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-filter.html"
      },
      {
        "cid": 808,
        "sid": "on-after-goto-page",
        "name": "on-after-goto-page",
        "label": "onAfterGotoPage",
        "data": {
          "body": "> 다른 페이지로 이동 후 호출되는 이벤트입니다. > 새로운 페이지로 스크롤을 내려서 이동하고 [SearchMode](/docs/props/cfg/search-mode): 2, 3 에서 포커스를 이동시에는 호출되지 않습니다. ### Syntax ``` onAfterGotoPage:function(paramObject) { } or sheet.bind(\"onAfterGotoPage\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|시트 객체| ### Return ***boolean*** ### Example ```javascript options.Events = { onAfterGotoPage:function(evtParam){ // 다음 페이지로 이동한 후 첫 행의 첫번째 열에 포커싱을 합니다. evtParam.sheet.focus({row: evtParam.sheet.getFocusedPage().firstChild, col: evtParam.sheet.getFirstCol()}); } } ```",
          "see": [
            {
              "label": "goToPage event",
              "url": "/docs/funcs/core/go-to-page"
            },
            {
              "label": "onBeforeGoToPage event",
              "url": "./on-before-go-to-page"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-goto-page.html"
      },
      {
        "cid": 809,
        "sid": "on-after-group",
        "name": "on-after-group",
        "label": "onAfterGroup",
        "data": {
          "body": "> 시트를 특정 열(들)을 기준으로 그룹 실행/해제된 후(렌더링 전) 호출되는 이벤트입니다. ### Syntax ``` onAfterGroup:function(paramObject) { } or sheet.bind(\"onAfterGroup\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|그룹 실행/해제 동작이 발생된 시트 객체| ### Return ***boolean*** ### Example ```javascript options.Events = { onAfterGroup:function(evtParam){ // 그룹 실행/해제에 대한 메시지를 여기서 띄울 수 있습니다. alert(\"그룹이 설정/해제 되었습니다.\"); } } ```",
          "see": [
            {
              "label": "onBeforeGroup event",
              "url": "./on-before-group"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-group.html"
      },
      {
        "cid": 810,
        "sid": "on-after-paste",
        "name": "on-after-paste",
        "label": "onAfterPaste",
        "data": {
          "body": "> 시트 내에서 `ctrl+v`를 통해 붙여넣기가 동작 된 이후에 발생합니다. ### Syntax ``` onAfterPaste : function(paramObject) { } or sheet.bind(\"onAfterPaste\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |pasteError|`array`|붙여넣기 실패한 셀의 정보| ### Return ***none*** ### Example ```javascript options.Events = { onAfterPaste:function(evtParam){ //붙여넣어기가 동작 된 이후 발생 } } ```",
          "see": [
            {
              "label": "PasteFocused cfg",
              "url": "/docs/props/cfg/paste-focused"
            },
            {
              "label": "CanCopyPaste col",
              "url": "/docs/props/col/can-copy-paste"
            },
            {
              "label": "onBeforePaste event",
              "url": "./on-before-paste"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.1.0.73|기능 추가||core|8.2.0.12|`pasteError` 인자 추가|"
        },
        "url": "docs/events/on-after-paste.html"
      },
      {
        "cid": 811,
        "sid": "on-after-pivot",
        "name": "on-after-pivot",
        "label": "onAfterPivot",
        "data": {
          "body": "> 'UsePivot: 1'로 피벗 시트를 생성 할 때, 피벗 시트가 생성 된 후 호출되는 이벤트 입니다. > 피벗 시트가 생성 후 onRenderFirstFinish 시점에 발생합니다. ### Syntax ``` onAfterPivot : function(paramObject) { } or sheet.bind(\"onAfterPivot\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|부모 시트 객체| |pivotSheet|`object`|피벗시트 객체| |criterias|`object`|피벗시트 기준 대상 컬럼명들 설정| |init|`object`|피벗시트 열, 행, 계산 대상 설정| |format|`string`|피벗시트에서 보여질 포맷| |type|`string`|계산 대상 컬럼별 계산 방법| ### Return ***boolean***| ### Example ```javascript options.Events = { onAfterPivot:function(evtParam){ // 피벗시트가 생성된 후 피벗시트의 정보 확인 alert(\"피벗시트의 계산 타입은 \" + evtParam.type + \"입니다.\"); } } ```",
          "see": [
            {
              "label": "UsePivot Cfg",
              "url": "/docs/props/cfg/use-pivot"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.1.0.41|기능 추가|"
        },
        "url": "docs/events/on-after-pivot.html"
      },
      {
        "cid": 812,
        "sid": "on-after-progress",
        "name": "on-after-progress",
        "label": "onAfterChangeProgress",
        "data": {
          "body": "> `progressBar`를 변경하면 발생하는 이벤트입니다. > 이미 [showProgress (method)](/docs/funcs/core/show-progress)가 호출되고 메시지가 나타나있는 상태에서 [showProgress (method)](/docs/funcs/core/show-progress)를 계속 호출해서 `progressBar`를 변경하면 발생하는 이벤트입니다. ### Syntax ``` onAfterChangeProgress: function(paramObject) { } or sheet.bind(\"onAfterChangeProgress\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|이벤트가 발생한 시트 객체| |messageTag|`object`|메시지를 보여주는 `Dom` 객체| |caption|`string`|다이얼로그의 제목으로 설정된 문자열| |text|`string`|다이얼로그의 내용으로 설정된 문자열| |cancel|`string`|다이얼로그에 표시될 버튼 내용으로 설정된 문자열(버튼을 클릭시 다이얼로그는 제거되고 시트 내부에 `CancelProgress` 속성이 1로 수정됨)| |pos|`number`|진행 정도로 설정된 숫자| |cnt|`number`|진행 마지노선으로 설정된 숫자 (`cnt:5, pos:1`이면 프로그레스 바는 1/5 진행으로 표시됨)| |rate|`number`|진행 비율 (단위: `%`)| ### Return ***none*** ### Example ```javascript // [SweetAlert2](https://sweetalert2.github.io/)를 활용한 예제 options.Events = { onAfterChangeProgress: function (evtParams) { if (window.Swal) { // Swal의 메시지가 있는지 확인 var elemMsgCont = Swal.getContainer(); if (elemMsgCont) { // 취소 버튼 객체를 가져옴 var elemCancelButton = Swal.getCancelButton(); // showProgress로 생성된 메시지 Tag를 가져옴 var elemProgessMain = elemMsgCont.getElementsByClassName(\"IBProgressMain\")[0]; var elemProgessCaption = elemProgessMain.children[0]; // caption 영역 var elemProgessText = elemProgessMain.children[1]; // text 영역 var elemProgessBar = elemProgessMain.children[2]; // progressbar 영역 if (elemProgessBar && elemProgessBar.firstChild) { // progressbar의 gauge를 변경 elemProgessBar.firstChild.style.width = evtParams.rate + \"%\"; } if (elemProgessCaption) { // caption을 변경 elemProgessCaption.innerHTML = evtParams.caption; } if (elemProgessText) { // text를 변경 elemProgessText.innerHTML = evtParams.text + evtParams.rate + \"% [\" + evtParams.pos + \"/\" + evtParams.cnt + \"]\"; } if (evtParams.cencel != null && elemCancelButton) { // 취소버튼의 내용을 변경 elemCancelButton.innerText = evtParams.cancel; } } } } } ```",
          "see": [
            {
              "label": "showProgress method",
              "url": "/docs/funcs/core/show-progress"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-progress.html"
      },
      {
        "cid": 813,
        "sid": "on-after-row-add",
        "name": "on-after-row-add",
        "label": "onAfterRowAdd",
        "data": {
          "body": "> 시트에 새로운 행이 추가되어 렌더링된 후 호출되는 이벤트입니다. > 단일 행 추가([addRow](/docs/funcs/core/add-row))가 아닌 여러개 행을 추가하는 ([addRows](/docs/funcs/core/add-rows)) 메소드 사용시 호출됩니다. ### Syntax ``` onAfterRowAdd : function(paramObject) { } or sheet.bind(\"onAfterRowAdd\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|시트에 추가된 [데이터 로우 객체](/docs/appx/row-object)| ### Return ***none*** ### Example ```javascript options.Events = { onAfterRowAdd:function(evtParam){ // 행 추가시 여기서 초기값을 설정해줄 수 있습니다. // 렌더링 된 후 호출되는 이벤트이기에 값 변경시 렌더링을 해줘야합니다. evtParam.sheet.setValue({row:evtParam.row,col:\"sTitle\",val:\"없음\",render:1}); evtParam.sheet.setValue({row:evtParam.row,col:\"sAudience\",val:0,render:1}); evtParam.sheet.setValue({row:evtParam.row,col:\"sPlace\",val:\"미정\",render:1}); } } ```",
          "see": [
            {
              "label": "addRows method",
              "url": "/docs/funcs/core/add-rows"
            },
            {
              "label": "copyRows method",
              "url": "/docs/funcs/core/copy-rows"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-row-add.html"
      },
      {
        "cid": 814,
        "sid": "on-after-row-copy",
        "name": "on-after-row-copy",
        "label": "onAfterRowCopy",
        "data": {
          "body": "> 시트에 행을 복사([copyRow](/docs/funcs/core/copy-row),[copyRows](/docs/funcs/core/copy-rows))한 후(렌더링 되기전) 호출되는 이벤트입니다. > [copyRow](/docs/funcs/core/copy-row)를 통해 여러개 행을 복사하는 경우에는 행의 개수만큼 이벤트가 발생합니다. ### Syntax ``` onAfterRowCopy : function(paramObject) { } or sheet.bind(\"onAfterRowCopy\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|시트에 복사되어 생성된 [데이터 로우 객체](/docs/appx/row-object) 이벤트 발생시점에서 생성된 행은 아직 시트에 추가되기 전임으로 `index`는 안갖고 있음.| |source|`object`|시트에 복사된 원본 [데이터 로우 객체](/docs/appx/row-object)| ### Return ***none*** ### Example ```javascript options.Events = { onAfterRowCopy:function(evtParam){ if(evtParam.source.Deleted === true) { alert(\"지워진 행은 복사할 수 없습니다.\"); } } } ```",
          "see": [
            {
              "label": "copyRow method",
              "url": "/docs/funcs/core/copy-row"
            },
            {
              "label": "copyRows method",
              "url": "/docs/funcs/core/copy-rows"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-row-copy.html"
      },
      {
        "cid": 815,
        "sid": "on-after-row-delete",
        "name": "on-after-row-delete",
        "label": "onAfterRowDelete",
        "data": {
          "body": "> 행의 상태를 삭제 처리한 후(렌더링되기 전) 호출되는 이벤트입니다. > 시트가 트리구조이고 부모와 자식 행이 모두 삭제처리될 경우 자식 행에 대해 먼저 호출됩니다. ### Syntax ``` onAfterRowDelete : function(paramObject) { } or sheet.bind(\"onAfterRowDelete\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|삭제 처리될 행의 [데이터 로우 객체](/docs/appx/row-object)| |type|`number`|삭제 대상 분류 `1`:행 단위 삭제 `2`:트리/그룹 단위 삭제| ### Return ***none*** ### Example ```javascript options.Events = { onAfterRowDelete:function(evtParam){ alert(evtParam.row.id+\"행이 삭제되었습니다.\"); } } ```",
          "see": [
            {
              "label": "onBeforeRowDelete event",
              "url": "./on-before-row-delete"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-row-delete.html"
      },
      {
        "cid": 816,
        "sid": "on-after-row-move-to-sheet",
        "name": "on-after-row-move-to-sheet",
        "label": "onAfterRowMoveToSheet",
        "data": {
          "body": "> 서로 다른 시트 사이에 행 이동 시(드래그 앤 드랍) 호출되는 이벤트입니다. > 해당 이벤트는 행이 이동하기전에 있던 시트에서만 호출됩니다(이동할 대상이 되는 시트에서는 발생되지 않습니다). > 리턴 결과에 따라 행 이동시 기존 시트에서 행을 삭제(행을 삭제 상태로 변경)/제거(행을 완전히 제거)/유지(행 복사로 처리)할지 여부가 결정됩니다. > `0(false)` 을 리턴 시 행을 이동한 것으로 간주하고 기존 시트에서 행을 삭제 처리합니다. > `1(true)` 을 리턴 시 행을 복사한 것으로 간주하고 기존 시트에서 행을 유지합니다. > `-1` 을 리턴 시 행을 이동한 것으로 간주하고 기존 시트에서 행을 제거 처리합니다. ### Syntax ``` onAfterRowMoveToSheet : function(paramObject) { } or sheet.bind(\"onAfterRowMoveToSheet\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|이동할 행이 위치한 시트 객체| |row|`object`|이동할 행의 [데이터 로우 객체](/docs/appx/row-object)| |tosheet|`object`|행이 이동할 타깃이 되는 시트 객체| |torow|`object`|이동해서 새롭게 생성된 행의 [데이터 로우 객체](/docs/appx/row-object)(`tosheet`에 존재)| |copy|`boolean`|드래그앤 드랍으로 행 이동이 아닌 복사를 실행한건지의 여부 `0(false)`:이동 `1(true)`:복사| ### Return ***number*** ### Example ```javascript options.Events = { onAfterRowMoveToSheet:function(evtParam){ // 기존 시트에서의 행에 대한 처리를 이동할 타깃이 되는 시트별로 달리 할 수 있습니다. if (evtParam.tosheet == Sheet1) return 1; else if (evtParam.tosheet == Sheet2) return -1; else return 0; } } ```",
          "see": [
            {
              "label": "onStartDrag event",
              "url": "./on-start-drag"
            },
            {
              "label": "onEndDrag event",
              "url": "./on-end-drag"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-row-move-to-sheet.html"
      },
      {
        "cid": 817,
        "sid": "on-after-row-move",
        "name": "on-after-row-move",
        "label": "onAfterRowMove",
        "data": {
          "body": "> 같은 시트 내에 행 이동 시 호출되는 이벤트입니다. > 드래그 앤 드랍, [moveRow](/docs/funcs/core/move-row)메소드 사용시 호출됩니다. ### Syntax ``` onAfterRowMove : function(paramObject) { } or sheet.bind(\"onAfterRowMove\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|이동할 행이 위치한 시트 객체| |row|`object`|이동할 행의 [데이터 로우 객체](/docs/appx/row-object)| |oldparent|`object`|이동할 행의 부모 객체([데이터 로우 객체](/docs/appx/row-object) 또는 [페이지 객체](/docs/appx/page-object))| |oldnext|`object`|이동할 행의 다음 행의 [데이터 로우 객체](/docs/appx/row-object)| ### Return ***number*** ### Example ```javascript options.Events = { onAfterRowMove:function(evtParam){ alert(evtParam.row.id + \"행을 옮깁니다.\"); } } ```",
          "see": [
            {
              "label": "onStartDrag event",
              "url": "./on-start-drag"
            },
            {
              "label": "onEndDrag event",
              "url": "./on-end-drag"
            },
            {
              "label": "moveRow method",
              "url": "/docs/funcs/core/move-row"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-row-move.html"
      },
      {
        "cid": 818,
        "sid": "on-after-save",
        "name": "on-after-save",
        "label": "onAfterSave",
        "data": {
          "body": "> 시트에서 변경된 내용을 서버에 전송한 후 서버에서 응답이 왔을 때 발생하는 이벤트입니다. > 해당 이벤트에서 `1(true)`를 리턴하면 저장 실패시(server code 404나 500에러에 의한) 시트에 보여지는 오류 메세지 출력을 막을 수 있습니다. ### Syntax ``` onAfterSave : function(paramObject) { } or sheet.bind(\"onAfterSave\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|서버에 변경된 내용을 전송한 시트 객체| |result |`number`|**서버 응답 메시지** `0`:성공 `-1`:빈 URL (`예: sheet.doSave(\"\")`) `-3`:요청 Url이 잘못된 경우나 네트워크 오류 등으로 결과를 받지 못한 경우 `-5`:응답 결과가 빈값인 경우 `-6`:연결 시간 초과((cfg)Timeout 초과) `-7`:잘못된 데이터 형식(대부분 데이터 이상) `이외`:사용자 정의 코드| |message|`string`|서버에서 전달 받은 메시지| |response|`object`|서버 응답 객체(XMLHttpRequest 객체)| ### Return ***boolean*** ### Example ```javascript options.Events = { onAfterSave: function(evtParam) { // 서버 응답이 '성공'인 경우 if (evtParam.result == 0) { evtParam.sheet.showMessageTime({message: \"성공적으로 저장되었습니다.\", time: 1000}); } } } ```",
          "see": [
            {
              "label": "doSave method",
              "url": "/docs/funcs/core/do-save"
            },
            {
              "label": "onSave event",
              "url": "./on-save"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.17|`return` 동작 추가|"
        },
        "url": "docs/events/on-after-save.html"
      },
      {
        "cid": 819,
        "sid": "on-after-section-resize",
        "name": "on-after-section-resize",
        "label": "onAfterSectionResize",
        "data": {
          "body": "> 좌우측 섹션의 크기를 변경하는 경우 발생합니다. > cfg [SectionCanResize](/docs/props/cfg/section-can-resize)속성 설정시 사용자가 좌우측 영역의 크기를 변경할 수 있는데, 이렇게 크기가 변경된 이후에 발생합니다. > ### Syntax ``` onAfterSectionResize : function(paramObject { } or sheet.bind(\"onAfterSectionResize\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|서버에 변경된 내용을 전송한 시트 객체| |section |`number`|왼쪽, 오른쪽 변경된 섹션 `0`:왼쪽 섹션 크기 변경시 `2`:오른쪽 섹션 크기 변경시| ### Return ***none*** ### Example ```javascript options.Events = { onAfterSectionResize:function(evtParam){ //왼쪽 section 크기 변경시 가로스크롤바를 이동 if(evtParam.section==0){ sheet.setScrollLeft(0 , 1); } } } ```",
          "see": [
            {
              "label": "SectionCanResize cfg",
              "url": "/docs/props/cfg/section-can-resize"
            },
            {
              "label": "LeftCanResize cfg",
              "url": "/docs/props/cfg/Left-can-resize"
            },
            {
              "label": "RightCanResize cfg",
              "url": "/docs/props/cfg/right-can-resize"
            },
            {
              "label": "LeftWidth cfg",
              "url": "/docs/props/cfg/left-width"
            },
            {
              "label": "RightWidth cfg",
              "url": "/docs/props/cfg/right-width"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-section-resize.html"
      },
      {
        "cid": 820,
        "sid": "on-after-sort",
        "name": "on-after-sort",
        "label": "onAfterSort",
        "data": {
          "body": "> 소팅이 이루어진 후 호출되는 이벤트입니다. ### Syntax ``` onAfterSort:function(paramObject) { } or sheet.bind(\"onAfterSort\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|소팅이 실행된 시트 객체| ### Return ***none*** ### Example ```javascript options.Events = { onAfterSort:function(evtParam){ // 모든 정렬이 다 끝난 후 호출되기에 여기서 상태 메시지를 띄운다. alert(\"정렬이 완료되었습니다.\"); } } ```",
          "see": [
            {
              "label": "onBeforeSort event",
              "url": "./on-before-sort"
            },
            {
              "label": "doSort method",
              "url": "/docs/funcs/core/do-sort"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-after-sort.html"
      },
      {
        "cid": 821,
        "sid": "on-before-change",
        "name": "on-before-change",
        "label": "onBeforeChange",
        "data": {
          "body": "> 사용자의 입력에 의해 셀의 값이 수정되기 전에 호출되는 이벤트입니다. > `method`를 통한 수정에는 호출되지 않습니다. > 기존의 값과 동일한 값으로 수정되었을 경우에도 발생합니다. > `return Value`: 변경할 값을 리턴시 사용자 입력과 무관하게 변경된 내용이 셀에 셋팅 됩니다. > `return null`: 사용자가 입력한 값이 적용됩니다. ### Syntax ``` onBeforeChange : function(paramObject) { } or sheet.bind(\"onBeforeChange\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|값 변경이 일어난 시트 객체| |row |`object`|[데이터 로우 객체](/docs/appx/row-object)| |col |`string`|열이름| |val |`number` \\| `string` \\| `object`|변경하려는 값| |oldval|`number` \\| `string` \\| `object`|변경하기 이전값| ### Return Value ***string*** ### Example ```javascript options.Events = { onBeforeChange:function(evtParam){ // 값 수정 전 이벤트 로직. if(evtParam.col == \"AMT\" && evtParam.val > 2000){ alert(\"최대 설정 값은 2000까지 입니다.\"); return evtParam.oldval; } else { return null; } } } ```",
          "see": [
            {
              "label": "onAfterChange event",
              "url": "./on-after-change"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-before-change.html"
      },
      {
        "cid": 822,
        "sid": "on-before-check-all",
        "name": "on-before-check-all",
        "label": "onBeforeCheckAll",
        "data": {
          "body": "> 시트에서 사용자의 클릭이나 [setAllCheck](/docs/funcs/core/set-all-check)를 통해 `Bool` 타입의 열 전체 체크/언체크 전 호출되는 이벤트입니다. > `0(false)`를 리턴 시 열 전체 체크/언체크를 진행하지 않습니다. ### Syntax ``` onBeforeCheckAll: function(paramObject) { } or sheet.bind(\"onBeforeCheckAll\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|열 전체 체크/언체크가 될 시트 객체| |col|`string`|열 전체 체크/언체크가 될 열이름| ### Return ***none*** ### Example ```javascript options.Events = { onBeforeCheckAll:function(evtParam){ if(!confirm(evtParam.col + \"열을 체크하시겠습니까?\")){ return false; } } } ```",
          "see": [
            {
              "label": "setAllCheck method",
              "url": "/docs/funcs/core/set-all-check"
            },
            {
              "label": "onCheckAllFinish event",
              "url": "/docs/events/on-check-all-finish"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.8|기능 추가|"
        },
        "url": "docs/events/on-before-check-all.html"
      },
      {
        "cid": 823,
        "sid": "on-before-col-move",
        "name": "on-before-col-move",
        "label": "onBeforeColMove",
        "data": {
          "body": "> 열을 드래그를 통해 다른 위치로 움직이기 전 호출되는 이벤트입니다.</br> > `return true` 시 컬럼 이동을 취소 할 수 있습니다. ### Syntax ``` onBeforeColMove : function(paramObject) { } or sheet.bind(\"onBeforeColMove\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |col|`string`|이동하는 열이름| |toCol|`string`|이동될 위치의 열이름| ### Return ***boolean*** ### Example ```javascript options.Events = { onBeforeColMove:function(evtParam){ // 열의 이동되는 위치가 SEQ 컬럼이면 열이동을 취소 합니다. if (evtParam.toCol == \"SEQ\") return true; } } ```",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.2.0.1|기능 추가|"
        },
        "url": "docs/events/on-before-col-move.html"
      },
      {
        "cid": 824,
        "sid": "on-before-data-load",
        "name": "on-before-data-load",
        "label": "onBeforeDataLoad",
        "data": {
          "body": "> 서버를 호출하여 데이터가 시트에 로드되기 전에 발생하는 이벤트 입니다. > [doSearch](/docs/funcs/core/do-search), [doSearchPaging](/docs/funcs/core/do-search-paging), [loadSearchData](/docs/funcs/core/load-search-data) 함수를 통해 가져온 데이터가 시트 내부에서 파싱되기 전에 발생하므로 시트 함수(`getValue`, `getAttribute`등)를 사용할 수 없습니다. 이 시점에서는 이벤트 파라미터인 `data` 객체를 활용하여 데이터를 가공 할 수 있습니다. > 파싱이 완료된 이후에는 [onDataLoad](./on-data-load)이벤트가 발생합니다. ### Syntax ``` onBeforeDataLoad:function(paramObject) { } or sheet.bind(\"onBeforeDataLoad\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|데이터를 로딩할 시트 객체| |result|`number`| 1. 서버를 통한 조회 시([doSearch](/docs/funcs/core/do-search)) `0`:성공 `-1`:빈 URL (`예: sheet.doSearch(\"\")`) `-3`:요청 Url이 잘못된 경우나 네트워크 오류 등으로 결과를 받지 못한 경우 `-5`:응답 결과가 빈값인 경우 `-6`:연결 시간 초과((cfg)Timeout 초과) `-7`:잘못된 데이터 형식(대부분 데이터 이상) `이외`:사용자 정의 코드 2. 일반 데이터 조회 시([loadSearchData](/docs/funcs/core/load-search-data)) `0`:성공 `-7`:잘못된 데이터 형식 | |data|`object`|시트에 로딩될 데이터| |message|`string`|조회 결과 `json`에 포함된 `Message` 내용| |response|`object`|`response` 객체| |type|`string`|조회/엑셀 여부(Search, EXCEL)| ### Return ***none*** ### Example ```javascript // 조회 후 오류에 대한 예시 options.Events = { onBeforeDataLoad:function(evtParam){ if (evtParam.row[\"result\"] < 0) { alert(\"오류가 발생하였습니다\\n\"+evtParam.message); } } } // 조회된 내용에 대한 수정 예시 options.Events = { onBeforeDataLoad:function(evtParam){ // 조회 결과 데이터 var DATA = evtParam.data; // 조회된 데이터 일부를 수정한다. for(var i = 0; i < DATA.length; i++){ var row = DATA[i]; // AttrYn 컬럼에 값이 Y 인 경우 ConfirmFinish 컬럼에 \"결정완료\"를 설정하고 // 해당 행의 Edit를 막는다. (수정된 데이터에 대한 별도 리턴은 필요 없음[CallByReference]) if(row[\"AttrYn\"] == \"Y\"){ row[\"ConfirmFinish\"] = \"결정완료\"; row[\"CanEdit\"] = 0; } } } } ``` ```javascript // 조회 결과 json 참고 { //IO,Result,Message 대소문자 주의! \"IO\":{\"Result\":100,\"Message\":\"정상조회완료\"}, \"Data\":[ ... ] } ```",
          "see": [
            {
              "label": "doSearch method",
              "url": "/docs/funcs/core/do-search"
            },
            {
              "label": "doSearchPaging method",
              "url": "/docs/funcs/core/do-search-paging"
            },
            {
              "label": "loadSearchData method",
              "url": "/docs/funcs/core/load-search-data"
            },
            {
              "label": "onReceiveData event",
              "url": "/docs/events/on-receive-data"
            },
            {
              "label": "onDataLoad event",
              "url": "/docs/events/on-data-load"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.26|`type` 추가|"
        },
        "url": "docs/events/on-before-data-load.html"
      },
      {
        "cid": 825,
        "sid": "on-before-expand",
        "name": "on-before-expand",
        "label": "onBeforeExpand",
        "data": {
          "body": "> 트리 사용시 트리가 접히거나 펼쳐질때 호출됩니다. > 해당 이벤트에서 `1(true)`를 리턴하면 접거나 펼쳐지는 작업을 중단할 수 있습니다. ### Syntax ``` onBeforeExpand : function(paramObject) { } or sheet.bind(\"onBeforeExpand\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|펼칠 행 [데이터 로우 객체](/docs/appx/row-object)| ### Return ***boolean*** ### Example ```javascript options.Events = { onBeforeExpand:function(evtParam){ // 레벨에 따라 펼침을 막는다. if(evtParam.row[\"Level\"] > 4){ sheet.showMessageTime(\"세부항목 확인은 현행 진도에 대한 완료 후 가능합니다.\",2000); return true; } } } ```",
          "see": [
            {
              "label": "setExpandRow method",
              "url": "/docs/funcs/core/set-expand-row"
            },
            {
              "label": "showTreeLevel method",
              "url": "/docs/funcs/core/show-tree-level"
            },
            {
              "label": "onAfterExpand event",
              "url": "/docs/events/on-after-expand"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-before-expand.html"
      },
      {
        "cid": 826,
        "sid": "on-before-export",
        "name": "on-before-export",
        "label": "onBeforeExport",
        "data": {
          "body": "> 다운로드 함수([exportData](/docs/funcs/core/export-data), [down2Excel](/docs/funcs/excel/down-to-excel), [down2Text](/docs/funcs/excel/down-to-text), [down2Pdf](/docs/funcs/excel/down-to-pdf)) 호출시, 서버로 시트의 데이터 전송 전에 발생합니다. > 시트의 정보와 데이터를 하나의 문자열로 묶어, `Data`에 담고, 지정한 `jsp(혹은 aspx)`로 `response` 합니다. > 해당 이벤트에서 `1(true)`를 리턴하면 다운로드를 중단할 수 있습니다. ### Syntax ``` onBeforeExport : function(paramObject) { } or sheet.bind(\"onBeforeExport\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |type|`string`|[exportData](/docs/funcs/core/export-data), [down2Excel](/docs/funcs/excel/down-to-excel), [down2Text](/docs/funcs/excel/down-to-text), [down2Pdf](/docs/funcs/excel/down-to-pdf) 함수 호출에 따라 `EXCEL, TEXT, PDF`| |formElem|`object`|서버로 전송할 데이터를 담고 있는 객체 `Data` 확인 다운로드 함수에서 `reqHeader`를 설정하지 않았을 경우`evtParam.formElem.Data.value` 확인하고 `reqHeader`를 설정했을 경우 `evtParam.formElem.get(\"Data\")`로 확인 `exportData`에서는 확인 불가| |data|`object`|다운로드 할 파일을 blob 형태로 제공. `data.blob` 으로 전달 되며 수정 가능 `exportData`에서만 사용 가능| ### Return ***boolean*** ### Example ```javascript options.Events = { onBeforeExport:function(evtParam){ // 사용자 등급에 따라 다운로드시 경고를 보여주거나 중단시킨다. if(userLvl < 3){ alert(\"민감한 데이터를 포함하고 있습니다.\\n사용에 주의해 주세요.\"); }else{ alert(\"다운로드 권한이 없습니다.\"); evtParam.sheet.hideMessage(); return true; } } } ```",
          "see": [
            {
              "label": "exportData method",
              "url": "/docs/funcs/core/export-data"
            },
            {
              "label": "down2Excel method",
              "url": "/docs/funcs/excel/down-to-excel"
            },
            {
              "label": "down2Text method",
              "url": "/docs/funcs/excel/down-to-text"
            },
            {
              "label": "onExportFinish event",
              "url": "./on-export-finish"
            }
          ],
          "since": "|product|version|desc||---|---|---||excel|0.0.0|기능 추가||excel|3.0.6|data parameter 추가|"
        },
        "url": "docs/events/on-before-export.html"
      },
      {
        "cid": 827,
        "sid": "on-before-file-down",
        "name": "on-before-file-down",
        "label": "onBeforeFileDown",
        "data": {
          "body": "> [Type](/docs/props/col/type)이 `File` 설정된 열에 위치한 셀을 클릭한 경우 호출되는 이벤트입니다. > 파일 다운로드 시 발생하는 이벤트로 저장된 셀에 한에서 발생합니다. 파일이 업로드 된 셀이 저장 전인 경우에는 해당 이벤트가 발생하지 않습니다. > 파일 다운로드 전에 발생하며 `true(1)`리턴시 다운로드가 동작하지 않습니다. ### Syntax ``` onBeforeFileDown : function(paramObject) { } or sheet.bind(\"onBeforeFileDown\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|셀의 열이름| |path|`string`|[Path](/docs/props/cell/path) 또는 [FilePath](/docs/props/cfg/export)로 지정된 파일이 저장된 경로| |value|`string`|셀 값(파일 이름)| ### Return ***boolean*** ### Example ```javascript options.Events = { // 클릭한 셀의 파일의 호출 경로 변경 onBeforeFileDown: function (evtParam) { location.href = \"변경할 url\" + evtParam.value; return true; } } ``` **위의 예제에서 `false(0)` 반환 시 클릭한 셀의 경로로 다운로드 됩니다.**",
          "see": [
            {
              "label": "Path cell",
              "url": "/docs/props/cell/path <br>"
            },
            {
              "label": "Export cfg",
              "url": "/docs/props/cfg/export <br>"
            },
            {
              "label": "Type appendix",
              "url": "/docs/appx/type <br>"
            },
            {
              "label": "File Type 업로드 appendix",
              "url": "/docs/appx/file-type-upload <br>"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
        },
        "url": "docs/events/on-before-file-down.html"
      },
      {
        "cid": 828,
        "sid": "on-before-filter",
        "name": "on-before-filter",
        "label": "onBeforeFilter",
        "data": {
          "body": "> 시트에서 필터링하기 전에 호출되는 이벤트입니다. > `1(true)`를 리턴시 필터링을 진행하지 않습니다. ### Syntax ``` onBeforeFilter:function(paramObject) { } or sheet.bind(\"onBeforeFilter\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|필터링이 적용될 시트 객체| |type|`number`|필터링 동작 정보 `0`:필터 값이 바뀐 경우 `2`:렌더링 도중 필터링을 실행하거나 그룹의 변경이 필터링과 같이 발생한 경우| ### Return ***boolean*** ### Example ```javascript options.Events = { onBeforeFilter:function(evtParam){ if(evtParam.type == 2) return false; return true; } } ```",
          "see": [
            {
              "label": "onAfterFilter event",
              "url": "./on-after-filter"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-before-filter.html"
      },
      {
        "cid": 829,
        "sid": "on-before-focus",
        "name": "on-before-focus",
        "label": "onBeforeFocus",
        "data": {
          "body": "> 시트 내 셀이 포커스 되기 전에 호출되는 이벤트입니다. > `1(true)`를 리턴 시 포커스를 이동하지 않습니다. ### Syntax ``` onBeforeFocus : function(paramObject) { } or sheet.bind(\"onBeforeFocus\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|포커스가 된 셀이 있는 시트 객체| |row|`object`|포커스가 된 셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|포커스가 된 셀이 위치한 열이름| |orow|`object`|이전에 포커스가 되어있던 셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |ocol|`string`|이전에 포커스가 되어있던 셀이 위치한 열이름| |rect|`array[object]`|다수의 셀들을 포커스했을 경우 포커스된 영역| |orect|`array[object]`|이전에 다수의 셀들을 포커스했을때의 영역| ### Return ***boolean*** ### Example ```javascript options.Events = { onBeforeFocus: function (evtParam) { if (!confirm('셀 내용: \"' + evtParam.sheet.getString({row :evtParam.row, col: evtParam.col}) + '\"\\n포커스 하시겠습니까?')) { return true; } } } ```",
          "see": [
            {
              "label": "focus method",
              "url": "/docs/funcs/core/focus"
            },
            {
              "label": "onFocus event",
              "url": "/docs/events/on-focus"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.6|기능 추가|"
        },
        "url": "docs/events/on-before-focus.html"
      },
      {
        "cid": 830,
        "sid": "on-before-go-to-page",
        "name": "on-before-go-to-page",
        "label": "onBeforeGoToPage",
        "data": {
          "body": "> 다른 페이지로 이동 시 호출되는 이벤트입니다. > 리턴 값이 `1(true)`인 경우 페이지를 이동하지 않습니다. > 새로운 페이지로 스크롤을 내려서 이동하고 [SearchMode](/docs/props/cfg/search-mode): 2, 3에서 포커스를 이동시에는 호출되지 않습니다. ### Syntax ``` onBeforeGoToPage:function(paramObject) { } or sheet.bind(\"onBeforeGoToPage\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|시트 객체| |page|`object`|이동할 페이지의 [페이지 객체](/docs/appx/page-object)| |pagepos|`number`|이동할 페이지 번호(`0부터 시작`)| ### Return ***boolean*** ### Example ```javascript // 현재 페이지의 col이라는 열이름의 열에 있는 모든 셀들이 체크되었는지 확인하는 함수 // 체크된 경우 true 아닌 경우 false 리턴 function CheckAllChecked(sheet, col) { var row = sheet.getFocusedPage().firstChild; while (row) { if (!row[col]) return false; row = row.nextSibling; } return true; } options.Events = { onBeforeGoToPage:function(evtParam){ // 현재 페이지의 sCheck열이 모두 체크된 경우 페이지 이동이 가능합니다. if (CheckAllChecked(params.sheet, \"sCheck\")) return false; alert(\"체크 덜했습니다.\") return true; } } ```",
          "see": [
            {
              "label": "goToPage method",
              "url": "/docs/funcs/core/go-to-page"
            },
            {
              "label": "onAfterGoToPage event",
              "url": "./on-after-go-to-page"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-before-go-to-page.html"
      },
      {
        "cid": 831,
        "sid": "on-before-group",
        "name": "on-before-group",
        "label": "onBeforeGroup",
        "data": {
          "body": "> 시트를 특정 열(들)을 기준으로 그룹 실행/해제전에 호출되는 이벤트입니다. > `1(true)`를 리턴 시 그룹을 실행/해제하지 않습니다. ### Syntax ``` onBeforeGroup:function(paramObject) { } or sheet.bind(\"onBeforeGroup\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|그룹 실행/해제 동작이 발생된 시트 객체| |group|`string`|시트에서 그룹의 기준이 되는 열이름들| ### Return ***boolean*** ### Example ```javascript options.Events = { onBeforeGroup:function(evtParam){ // 지원 부서 열로 그룹할 수 없습니다. if(evtParam.group.indexOf(\"deptNm\") > -1){ alert(\"지원 부서 열로 그룹이 불가능합니다.\"); return true; // 그룹 취소 } // 4개 이상의 열로 그룹할 수 없습니다. else if (evtParam.group.split(\",\").length > 3) { alert(\"4개 이상의 열로 그룹할 수 없습니다.\"); return true; } } } ```",
          "see": [
            {
              "label": "onAfterGroup event",
              "url": "./on-after-group"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-before-group.html"
      },
      {
        "cid": 832,
        "sid": "on-before-paste",
        "name": "on-before-paste",
        "label": "onBeforePaste",
        "data": {
          "body": "> 시트 내에서 `ctrl+v`를 통해 붙여넣기가 이루지기 전에 발생합니다. > `cols, pastedtext`의 내용을 수정하시면 붙여넣어질 내용이나 위치를 수정하실 수 있습니다. > 이벤트에서 `1(true)`를 리턴시 붙여넣기를 중단합니다. ### Syntax ``` onBeforePaste : function(paramObject) { } or sheet.bind(\"onBeforePaste\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |cols|`array[string]`|붙여넣기가 이루어질 `colName` 배열(수정가능)| |pastedtext|`array[string]`|각 행에 붙여넣어질 내용(수정가능)| ### Return ***boolean*** ### Example ```javascript options.Events = { onBeforePaste:function(evtParam){ //붙여넣어질 내용에 주민등록번호 패턴[######-#######]이 있으면 뒤에 6자리를 '*'로 변경 var pasteArr = evtParam.pastedtext; for(var i = 0; i < pasteArr.length; i++){ pasteArr[i] = pasteArr[i].replace(/([0-9]{6}\\-[0-9]{1})[0-9]{6}/g, \"$1\"+\"******\") } } } ```",
          "see": [
            {
              "label": "PasteFocused cfg",
              "url": "/docs/props/cfg/paste-focused"
            },
            {
              "label": "CanCopyPaste col",
              "url": "/docs/props/col/can-copy-paste"
            },
            {
              "label": "onAfterPaste event",
              "url": "./on-after-paste"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-before-paste.html"
      },
      {
        "cid": 833,
        "sid": "on-before-row-delete",
        "name": "on-before-row-delete",
        "label": "onBeforeRowDelete",
        "data": {
          "body": "> 행의 상태를 삭제 처리 전 호출되는 이벤트입니다. > 리턴을 통해 삭제를 취소할지 또는 유지할지 여부를 결정할 수 있습니다(type파라미터 결과에 따라 다른 동작). > type 파라미터가 `0`일 때, `1(true)`를 리턴시 삭제 처리하고, `0(false)`를 리턴시 삭제를 취소합니다. > type 파라미터가 `1`일 때, `1(true)`를 리턴시 삭제를 취소하고, `0(false)`를 리턴시 삭제를 진행합니다. ### Syntax ``` onBeforeRowDelete : function(paramObject) { } or sheet.bind(\"onBeforeRowDelete\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|삭제 처리/취소될 행의 [데이터 로우 객체](/docs/appx/row-object)| |type|`number`|삭제 여부 `0`:삭제 처리 `1`:삭제 취소| |rows|`array[object]`|선택된 복수개의 행을 삭제 처리/취소할 때 해당 행들의 [데이터 로우 객체](/docs/appx/row-object) 배열| ### Return ***boolean*** ### Example ```javascript options.Events = { onBeforeRowDelete:function(evtParam){ // 삭제 처리할 행의 sProgress 열에 있는 셀 값이 80이상인 경우 삭제 처리를 하지 않습니다. if (evtParam.row[\"sProgress\"] >= 80) { return false; } else { return true; } } } ```",
          "see": [
            {
              "label": "onAfterRowDelete event",
              "url": "./on-after-row-delete"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-before-row-delete.html"
      },
      {
        "cid": 834,
        "sid": "on-before-save",
        "name": "on-before-save",
        "label": "onBeforeSave",
        "data": {
          "body": "> 서버 데이터 저장 [doSave](/docs/funcs/core/do-save) 메소드 호출시 전송 할 데이터를 수집 후 발생하는 이벤트 입니다. > [onSave](./on-save) 이벤트 발생 후, 호출됩니다. > 해당 이벤트에서 `1(true)`를 리턴하면 저장 작업을 중단합니다. ### Syntax ```javascript onBeforeSave : function(paramObject) { } or sheet.bind(\"onBeforeSave\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|변경된 데이터를 가지는 시트 객체| |source|`object`|시트에 설정된 속성들이 담긴 객체| |source.params|`string`|서버에 전송할 데이터 변경 사항 ([doSave](/docs/funcs/core/do-save) 사용시 `queryMode: 1, 2` 에서 사용가능)| |source.data|`string`|서버에 전송할 데이터 변경 사항 ([doSave](/docs/funcs/core/do-save) 사용시 `queryMode: 0` 에서 사용가능)| ### Return ***boolean*** ### Example ```javascript options.Events = { onBeforeSave:function(evtParam){ // 서버에 보낼 데이터가 금지어1 또는 금지어2를 포함하는 경우 Ajax 통신을 실행하지 않습니다. if (source.Params.indexOf(\"금지어1\") > -1 || source.Params.indexOf(\"금지어2\") > -1) { return true; } } } ```",
          "see": [
            {
              "label": "doSave method",
              "url": "/docs/funcs/core/do-save"
            },
            {
              "label": "onSave event",
              "url": "./on-save"
            },
            {
              "label": "onAfterSave event",
              "url": "./on-after-save"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.19|`source.data` 추가|"
        },
        "url": "docs/events/on-before-save.html"
      },
      {
        "cid": 835,
        "sid": "on-before-sort",
        "name": "on-before-sort",
        "label": "onBeforeSort",
        "data": {
          "body": "> 사용자가 헤더 셀을 클릭하였을 경우, 소팅이 이루어지기 전에 호출되는 이벤트입니다. > [doSort](/docs/funcs/core/do-sort) 메소드를 통한 소팅에는 호출되지 않습니다. > 이벤트 내에서 `-1`을 리턴 시 소팅 작업이 취소됩니다. (소팅 아이콘도 표시되지 않음) > 이벤트 내에서 `1`을 리턴시에는 소팅 아이콘만 변경되고 실제 소팅은 이루어지지 않습니다. > **해당 기능은 [doSort](/docs/funcs/core/do-sort)함수를 통한 소팅시에는 발생하지 않습니다.** ### Syntax ``` onBeforeSort:function(paramObject) { } or sheet.bind(\"onBeforeSort\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|값 변경이 일어날 시트 객체| |col |`string`|소팅이 일어날 열이름| |sort|`string`|여러개 열에 대한 소팅 내역 (ex: \"colName4, -colName2, colName6\") (열이름과 열이름 사이에 `\",\"`문자로 구분 된 문자열, 내림차순(descending) 소팅인 경우 열이름 앞에 `\"-\"` 가 붙음)| ### Return ***number*** ### Example ```javascript options.Events = { onBeforeSort:function(evtParam){ // 특정 열을 다른 열과 같이 소팅하려 시도시 취소합니다. // sort 인자에 다음과 같이 문자열이 넘어옵니다. ex) \"colName4,colName2,-colName5\" if(evtParam.col == \"quarter\" && evtParam.sort.split(\",\").length > 2){ alert(\"분기 열은 '다중열소팅'을 허용하지 않습니다.\\n 다른 열의 소팅을 취소해 주세요.\"); return -1; //소팅 작업을 취소합니다. } } } ```",
          "see": [
            {
              "label": "doSort method",
              "url": "/docs/funcs/core/do-sort"
            },
            {
              "label": "onAfterSort event",
              "url": "./on-after-sort"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-before-sort.html"
      },
      {
        "cid": 836,
        "sid": "on-blur",
        "name": "on-blur",
        "label": "onBlur",
        "data": {
          "body": "> 시트가 셀 포커스를 잃을 때 호출되는 이벤트입니다. ### Syntax ``` onBlur : function(paramObject) { } or sheet.bind(\"onBlur\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|포커스를 잃은 시트 객체| |orow|`object`|포커스를 잃기전에 포커스가 되어있던 셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |ocol|`string`|포커스를 잃기전에 포커스가 되어있던 셀이 위치한 열이름| |orect|`array[object]`|포커스를 잃기전에 다수의 셀들을 포커스했을때의 영역| ### Return ***none*** ### Example ```javascript options.Events = { onBlur:function(evtParam){ alert(\"시트가 포커스를 잃었습니다. 이전 포커스된 셀의 값은\"+evtParam.sheet.getValue({row :evtParam.orow, col: evtParam.ocol}+\"입니다.\")); } } ```",
          "see": [
            {
              "label": "blur method",
              "url": "/docs/funcs/core/blur"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-blur.html"
      },
      {
        "cid": 837,
        "sid": "on-button-click",
        "name": "on-button-click",
        "label": "onButtonClick",
        "data": {
          "body": "> [Button](/docs/props/col/button)속성 값이 `Button, Html`일 때 셀 내 사이드 버튼을 클릭하는 경우 호출되는 이벤트입니다. > [Button](/docs/props/col/button)이 설정된 셀이 편집 불가능한 경우 버튼 클릭 뿐만 아니라 셀 내부를 클릭 시 이 이벤트가 호출됩니다. > 해당 이벤트는 사이드에 위치한 버튼(![타입이 \"Button\"이 아닌 경우](/assets/imgs/button4.png \"타입이 Button이 아닌 경우\"))에 한정되며, `Type`을 버튼으로 하는 형태(![타입이 \"Button\"인경우](/assets/imgs/typeButton.png \"타입이 Button인 경우\"))에서는 [onClick](./on-click) 을 통해 버튼 클릭에 대한 로직을 구성하셔야 합니다. > `1(true)`를 리턴 시, 버튼에 대한 기본 동작이 무시됩니다. ### Syntax ``` onButtonClick : function(paramObject) { } or sheet.bind(\"onButtonClick\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|셀의 열이름| |x|`number`|버튼 내에서 마우스 클릭 x좌표| |y|`number`|버튼 내에서 마우스 클릭 y좌표| ### Example ```javascript options.Cols = [ { Header : \"아이디\", Name: \"sId\", Type: \"Text\", Button: \"Button\", ButtonText: \"중복확인\", WidthPad: 100 //버튼 너비 설정 } ... ] options.Events = { onButtonClick:function(evtParam){ if (evtParam.col == \"sId\") { // sId 열에서 중복되는 값이 있는 경우 alert창을 띄웁니다. var value = evtParam.row[evtParam.col]; var r = evtParam.sheet.getFirstRow(); while (r) { if (r != evtParam.row && r[evtParam.col] == value) { alert(\"같은 아이디가 있습니다. 다른 아이디를 입력하세요\"); break; } r = r.nextSibling; } } } } ``` ### Try it - [Demo of onButtonClick](https://jsfiddle.net/gh/get/library/pure/ibsheet/ibsheet8-manual-sample/tree/master/samples/properties/Col/Button/)",
          "see": [
            {
              "label": "Button col",
              "url": "/docs/props/col/button"
            },
            {
              "label": "ButtonText col",
              "url": "/docs/props/col/button-text"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-button-click.html"
      },
      {
        "cid": 838,
        "sid": "on-cancle-file",
        "name": "on-cancle-file",
        "label": "onCancelFile",
        "data": {
          "body": "> `Type:File`에서 셀에서 파일 업로드 할 때, 파일 선택 창의 파일 선택 취소 혹은 닫기 후 발생합니다. ### Syntax ``` onCancelFile : function(paramObject) { } or sheet.bind(\"onCancelFile \" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|시트 객체| |row|`object`| 셀이 위치한 데이터 로우 객체| |col|`string`|셀의 열이름| ### Return ***none*** ### Example ```javascript options.Events = { // 파일 업로드 창에서 취소하는 시점에 취소 alert 띄우기 onCancelFile: function(evtParam) { alert('파일 선택 취소'); } } ``` ### Since |product|version|desc| |---|---|---| |core|8.1.0.86|기능 추가|",
          "since": "|product|version|desc||---|---|---||core|8.1.0.86|기능 추가|"
        },
        "url": "docs/events/on-cancle-file.html"
      },
      {
        "cid": 839,
        "sid": "on-check-all-finish",
        "name": "on-check-all-finish",
        "label": "onCheckAllFinish",
        "data": {
          "body": "> 시트에서 사용자의 클릭이나 [setAllCheck](/docs/funcs/core/set-all-check)를 통해 `Bool` 타입의 열 전체 체크/언체크 완료 시 호출되는 이벤트입니다. ### Syntax ``` onCheckAllFinish: function(paramObject) { } or sheet.bind(\"onCheckAllFinish\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|열 전체 체크/언체크가 완료 된 시트 객체| |col|`string`|열 전체 체크/언체크가 완료 된 열이름| |result|`boolean`|열 전체 체크 여부 `0(false)`:체크해제 `1(true)`:체크| ### Return ***none*** ### Example ```javascript options.Events = { onCheckAllFinish:function(evtParam){ alert(evtParam.col + \"열이 체크(\" + evtParam.result + \") 완료되었습니다.\"); } } ```",
          "see": [
            {
              "label": "setAllCheck method",
              "url": "/docs/funcs/core/set-all-check"
            },
            {
              "label": "onBeforeCheckAll event",
              "url": "/docs/events/on-before-check-all"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.8|기능 추가|"
        },
        "url": "docs/events/on-check-all-finish.html"
      },
      {
        "cid": 840,
        "sid": "on-click-2",
        "name": "on-click",
        "label": "onClick",
        "data": {
          "body": "> 마우스로 셀 내부를 클릭했을 때 호출되는 이벤트입니다. > 마우스 클릭시 호출되는 [onMouseDown](./on-mouse-down), [onMouseUp](./on-mouse-up) 이벤트 뒤에 발생합니다. > `1(true)`를 리턴 시 클릭에 의한 기본 동작을 막습니다. > 열 단위로 클릭 이벤트를 사용하려면 [OnClick](/docs/events/on-click) 이벤트를 사용해야합니다. > <mark>`Bool, Radio`와 같이 클릭과 동시에 값이 수정되는 열에서 사용시에는 주의가 필요로 합니다.</mark> > 해당 이벤트가 호출되는 시점에서는 아직 값이 수정되기 이전의 값이 얻어짐으로, 위와 같은 타입의 열에서는 가급적 [onAfterChange](./on-after-change) 나 [onAfterClick](./on-after-click) 이벤트에서 처리 클릭에 대한 결과를 처리하실 것을 권합니다. ### Syntax ``` onClick : function(paramObject) { } or sheet.bind(\"onClick\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|마우스 클릭 이벤트가 발생된 시트 객체| |row|`object`|클릭된 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|클릭된 셀의 열이름| |x|`number`|셀 내에서 마우스 클릭이 발생한 x좌표| |y|`number`|셀 내에서 마우스 클릭이 발생한 y좌표| |event|`object`|javascript 마우스 이벤트 객체| ### Return ***boolean*** ### Example ```javascript options.Events = { onClick:function(evtParam){ // 다음과 같은 조건 중 하나라도 만족하는 경우 클릭에 의한 시트 동작을 실행하지 않습니다. // 1) 열의 열이름이 'sName' 경우 // 2) 행들 중 sProgress 열이름에 해당하는 셀의 값이 \"완료\"인 경우 if (evtParam.col == \"sName\" || evtParam.row[\"sProgress\"] == \"완료\") return true; } } ```",
          "see": [
            {
              "label": "onAfterChange event",
              "url": "./on-after-change"
            },
            {
              "label": "onAfterClick event",
              "url": "./on-after-click"
            },
            {
              "label": "onRightClick event",
              "url": "./on-right-click"
            },
            {
              "label": "onDblClick event",
              "url": "./on-dbl-click"
            },
            {
              "label": "onLongClick event",
              "url": "./on-long-click"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-click.html"
      },
      {
        "cid": 841,
        "sid": "on-col-resize",
        "name": "on-col-resize",
        "label": "onColResize",
        "data": {
          "body": "> 열의 크기가 변경될 때 호출되는 이벤트입니다. > 사용자의 클릭 또는 [setColWidth](/docs/funcs/core/set-col-width) 메소드 사용으로 인한 열 사이즈 변경 시 호출됩니다. > 열 전체에 [RelWidth](/docs/props/col/rel-width) 설정이 되어 있는 경우 일부 열의 사이즈 변경 시 모든 열에 대해 해당 이벤트가 호출됩니다. ### Syntax ``` onColResize : function(paramObject) { } or sheet.bind(\"onColResize\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|서버에 변경된 내용을 전송할 시트 객체| |col|`string`|너비가 변경된 열의 열이름| ### Return ***none*** ### Example ```javascript options.Events = { onColResize:function(evtParam){ alert(\"시트의 \"+evtParam.col+\"열의 크기가 변경되었습니다.\"); } } ```",
          "see": [
            {
              "label": "onAfterColResize event",
              "url": "./on-after-col-resize"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-col-resize.html"
      },
      {
        "cid": 842,
        "sid": "on-data-load",
        "name": "on-data-load",
        "label": "onDataLoad",
        "data": {
          "body": "> 데이터가 시트 내에서 파싱되어 로드된 후에 발생합니다. > 내부적인 로딩은 완료되었지만 화면에 반영(렌더링)은 일어나기 전 입니다. ### Syntax ``` onDataLoad : function(paramObject) { } or sheet.bind(\"onDataLoad\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|데이터가 로드된 시트 객체| |result|`number`| 1. 서버를 통한 조회 시([doSearch](/docs/funcs/core/do-search)) `0`:성공 `-1`:빈 URL (`예: sheet.doSearch(\"\")`) `-3`:요청 Url이 잘못된 경우나 네트워크 오류 등으로 결과를 받지 못한 경우 `-5`:응답 결과가 빈값인 경우 `-6`:연결 시간 초과((cfg)Timeout 초과) `-7`:잘못된 데이터 형식(대부분 데이터 이상) `이외`:사용자 정의 코드 2. 일반 데이터 조회 시([loadSearchData](/docs/funcs/core/load-search-data)) `0`:성공 `-7`:잘못된 데이터 형식 | |message|`string`|조회 결과 `json`에 포함된 `Message` 내용| |response|`object`|`response` 객체| |type|`string`|조회/엑셀 여부(Search, EXCEL)| ### Example ```javascript options.Events = { onDataLoad:function(evtParam){ if (res == 0) alert(\"데이터가 로드되었습니다.\"); else alert(\"데이터를 로딩하는데 실패했습니다.\"); } } ```",
          "see": [
            {
              "label": "doSearch method",
              "url": "/docs/funcs/core/do-search"
            },
            {
              "label": "doSearchPaging method",
              "url": "/docs/funcs/core/do-search-paging"
            },
            {
              "label": "loadSearchData method",
              "url": "/docs/funcs/core/load-search-data"
            },
            {
              "label": "onReceiveData event",
              "url": "/docs/events/on-receive-data"
            },
            {
              "label": "onBeforeDataLoad event",
              "url": "/docs/events/on-before-data-load"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.26|`type` 추가|"
        },
        "url": "docs/events/on-data-load.html"
      },
      {
        "cid": 843,
        "sid": "on-dbl-click",
        "name": "on-dbl-click",
        "label": "onDblClick",
        "data": {
          "body": "> 사용자가 마우스로 더블클릭했을 때 호출되는 이벤트입니다. > 웹의 특성상 [onClick](./on-click)이벤트가 먼저 발생하고, 해당 이벤트가 발생합니다. > 인자 row, col, x, y는 셀이 아닌 곳을 누를 경우 `undefined` 또는 `null`이 될 수 있습니다(ex 셀 테두리). ### Syntax ``` onDblClick : function(paramObject) { } or sheet.bind(\"onDblClick\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|마우스 더블클릭 이벤트가 발생된 시트 객체| |row|`object`|더블클릭된 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|더블클릭된 셀의 열이름| |x|`number`|셀 내에서 마우스 더블클릭이 발생한 x좌표| |y|`number`|셀 내에서 마우스 더블클릭이 발생한 y좌표| |event|`object`|javascript 마우스 이벤트 객체| ### Example ```javascript options.Events = { onDblClick:function(evtParam){ alert(\"더블클릭 시 편집모드로 들어갑니다.\"); } } ```",
          "see": [
            {
              "label": "onClick event",
              "url": "./on-click"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-dbl-click.html"
      },
      {
        "cid": 844,
        "sid": "on-drag-finish",
        "name": "on-drag-finish",
        "label": "onDragFinish",
        "data": {
          "body": "> 드래그된 행들이 드랍이 된 뒤, 가장 마지막에 발생하는 이벤트 입니다. > 해당 이벤트는 `tosheet` 에 드래그된 내용이 시트에 반영된 이후 입니다. > 이벤트 발생 순서: `onEndDrag` -> `onAfterRowMoveTosheet` -> `onDragFinish` ### Syntax ``` onDragFinish : function(paramObject) { } or sheet.bind(\"onDragFinish \" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|드래그된 행들이 기존에 위치하던 시트 객체| |row|`object`|드래그된 행들의 기존 [데이터 로우 객체](/docs/appx/row-object)| |tosheet|`object`|드랍된 시트 객체| |torow|`object`|드랍한 어디에 들어갈지에 대한 기준이 되는 [데이터 로우 객체](/docs/appx/row-object)| ### Return ***none*** ### Example ```javascript options.Events = { onDragFinish:function(evtParam){ // 해당 구간은 드래그가 끝난 뒤 시트에 반영된 상태입니다. } } ```",
          "see": [
            {
              "label": "onStartDrag event",
              "url": "./on-start-drag"
            },
            {
              "label": "onEndDrag event",
              "url": "./on-end-drag"
            },
            {
              "label": "onAfterRowMoveTosheet event",
              "url": "./on-after-row-move-to-sheet"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.15|기능 추가|"
        },
        "url": "docs/events/on-drag-finish.html"
      },
      {
        "cid": 845,
        "sid": "on-end-drag-cell",
        "name": "on-end-drag-cell",
        "label": "onEndDragCell",
        "data": {
          "body": "> 드래그 된 셀이 드랍되는 시점에 호출되는 이벤트입니다. ### Syntax ``` onEndDragCell : function(paramObject) { } or sheet.bind(\"onEndDragCell\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|드래그 된 셀이 기존에 위치하던 시트 객체| |row|`object`|드래그 된 셀의 기존 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|드래그 된 셀의 기존 열 이름| |tosheet|`object`|드랍 된 시트 객체| |torow|`object`|드랍 된 셀의 [데이터 로우 객체](/docs/appx/row-object)| |tocol|`string`|드랍 된 셀의 열 이름| |x|`number`|드랍할 때 마우스 커서의 x좌표(브라우저 기준)| |y|`number`|드랍할 때 마우스 커서의 y좌표(브라우저 기준)| ### Return ***none*** ### Example ```javascript options.Events = { onEndDragCell: function (evtParam) { if (!evtParam.torow || !evtParam.tocol || evtParam.tocol === '_ConstWidth' || (evtParam.row && evtParam.row.Kind != 'Data') || (evtParam.torow && evtParam.torow.Kind != 'Data')) { return; } var bValue = evtParam.tosheet.getValue(evtParam.torow, evtParam.tocol); var aValue = evtParam.sheet.getValue(evtParam.row, evtParam.col); if (evtParam.tosheet && evtParam.torow && evtParam.tocol) { evtParam.tosheet.setValue(evtParam.torow, evtParam.tocol, aValue); if (bValue) { evtParam.sheet.setValue(evtParam.row, evtParam.col, bValue); } else { evtParam.sheet.setValue(evtParam.row, evtParam.col, ''); } } } } ```",
          "see": [
            {
              "label": "CanDrag cfg",
              "url": "/docs/props/cfg/can-drag"
            },
            {
              "label": "DragCell cfg",
              "url": "/docs/props/cfg/drag-cell"
            },
            {
              "label": "onStartDragCell event",
              "url": "./on-start-drag-cell"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.27|기능 추가|"
        },
        "url": "docs/events/on-end-drag-cell.html"
      },
      {
        "cid": 846,
        "sid": "on-end-drag",
        "name": "on-end-drag",
        "label": "onEndDrag",
        "data": {
          "body": "> 드래그된 행(들)이 드랍되는 시점에 호출되는 이벤트입니다. > 리턴 값으로 드래그 드랍이 가능할지 여부 및 드랍될 위치를 선택할 수 있습니다(리턴값으로 취할 수 있는 값은 type 파라미터와 동일합니다). ### Syntax ``` onEndDrag : function(paramObject) { } or sheet.bind(\"onEndDrag\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|드래그된 행들이 기존에 위치하던 시트 객체| |row|`object`|드래그된 행들의 기존 [데이터 로우 객체](/docs/appx/row-object)| |tosheet|`object`|드랍된 시트 객체| |torow|`object`|드랍했을때 어디에 들어갈지에 대한 기준이 되는 [데이터 로우 객체](/docs/appx/row-object)| |type|`number`|드래그 드랍이 가능할지 여부 및 드랍될 위치에 대한 정보 `0`:드래그 드랍할 수 없음 `1`:`torow` [데이터 로우 객체](/docs/appx/row-object)의 위쪽에 드랍(드랍될 시트의 데이터가 없을 경우도 이에 해당) `2`:`tosheet` 시트가 트리/그룹인 경우 `torow` [데이터 로우 객체](/docs/appx/row-object)의 하위 노드에 드랍 `3`:`torow` [데이터 로우 객체](/docs/appx/row-object)의 아래쪽에 드랍 `4`:드래그 드랍할 수 없는 시트 외부 영역에 드랍| |x|`number`|드랍할 때 마우스 커서의 x좌표(브라우저 기준)| |y|`number`|드랍할 때 마우스 커서의 y좌표(브라우저 기준)| |rows|`array[object]`|복수개의 행들이 드래그 드랍된 경우 해당 행들의 [데이터 로우 객체](/docs/appx/row-object) 배열| ### Return ***number*** ### Example ```javascript options.Events = { onEndDrag:function(evtParam){ // 서로 다른 시트 객체간 드래그 드롭할 경우 이를 취소합니다. if(evtParam.sheet == evtParam.tosheet) return 0; } } ```",
          "see": [
            {
              "label": "onStartDrag event",
              "url": "./on-start-drag"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.3.0.28|type:4 기능 추가|"
        },
        "url": "docs/events/on-end-drag.html"
      },
      {
        "cid": 847,
        "sid": "on-end-edit",
        "name": "on-end-edit",
        "label": "onEndEdit",
        "data": {
          "body": "> 셀 편집이 완료되기 전 호출되는 이벤트입니다. > 타입([Type](/docs/props/col/type))이 `Enum`인 경우도 호출되며, 타입이 `Radio, Bool`인 경우 해당 이벤트가 호출되지 않습니다. **save 인자 값에 따른 return 사용 방법** - `save` 인자는 값을 변경하는 것이 아니고 확인하는 용도로 사용할 수 있으며 사용자가 종료한 편집은 `save` 인자가 `1(true)`이고 [endEdit method](/docs/funcs/core/end-edit)로 종료된 편집은 `save` 인자가 `0(false)`입니다. - `save` 인자가 `1(true)`인 경우, `return` 값에 따라 내용을 반영할 수 있습니다. (`true` 리턴시 편집이 계속 유지되고 다른 값(`string, number`)을 리턴시 해당 값이 반영됩니다.) - `save` 인자가 `0(false)`인 경우 리턴 값에 상관 없이 편집이 종료되며 리턴 값이 변영되지 않습니다. ### Syntax ``` onEndEdit : function(paramObject) { } or sheet.bind(\"onEndEdit\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|편집모드가 종료될 시트 객체| |row|`object`|편집모드가 종료될 셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|편집모드가 종료될 셀의 열이름| |save|`boolean`|편집이 적용될지 여부| |val|`number` \\| `string` \\| `object`|편집된 값| |raw|`string`|셀에 입력한 값| ### Return ***mixed***( `boolean` \\| `number` \\| `string` \\| `object` ) ### Example ```javascript options.Events = { onEndEdit:function(evtParam){ // 편집된 값이 금지어에 포함될 경우 입력한 값이 금지어라는 것을 띄우고 기존에 있던 셀 값을 그대로 유지합니다. var banArray = [\"금지어1\", \"금지어2\"]; if (banArray.indexOf(evtParam.val) > -1) { alert(\"금지어입니다.\"); return evtParam.row[evtParam.col]; } } } ```",
          "see": [
            {
              "label": "onStartEdit event",
              "url": "/docs/events/on-start-edit"
            },
            {
              "label": "onShowEdit event",
              "url": "/docs/events/on-show-edit"
            },
            {
              "label": "onAfterEdit event",
              "url": "/docs/events/on-after-edit"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-end-edit.html"
      },
      {
        "cid": 848,
        "sid": "on-ex-calendar",
        "name": "on-ex-calendar",
        "label": "onExcalendar",
        "data": {
          "body": "> 외부 달력을 제어할 수 있는 시트 이벤트를 발생시키도록 합니다.</br> > 시트의 `onScroll`, `onKeyDown`, `onAfterFilter`, `onClick` 이벤트 발생 시점에 해당 이벤트가 발생됩니다.</br> > `onClickSide` 이벤트에서 외부 달력을 시트 셀 영역에 표시하고, 해당 이벤트에서 외부 달력을 제거할 수 있습니다. ### Syntax ```plaintext onExcalendar: function (paramObject) { } or sheet.bind(\"onExcalendar\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |------|------|-------------| | sheet | `object` | 이벤트가 발생한 시트 객체 | | params | `object` | 전달되는 이벤트(`onScroll`, `onKeyDown`, `onAfterFilter`, `onClick`) 가 가지는 param 인자 | | evType | `string` | 전달되는 이벤트(`onScroll`, `onKeyDown`, `onAfterFilter`, `onClick`) Name | | eventName | `string` | 해당 이벤트 Name(`onExcalendar`) | ### Return **_boolean_** ### Example ```javascript // Cols 옵션에서 셀 영역에 외부 달력을 표시하는 예시 (dateRangePicker) \"Cols\": [ { \"Header\": \"날짜-daterangepicker\",\"Type\": \"Date\",\"Name\": \"DateData\",\"Width\": 200,\"Align\": \"Center\",\"CanEdit\": 1,\"Format\": \"yyyy-MM-dd\",\"EmptyValue\": \"날짜를 입력해주세요\",\"DataFormat\":\"yyyyMMdd\", \"Button\": \"https://www.ibsheet.com/demo/js/lib/sheet/Main/calendar.png\", OnClickSide: function (evtParam) { var eRow = evtParam.row; var eCol = evtParam.col; var DateCol = \"DateData\"; var cellPos = evtParam.sheet.getCell(eRow, eCol).getBoundingClientRect(); sheetPopCalendar(evtParam, cellPos, DateCol,true); //단일 달력 } }, { \"Header\": \"예약 날짜(From~To)-daterangepicker\",\"Type\": \"Date\", \"Name\": \"FromToData\",\"Width\": 250,\"Align\": \"Center\",\"CanEdit\": 1,\"Format\": \"yyyy-MM-dd\",\"EmptyValue\": \"날짜를 입력해주세요\",\"DataFormat\":\"yyyyMMdd\", \"Button\": \"https://www.ibsheet.com/demo/js/lib/sheet/Main/calendar.png\", \"Range\": 1, /*날짜를 범위나 여러개 선택 가능하게 설정*/ OnClickSide: function (evtParam) { var eRow = evtParam.row; var eCol = evtParam.col; var DateCol = \"FromToData\"; var cellPos = evtParam.sheet.getCell(eRow, eCol).getBoundingClientRect(); sheetPopCalendar(evtParam, cellPos, DateCol); } } ] options.Events = { // 외부 달력 이벤트 닫기 (onScroll, onKeyDown, onAfterFilter, onClick) onExcalendar : function (evtParam) { var isCal = false; var evtName = evtParam.evType; if (document.getElementsByClassName('daterangepicker ltr show-calendar opensright')[0] && document.getElementsByClassName('daterangepicker ltr show-calendar opensright')[0].style.display != 'none') isCal = true; switch (evtName) { case \"onScroll\": if (isCal) $('#CalendarInput').data('daterangepicker').remove(); break; case \"onAfterFilter\": // 필터행 초기화인 경우 if (evtParam.sheet.FCol == \"FromData\" && evtParam.sheet.FRow[evtParam.sheet.FCol] == '') { evtParam.sheet.doFilter(\"ToData\",''); if (isCal) $('#CalendarInput').data('daterangepicker').remove(); } break; case \"onKeyDown\": //esc키를 누를 if (evtParam.params.name == \"Esc\" && isCal) $('#CalendarInput').data('daterangepicker').remove(); break; case \"onClick\": console.log('onClick'); break; } } } // onClickSide 이벤트에서 외부 달력을 표시하는 함수 function sheetPopCalendar (par, pos, DateCol, singleDatePicker, calHeight) { if (!par || !pos) return; // 달력이 표시될 시트 객체 const sheet = par.sheet; //달력을 띄우기 위해서 input 객체를 하나 삽입 if( $(\"#CalendarInput\").length == 0 ) { // 속성 설정 const inputElement = document.createElement(\"input\"); inputElement.setAttribute(\"type\", \"text\"); inputElement.setAttribute(\"id\", \"CalendarInput\"); inputElement.setAttribute(\"tabindex\", \"-1\"); //tab키를 눌러서 focus 이동시 숨겨진 달력 input에는 focus를 주지 않도록 설정정 inputElement.setAttribute(\"style\", \"opacity: 0; position: absolute;\"); //inputElement.setAttribute(\"readonly\", \"true\"); //body에 달력을 띄우기 위한 input 추가 document.body.appendChild(inputElement); } const datepicker = $('#CalendarInput'); const sheetDate = sheet.getValue(par.row, DateCol); //시트의 셀에 표시된 날짜값 //시트 셀의 데이터를 달력 input에 설정 datepicker.val(sheetDate); //dom의 높이 및 공간 계산 후 달력 위치 결정 const datepickerHeight = calHeight || 290; const datepickersingleDate = singleDatePicker || false; // 달력의 높이(크기) const windowHeight = $(document).height(); // document의 height const spaceBelow = windowHeight - pos.bottom; const dropDirection = (spaceBelow > datepickerHeight) ? 'down' : 'up'; // 달력이 위로 펼쳐질지 아래로 펼쳐질지 계싼 datepicker.daterangepicker({ locale: { format: 'YYYY-MM-DD', // 날짜 형식 separator: '~', // 구분자를 ' ~ '로 설정 (From - To 사이) applyLabel: '적용', cancelLabel: '취소', fromLabel: '시작일', toLabel: '종료일', daysOfWeek: ['일', '월', '화', '수', '목', '금', '토'], monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] }, drops: dropDirection, singleDatePicker: datepickersingleDate, // 범위선택용 달력, 싱글 달력 showDropdowns: true, // 드롭다운 선택 가능 autoUpdateInput: false, // 자동 업데이트 방지 (사용자가 선택한 날짜만 표시) }); //인풋의 위치를 시트의 row, col로 이동하고 input에 focus를 줘서 달력을 열리게 한다. let leftX = pos.x; if (par.row.Kind == \"Filter\"){ //필터행일경우 인풋의 위치를 좌측으로 이동, 필터연산자(같음, 같지않음등) 선택하기 위해서 leftX += 30; } datepicker.css({ position: 'absolute', top: `${pos.y+window.scrollY}px`, left: `${leftX}px`, height:`${par.event.Height}px`, borderTopStyle : \"none\", borderBottomStyle : \"none\", width: '30px' // 너비를 적당히 설정 }).show().focus(); // 날짜 범위 선택 후 적용 시 호출되는 콜백 datepicker.on('apply.daterangepicker', function(ev, picker) { //시트에 값을 넣을때는 포멧 구분자를 제거 하고 넣는다. const startDate = picker.startDate.format('YYYYMMDD'); const endDate = picker.endDate.format('YYYYMMDD'); const dateRangeText = `${startDate} ~ ${endDate}`; const displayValue = picker.singleDatePicker ? startDate : dateRangeText // 인풋박스에 날짜 표시 $(this).val(displayValue); // 필터행이면 필터 처리 if (par.row.Kind === \"Filter\") { function filterOptions(data, excludeKey) { if (!Array.isArray(data) || data.length === 0) { return [\"\", \"\", \"\"]; } const filtered = data.filter(item => item[0] !== excludeKey); const colNames = filtered.map(item => item[0]).join('|'); const colValues = filtered.map(item => item[1]).join('|'); const colTypes = filtered.map(item => item[2]).join('|'); return [`|${colNames}|`, `|${colValues}|`, `|${colTypes}|`]; } //날짜 컬럼 말고도 필터를 했다면 이어서 필터를 적용해야 한다. const [cols, values, operators] = filterOptions(sheet.getFilter(0),DateCol); sheet.doFilter( `|${DateCol}${cols}`, `|${displayValue}${values}`, `|1${operators}` ); }else{ sheet.setValue(par.row, DateCol, displayValue); } }); //외부 달력을 닫기위해 필요한 이벤트(onScroll, onKeyDown, onAfterFilter, onClick) sheet.bind(\"onExcalendar\" , function(evtParam) { let isCal = false; const evtName = evtParam.evType; const picker = $('#CalendarInput').data('daterangepicker'); if (picker && picker.isShowing) { //달력이 떠 있는지 체크 isCal = true; } switch (evtName) { case \"onScroll\": //시트에서 스크롤시 달력을 닫는다. if (isCal) $('#CalendarInput').data('daterangepicker').remove(); break; case \"onKeyDown\": //esc키를 누를때 달력을 닫는다. if (evtParam.params.name == \"Esc\" && isCal) $('#CalendarInput').data('daterangepicker').remove(); break; case \"onClick\": // 시트 특정 영역 클릭시 달력을 닫고 싶을 때 로직 추가 break; } }); } ```",
          "see": [],
          "since": "| product | version | desc ||---------|---------|------|| core | 8.3.0.5 | 기능 추가 |"
        },
        "url": "docs/events/on-ex-calendar.html"
      },
      {
        "cid": 849,
        "sid": "on-export-finish",
        "name": "on-export-finish",
        "label": "onExportFinish",
        "data": {
          "body": "> 시트의 내용을 `Excel, Text, Pdf` 등으로 다운로드 하는 함수([down2Excel](/docs/funcs/excel/down-to-excel), [down2Text](/docs/funcs/excel/down-to-text), [exportData](/docs/funcs/core/export-data), [down2Pdf](/docs/funcs/excel/down-to-pdf)) 호출 후 다운로드 완료 시 발생합니다. ### Syntax ``` onExportFinish : function(paramObject) { } or sheet.bind(\"onExportFinish\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |type|`string`|[down2Excel](/docs/funcs/excel/down-to-excel), [down2Text](/docs/funcs/excel/down-to-text), [exportData](/docs/funcs/core/export-data), [down2Pdf](/docs/funcs/excel/down-to-pdf) 함수 호출에 따라 `EXCEL, TEXT, PDF`| |result|`boolean`|다운로드 처리 결과 `0(false)`:오류 발생 `1(true)`:정상 종료| ### Return ***none*** ### Example ```javascript options.Events = { onExportFinish:function(evtParam){ //다운로드 완료 후 메세지 표시 if(evtParam.result){ alert(\"다운로드가 완료 되었습니다.\"); } } } ```",
          "see": [
            {
              "label": "exportData method",
              "url": "/docs/funcs/core/export-data"
            },
            {
              "label": "down2Excel method",
              "url": "/docs/funcs/excel/down-to-excel"
            },
            {
              "label": "down2Text method",
              "url": "/docs/funcs/excel/down-to-text"
            },
            {
              "label": "onBeforeExport event",
              "url": "./on-before-export"
            }
          ],
          "since": "|product|version|desc||---|---|---||excel|0.0.0|기능 추가|"
        },
        "url": "docs/events/on-export-finish.html"
      },
      {
        "cid": 850,
        "sid": "on-focus",
        "name": "on-focus",
        "label": "onFocus",
        "data": {
          "body": "> 시트 내 셀이 포커스 되었을때 호출되는 이벤트입니다. ### Syntax ``` onFocus : function(paramObject) { } or sheet.bind(\"onFocus\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|포커스가 된 셀이 있는 시트 객체| |row|`object`|포커스가 된 셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|포커스가 된 셀이 위치한 열이름| |orow|`object`|이전에 포커스가 되어있던 셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |ocol|`string`|이전에 포커스가 되어있던 셀이 위치한 열이름| |rect|`array[object]`|다수의 셀들을 포커스했을 경우 포커스된 영역| |orect|`array[object]`|이전에 다수의 셀들을 포커스했을때의 영역| ### Return ***none*** ### Example ```javascript options.Events = { onFocus:function(evtParam){ alert(\"현재 포커스된 셀의 값은 \"+evtParam.sheet.getValue({row :evtParam.row, col: evtParam.col})+\" 입니다.\"); } } ```",
          "see": [
            {
              "label": "focus method",
              "url": "/docs/funcs/core/focus"
            },
            {
              "label": "onBeforeFocus event",
              "url": "/docs/events/on-before-focus"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-focus.html"
      },
      {
        "cid": 851,
        "sid": "on-hide-message",
        "name": "on-hide-message",
        "label": "onHideMessage",
        "data": {
          "body": "> 시트의 메시지가 없어질때 실행되는 이벤트입니다. > 이벤트를 통해서 외부 라이브러리의 메시지를 닫을 수 있습니다. ### Syntax ``` onHideMessage: function(paramObject) { } or sheet.bind(\"onHideMessage\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|메시지가 발생한 시트 객체| ### Return ***none*** ### Example ```javascript // [SweetAlert2](https://sweetalert2.github.io/)를 활용한 예제 options.Events = { onShowMessage: function (evtParams) { if (window.Swal) { // showMessage와 showMessageTime에 따라 메시지 처리를 다르게 해준다. if (evtParams.isConfirm) { Swal.fire({ title: \"<div>\" + evtParams.message + \"</div>\", // 메시로 보여질 문자열(HTML Tag 포함) icon: 'warning', showConfirmButton: (evtParams.buttons.indexOf(\"Ok\") > -1), // 확인 버튼이 있으면 확인 버튼을 만들어준다. showCancelButton: (evtParams.buttons.indexOf(\"Cancel\") > -1), // 취소 버튼이 있으면 취소 버튼을 만들어준다. confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: '확인', cancelButtonText: '취소', timer: evtParams.time // showMessageTime의 time인자로 단위는 밀리초(ms)로 설정한다. }).then((result) => { if (result.value) { // confirmButton이 눌렸을때 시트에서도 후속 기능이 실행되도록 callback을 통해 Ok 버튼이 눌린 정보를 전달한다. if (evtParams.callback) evtParams.callback(evtParams.buttons.indexOf(\"Ok\") + 1); } else { // cancelButton이 눌렸을때 시트에서도 후속 기능이 실행되지 않도록 callback을 통해 Cancel 버튼이 눌린 정보를 전달한다. if (evtParams.callback) evtParams.callback(evtParams.buttons.indexOf(\"Cancel\") + 1); } }); } else { Swal.fire({ title: \"<div>\" + evtParams.message + \"</div>\", // 메시로 보여질 문자열(HTML Tag 포함) icon: 'success', showConfirmButton: false // IBSheet는 단순 메시지에서 확인버튼을 노출 시키지 않기때문에 비슷하게 구현하려면 Swal의 버튼도 숨겨야한다. }).then((result) => { // Swal이 클릭이나 esc 키 등 Swal 액션으로 닫혔을때 sheet.hideMessage()도 같이 실행 시켜준다. // sheet.hideMessage()호출로 Swal가 닫히면 result.value, result.dismiss 등 값이 없음. // 무조건 sheet.hideMessage()를 호출하도록 코드가 구현되어 있으면 연속으로 메시지가 호출되는 경우 메시지가 제대로 보여지지 않을 수 있음. if (result.value || result.dismiss) { evtParams.sheet.hideMessage(); } }); } return true; // 시트 메시지를 대체함. } }, onHideMessage: function (evtParams) { if (window.Swal) { // sheet.hideMessage()가 호출될때 Swal의 메시지도 close() 시켜준다. Swal.close(); } } } ```",
          "see": [
            {
              "label": "showMessageTime method",
              "url": "/docs/funcs/core/show-message-time"
            },
            {
              "label": "hideMessage method",
              "url": "/docs/funcs/core/hide-message"
            },
            {
              "label": "SuppressMessage cfg",
              "url": "/docs/props/cfg/suppress-message"
            },
            {
              "label": "onShowMessage event",
              "url": "./on-show-message"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-hide-message.html"
      },
      {
        "cid": 852,
        "sid": "on-icon-click",
        "name": "on-icon-click",
        "label": "onIconClick",
        "data": {
          "body": "> [Icon](/docs/props/col/icon)속성 값이 이미지 URL로 설정되어 있을때 셀 내 아이콘을 클릭하는 경우 호출되는 이벤트입니다. > [Icon](/docs/props/col/icon)이 설정된 셀이 편집 불가능한 경우 버튼 클릭 뿐만 아니라 셀 내부를 클릭 시 이 이벤트가 호출됩니다. > `1(true)`를 리턴 시 현재의 클릭으로 발생 가능한 이벤트들 중 `onIconClick` 후에 발생하는 이벤트들의 동작(ex [OnClickSide](/docs/props/event/on-click-side))을 막습니다. ### Syntax ``` onIconClick : function(paramObject) { } or sheet.bind(\"onIconClick\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|셀의 열이름| |x|`number`|아이콘 내에서 마우스 클릭 x좌표| |y|`number`|아이콘 내에서 마우스 클릭 y좌표| ### Return ***boolean*** ### Example ```javascript options.Cols = [ { Header : \"아이디\", Name: \"sId\", Type: \"Text\", Icon: \"http://ibsheet.com/demo/images/11/s1.jpg\" } ... ] options.Events = { onIconClick:function(evtParam){ // sId 열에 있는 아이콘 클릭시 http://ibsheet.com/ibsheet_main.html url이 새창에서 열리도록 합니다. if (evtParam.col == \"sId\") { window.open('http://ibsheet.com/ibsheet_main.html'); } } } ```",
          "see": [
            {
              "label": "Icon col",
              "url": "/docs/props/col/icon"
            },
            {
              "label": "OnClickSide event",
              "url": "/docs/props/event/on-click-side"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-icon-click.html"
      },
      {
        "cid": 853,
        "sid": "on-import-finish",
        "name": "on-import-finish",
        "label": "onImportFinish",
        "data": {
          "body": "> 엑셀/텍스트 로드시 호출되는 이벤트 입니다.\\ > 해당 이벤트에서 `1(true)`를 리턴하면 데이터 로드 작업이 중단됩니다. ### Syntax ```plaintext onImportFinish:function(paramObject) { } or sheet.bind(\"onImportFinish\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |------|------|-------------| | sheet | `object` | 엑셀/텍스트가 로딩 중인 시트 객체 | | type | `string` | 텍스트/엑셀 여부(`EXCEL, TEXT`) | | data | `object` | 시트에 로딩될 엑셀/텍스트 데이터 | | result | `number` | **로딩 결과 코드** `0`:성공 `음수`:로딩 에러 발생 | | message | `string` | **로딩 결과 메세지** `\"\"`:성공 `그외`:에러 메세지 | \\ loadExcel시 에러 발생가 발생 했을 경우, 각 음수 코드에 대응하는 에러는 다음과 같습니다.()\\ **에러 코드는 서버 모듈에 한정해서 대응되며, 반드시 1.1.15 버전 이후의 서버 모듈을 사용하시고 해당 버전 이후의 jsp로 최신화해주셔야 합니다.** | Code | Description | |------|-------------| | `-1` | load.setMaxRow로 설정한 갯수보다 더 많이 행을 로드하려는 경우 | | `-2` | load.setStrictHeaderMatch 설정시, 시트 헤더가 엑셀에 하나라도 존재하지 않는 경우 | | `-3` | load.setMaxColumns로 설정한 갯수보다 더 많이 열을 로드하려는 경우 | | `-10` | load.setMaxFileSize로 설정한 사이즈보다 더 사이즈가 큰 파일을 로드하려는 경우 | | `-18` | load.setDisallowDuplicatedHeader 설정시, 로드하는 엑셀 헤더에 중복되는 데이터가 존재할 경우 | | `-100` | load.setUsePoi(false), load.setUseJXL(false)로 설정되어있고 xls파일을 로드 할 경우 | `-201` | workbookPassword 설정시 비밀번호가 틀렸을 경우 | ### Return **_boolean_** ### Example ```javascript options.Events = { onImportFinish:function(evtParam){ if (evtParam[\"type\"] == \"TEXT\") { document.getElementById(\"myDiv\").innerText = evtParam[\"type\"] + \"파일을 load 하였습니다.\"; } // SuppressExportMessage를 설정하지 않고 onImportFinish 이벤트에서 true를 리턴하여 작업을 중단하실 때는 // hideMessage()를 호출하여 대기 이미지를 닫아주셔야 됩니다. evtParam.sheet.hideMessage(); return true; // 리턴이 true이면 이후 작업(데이터 로드)을 중단한다. } } ```",
          "see": [
            {
              "label": "importData method",
              "url": "/docs/funcs/core/import-data"
            },
            {
              "label": "loadExcel method",
              "url": "/docs/funcs/excel/load-excel"
            }
          ],
          "since": "| product | version | desc ||---------|---------|------|| core | 8.0.0.0 | 기능 추가 || core | 8.0.0.26 | `result`, `message` 파라미터 추가 || core | 8.1.0.6 | return 동작 추가 |"
        },
        "url": "docs/events/on-import-finish.html"
      },
      {
        "cid": 854,
        "sid": "on-key-down",
        "name": "on-key-down",
        "label": "onKeyDown",
        "data": {
          "body": "> 포커스된 시트에서 사용자가 키를 눌렀을 때 호출되는 이벤트입니다. > 모든 기능 키에 대해 호출되며, `1(true)`를 리턴 시 눌린 키의 기본 동작이 무시됩니다(ex: Insert키를 통한 행 추가, Enter키를 통한 편집모드로 변경 등). > 편집 모드에서 이벤트는 동작하지만, 리턴을 통한 기본 동작을 막을 수 없습니다. ### Syntax ``` onKeyDown : function(paramObject) { } or sheet.bind(\"onKeyDown\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|포커스되어 있는 시트 객체| |key|`number`|눌린 키의 `keyCode`| |event|`object`|`onKeyDown`에서 발생된 자바스크립트 key 이벤트| |name|`string`|누른 Key의 이름(`A, Esc, Backspace, Enter` 등)| |prefix|`string`|`Shift, Alt, Ctrl` 키와 같이 눌려진 경우 key 이름 `Shift-> Ctrl-> Alt` 순으로 문자열을 조합하여 리턴. 가령 `Shift`와 `Ctrl`이 같이 눌려진 경우 `\"ShiftCtrl\"` 이 리턴, `Alt`와 `Ctrl`이 같이 눌려진 경우 `\"CtrlAlt\"`가 리턴| ### Return ***boolean*** ### Example ```javascript options.Events = { onKeyDown:function(evtParam){ // 포커스된 시트에 Insert키 Delete키 입력시 키입력 동작을 막습니다. if(evtParam.name == \"Ins\" || evtParam.name == \"Del\") return true; } } ```",
          "see": [
            {
              "label": "onKeyUp event",
              "url": "./on-key-up"
            },
            {
              "label": "onKeyPress event",
              "url": "./on-key-press"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-key-down.html"
      },
      {
        "cid": 855,
        "sid": "on-key-press",
        "name": "on-key-press",
        "label": "onKeyPress",
        "data": {
          "body": "> 포커스된 시트에서 사용자가 키를 눌렀을 때 호출되는 이벤트입니다. > [onKeyDown](./on-key-down) 이벤트가 호출된 뒤 호출되는 이벤트로, 문자, 숫자키를 누를 때만 호출됩니다. > 문자키의 경우 `unicode` 및 `name` 파라미터의 값이 [onKeyDown](./on-key-down), [onKeyUp](./on-key-up)의 것과 **다릅니다**. ### Syntax ``` onKeyPress : function(paramObject) { } or sheet.bind(\"onKeyPress\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|포커스되어 있는 시트 객체| |key|`number`|눌린 키의 `Unicode`| |event|`object`|`onKeyPress`에서 발생된 자바스크립트 key 이벤트| |name|`string`|누른 Key 이름(`A, Esc, Right..`)| |prefix|`string`|두개 이상의 키 입력 시 첫 key 이름(`ctrl, shfit..`)| ### Example ```javascript options.Events = { onKeyPress:function(evtParam){ alert(evtParam.name + \"키가 눌렸습니다.\"); } } ```",
          "see": [
            {
              "label": "onKeyDown event",
              "url": "./on-key-down"
            },
            {
              "label": "onKeyUp event",
              "url": "./on-key-up"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-key-press.html"
      },
      {
        "cid": 856,
        "sid": "on-key-up",
        "name": "on-key-up",
        "label": "onKeyUp",
        "data": {
          "body": "> 포커스된 시트에서 키보드의 눌린 키가 올라왔을때 호출되는 이벤트입니다. > 모든 기능 키에 대해 호출되며 [onKeyPress](./on-key-press) 이벤트가 발생한 뒤 호출됩니다. ### Syntax ``` onKeyUp : function(paramObject) { } or sheet.bind(\"onKeyUp\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|포커스되어 있는 시트 객체| |key|`number`|눌린 키의 `Unicode`| |event|`object`|`onKeyUp`에서 발생된 자바스크립트 key 이벤트| |name|`string`|누른 Key 이름(`A, Esc, Right..`)| |prefix|`string`|두개 이상의 키 입력 시 첫 key 이름(`ctrl, shfit..`)| ### Return ***none*** ### Example ```javascript options.Events = { onKeyUp:function(evtParam){ alert(evtParam.name + \"키가 눌렸습니다.\"); } } ```",
          "see": [
            {
              "label": "onKeyDown event",
              "url": "./on-key-down"
            },
            {
              "label": "onKeyPress event",
              "url": "./on-key-press"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-key-up.html"
      },
      {
        "cid": 857,
        "sid": "on-link-click",
        "name": "on-link-click",
        "label": "onLinkClick",
        "data": {
          "body": "> [Type](/docs/props/col/type)이 `Link` 또는 `Img`로 설정된 열에 위치한 셀을 클릭한 경우 호출되는 이벤트입니다. > [Link](/docs/props/col/link) 속성에 의해 정의된 링크는 클릭해도 해당 이벤트가 호출되지 않습니다. > `1(true)`를 리턴 시 링크에 의한 동작을 실행하지 않습니다. ### Syntax ``` onLinkClick : function(paramObject) { } or sheet.bind(\"onLinkClick\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|셀의 열이름| |url|`string`|브라우저에서 열릴 `URL` 값| |target|`string`|`URL`이 열릴 위치(html `<a>` 태그의 `target`과 동일)| ### Return ***boolean*** ### Example ```javascript options.Events = { onLinkClick:function(evtParam){ // url이 현재 클릭된 곳이 있는 프레임과 같은 곳에서 열리지 않도록 합니다. if (evtParam.target == \"_self\") { return true; } return false; } } ```",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-link-click.html"
      },
      {
        "cid": 858,
        "sid": "on-long-click",
        "name": "on-long-click",
        "label": "onLongClick",
        "data": {
          "body": "> 사용자가 셀을 마우스로 [LongClick](/docs/props/cfg/long-click)에 설정된 시간보다 더 길게 클릭했을 때 호출되는 이벤트입니다. > `1(true)`를 리턴 시 클릭에 의한 기본 동작을 막습니다. ### Syntax ``` onLongClick : function(paramObject) { } or sheet.bind(\"onLongClick\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|마우스 클릭 이벤트가 발생된 시트 객체| |row|`object`|클릭된 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|클릭된 셀의 열이름| |x|`number`|셀 내에서 마우스 클릭이 발생한 x좌표| |y|`number`|셀 내에서 마우스 클릭이 발생한 y좌표| |event|`object`|javascript 마우스 이벤트 객체| ### Return ***boolean*** ### Example ```javascript options.Events = { onLongClick:function(evtParam){ // 길게 클릭시 현재 시트에서 클릭된 셀의 값을 sheet2에 있는 첫 번째 행의 sFrom열에 복사합니다. if (evtParam.col == \"sCountry\") { sheet2.setValue({row:sheet2.getRowByIndex(1), col:\"sFrom\", val:sheet.getValue({row:params.row, col:params.col}), render:1}); } } } ```",
          "see": [
            {
              "label": "onClick event",
              "url": "./on-click"
            },
            {
              "label": "onRightLongClick event",
              "url": "./on-right-long-click"
            },
            {
              "label": "LongClick cfg",
              "url": "/docs/props/cfg/long-click"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-long-click.html"
      },
      {
        "cid": 859,
        "sid": "on-mouse-down",
        "name": "on-mouse-down",
        "label": "onMouseDown",
        "data": {
          "body": "> 시트에서 마우스가 눌려졌을때 호출되는 이벤트입니다. > `1(true)`를 리턴 시 `onMouseDown`의 기본 동작을 막습니다. > 인자 `row, col, x, y`는 셀이 아닌 곳을 누를 경우 `undefined` 또는 `null`이 될 수 있습니다(ex 셀 테두리). ### Syntax ``` onMouseDown : function(paramObject) { } or sheet.bind(\"onMouseDown\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|마우스로 누른 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|마우스로 누른 셀의 열이름| |x|`number`|셀 내에서 마우스로 누른 위치의 x좌표| |y|`number`|셀 내에서 마우스로 누른 위치의 y좌표| |event|`object`|javascript 마우스 이벤트 객체| ### Return ***boolean*** ### Example ```javascript options.Events = { onMouseDown:function(evtParam){ // 눌린 열 확인 if (evtParam.row && evtParam.col) alert(sheet.getRowIndex(evtParam.row) + \"행 \" + sheet.getColIndex(evtParam.col)+\"열이 눌렸습니다.\"); } } ```",
          "see": [
            {
              "label": "onMouseUp event",
              "url": "./on-mouse-up"
            },
            {
              "label": "onClick event",
              "url": "./on-click"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-mouse-down.html"
      },
      {
        "cid": 860,
        "sid": "on-mouse-move",
        "name": "on-mouse-move",
        "label": "onMouseMove",
        "data": {
          "body": "> 시트에서 마우스를 움직일 때 호출되는 이벤트입니다. > `1(true)`를 리턴 시 `onMouseMove`의 기본 동작을 막습니다. > 시트 위에서 마우스를 움직일 시 계속 발생하므로 이 이벤트에 많은 설정을 넣으면 **느려질 수 있습니다**. > 인자 `row, col, x, y`는 `undefined` 또는 `null`이 될 수 있습니다(ex 셀 테두리). ### Syntax ``` onMouseMove : function(paramObject) { } or sheet.bind(\"onMouseMove\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|마우스 커서가 위치한 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|마우스 커서가 위치한 열이름| |x|`number`|셀 내에서 마우스로 누른 위치의 x좌표| |y|`number`|셀 내에서 마우스로 누른 위치의 y좌표| |event|`object`|javascript 마우스 이벤트 객체| ### Return ***boolean*** ### Example ```javascript options.Events = { onMouseMove:function(evtParam){ if (evtParam.row && evtParam.col) { console.log(\"현재 셀 값은 \"+ sheet.getValue({row:evtParam.row, col:evtParam.col})); } } } ```",
          "see": [
            {
              "label": "onMouseOver event",
              "url": "./on-mouse-over"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-mouse-move.html"
      },
      {
        "cid": 861,
        "sid": "on-mouse-over",
        "name": "on-mouse-over",
        "label": "onMouseOver",
        "data": {
          "body": "> 마우스가 시트 내 다른 셀에 들어갈 때마다 호출되는 이벤트이며, 힌트를 화면에 노출하거나 편집모드로 들어갈 때도 호출됩니다. > 인자 `row, col, x, y`는 셀이 아닌 곳을 누를 경우 `undefined` 또는 `null`이 될 수 있습니다(ex 셀 테두리). ### Syntax ``` onMouseOver : function(paramObject) { } or sheet.bind(\"onMouseOver\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|마우스로 누른 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|마우스로 누른 셀의 열이름| |orow|`object`|이전에 마우스가 위치했던 셀의 [데이터 로우 객체](/docs/appx/row-object)| |ocol|`string`|이전에 마우스가 위치했던 셀의 열이름| |event|`object`|javascript 마우스 이벤트 객체| ### Return ***none*** ### Example ```javascript options.Events = { onMouseOver:function(evtParam){ if (evtParam.row && evtParam.col && evtParam.orow && evtParam.ocol) { console.log(\"이전 셀 값은 \"+ sheet.getValue({row:evtParam.orow, col:evtParam.ocol})); console.log(\"현재 셀 값은 \"+ sheet.getValue({row:evtParam.row, col:evtParam.col})); } } } ```",
          "see": [
            {
              "label": "onMouseMove event",
              "url": "./on-mouse-move"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-mouse-over.html"
      },
      {
        "cid": 862,
        "sid": "on-mouse-up",
        "name": "on-mouse-up",
        "label": "onMouseUp",
        "data": {
          "body": "> 시트에서 눌려진 마우스 버튼이 올라올 때 호출되는 이벤트로, [onMouseDown](./on-mouse-down) 뒤에 발생합니다. > `1(true)`를 리턴 시 `onMouseUp`의 기본 동작을 막습니다. > 인자 `row, col, x, y`는 셀이 아닌 곳을 누를 경우 `undefined` 또는 `null`이 될 수 있습니다(ex 셀 테두리). ### Syntax ``` onMouseUp : function(paramObject) { } or sheet.bind(\"onMouseUp\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|마우스로 누른 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|마우스로 누른 셀의 열이름| |x|`number`|셀 내에서 마우스로 누른 위치의 x좌표| |y|`number`|셀 내에서 마우스로 누른 위치의 y좌표| |event|`object`|javascript 마우스 이벤트 객체| ### Return ***boolean*** ### Example ```javascript options.Events = { onMouseUp:function(evtParam){ // 눌린 열 확인 if (evtParam.row && evtParam.col) alert(sheet.getRowIndex(evtParam.row) + \"행 \" + sheet.getColIndex(evtParam.col) + \"열이 눌렸습니다.\"); } } ```",
          "see": [
            {
              "label": "onMouseDown event",
              "url": "./on-mouse-down"
            },
            {
              "label": "onClick event",
              "url": "./on-click"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-mouse-up.html"
      },
      {
        "cid": 863,
        "sid": "on-read-can-edit-date",
        "name": "on-read-can-edit-date",
        "label": "onReadCanEditDate",
        "data": {
          "body": "> 달력창을 보여줄 때 달력 내에 생성되는 모든 날짜들에 대해 호출되는 이벤트입니다. > 모든 날짜에 대해 호출되기에 많은 작업을 실행 시 느려질 수 있습니다. > `True/False`를 리턴하여 날짜를 사용할지 여부를 선택할 수 있습니다. > `False`리턴 시 날짜에 취소선이 생성되며 사용자가 선택할 수 없습니다. > `array` 타입으로 리턴 시 `True/False` 에 따라 CSS Class를 지정 할 수 있습니다. ### Syntax ``` onReadCanEditDate : function(paramObject) { } or sheet.bind(\"onReadCanEditDate\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|달력창이 보여질 시트 객체| |row|`object`|달력창이 보여질 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|달력창이 보여질 셀의 열이름| |date|`date`|달력 내에 보여질 날짜(자바스크립트 date 객체)| ### Return ***mixed( boolean | array )*** ### Example `boolean 리턴` ```javascript options.Events = { onReadCanEditDate:function(evtParam){ // 12월 13일 ~ 12월 18일을 제외한 나머지 날짜들은 취소선으로 표시하여 선택 불가를 표현 var date = evtParam.date; if ((date.getMonth()+1) == 12 && (date.getDate() >= 13 && date.getDate() <= 18)) { return true; } return false; } } ``` `array 리턴` ```css .NoEdit { background-color: #f5e4f2; } .CanEdit { background-color: #baebbd; } ``` ```javascript options.Events = { onReadCanEditDate:(evtParam) => { var date = evtParam.date; // 13일 부터 18일 까지 선택 가능 if ((date.getDate() >= 13 && date.getDate() <= 18)) { return [true, \"CanEdit\"]; } return [false, \"NoEdit\"]; } } ```",
          "see": [
            {
              "label": "onReadDate event",
              "url": "./on-read-date"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.27|array 리턴 기능 추가|"
        },
        "url": "docs/events/on-read-can-edit-date.html"
      },
      {
        "cid": 864,
        "sid": "on-read-date",
        "name": "on-read-date",
        "label": "onReadDate",
        "data": {
          "body": "> 달력창을 보여줄 때 달력 내에 생성되는 모든 날짜들에 대해 호출되는 이벤트입니다. > 모든 날짜에 대해 호출되기에 많은 작업을 실행 시 느려질 수 있습니다. > 달력내에 해당 일자를 리턴해야 하는데, 리턴값을 통해 특정일자에 원래의 날짜 대신 다른 문자를 표시하거나, 특정일의 색상, 굵기등의 디자인을 변경하실 수 있습니다. ### Syntax ``` onReadDate : function(paramObject) { } or sheet.bind(\"onReadDate\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|달력창이 보여질 시트 객체| |row|`object`|달력창이 보여질 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`object`|달력창이 보여질 셀의 열이름| |date|`date`|달력 내에 보여질 날짜(자바스크립트 date 객체)| |text|`string`|달력 내에 보여질 날짜| |classes|`array`|각 일자별 적용될 css class 배열 `[normal, hover, selected, selected+hover]`| |range|`array`|달력의 `Range` 속성을 사용하여 여러일자가 선택되어 있는 경우 시작일과 마지막일 배열 `[startdate, enddate]`, Range속성을 사용하지 않는 경우에는 `undefined` | ### Return ***각 일자 파라미터의 `text` 인자를 그대로 리턴하면 됨*** ### Example ```javascript options.Events = { onReadDate:function(evtParam){ //달력에서 매월 15일은 두꺼운 오렌지 색으로 표시 var date = evtParam.date; if (date.getDate() == 15) { return \"<strong style='color:orange'>\" + evtParam.text + \"</strong>\"; } else { return evtParam.text; } } } ```",
          "see": [
            {
              "label": "onReadCanEditDate event",
              "url": "./on-read-can-edit-date"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-read-date.html"
      },
      {
        "cid": 865,
        "sid": "on-read-defaults",
        "name": "on-read-defaults",
        "label": "onReadDefaults",
        "data": {
          "body": "> [Defaults](/docs/props/col/defaults)에 설정된 메뉴가 화면에 보여질 때 호출되는 이벤트입니다. > 사용자가 원하는 메뉴를 문자열 또는 객체로 리턴 시 이에 해당하는 메뉴가 화면에 보여지며, 기존에 설정된 메뉴는 무시됩니다. > `null`을 리턴 시 메뉴를 화면에 보여주지 않습니다. ### Syntax ``` onReadDefaults : function(paramObject) { } or sheet.bind(\"onReadDefaults\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|메뉴가 보여질 시트 객체| |row|`object`|메뉴가 보여질 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|메뉴가 보여질 셀의 열이름| |defaults|`object`|화면에 보여질 `Defaults` 설정 값| ### Return ***mixed( `string` \\| `object` )*** ### Example ```javascript options.Events = { onReadDefaults:function(evtParam){ // 행에서 sProgress 열의 값이 \"진행\", \"완료\"일 때 화면에 보일 메뉴에 대한 설정 if(evtParam.col == \"sTitle\" && evtParam.row[\"sProgress\"] == \"진행\") { return \"{Items:[{Columns:1,Items:[ { Name: '30프로' },{ Name: '40프로' },{ Name: '50프로' },{ Name: '60프로' },{ Name: '80프로' }]}]}\" } else if (evtParam.col == \"sTitle\" && evtParam.row[\"sProgress\"] == \"완료\") return null; else { return evtParam.defaults; // 그 외의 경우 기존에 설정된 메뉴를 그대로 화면에 보여줍니다. } } } ```",
          "see": [
            {
              "label": "Defaults col",
              "url": "/docs/props/col/defaults"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-read-defaults.html"
      },
      {
        "cid": 866,
        "sid": "on-read-filtering-value",
        "name": "on-read-filtering-value",
        "label": "onReadFilteringValue",
        "data": {
          "body": "> 필터링 진행 시 필터링 대상이 되는 열(들)의 각 셀마다 호출되는 이벤트. > 리턴된 값으로 필터링을 진행합니다(실제 셀 값은 유지). ### Syntax ``` onReadFilteringValue:function(paramObject) { } or sheet.bind(\"onReadFilteringValue\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|필터링 진행중인 시트 객체| |row|`object`|필터링 대상이 되는 셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|필터링 대상이 되는 셀이 위치한 열이름| |val|`boolean` \\| `number` \\| `string`|셀 값| ### Return ***mixed( `boolean` \\| `number` \\| `string` )*** ### Example ```javascript options.Events = { onReadFilteringValue:function(evtParam){ // 셀값이 비어있거나 \"미정\"인 경우 \"미입력\"이라는 단어로 대신 필터링을 진행합니다(필터 행에 있는 값과 \"미입력\"이라는 값을 비교하여 필터링). 실제 셀값에 영향을 주진 않습니다. if (evtParam.val == \"\" || evtParam.val == \"미정\") return \"미입력\"; } } ```",
          "see": [
            {
              "label": "onBeforeFilter event",
              "url": "./on-before-filter"
            },
            {
              "label": "onAfterFilter event",
              "url": "./on-after-filter"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-read-filtering-value.html"
      },
      {
        "cid": 867,
        "sid": "on-read-menu",
        "name": "on-read-menu",
        "label": "onReadMenu",
        "data": {
          "body": "> 마우스 오른쪽 클릭 시 시트에 설정된 메뉴가 화면에 보여지기전 호출되는 이벤트 입니다. > **[showMenu](/docs/funcs/core/show-menu) 메소드에 의해 호출되지 않습니다.** > 새로운 메뉴를 문자열 또는 객체로 리턴하여 사용할 수 있습니다(기존에 메뉴가 설정되어 있는 경우 이를 대체합니다). ### Syntax ``` onReadMenu : function(paramObject) { } or sheet.bind(\"onReadMenu\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|메뉴가 보여질 시트 객체| |row|`object`|메뉴가 보여질 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|메뉴가 보여질 셀의 열이름| |menu|`object`|화면에 보여질 메뉴에 대한 설정을 담고 있는 객체| ### Return ***mixed( `string` \\| `object` )*** ### Example ```javascript options.Cfg = { // 기존에 설정된 메뉴 Menu: { Items: [ { Name: \"before\", Text: \"이전\" }, { Name: \"after\", Text: \"이후\" }, { Name: \"now\", Text: \"지금\" } ] } } options.Events = { onReadMenu:function(evtParam){ // 열이름이 sTitle인 경우 기존의 메뉴가 아닌 새로운 메뉴를 사용합니다. if(evtParam.col == \"sTitle\") { var M = { Items: [ { Name: \"title\", Text: \"바로가기\" }, { Name: \"title1\", Text: \"바로가기1\" }, { Name: \"title2\", Text: \"바로가기2\" }, { Name: \"title3\", Text: \"바로가기3\" }, { Name: \"title4\", Text: \"바로가기4\" } ] }; return M; } } } ```",
          "see": [
            {
              "label": "onShowMenu event",
              "url": "./on-show-menu"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-read-menu.html"
      },
      {
        "cid": 868,
        "sid": "on-read-suggest",
        "name": "on-read-suggest",
        "label": "onReadSuggest",
        "data": {
          "body": "> 셀이 편집모드로 들어갈 때 호출되는 이벤트로, 편집 시 사용자에게 셀 값을 제안하는 기능인 [Suggest](/docs/props/col/suggest)의 값을 확인할 수 있습니다. > 사용자는 [Suggest](/docs/props/col/suggest)의 형식을 지닌 새로운 값을 리턴하여 [Suggest](/docs/props/col/suggest)에 설정된 값이 아닌 다른 값을 사용자에게 추천할 수 있습니다. > 편집 모드로 들어갈 때 1회만 호출됩니다. ### Syntax ``` onReadSuggest : function(paramObject) { } or sheet.bind(\"onReadSuggest\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|셀의 열이름| |suggest|`string`|기존에 설정된 `Suggest`의 값| ### Return ***mixed*** ### Example ```javascript options.Events = { onReadSuggest:function(evtParam){ // 행의 sRating 열에 해당하는 셀 값이 50 이상인 경우와 이하인 경우에 대해 다른 Suggest값 적용 if (evtParam.row[\"sRating\"] >= 50) { return \"|보통|만족|매우만족\"; } else { return \"|매우불만족|불만족|보통\"; } } } ```",
          "see": [
            {
              "label": "onSuggest event",
              "url": "./on-suggest"
            },
            {
              "label": "Suggest col",
              "url": "/docs/props/col/suggest"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-read-suggest.html"
      },
      {
        "cid": 869,
        "sid": "on-receive-data",
        "name": "on-receive-data",
        "label": "onReceiveData",
        "data": {
          "body": "> 데이터 조회 시 <mark>데이터를 시트가 받은 직후</mark> 발생하는 이벤트입니다. > [doSearch](/docs/funcs/core/do-search), [doSearchPaging](/docs/funcs/core/do-search-paging), [loadSearchData](/docs/funcs/core/load-search-data) 함수를 통해 가져온 데이터가 시트 내부에서 파싱되기 전에 발생합니다. > [doSearch](/docs/funcs/core/do-search), [doSearchPaging](/docs/funcs/core/do-search-paging)의 경우 호출 후 서버에서 데이터를 받아온 시점에 호출됩니다. > [loadSearchData](/docs/funcs/core/load-search-data) 의 경우 서버와 통신 과정이 없기 때문에 호출 후 바로 발생합니다. > [onBeforeDataLoad](/docs/events/on-before-data-load) 이벤트 보다 먼저 발생합니다. > [doSearch](/docs/funcs/core/do-search), [doSearchPaging](/docs/funcs/core/do-search-paging) 동작 이후 해당 이벤트가 발생할 때, `1(true)`를 리턴하면 이후의 데이터 파싱 작업을 수행하지 않고 중단합니다. ### Syntax ``` onReceiveData:function(paramObject) { } or sheet.bind(\"onReceiveData\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|데이터를 로딩할 시트 객체| |data|`string`|서버에서 조회된 데이터| |response|`object`|`response` 객체| |type|`string`|조회/엑셀 여부(Search, EXCEL)| ### Return ***string*** ### Example ```js // 조회된 내용에 대한 수정 예시 options.Events = { onReceiveData: function(evtParam) { var DATA = evtParam.data; // 조회 결과 데이터 var parseData = JSON.parse(DATA); // string으로 들어오는 data parsing // 조회된 데이터 일부를 수정한다 /** * 조회 데이터 구조 * { data: [{}, {}], etc: []} */ for (var i = 0; i < parseData.data.length; i++){ var row = parseData.data[i]; // AttrYn 컬럼에 값이 Y 인 경우 ConfirmFinish 컬럼에 \"결정완료\"를 설정 if (row[\"AttrYn\"] == \"Y\") { row[\"ConfirmFinish\"] = \"결정완료\"; row[\"CanEdit\"] = 0; } } return parseData; // 파싱 후 수정된 데이터 return } } ``` ### **Return으로 넘겨야 하는 데이터 구조** > 어떤 조회 API를 사용하는가에 따라 `onReceiveData`에서 리턴을 사용할 때 넘겨줘야 하는 데이터 구조가 다릅니다. > `return`을 사용하는 경우 아래의 데이터 구조를 지켜야만 정상적으로 조회가 완료됩니다. 1. `loadSeacrhData`에서 return 해야하는 데이터 구조 ```js // 객체로 리턴하는 경우 // 배열 구조 데이터 리턴 [ { \"EMP_ID\": \"08212\", \"EMP_NM\": \"홍길동\", \"DEPT_CD\": \"031\" }, { \"EMP_ID\": \"07417\", \"EMP_NM\": \"허균\", \"DEPT_CD\": \"120\" }, { \"EMP_ID\": \"02600\", \"EMP_NM\": \"홍판서\", \"DEPT_CD\": \"405\" } ] // 문자열로 리턴하는 경우 // 객체 구조를 지닌 문자열로 리턴 `{\"data\":[{\"EMP_ID\":\"08212\",\"EMP_NM\":\"홍길동\",\"DEPT_CD\":\"031\"},{\"EMP_ID\":\"07417\",\"EMP_NM\":\"허균\",\"DEPT_CD\":\"120\"},{\"EMP_ID\":\"02600\",\"EMP_NM\":\"홍판서\",\"DEPT_CD\":\"405\"}]}` ``` 2. `doSearch`에서 return 해야 하는 데이터 구조 ```js // 객체 구조 데이터 리턴 // 반드시 data 키 안에 배열 구조에 데이터가 들어가야 된다 { \"data\": [{ \"sCountry\": \"영국\", \"sSatisfaction\": 98, \"sCompany\": \"한화\", \"sSaleIncrease\": 6579, \"sPrice\": 6788476, \"sSaleQuantity\": 28426 }, { \"sCountry\": \"영국\", \"sSatisfaction\": 69, \"sCompany\": \"구글\", \"sSaleIncrease\": 1510, \"sPrice\": 2097657, \"sSaleQuantity\": 40992 }, { \"sCountry\": \"중국\", \"sSatisfaction\": 82, \"sCompany\": \"한화\", \"sSaleIncrease\": 2696, \"sPrice\": 9591104, \"sSaleQuantity\": 13705 }, ... ] } // 문자열로 리턴하는 경우도 동일하게, 객체 구조를 지닌 문자열로 리턴해야 한다 ``` 3. `doSearchPaging`에서 return 해야 하는 데이터 구조 ```js // 아래와 같은 객체 구조 데이터 리턴 // 조회 데이터 전체 건수 정보인 `Total`이 포함되어야 한다 { \"Total\":254141 //전체 데이터 건수 \"data\": [{ \"sCountry\": \"영국\", \"sSatisfaction\": 98, \"sCompany\": \"한화\", \"sSaleIncrease\": 6579, \"sPrice\": 6788476, \"sSaleQuantity\": 28426 }, { \"sCountry\": \"영국\", \"sSatisfaction\": 69, \"sCompany\": \"구글\", \"sSaleIncrease\": 1510, \"sPrice\": 2097657, \"sSaleQuantity\": 40992 }, { \"sCountry\": \"중국\", \"sSatisfaction\": 82, \"sCompany\": \"한화\", \"sSaleIncrease\": 2696, \"sPrice\": 9591104, \"sSaleQuantity\": 13705 }, ... ] } // 문자열로 리턴하는 경우도 동일하게, 객체 구조를 지닌 문자열로 리턴해야 한다 ```",
          "see": [
            {
              "label": "doSearch method",
              "url": "/docs/funcs/core/do-search"
            },
            {
              "label": "doSearchPaging method",
              "url": "/docs/funcs/core/do-search-paging"
            },
            {
              "label": "loadSearchData method",
              "url": "/docs/funcs/core/load-search-data"
            },
            {
              "label": "onDataLoad event",
              "url": "./on-data-load"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.19|기능 추가||core|8.0.0.24|`loadSearchData` 사용시에도 이벤트 발생하도록 추가||core|8.0.0.26|`type` 추가||core|8.1.0.73|데이터 파싱 중단 기능 추가|"
        },
        "url": "docs/events/on-receive-data.html"
      },
      {
        "cid": 870,
        "sid": "on-render-finish",
        "name": "on-render-finish",
        "label": "onRenderFinish",
        "data": {
          "body": "> 시트가 렌더링된 후 발생되는 이벤트입니다. > 아래와 같은 부분에서 이벤트 발생합니다. 1. 시트 초기화 1. 데이터 조회 1. 화면의 크기 변화시 (예: Ctrl + 휠) 1. 소계행 사용 시 1. 그룹핑 시 1. `removeAll` 1. `rerender` 1. `revertData` 1. `reload` 1. `makeSubTotal` 1. `removeSubTotal` 1. `setFixedCols, setFixedLeft, setFixedRight, setFixedTop` 1. `setFormulaRow` 1. `setInfoRow` 1. `setSize` 1. `setTheme` 1. `setFormulaRowPosition` 1. `setLocale` 1. `updateClientPaging` 1. `setCurrentInfo` 1. `setAttribute`로 `Width`나 `Visible`을 변경하는 경우 ### Syntax ``` onRenderFinish : function(paramObject){ } or sheet.bind(\"onRenderFinish\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|렌더링된 시트 객체| ### Return ***none*** ### Example ```javascript options.Events = { onRenderFinish:function(evtParam){ // 시트 렌더링이 진행된 후 AR5 행 \"sPerson\" 열에 해당하는 셀에 12345 값을 입력 var r5 = sheet.getRowById(\"AR5\"); sheet.setValue({row:r5 , col:\"sPerson\" , val:12345 , render:1}); /* ***** 주의 사항 ***** 시트 전체 렌더링 시 항상 onRenderFinish 이벤트가 호출되므로, 시트 전체에 대해 렌더링을 진행하는 메소드는 여기서 작성하면 안됩니다. */ } } ```",
          "see": [
            {
              "label": "onRenderStart event",
              "url": "./on-render-start"
            },
            {
              "label": "render method",
              "url": "/docs/funcs/core/render"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-render-finish.html"
      },
      {
        "cid": 871,
        "sid": "on-render-first-finish",
        "name": "on-render-first-finish",
        "label": "onRenderFirstFinish",
        "data": {
          "body": "> 시트가 **처음** 생성되어 렌더링될 때 호출되는 이벤트 입니다. **(최초 1회만 발생)** > 데이터 없이 시트 생성 함수(IBSheet.create)를 호출한 경우 onRenderFirstFinish 이벤트에서 시트에 데이터를 넣을 수 있습니다. ### Syntax ``` onRenderFirstFinish : function(paramObject) { } or sheet.bind(\"onRenderFirstFinish\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|처음 생성된 시트 객체| ### Return ***none*** ### Example ```javascript var data = [ {\"chgrDptNm\":\"전략기획\",\"taskId\":\"100201\",\"actnEndTm\":\"190000\",\"ordr\":\"1\",\"preTaskId\":\"100200\"}, {\"chgrDptNm\":\"실행예산\",\"taskId\":\"100204\",\"actnEndTm\":\"170000\",\"ordr\":\"2\",\"preTaskId\":\"100200\"} ]; options.Events = { onRenderFirstFinish: function(evtParam){ // 시트에 데이터를 넣습니다. evtParam.sheet.loadSearchData(data); } } ```",
          "see": [
            {
              "label": "render method",
              "url": "/docs/funcs/core/render"
            },
            {
              "label": "loadSearchData method",
              "url": "/docs/funcs/core/load-search-data"
            },
            {
              "label": "doSearch method",
              "url": "/docs/funcs/core/do-search"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-render-first-finish.html"
      },
      {
        "cid": 872,
        "sid": "on-render-start",
        "name": "on-render-start",
        "label": "onRenderStart",
        "data": {
          "body": "> 시트를 렌더링하기 전에 호출되는 이벤트입니다. > `1(true)` 값을 리턴 시 시트의 렌더링이 취소가 됩니다. ### Syntax ``` onRenderStart : function(paramObject) { } or sheet.bind(\"onRenderStart\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|렌더링을 진행할 시트 객체| ### Return ***boolean*** ### Example ```javascript user_authority = 3;// 현재 권한을 3이라고 지정 options.Events = { onRenderStart:function(evtParam){ // 권한이 3 이하인 경우 시트의 렌더링을 진행하지 않습니다. if (user_authority < 3) return true; /* ***** 주의 사항 ***** 시트 전체 렌더링 시 항상 onRenderStart 이벤트가 호출되므로, 시트 전체에 대해 렌더링을 진행하는 메소드는 여기서 작성하면 안됩니다. */ } } ```",
          "see": [
            {
              "label": "onRenderFinish event",
              "url": "./on-render-finish"
            },
            {
              "label": "render method",
              "url": "/docs/funcs/core/render"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-render-start.html"
      },
      {
        "cid": 873,
        "sid": "on-resize",
        "name": "on-resize",
        "label": "onResize",
        "data": {
          "body": "> 시트의 크기가 변경될 때 발생합니다. ### Syntax ``` onResize : function(paramObject) { } or sheet.bind(\"onResize\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |oldwidth|`number`|크기 변경 전 너비| |oldheight|`number`|크기 변경 전 높이| |width|`number`|크기 변경 후 너비| |height|`number`|크기 변경 후 높이| ### Return ***none*** ### Example ```javascript options.Events = { onResize:function(evtParam){ //시트크기가 너무 작아지면 일부 열을 감추자 if (evtParam.sheet.getBodyWidth(1) < 1200) { evtParam.sheet.setAttribute(null , \"SN\", \"Visible\", 0, 0); evtParam.sheet.setAttribute(null , \"ProductID\", \"Visible\", 0, 0); evtParam.sheet.setAttribute(null , \"CustomerID\", \"Visible\", 0, 0); } else { evtParam.sheet.setAttribute(null , \"SN\", \"Visible\", 0, 1); evtParam.sheet.setAttribute(null , \"ProductID\", \"Visible\", 0, 1); evtParam.sheet.setAttribute(null , \"CustomerID\", \"Visible\", 0, 1); } evtParam.sheet.rerender(); } } ```",
          "see": [
            {
              "label": "onColResize event",
              "url": "./on-col-resize"
            },
            {
              "label": "onAfterColResize event",
              "url": "./on-after-col-resize"
            },
            {
              "label": "onSectionResize event",
              "url": "./on-section-resize"
            },
            {
              "label": "onAfterSectionResize event",
              "url": "./on-after-section-resize"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-resize.html"
      },
      {
        "cid": 874,
        "sid": "on-result-mask",
        "name": "on-result-mask",
        "label": "onResultMask",
        "data": {
          "body": "> 셀에 입력한 데이터가 [ResultMask](/docs/props/col/result-mask)에서 설정된 유효성 검사를 통과하지 못하는 경우 발생하는 이벤트입니다. > 리턴 결과에 따라 시트 내 동작이 달라집니다. 아무 값도 리턴하지 않을시 기본값은 `0` 입니다. > > `0(default)`을 리턴 시 [ResultText](/docs/props/col/result-text)에서 설정된 값이 alert 경고 메시지에 띄워지며 계속 편집을 진행합니다. > `1`을 리턴 시 경고 메시지가 뜨지 않고 계속 편집을 진행합니다. > `2`를 리턴 시 값을 셀에 저장하지 않고 편집을 종료합니다. > `3`을 리턴 시 값을 셀에 저장하고 편집을 종료합니다. > `4`를 리턴 시 값을 셀에 저장하고 편집을 종료한 뒤, 배경색의 색상을 빨간색으로 변경시킵니다. (3, 4 의 차이점은 배경색 입니다.) > > 유효성 통과를 못한 경우 [Error](/docs/props/cell/error) 속성에 [ResultMask](/docs/props/col/result-mask)값이 설정되며, 해당 셀의 배경색이 빨간색으로 설정됩니다. ### Syntax ``` onResultMask : function(paramObject) { } or sheet.bind(\"onResultMask\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|셀의 열이름| |val|`string`|유효성 통과를 하지 못한 사용자 입력 값| |error|`object`|붙여넣기등의 동작을 통한 다중 셀 편집 시 유효성 검사를 통과하지 못할 경우설정되는 에러 객체([이벤트 error 객체](/docs/appx/event-error) 참고)| ### Return ***number*** ### Example ```javascript options.Cols = [ { Header : \"아이디\", Name: \"sId\", Type: \"Text\", ResultMask: \"^(([A-Z]|[a-z]){6,10})$\", ResultText: \"아이디는 6~10글자 이내의 영문자로 작성해주세요\" } ... ] options.Events = { onResultMask:function(evtParam){ if (evtParam.col == \"sId\") { // sId 열의 ResultMask 설정에 의한 유효성 검사를 통과하지 못한 경우 // alert 메시지 창을 띄우지 않고 편집모드를 계속 진행 return 1; } } } ```",
          "see": [
            {
              "label": "ResultMask col",
              "url": "/docs/props/col/result-mask"
            },
            {
              "label": "ResultText col",
              "url": "/docs/props/col/result-text"
            },
            {
              "label": "Error cell",
              "url": "/docs/props/cell/error"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-result-mask.html"
      },
      {
        "cid": 875,
        "sid": "on-right-click",
        "name": "on-right-click",
        "label": "onRightClick",
        "data": {
          "body": "> 사용자가 셀을 마우스로 우클릭했을 때 호출되는 이벤트입니다. > `1(true)`를 리턴 시 우클릭에 의한 기본 동작을 막습니다. > 인자 `row, col, x, y`는 셀이 아닌 곳을 누를 경우 `undefined` 또는 `null`이 될 수 있습니다(ex 셀 테두리). ### Syntax ``` onRightClick : function(paramObject) { } or sheet.bind(\"onRightClick\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|마우스 우클릭 이벤트가 발생된 시트 객체| |row|`object`|우클릭된 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|우클릭된 셀의 열이름| |x|`number`|셀 내에서 마우스 우클릭이 발생한 x좌표| |y|`number`|셀 내에서 마우스 우클릭이 발생한 y좌표| |event|`object`|javascript 마우스 이벤트 객체| ### Return ***boolean*** ### Example ```javascript options.Events = { onRightClick:function(evtParam){ // 우클릭한 열에 메뉴가 설정되어 있는 경우를 제외하고 우클릭에 의한 기본동작을 막습니다. if (!evtParam.sheet.Cols[evtParam.col].Menu) return true; } } ```",
          "see": [
            {
              "label": "onClick method",
              "url": "./on-click"
            },
            {
              "label": "onRightLongClick method",
              "url": "./on-right-long-click"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-right-click.html"
      },
      {
        "cid": 876,
        "sid": "on-right-long-click",
        "name": "on-right-long-click",
        "label": "onRightLongClick",
        "data": {
          "body": "> 사용자가 셀을 마우스로 [LongClick](/docs/props/cfg/long-click)에 설정된 시간보다 더 길게 우클릭했을 때 호출되는 이벤트입니다. > `1(true)`를 리턴 시 우클릭에 의한 기본 동작을 막습니다. ### Syntax ``` onRightLongClick : function(paramObject) { } or sheet.bind(\"onRightLongClick\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|마우스 우클릭 이벤트가 발생된 시트 객체| |row|`object`|우클릭된 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|우클릭된 셀의 열이름| |x|`number`|셀 내에서 마우스 우클릭이 발생한 x좌표| |y|`number`|셀 내에서 마우스 우클릭이 발생한 y좌표| |event|`object`|javascript 마우스 이벤트 객체| ### Return ***boolean*** ### Example ```javascript options.Events = { onRightLongClick:function(evtParam){ // 열이름이 sTotal인 셀을 길게 우클릭시 다음과 같은 동작을 합니다. // sheet2에 있는 첫 번째 행의 sCount열 셀 값과 현재 시트에서 클릭된 행의 sWeight 열에 해당하는 셀값을 곱한 값을 구합니다. // 구한 값을 현재 길게 클릭된 셀의 값으로 넣습니다. if (evtParam.col == \"sTotal\") { if (confirm(\"값을 받으시겠습니까?\")) { evtParam.sheet.setValue({ row: evtParam.row, col: evtParam.col, val: sheet2.getValue({row: sheet2.getRowByIndex(1), col: \"sCount\"}) * evtParam.sheet.getValue({row: evtParam.row, col: \"sWeight\"}), render: 1 }) } } } } ```",
          "see": [
            {
              "label": "onClick event",
              "url": "./on-click"
            },
            {
              "label": "onRightClick event",
              "url": "./on-right-click"
            },
            {
              "label": "onLongClick event",
              "url": "./on-long-click"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-right-long-click.html"
      },
      {
        "cid": 877,
        "sid": "on-row-add",
        "name": "on-row-add",
        "label": "onRowAdd",
        "data": {
          "body": "> 시트에 새로운 행이 추가된 직후(렌더링 되기전) 호출되는 이벤트입니다. > [addRow](/docs/funcs/core/add-row) 메소드 사용시 호출됩니다. ### Syntax ``` onRowAdd : function(paramObject) { } or sheet.bind(\"onRowAdd\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|시트에 추가될 [데이터 로우 객체](/docs/appx/row-object)| ### Return ***none*** ### Example ```javascript options.Events = { onRowAdd:function(evtParam){ // 행 추가시 여기서 초기값을 설정해줄 수 있습니다. // 렌더링을 이 이벤트가 일어난 후 하기 때문에 값만 설정해줘도 반영됩니다. evtParam.row[\"sTitle\" ] = \"없음\"; evtParam.row[\"sAudience\" ] = 0; evtParam.row[\"sPlace\" ] = \"미정\"; } } ```",
          "see": [
            {
              "label": "addCols method",
              "url": "/docs/funcs/core/add-cols"
            },
            {
              "label": "onAfterRowAdd event",
              "url": "./on-after-row-add"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-row-add.html"
      },
      {
        "cid": 878,
        "sid": "on-row-filter",
        "name": "on-row-filter",
        "label": "onRowFilter",
        "data": {
          "body": "> 필터링 진행 시 각 행에 대해 호출되는 이벤트입니다. > 행이 화면에 보일지 여부를 `boolean` 값으로 반드시 리턴해야합니다. ### Syntax ``` onRowFilter:function(paramObject) { } or sheet.bind(\"onRowFilter\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|필터링 진행중인 시트 객체| |row|`object`|필터링 진행된 [데이터 로우 객체](/docs/appx/row-object)| |show|`boolean`|필터링 결과 `0(false)`:화면에 감춤 `1(true)`:화면에 보임| ### Return ***boolean*** ### Example ```javascript options.Events = { onRowFilter:function(evtParam){ // sName 열의 값이 \"구청앞\"인 경우 필터링 결과와 상관없이 화면에 보여줍니다. // 다른 열의 값에 의해 필터링이 영향을 받을 때 유용합니다. if (evtParam.row[\"sName\"] == \"구청앞\") return true; return evtParam.show; } } ```",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-row-filter.html"
      },
      {
        "cid": 879,
        "sid": "on-row-load",
        "name": "on-row-load",
        "label": "onRowLoad",
        "data": {
          "body": "> 데이터 조회 시 [데이터 로우 객체](/docs/appx/row-object)가 생성된 직후 호출되는 이벤트입니다. > 시트의 렌더링이 완료되기전 시트에 생성되는 각 행마다 호출되며, 해당 이벤트에서 행의 속성 또는 행에 있는 셀의 데이터를 변경할 수 있습니다. > 해당 이벤트 내에서 **[addRow](/docs/funcs/core/add-row) 메소드를 통해 시트에 새로운 행을 추가 할 수 없습니다.** > `1(true)` 를 리턴 시 렌더링이 취소 됩니다. ### Syntax ``` onRowLoad : function(paramObject) { } or sheet.bind(\"onRowLoad\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|렌더링을 진행할 시트 객체| |row|`object`|시트에 추가될 [데이터 로우 객체](/docs/appx/row-object)| |eventName|`string`|이벤트 이름| ### Return ***boolean*** ### Example ```javascript options.Events = { onRowLoad:function(evtParam){ // 행의 CUST_CD 열이름에 해당하는 셀 값이 500이상인 경우 셀 내 텍스트 컬러를 빨간색으로 변경합니다. if (evtParam.row[\"CUST_CD\"] >= 500) { evtParam.row[\"CUST_CD\"+\"TextColor\"] = \"#FF0000\"; } } } ```",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-row-load.html"
      },
      {
        "cid": 880,
        "sid": "on-save",
        "name": "on-save",
        "label": "onSave",
        "data": {
          "body": "> doSave() 함수 호출 시 발생하는 이벤트 입니다. > 저장할 데이터에 대한 수집 작업이 이루어지기 전에 발생합니다. > `1(true)`를 리턴 시 다음 이벤트([onBeforeSave](./on-before-save))을 실행하지 않고, 저장이 중단 됩니다. ### Syntax ``` onSave : function(paramObject) { } or sheet.bind(\"onSave\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|서버에 변경된 내용을 전송할 시트 객체| ### Return ***boolean*** ### Example ```javascript options.Events = { onSave:function(evtParam){ var changes = evtParam.sheet.getChangedData(); if (changes.indexOf(\"금지어\") > -1) { alert(\"잘못된 문자열이 포함되어 있습니다. 저장을 취소합니다.\"); return true; } } } ```",
          "see": [
            {
              "label": "doSave method",
              "url": "/docs/funcs/core/do-save"
            },
            {
              "label": "onBeforeSave event",
              "url": "./on-before-save"
            },
            {
              "label": "onAfterSave event",
              "url": "./on-after-save"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-save.html"
      },
      {
        "cid": 881,
        "sid": "on-scroll",
        "name": "on-scroll",
        "label": "onScroll",
        "data": {
          "body": "> 시트의 메인 스크롤(가로,세로)이 움직인 후 발생하는 이벤트입니다. > 스크롤이 움직인 후 항상 발생하기 때문에 많은 작업을 여기서 처리시 **성능이 저하**될수 있습니다. ### Syntax ``` onScroll : function(paramObject) { } or sheet.bind(\"onScroll\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|스크롤을 움직인 시트 객체| |hpos|`number`|움직인 후 중간 섹션(section)의 scrollLeft(pixel 단위)| |vpos|`number`|움직인 후 중간 섹션(section)의 scrollTop(pixel 단위)| |oldhpos|`number`|움직이기전 중간 섹션(section)의 scrollLeft(pixel 단위)| |oldvpos|`number`|움직이기전 중간 섹션(section)의 scrollTop(pixel 단위)| |hpos0|`number`|움직인 후 왼쪽 섹션(section)의 scrollLeft(pixel 단위)| |oldhpos0|`number`|움직이기전 왼쪽 섹션(section)의 scrollLeft(pixel 단위)| |hpos2|`number`|움직인 후 오른쪽 섹션(section)의 scrollLeft(pixel 단위)| |oldhpos2|`number`|움직이기전 오른쪽 섹션(section)의 scrollLeft(pixel 단위)| ### Return ***none*** ### Example ```javascript options.Events = { onScroll:function(evtParam){ // 스크롤을 내린 직후 보이는 화면의 첫 행의 첫번째 열에 포커싱을 합니다. evtParam.sheet.focus({row: evtParam.sheet.getShownRows()[0], col: evtParam.sheet.getFirstCol()}); } } ```",
          "see": [
            {
              "label": "onVScrollEndPoint event",
              "url": "./on-v-scroll-end-point"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-scroll.html"
      },
      {
        "cid": 882,
        "sid": "on-search-finish",
        "name": "on-search-finish",
        "label": "onSearchFinish",
        "data": {
          "body": "> [doSearch](/docs/funcs/core/do-search)나 [loadSearchData](/docs/funcs/core/load-search-data) 함수를 통해 로드된 데이터가 화면에 렌더링(표시)까지 완료된 상태에서 발생합니다. **<mark>주의</mark> : 이 이벤트는 조회가 끝나고 화면에 떠 있는 대기이미지 닫을시 유용하며, 시트에 접근하여 값 또는 속성을 바꾸는 작업을 할경우 `onBeforeDataLoad`나 `onDataLoad`이벤트가 적합합니다.** ### Syntax ``` onSearchFinish : function(paramObject) { } or sheet.bind(\"onSearchFinish\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |type|`string`|조회/엑셀 여부(Search, EXCEL)| ### Return ***none*** ### Example ```javascript options.Events = { onSearchFinish:function(evtParam){ //로딩 이미지를 제거 $.unblockUI(); } } ```",
          "see": [
            {
              "label": "onReceiveData event",
              "url": "/docs/events/on-receive-data"
            },
            {
              "label": "onBeforeDataLoad event",
              "url": "./on-before-data-load"
            },
            {
              "label": "onDataLoad event",
              "url": "./on-data-load"
            },
            {
              "label": "onSearchStart event",
              "url": "./on-search-start"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.26|`type` 추가|"
        },
        "url": "docs/events/on-search-finish.html"
      },
      {
        "cid": 883,
        "sid": "on-search-start",
        "name": "on-search-start",
        "label": "onSearchStart",
        "data": {
          "body": "> 조회 함수를 통한 데이터 조회가 시작하기 전에 발생합니다 > `1(true)` 값을 리턴 시 조회가 취소됩니다. ### Syntax ``` onSearchStart : function(paramObject) { } or sheet.bind(\"onSearchStart\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |type|`string`|조회/엑셀 여부(Search, EXCEL)| ### Return ***none*** ### Example ```javascript options.Events = { onSearchStart: function(evtParam) { //로딩 이미지 보이기 $.blockUI(); } } ```",
          "see": [
            {
              "label": "onSearchFinish event",
              "url": "./on-search-finish"
            },
            {
              "label": "doSearch method",
              "url": "/docs/funcs/core/do-search"
            },
            {
              "label": "doSearchPaging method",
              "url": "/docs/funcs/core/do-search-paging"
            },
            {
              "label": "loadSearchData method",
              "url": "/docs/funcs/core/load-search-data"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.24|기능 추가||core|8.0.0.26|`type` 추가|"
        },
        "url": "docs/events/on-search-start.html"
      },
      {
        "cid": 884,
        "sid": "on-section-resize",
        "name": "on-section-resize",
        "label": "onSectionResize",
        "data": {
          "body": "> 좌우측 섹션의 크기를 변경하는 경우 발생합니다. > cfg [SectionCanResize](/docs/props/cfg/section-can-resize)속성 설정시 사용자가 좌우측 영역의 크기를 변경할 수 있는데, 이렇게 크기가 변경되기 직전에 발생합니다. > ### Syntax ``` onSectionResize : function(paramObject { } or sheet.bind(\"onSectionResize\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|서버에 변경된 내용을 전송한 시트 객체| |section |`number`|왼쪽, 오른쪽 변경된 섹션 `0`:왼쪽 섹션 크기 변경시 `2`:오른쪽 섹션 크기 변경시| ### Return ***none*** ### Example ```javascript options.Events = { onSectionResize:function(evtParam){ //왼쪽 section 크기 변경시 가로스크롤바를 이동 if(evtParam.section==0){ sheet.setScrollLeft(0 , 1); } } } ```",
          "see": [
            {
              "label": "SectionCanResize cfg",
              "url": "/docs/props/cfg/section-can-resize"
            },
            {
              "label": "LeftCanResize cfg",
              "url": "/docs/props/cfg/Left-can-resize"
            },
            {
              "label": "RightCanResize cfg",
              "url": "/docs/props/cfg/right-can-resize"
            },
            {
              "label": "LeftWidth cfg",
              "url": "/docs/props/cfg/left-width"
            },
            {
              "label": "RightWidth cfg",
              "url": "/docs/props/cfg/right-width"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-section-resize.html"
      },
      {
        "cid": 885,
        "sid": "on-select-end",
        "name": "on-select-end",
        "label": "onSelectEnd",
        "data": {
          "body": "> 마우스 드래그로 선택 완료 시점에 발생하는 이벤트입니다. > API로 선택 시 해당 API의 `ignoreEvent` 인자를 통해 `onSelectEnd` 이벤트 발생을 제어할 수 있습니다. ### Syntax ``` onSelectEnd : function(paramObject) { } or sheet.bind(\"onSelectEnd\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |range|`object`|선택된 영역들에 대한 이중 배열 [시작[데이터 로우 객체](/docs/appx/row-object) , 시작열이름 , 종료[데이터 로우 객체](/docs/appx/row-object) , 종료열이름 , 시작행인덱스 , 시작열인덱스 , 선택행의개수 , 선택열의 개수]| |rows|`array[object]`|선택된 영역의 로우 객체들에 대한 배열 [데이터 로우 객체](/docs/appx/row-object)| |cols|`array[string]`|선택된 영역의 `colName` 배열| ### Return ***none*** ### Example ```javascript options.Events = { onSelectEnd:function(evtParam){ // 선택된 영역들의 정보를 확인 할 수 있습니다. console.log(\"SelectedRows:\", evtParam.rows, \"SelectedCols\", evtParam.cols); } } ```",
          "see": [
            {
              "label": "selectRange method",
              "url": "/docs/funcs/core/select-range"
            },
            {
              "label": "getSelectedRanges method",
              "url": "/docs/funcs/core/get-selected-range"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.10|기능 추가|"
        },
        "url": "docs/events/on-select-end.html"
      },
      {
        "cid": 886,
        "sid": "on-select-file",
        "name": "on-select-file",
        "label": "onSelectFile",
        "data": {
          "body": "> [importData](/docs/funcs/core/import-data), [loadExcel](/docs/funcs/excel/load-excel), [loadText](/docs/funcs/excel/load-text) 함수를 호출하여 사용자가 엑셀파일이나 텍스트 파일을 선택시 발생합니다. > 위 함수 호출시 먼저 파일선택창이 열리고, 여기서 파일을 선택했을 때 발생합니다. > 해당 이벤트에서 false를 리턴할 경우, 파일 업로드가 취소됩니다. ### Syntax ``` onSelectFile : function(paramObject) { } or sheet.bind(\"onSelectFile\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |type|`string`|[importData](/docs/funcs/core/import-data), [loadExcel](/docs/funcs/excel/load-excel), [loadText](/docs/funcs/excel/load-text) 함수 호출에 따라 `EXCEL, TEXT`| |filename|`string`|선택한 파일 명| ### Return ***none*** ### Example ```javascript options.Events = { onSelectFile:function(evtParam){ //업로드 완료시까지 화면에 block을 띄운다. $.blockUI({ message: '<h1><img src=\"busy.gif\" />파일 업로드 작업중입니다...</h1>' }); } } ```",
          "see": [
            {
              "label": "importData method",
              "url": "/docs/funcs/core/import-data"
            },
            {
              "label": "loadExcel method",
              "url": "/docs/funcs/excel/load-excel"
            },
            {
              "label": "loadText method",
              "url": "/docs/funcs/excel/load-text"
            },
            {
              "label": "onImportFinish event",
              "url": "./on-import-finish"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-select-file.html"
      },
      {
        "cid": 887,
        "sid": "on-select-menu",
        "name": "on-select-menu",
        "label": "onSelectMenu",
        "data": {
          "body": "> 마우스 오른쪽 클릭 시 시트에 설정된 메뉴([Menu](/docs/props/col/menu))의 아이템을 클릭했을 때 호출되는 이벤트입니다. > **[showMenu](/docs/funcs/core/show-menu) 메소드로 생성된 메뉴를 클릭 시 호출되지 않습니다.** ### Syntax ``` onSelectMenu : function(paramObject) { } or sheet.bind(\"onSelectMenu\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|메뉴가 보여지고 있는 시트 객체| |row|`object`|메뉴가 보여지고 있는 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|메뉴가 보여지고 있는 셀의 열이름| |result|`string`|메뉴에서 선택한 아이템(아이템의 Value, Value가 선언되어있지 않으면 Name)| ### Return ***none*** ### Example ```javascript options.Cfg = { // 기존에 설정된 메뉴 Menu: { Items: [ { Name: \"title\", Text: \"바로가기\", Value:\"0\" }, { Name: \"title1\", Text: \"바로가기1\", Value:\"1\" }, { Name: \"title2\", Text: \"바로가기2\", Value:\"2\" }, { Name: \"title3\", Text: \"바로가기3\", Value:\"3\" }, { Name: \"title4\", Text: \"바로가기4\", Value:\"4\" } ] ; } } options.Events = { onSelectMenu:function(evtParam){ // 메뉴에서 선택된 값으로 셀 값을 변경하기 evtParam.sheet.setValue({row: evtParam.row, col: evtParam.col, val: evtParam.result, render: 1}); evtParam.sheet.refreshRow(evtParam.row); } } ```",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-select-menu.html"
      },
      {
        "cid": 888,
        "sid": "on-set-file",
        "name": "on-set-file",
        "label": "onSetFile",
        "data": {
          "body": "> `Type:File`에서 셀에 파일 업로드 직전, 파일 선택 창의 파일 선택 완료 직후 발생합니다. > `files`인자로 선택한 파일 정보를 확인할 수 있습니다. > `1(true)`를 리턴하는 경우 파일 타입에 값 입력이 중단되고 파일이 올라가지 않습니다 ### Syntax ``` onSetFile : function(paramObject) { } or sheet.bind(\"onSetFile \" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|------------| |sheet|`object`|시트 객체| |row|`object`| 셀이 위치한 데이터 로우 객체| |col|`string`|셀의 열이름| |files|`array`|선택한 파일 객체 (`FileList`)| ### Return ***boolean*** ### Example ```javascript options.Events = { // 파일 업로드 창에서 선택한 파일명 확인 onSetFile: function(evtParam) { console.log(evtParam.files[0].name); } } ```",
          "see": [
            {
              "label": "File Type 업로드 appendix",
              "url": "/docs/appx/file-type-upload"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.19|기능 추가|"
        },
        "url": "docs/events/on-set-file.html"
      },
      {
        "cid": 889,
        "sid": "on-sheet-focus",
        "name": "on-sheet-focus",
        "label": "onSheetFocus",
        "data": {
          "body": "> 시트에 포커스 되었을때 호출되는 이벤트입니다. ### Syntax ``` onSheetFocus : function(paramObject) { } or sheet.bind(\"onSheetFocus\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|포커스가 된 시트 객체| ### Return ***none*** ### Example ```javascript options.Events = { onSheetFocus:function(evtParam){ alert(\"현재 포커스된 시트는 \"+evtParam.sheet.id+\" 입니다.\"); } } ```",
          "see": [
            {
              "label": "onFocus event",
              "url": "/docs/events/on-focus"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.7|기능 추가|"
        },
        "url": "docs/events/on-sheet-focus.html"
      },
      {
        "cid": 890,
        "sid": "on-show-calender-ym",
        "name": "on-show-calender-ym",
        "label": "onShowCalendarYm",
        "data": {
          "body": "> 달력창을 보여줄 때, 년/월 달력창 내에 생성되는 모든 년/월들에 대해 호출되는 이벤트입니다. > 모든 년/월에 대해 호출되기에 많은 작업을 실행 시 느려질 수 있습니다. > `True/False`를 리턴하여 년/월을 사용할지 여부를 선택할 수 있습니다. > `False`리턴 시 해당 년/월에 취소선이 생성되며 사용자가 선택할 수 없습니다. ![onShowCalendarYm](/assets/imgs/onShowCalendarYm.png) ### Syntax ``` onShowCalendarYm : function(paramObject) { } or sheet.bind(\"onShowCalendarYm\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|년/월 달력창이 보여질 시트 객체| |row|`object`|년/월 달력창이 보여질 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|년/월 달력창이 보여질 셀의 열이름| |year|`number`|년/월 달력 내에 보여질 년도| |month|`number`|년/월 달력 내에 보여질 월(년도가 그려지는 호출시점에서는 <b>null을 리턴</b>)| ### Return ***boolean*** ### Example ```javascript options.Events = { onShowCalendarYm:function(evtParam){ // 2013년 1월 ~ 2013년 4월을 제외한 나머지 년/월들은 취소선으로 표시하여 선택 불가를 표현 if (evtParam.year == 2013 && (evtParam.month == null || (evtParam.month >= 1 && evtParam.month <= 4))) { return true; } return false; }, onShowCalendarYm:function(evtParam){ // 1월 ~ 4월을 제외한 나머지 월들은 취소선으로 표시하여 선택 불가를 표현(년도는 모두 선택가능) if (evtParam.month == null || (evtParam.month >= 1 && evtParam.month <= 4)) { return true; } return false; }, onShowCalendarYm:function(evtParam){ // 2013년을 제외한 나머지 년/월들은 취소선으로 표시하여 선택 불가를 표현(2013년을 선택시 표시되는 월들은 모두 선택가능) if (evtParam.year == 2013) { return true; } return false; } } ```",
          "see": [
            {
              "label": "onReadCanEditDate event",
              "url": "./on-read-can-edit-date"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.9|기능 추가|"
        },
        "url": "docs/events/on-show-calender-ym.html"
      },
      {
        "cid": 891,
        "sid": "on-show-col",
        "name": "on-show-col",
        "label": "onShowCol",
        "data": {
          "body": "> 열이 보이거나 숨겨질 때 호출되는 이벤트입니다. > `1(true)`를 리턴 시 열에 대한 숨김/보임 동작을 실행하지 않고 현상 유지합니다. ### Syntax ``` onShowCol : function(paramObject) { } or sheet.bind(\"onShowCol\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |col|`string`|화면에서 보이거나 숨겨질 열이름| |hide|`boolean`|숨김 여부 `0(false)`:보임 `1(true)`:숨김| ### Return ***boolean*** ### Example ```javascript options.Events = { onShowCol:function(evtParam){ // 도시 열에 있는 셀 값이 서울인 경우와 인천인 경우에 대해 다른 Enum을 보여줍니다. if (evtParam.hide == \"0\" && evtParam.col == \"privacy\") { return true; } } } ```",
          "see": [
            {
              "label": "showCol method",
              "url": "/docs/funcs/core/show-col"
            },
            {
              "label": "hideCol method",
              "url": "/docs/funcs/core/hide-col"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-show-col.html"
      },
      {
        "cid": 892,
        "sid": "on-show-defaults",
        "name": "on-show-defaults",
        "label": "onShowDefaults",
        "data": {
          "body": "> [Defaults](/docs/props/col/defaults)에 설정된 메뉴가 화면에 보여질 때 호출되는 이벤트입니다.([onReadDefaults](/docs/events/on-read-defaults) 이벤트 발생 후 발생합니다.) > 표시될 메뉴의 순서나 내용을 수정할 수 있습니다. ### Syntax ``` onShowDefaults : function(paramObject) { } or sheet.bind(\"onShowDefaults\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|메뉴가 보여질 시트 객체| |row|`object`|메뉴가 보여질 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|메뉴가 보여질 셀의 열이름| |menu|`object`|화면에 보여질 메뉴 객체| |pos|`object`|메뉴에 대한 `Position` 객체| ### Return ***none*** ### Example ```javascript options.Events = { onShowDefaults:function(evtParam){ // Defaults를 통해 보여지는 menu의 일부 아이템을 제거한 후 보여준다. evtParam.menu.Items.splice(0,3); //앞에 3개 아이템을 제거 } } ```",
          "see": [
            {
              "label": "Defaults col",
              "url": "/docs/props/col/defaults"
            },
            {
              "label": "onReadDefaults event",
              "url": "/docs/events/on-read-defaults"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.6|기능 추가|"
        },
        "url": "docs/events/on-show-defaults.html"
      },
      {
        "cid": 893,
        "sid": "on-show-edit-enum",
        "name": "on-show-edit-enum",
        "label": "onShowEditEnum",
        "data": {
          "body": "> [EditEnum](/docs/props/col/edit-enum)타입의 열에서 리스트가 열리기 직전에 호출되는 이벤트입니다. > 새로운 [EditEnum](/docs/props/col/edit-enum) 리스트를 만들고 리턴하여 [EditEnum](/docs/props/col/edit-enum)을 대체해서 사용할 수 있습니다(기존에 [EditEnum](/docs/props/col/edit-enum)이 설정되어 있지 않아도 사용가능 합니다). > 새로운 [EditEnum](/docs/props/col/edit-enum) 리스트를 리턴 시 [Enum](/docs/props/col/enum) 속성에 설정된 리스트의 **개수만큼 설정**해서 리턴해야합니다. ### Syntax ``` onShowEditEnum : function(paramObject) { } or sheet.bind(\"onShowEditEnum\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|`Enum` 리스트가 열리는 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|`Enum` 리스트가 열리는열이름| |editenum|`string`|`EditEnum`에 설정된 값| ### Return ***string*** ### Example ```javascript options.Events = { onShowEditEnum:function(evtParam){ // EditEnum에 \"금지어\"가 포함된 경우 이를 \"좋은말\"로 대체해서 화면에 보여줍니다. if (evtParam.editenum.indexOf(\"금지어\")) { return evtParam.editenum.replace(\"금지어\", \"좋은말\"); } } } ```",
          "see": [
            {
              "label": "Enum col",
              "url": "/docs/props/col/enum"
            },
            {
              "label": "EditEnum col",
              "url": "/docs/props/col/edit-enum"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-show-edit-enum.html"
      },
      {
        "cid": 894,
        "sid": "on-show-edit",
        "name": "on-show-edit",
        "label": "onShowEdit",
        "data": {
          "body": "> 셀 편집 시작 시 편집모드에 보일 값을 가져오기 위해 호출되는 이벤트입니다. > 편집모드를 시작할 때 보일 값 대신 사용될 값을 리턴 할 수 있습니다. ### Syntax ``` onShowEdit : function(paramObject) { } or sheet.bind(\"onShowEdit\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|편집모드가 시작된 시트 객체| |row|`object`|편집모드가 시작된 셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|편집모드가 시작된 셀의 열이름| |val|`string`|편집모드에서 보일 값| ### Return ***string*** ### Example ```javascript options.Events = { onShowEdit:function(evtParam){ // 편집모드의 초기 값을 세팅해줄 수 있다. return 1; } } ```",
          "see": [
            {
              "label": "onStartEdit event",
              "url": "./on-start-edit"
            },
            {
              "label": "onEndEdit event",
              "url": "./on-end-edit"
            },
            {
              "label": "onAfterEdit event",
              "url": "./on-after-edit"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-show-edit.html"
      },
      {
        "cid": 895,
        "sid": "on-show-enum-menu",
        "name": "on-show-enum-menu",
        "label": "onShowEnumMenu",
        "data": {
          "body": "> Enum 타입 열에서 리스트를 열 때 호출되는 이벤트입니다. > 새로운 리스트를 만들고 리턴하여 [EnumMenu](/docs/props/col/enum-menu)을 대체해서 사용할 수 있습니다(기존에 [EnumMenu](/docs/props/col/enum-menu)가 설정되어 있지 않아도 사용가능 합니다). ### Syntax ``` onShowEnumMenu : function(paramObject) { } or sheet.bind(\"onShowEnumMenu\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|콤보가 열릴 셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|콤보가 열릴 셀의 열이름| |enummenu|`string`|[EnumMenu](/docs/props/col/enum-menu)에 설정된 값| ### Return ***string*** ### Example ```javascript options.Events = { onShowEnumMenu:function(evtParam){ // EnumMenu 설정이 안되어 있고 열이름이 \"sCity\"이면 새로운 EnumMenu를 생성하여 리턴합니다. if (!evtParam.enummenu && evtParam.col == \"sCity\") { if (evtParam.sheet.getString({row: evtParam.row, col: \"sLocal\"}) === \"Asia\") { return \"{Items: [{ Text: '한국',Menu: 1,Items: [{ Value: '01', Text: '서울' }, { Value: '02', Text: '인천' }]}, {Text: '일본', Menu: 1,Items: [{ Value: '03', Text: '토쿄' }, { Value: '04', Text: '오사카' }] }]}\"; } else { return \"{Items: [{Text: '미국',Menu: 1,Items: [{ Value: '05', Text: '워싱턴' }, { Value: '06', Text: '뉴욕' }]}, {Text: '캐나다',Menu: 1,Items: [{ Value: '07', Text: '토론토' }, { Value: '08', Text: '몬트리올' }]}]}\"; } } } } ```",
          "see": [
            {
              "label": "EnumMenu col",
              "url": "/docs/props/col/enum-menu"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-show-enum-menu.html"
      },
      {
        "cid": 896,
        "sid": "on-show-hint",
        "name": "on-show-hint",
        "label": "onShowHint",
        "data": {
          "body": "> 힌트가 화면에 보여질 때 호출되는 이벤트입니다. > 힌트 값을 변경하고 싶은 경우, 사용자가 원하는 커스텀 `hint` 값(기본은 셀 값)을 리턴합니다. ### Syntax ``` onShowHint : function(paramObject) { } or sheet.bind(\"onShowHint\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|힌트가 보여질 시트 객체| |row|`object`|힌트가 보여질 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|힌트가 보여질 셀의 열이름| |hint|`object`|화면에 보여질 힌트 값| |reason|`number`|힌트가 보여지게된 원인 `1`:셀 내용의 너비가 셀의 너비보다 클 때 `2`:셀 내용의 높이가 셀의 높이보다 클 때 `3`:셀 내용의 너비/높이가 셀의 너비/높이보다 클 때| ### Return ***string*** ### Example ```javascript options.Events = { onShowHint:function(evtParam){ // 열이름이 sTitle인 셀에서 힌트가 보여지는데 셀 내용이 5글자 이상이면 \"첫 5글자...\" 형태로 힌트를 보여줍니다. if(evtParam.col == \"sTitle\" && evtParam.hint.length >= 5) { return evtParam.hint.slice(0,5) + \"...\"; } } } ```",
          "see": [
            {
              "label": "showHint method",
              "url": "/docs/funcs/core/show-hint"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-show-hint.html"
      },
      {
        "cid": 897,
        "sid": "on-show-menu",
        "name": "on-show-menu",
        "label": "onShowMenu",
        "data": {
          "body": "> 셀에서 마우스 오른쪽 클릭 시 시트에 설정된 메뉴가 화면에 보여질 때 호출되는 이벤트 입니다. > **[showMenu](/docs/funcs/core/show-menu) 메소드에 의해 호출되지 않습니다.** > `1(true)`를 리턴 시 설정된 메뉴를 화면에 보여주지 않습니다. ### Syntax ``` onShowMenu : function(paramObject) { } or sheet.bind(\"onShowMenu\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|메뉴가 보여질 시트 객체| |row|`object`|메뉴가 보여질 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|메뉴가 보여질 셀의 열이름| |menu|`object`|화면에 보여질 메뉴에 대한 설정을 담고 있는 객체| ### Return ***boolean*** ### Example ```javascript options.Events = { onShowMenu:function(evtParam){ // 열이름이 preTaskId인 경우 메뉴를 화면에 보여주지 않습니다. if (evtParam.col === \"preTaskId\") return true; } } ```",
          "see": [
            {
              "label": "onReadMenu event",
              "url": "./on-read-menu"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-show-menu.html"
      },
      {
        "cid": 898,
        "sid": "on-show-message",
        "name": "on-show-message",
        "label": "onShowMessage",
        "data": {
          "body": "> 시트의 메시지가 발생할 때 실행되는 이벤트입니다. > showMessage(), showMessageTime() 메서드를 통한 메세지나 doSave()와 같은 함수 호출시 시트 내부에서 발생하는 메세지가 표시되기 전에 이벤트가 발생합니다. > 이 이벤트를 통해서 시트가 제공하는 메세지`Dialog` 대신 프로젝트 공통으로 사용하는 디자인 된 메시지를 보여줄 수 있습니다. > 리턴 값을 1이나 true로 할 경우 원래 표시해야 할 메세지를 표시하지 않습니다.(기본값 없음) ### Syntax ``` onShowMessage: function(paramObject) { } or sheet.bind(\"onShowMessage\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|메시지가 발생한 시트 객체| |messageTag|`object`|메시지를 보여주는 `Dom` 객체| |message|`string`|메시지로 보여질 문자열(`html tag`도 포함)| |isConfirm|`boolean`|[showMessageTime (method)](/docs/funcs/core/show-message-time)으로 호출 되었는지 여부| |time|`number`|[showMessageTime (method)](/docs/funcs/core/show-message-time)으로 호출될때 `time`인자 값| |buttons|`array[string]`|[showMessageTime (method)](/docs/funcs/core/show-message-time)으로 호출될때 설정된 `buttons`인자 값| |callback|`function`|[showMessageTime (method)](/docs/funcs/core/show-message-time)으로 호출될때 설정된 `func`을 호출하는 콜백 메소드 buttons를 통해 설정한 버튼의 개수에 따라 좌측부터 순서대로 1,2,3...이 함수의 arguments로 리턴 (가령 버튼이 두 종류이면 클릭한 버튼에 따라 1 또는 2가 리턴 됩니다.)| |isAlert|`boolean`|alert 으로 호출 되었는지 여부| ### Return ***boolean*** ### Example ```javascript // [SweetAlert2](https://sweetalert2.github.io/)를 활용한 예제 options.Events = { onShowMessage: function (evtParams) { if (window.Swal) { // showMessage와 showMessageTime에 따라 메시지 처리를 다르게 해준다. if (evtParams.isConfirm) { Swal.fire({ title: \"<div>\" + evtParams.message + \"</div>\", // 메시로 보여질 문자열(HTML Tag 포함) icon: 'warning', showConfirmButton: (evtParams.buttons.indexOf(\"Ok\") > -1), // 확인 버튼이 있으면 확인 버튼을 만들어준다. showCancelButton: (evtParams.buttons.indexOf(\"Cancel\") > -1), // 취소 버튼이 있으면 취소 버튼을 만들어준다. confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: '확인', cancelButtonText: '취소', timer: evtParams.time // showMessageTime의 time인자로 단위는 밀리초(ms)로 설정한다. }).then((result) => { if (result.value) { // confirmButton이 눌렸을때 시트에서도 후속 기능이 실행되도록 callback을 통해 Ok 버튼이 눌린 정보를 전달한다. if (evtParams.callback) evtParams.callback(1); } else { // cancelButton이 눌렸을때 시트에서도 후속 기능이 실행되지 않도록 callback을 통해 Cancel 버튼이 눌린 정보를 전달한다. if (evtParams.callback) evtParams.callback(2); } }); } else { Swal.fire({ title: \"<div>\" + evtParams.message + \"</div>\", // 메시로 보여질 문자열(HTML Tag 포함) icon: 'success', showConfirmButton: false // IBSheet는 단순 메시지에서 확인버튼을 노출 시키지 않기때문에 비슷하게 구현하려면 Swal의 버튼도 숨겨야한다. }).then((result) => { // callback이 있는 경우 반드시 처리 if (evtParams.callback) evtParams.callback(1); // Swal이 클릭이나 esc 키 등 Swal 액션으로 닫혔을때 sheet.hideMessage()도 같이 실행 시켜준다. // sheet.hideMessage()호출로 Swal가 닫히면 result.value, result.dismiss 등 값이 없음. // 무조건 sheet.hideMessage()를 호출하도록 코드가 구현되어 있으면 연속으로 메시지가 호출되는 경우 메시지가 제대로 보여지지 않을 수 있음. if (result.value || result.dismiss) { evtParams.sheet.hideMessage(); } }); } return true; // 시트 메시지를 대체함. } }, onHideMessage: function (evtParams) { if (window.Swal) { // sheet.hideMessage()가 호출될때 Swal의 메시지도 close() 시켜준다. Swal.close(); } } } ``` ```javascript // javascript native의 alert 및 confirm을 활용한 예제 options.Events = { onShowMessage: function (evtParams) { // alert이나 confirm은 버튼이 눌릴때까지 기다리므로 반드시 showMessageTime로 호출되었을때만 처리해야하며, // time이 있는경우 자동으로 닫히기 때문에 alert이나 confirm으로 사용했을때 구현된 로직이 정상적으로 동작하지 않을 수 있음. if (evtParams.isConfirm && !evtParams.time) { var parseMsg = evtParams.message; // 메시로 보여질 문자열(HTML Tag 포함) if (typeof parseMsg == \"string\") { // 메시지 파일에 정의된 문자열에 HTML Tag가 있을 경우 제거해준다. parseMsg = parseMsg.replace(/\\<br(\\/)?\\>/g, \"\\n\").replace(/\\<\\/(div|span|p)+\\>/g, \"\\n\"); parseMsg = IBSheet.removeHTMLTag(parseMsg); } // 취소 버튼의 유무에 따라 alert을 실행할지 confirm을 실행할지 구분한다. if (evtParams.buttons.indexOf(\"Cancel\") > -1) { if (!confirm(parseMsg)) { // 취소 버튼을 눌렸을때 시트에서도 후속 기능이 실행되지 않도록 callback을 통해 Cancel 버튼이 눌린 정보를 전달한다. if (evtParams.callback) evtParams.callback(2); } else { // 확인 버튼을 눌렸을때 시트에서도 후속 기능이 실행되도록 callback을 통해 Ok 버튼이 눌린 정보를 전달한다. if (evtParams.callback) evtParams.callback(1); } } else { alert(parseMsg); // 확인 버튼을 눌렸을때 시트에서도 후속 기능이 실행되도록 callback을 통해 Ok 버튼이 눌린 정보를 전달한다. if (evtParams.callback) evtParams.callback(1); } // 시트 메시지를 대체함. return true; } } } ```",
          "see": [
            {
              "label": "showMessage method",
              "url": "/docs/funcs/core/show-message"
            },
            {
              "label": "showMessageTime method",
              "url": "/docs/funcs/core/show-message-time"
            },
            {
              "label": "hideMessage method",
              "url": "/docs/funcs/core/hide-message"
            },
            {
              "label": "SuppressMessage cfg",
              "url": "/docs/props/cfg/suppress-message"
            },
            {
              "label": "onHideMessage event",
              "url": "./on-hide-message"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.2.0.15|`isAlert` 인자 추가|"
        },
        "url": "docs/events/on-show-message.html"
      },
      {
        "cid": 899,
        "sid": "on-show-tip",
        "name": "on-show-tip",
        "label": "onShowTip",
        "data": {
          "body": "> 시트의 셀 내부에 마우스 커서를 위치 시 풍선도움말이 화면에 띄워질 때 호출되는 이벤트입니다. > 시트에 [Tip](/docs/props/row/tip)이 설정되어있지 않아도 **이 이벤트는 항상 발생합니다**. > 풍선도움말의 값을 바꾸고 싶은 경우, 사용자가 원하는 문자열을 리턴하면 해당 문자열이 풍선도움말의 값으로 변경되어 보여집니다. > 사용자가 리턴할 문자열에 \\*Value\\*을 포함하면 셀 값이 \\*Value\\* 자리에 치환되어 풍선도움말에 표시됩니다. > 빈 문자열(\"\")을 리턴 시 풍선도움말을 화면에 보여주지 않습니다. ### Syntax ``` onShowTip : function(paramObject) { } or sheet.bind(\"onShowTip\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|풍선도움말이 보여질 시트 객체| |row|`object`|풍선도움말이 보여질 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|풍선도움말이 보여질 셀의 열이름| |tip|`string`|풍선도움말에 보여질 값| |clientX|`number`|이벤트가 발생된 마우스의 x좌표(브라우저 기준)| |clientY|`number`|이벤트가 발생된 마우스의 y좌표(브라우저 기준)| |X|`number`|이벤트가 발생된 마우스의 x좌표(셀 기준)| |Y|`number`|이벤트가 발생된 마우스의 y좌표(셀 기준)| ### Return ***string*** ### Example ```javascript options.Events = { onShowTip:function(evtParam){ // 풍선도움말의 값을 열마다 다르게 보여줍니다. if(evtParam.col == \"sTitle\") { return \"영화 이름은 *Value*입니다!\"; } else if (evtParam.col == \"sNum\") { return \"*Value*명의 관객이 영화를 보았습니다\"; } } } ```",
          "see": [
            {
              "label": "Tip col",
              "url": "/docs/props/col/tip"
            },
            {
              "label": "showTip method",
              "url": "/docs/funcs/core/show-tip"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-show-tip.html"
      },
      {
        "cid": 900,
        "sid": "on-start-drag-cell",
        "name": "on-start-drag-cell",
        "label": "onStartDragCell",
        "data": {
          "body": "> 시트 내 셀이 드래그되기 전에 호출되는 이벤트입니다. > `1(true)`를 리턴 시 행 드래그가 취소되고 선택(`Select`)이 실행됩니다. > `string`을 리턴하는 경우 드래그로 보여지는 `html` 값이 리턴값으로 보여집니다. ### Syntax ``` onStartDragCell : function(paramObject) { } or sheet.bind(\"onStartDragCell\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|드래그가 실행된 시트 객체| |row|`object`|드래그가 된 셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|드래그가 된 셀이 위치한 열이름| |html|`string`|마우스에 첨부될 드래그 한 객체 html| ### Return ***mixed(`boolean` \\| `string`)*** : string을 리턴할 경우 셀 드래그 객체가 리턴된 값으로 대체 됩니다 ### Example ```javascript options.Events = { onStartDragCell: function (evtParam) { // Int 타입 컬럼은 Drag가 되지 않도록 true 리턴 if (evtParam.sheet.getType(evtParam.row, evtParam.col) == 'Int') { return true; } } } ```",
          "see": [
            {
              "label": "CanDrag cfg",
              "url": "/docs/props/cfg/can-drag"
            },
            {
              "label": "DragCell cfg",
              "url": "/docs/props/cfg/drag-cell"
            },
            {
              "label": "onEndDragCell event",
              "url": "./on-end-drag-cell"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.27|기능 추가|"
        },
        "url": "docs/events/on-start-drag-cell.html"
      },
      {
        "cid": 901,
        "sid": "on-start-drag",
        "name": "on-start-drag",
        "label": "onStartDrag",
        "data": {
          "body": "> 시트 내 행(들)이 드래그되기 전에 호출되는 이벤트입니다. > `1(true)`를 리턴 시 행 드래그가 취소되고 행 선택(`Select`)이 실행됩니다. > `-1` 리턴 시 행 드래그가 취소되고 이후 동작도 모두 취소됩니다. > `string`을 리턴하는 경우 드래그로 보여지는 `html` 값이 리턴값으로 보여집니다. ### Syntax ``` onStartDrag : function(paramObject) { } or sheet.bind(\"onStartDrag\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|드래그가 실행된 시트 객체| |row|`object`|드래그가 시작된 지점의 셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|드래그가 시작된 지점의 셀이 위치한 열이름| |more|`boolean`|복수개의 행들이 드래그될지 여부| |rows|`array[object]`|복수개의 행들이 드래그된 경우 해당 행들의 [데이터 로우 객체](/docs/appx/row-object) 배열| ### Return ***mixed(`number` \\| `string`)*** : string을 리턴할 경우 셀 드래그 객체가 리턴된 값으로 대체 됩니다 ### Example ```javascript options.Events = { onStartDrag:function(evtParam){ // 새롭게 추가된 행 또는 다중 행들을 드래깅할 경우 취소합니다. if(evtParam.row[\"Added\"] == 1 || evtParam.more) return true; } } ```",
          "see": [
            {
              "label": "onEndDrag event",
              "url": "./on-end-drag"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.1|`-1` 리턴 기능 추가||core|8.1.0.14|`string` 리턴 기능 추가|"
        },
        "url": "docs/events/on-start-drag.html"
      },
      {
        "cid": 902,
        "sid": "on-start-edit",
        "name": "on-start-edit",
        "label": "onStartEdit",
        "data": {
          "body": "> 셀 편집 시 호출되는 이벤트입니다. > 타입([Type](/docs/props/col/type))이 `Enum`인 경우도 호출되며, 타입이 `Radio, Bool`인 경우 해당 이벤트가 호출되지 않습니다. > `1(true)`를 리턴 시 편집이 불가능하게 설정할 수 있습니다. ### Syntax ``` onStartEdit : function(paramObject) { } or sheet.bind(\"onStartEdit\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|편집모드로 들어갈 시트 객체| |row |`object`|편집모드로 들어갈 셀이 위치한 [데이터 로우 객체](/docs/appx/row-object)| |col |`string`|편집모드로 들어갈 셀의 열이름| ### Return ***boolean*** ### Example ```javascript options.Events = { onStartEdit:function(evtParam){ // 편집모드로 들어갈 셀이 위치한 열이 수량을 뜻하는 sCount이고, 현재 행의 sSale 열에 해당하는 셀 값이 \"판매불가\"인 경우 셀 편집을 불가능하게 합니다. if (evtParam.col == \"sCount\" && evtParam.row[\"sSale\"] == \"판매불가\") { return true; } } } ```",
          "see": [
            {
              "label": "Enum col",
              "url": "/docs/props/col/enum"
            },
            {
              "label": "onEndEdit event",
              "url": "./on-end-edit"
            },
            {
              "label": "onShowEdit event",
              "url": "./on-show-edit"
            },
            {
              "label": "onAfterEdit event",
              "url": "./on-after-edit"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-start-edit.html"
      },
      {
        "cid": 903,
        "sid": "on-suggest",
        "name": "on-suggest",
        "label": "onSuggest",
        "data": {
          "body": "> 셀 편집 도중 호출되는 이벤트로, 사용자에게 셀 값을 제안하는 기능인 [Suggest](/docs/props/col/suggest)의 값을 확인할 수 있습니다. > 사용자는 Suggest의 형식을 지닌 새로운 값을 리턴하여 Suggest에 설정된 값이 아닌 다른 값을 사용자에게 셀 값이 변경될 때마다 추천할 수 있습니다. > 편집 시 셀 값이 변경될 때마다 호출됩니다. ### Syntax ``` onSuggest : function(paramObject) { } or sheet.bind(\"onSuggest\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|시트 객체| |row|`object`|셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|셀의 열이름| |val|`string`|셀의 데이터 값| |suggest|`string`|기존에 설정된 Suggest의 값| ### Return ***mixed*** ### Example ```javascript // assessment 열에 설정된 Suggest 값이 |불만족|보통|만족|매우만족 options.Cols = [ { Header:\"평가\", Name:\"assessment\", Type:\"Text\", Suggest:\"|불만족|보통|만족|매우만족\" } ... ] options.Events = { onSuggest:function(evtParam){ // assessment 열의 셀에 입력한 값이 \"바로\"를 포함하는 경우 동적으로 Suggest의 값이 |바로가기1|바로가기2|바로가기3|바로가기4|바로가기5로 바뀝니다. 그 외의 경우 기존 suggest 기능이 그대로 적용됩니다. if (evtParam.col == \"assessment\" && evtParam.val.indexOf(\"바로\") > -1 ) { return \"|바로가기1|바로가기2|바로가기3|바로가기4|바로가기5\"; } else { return evtParam.suggest; } } } ```",
          "see": [
            {
              "label": "onReadSuggest event",
              "url": "./on-read-suggest"
            },
            {
              "label": "Suggest col",
              "url": "/docs/props/col/suggest"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/events/on-suggest.html"
      },
      {
        "cid": 904,
        "sid": "on-v-scroll-end-point",
        "name": "on-v-scroll-end-point",
        "label": "onVScrollEndPoint",
        "data": {
          "body": "> 시트의 세로 스크롤이 가장 처음과 가장 마지막일때 발생하는 이벤트입니다. > `vpos` 인자가 0이면 가장 상단을 의미하고 `vpos`가 0이 아닐때는 가장 하단을 의미합니다. ### Syntax ``` onVScrollEndPoint : function(paramObject) { } or sheet.bind(\"onVScrollEndPoint\" , function(paramObject) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|스크롤을 움직인 시트 객체| |vpos|`number`|움직인 후 중간 섹션(section)의 scrollTop(pixel 단위)| |oldvpos|`number`|움직이기전 중간 섹션(section)의 scrollTop(pixel 단위)| ### Return ***none*** ### Example ```javascript options.Events = { onVScrollEndPoint:function(evtParam){ if (evtParam.vpos) { console.log('세로 스크롤 끝!!!'); var params = { \"url\": \"./DoSearch.do\", \"param\": \"param1=10&param2=ABC\", \"method\": \"POST\", \"append\": true, \"callback\": function (rtn) { var rtnData = JSON.parse(rtn.data); console.log(rtnData); } }; evtParams.sheet.doSearch(params); } } } ```",
          "see": [
            {
              "label": "onScroll event",
              "url": "./on-scroll"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가|"
        },
        "url": "docs/events/on-v-scroll-end-point.html"
      },
      {
        "cid": 905,
        "sid": "on-validation",
        "name": "on-validation",
        "label": "onValidation",
        "data": {
          "body": "> doSave, getSaveJson, getSaveString 등 저장 api 호출시, 사용자가 저장할 값들에 관해 유효성 검사를 진행할 수 있도록 셀 별로 순회하며 발생하는 이벤트 입니다. > 기본적인 필수입력 항목에 대한 확인이나 전체 입력 여부에 대한 확인은 저장 전에 시트가 내부적으로 확인하지만, 업무 로직에 따라 발생할 수 있는 각종 유효성 검사를 이 이벤트에서 처리합니다. > 유효성 검사 기준에 맞지 않다면 true를 리턴하여 진행되고 있는 저장 처리를 중단하실 수 있습니다. ### Syntax ``` onValidation : function(evtParam) { } or sheet.bind(\"onValidation \" , function(evtParam) {}); ``` ### Parameters | Name | Type | Description | |----------|-----|-------| |sheet|`object`|현재 유효성 검사가 진행되고 있는 시트 객체| |row|`object`|현재 유효성 검사가 진행되고 있는 셀의 [데이터 로우 객체](/docs/appx/row-object)| |col|`string`|현재 유효성 검사가 진행되고 있는 셀의 열 이름| ### Return ***none*** ### Example ```javascript options.Events = { onValidation: function (evtParam) { if (evtParam.col != \"TextData\") return; var prevCol = evtParam.sheet.getPrevCol(evtParam.col); // TextData 컬럼의 이전 컬럼 값이 100보다 큰 경우 메세지창을 띄우고 저장을 중단합니다. if (evtParam.sheet.getValue(evtParam.row, prevCol) >= 100) { var index = evtParam.sheet.getRowIndex(evtParam.row); evtParam.sheet.showMessageTime({ message: index + \"행 정수(Int)컬럼 셀 값이 100보다 큽니다.\", time: 10000, buttons: [\"OK\", \"취소\"], }) return true; } }, } ```",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.2.0.19|기능 추가|"
        },
        "url": "docs/events/on-validation.html"
      }
    ]
  },
  {
    "gid": 6,
    "name": "static",
    "label": "Static",
    "children": [
      {
        "cid": 919,
        "sid": "static",
        "name": "static",
        "label": "static 객체 란",
        "data": {
          "body": "> `ibsheet.js` 파일을 화면에 추가하면 전역변수로 `IBSheet`객체가 생성됩니다. > 이 객체를 통해 시트가 제공하는 달력을 사용하거나, 컨텍스트 메뉴 등을 시트 외부 영역에서 사용하실 수 있습니다. > 그리고 이 객체에는 시트가 생성될 때 마다 해당 객체에 배열 형태로 시트가 담기게 됩니다. > 따라서 현재 화면에 존재하는 시트의 개수는 `IBSheet.length` 를 통해 확인하실 수 있습니다. > **단, 같은 `id`를 가진 시트를 다시 생성하거나 인스턴스 객체를 `sheet.dispose()`하게 된다면 해당 배열에 `null` 값으로 공간을 차지합니다.** > > `IBSheet`객체가 갖고 있는 함수와 속성은 아래와 같습니다. ## 내부 함수/이벤트/속성 |Name|Type|Description| |---|---|---| |[create](./create)|`function`|`sheet객체`를 생성합니다| |[disposeAll](./dispose-all)|`function`|화면에 모든 시트객체를 제거합니다| |[showMenu](./show-menu)|`function`|시트 외부에 원하는 위치에 컨텍스트 메뉴를 생성하여 보여줍니다| |[showCalendar](./show-calendar)|`function`|시트 외부에 원하는 위치에 시트의 달력컨트롤을 생성하여 보여줍니다| |[showDialog](./show-dialog)|`function`|주어진 위치에 커스텀 다이얼로그를 생성하여 보여줍니다| |[numberToString](./number-to-string)|`function`|숫자를 주어진 포맷에 맞게 마스킹된 문자로 변경하여 리턴합니다| |[dateToString](./date-to-string)|`function`|javascript `Date객체`나 기타 날짜형식의 값을 지정한 포맷의 문자열로 리턴합니다| |[stringToDate](./string-to-date)|`function`|마스크가 포함된 날짜형식의 문자열을 javascript `Date객체`로 변환하여 리턴합니다| |[version](./version)|`function`|화면에 로드된 제품의 버전을 리턴합니다. |[onBeforeCreate](./on-before-create)|`event`|초기화 공통 설정 이벤트로 모든 시트가 생성되는 시점에서 발생합니다.| |[onRenderFirstFinishAll](./on-render-first-finish-all)|`event`|현재 화면에서 시트가 하나 이상 있을때 모든 시트가 생성되는 시점에서 한번만 발생합니다.| |[CommonOptions](./common-options)|`property`|모든 시트에 공통으로 적용될 속성값을 설정합니다.| |Active|`property`|현재 마우스커서가 올라간 시트객체를 리턴합니다(시트 위에 커서가 없으면 `null`을 리턴)| |Focused|`property`|현재 포커스가 들어간 시트객체를 리턴합니다(시트가 포커스를 갖고있지 않으면 `null`을 리턴)| ### Since |product|version|desc| |---|---|---| |core|8.0.0.0|기능 추가|",
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/static/static.html"
      },
      {
        "cid": 906,
        "sid": "common-options",
        "name": "common-options",
        "label": "CommonOptions",
        "data": {
          "body": "> 모든 시트에 공통으로 설정할 초기 속성값을 설정합니다. > 여기서 설정한 값이 각 화면에서 설정한 시트 초기값과 머지되어 시트가 생성됩니다. > `CommonOptions`에서 설정한 값과 각 화면에서 정의한 시트 초기 값이 서로 다른 경우에는, 화면에서 설정한 시트 초기값이 최종 적용됩니다. ### Type `object` ### Options 모든 시트에 동일하게 반영하고 싶은 `Cfg, Def, Event` 설정 값 (일반적으로 이 속성은 `/plugins/ibsheet-common.js` 파일에서 설정) ### Example ```javascript //ibsheet.js 파일이 로드된 이후에 설정해야 함. IBSheet.CommonOptions = { Cfg:{ Export: {Url: \"./jsp/Down2Excel.jsp\"}, //엑셀다운 URL Alternate: 2, //홀짝 행에 대한 배경색 설정 InfoRowConfig: {Visible: 1, Layout: [\"Count\"], Space: \"Top\"} //건수 정보 표시 }, Def:{ Row:{ //공통 행 설정 Menu:{ \"Items\": [ {\"Name\": \"Excel다운로드\", \"Value\": \"xls\"}, {\"Name\": \"text다운로드\", \"Value\": \"txt\"}, {\"Name\": \"pdf다운로드\", \"Value\": \"pdf\"}, ], \"OnSave\":function (item,data) { switch (item.Value) { case 'xls': this.Sheet.down2Excel(); break; case 'txt': this.Sheet.down2Text(); break; case 'pdf': this.Sheet.down2Pdf(); break; } } }//end Menu }//end Row }//end Def }; ```",
          "see": [
            {
              "label": "IBSheet.create static",
              "url": "./create"
            },
            {
              "label": "IBSheet.onBeforeCreate static",
              "url": "./on-before-create"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/static/common-options.html"
      },
      {
        "cid": 907,
        "sid": "create",
        "name": "create",
        "label": "create",
        "data": {
          "body": "> 지정한 위치에 시트객체를 생성합니다. > 시트객체가 생성되면 `IBSheet`객체에 배열형식으로 추가(push)됩니다. - 'el' <mark>객체의 크기</mark>에 따라 시트의 너비/높이가 결정됩니다. - 'el'객체의 너비/높이가 정의되지 않은 경우에는 <mark>너비는 100%, 높이는 800px</mark>로 설정됩니다. - sync속성을 1로 사용 시 onRenderFirstFinish 이벤트에서는 window[id] 형식으로 시트에 접근할 수없습니다.(evtParam.sheet로만 접근 가능) ### Syntax ```javascript object IBSheet.create(id, el, options, data, sync); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |id|`string`|<span class='required'>필수</span>|시트객체의 `id` (여기서 지정한 `id`는 `window` 객체에 `프로퍼티`로 생성됩니다.[전역변수]| |el|`string`|<span class='required'>필수</span>|시트객체가 생성될 div객체의 `id` (해당객체 안에 시트객체가 생성됨)| |[options](/docs/appx/init-structure)|`object`|<span class='required'>필수</span>|초기화 정보를 갖고있는 `json 객체`| |data|`array[object]`|<span class='optional'>선택</span>|생성과 동시에 로드 될 `데이터 배열`| |sync|`boolean`|<span class='optional'>선택</span>|시트를 동기로 생성합니다 `0(false)`:비동기 방식 (`default`) `1(true)`:동기 방식| ### Return Value ***object*** ### Example ```javascript var opt = { //각 열에 대한 정의 (열의 이름, 유형(Type), 포맷(Format)등을 설정) Cols:[ {Header: {Value: \"이름\"}, Name: \"sa_nm\", Type: \"Text\"}, {Header: {Value: \"사원번호\" }, Name: \"sa_id\", Type: \"Text\", Align: \"center\"}, {Header: {Value: \"부서\"}, Name: \"sa_dept\", Type: \"Enum\", Enum: \"|경영지원|총무|인사|설계|시공1|시공2\", EnumKeys: \"|01|02|03|04|05|06\"}, {Header: {Value: \"직급\"}, Name: \"sa_position\", Type: \"Enum\", Enum: \"|대표|상무|이사|부장|차장|과장|대리|사원\", EnumKeys: \"|A1|A2|A3|B0|B1|C4|C5|C6\"}, {Header: {Value: \"입사일\"}, Name: \"sa_enterdate\", Type: \"Date\",Width:100, Format: \"yyyy/MM/dd\"}, {Header: {Value: \"비고\"}, Name: \"sa_desc\", Type: \"Lines\"} ] }; var dataArr = [ {sa_nm: \"홍길동\", sa_id: \"9821450\", sa_dept: \"04\", sa_position: \"B0\", sa_enterdate: \"19980305\", sa_desc: \"\"}, {sa_nm: \"김한국\", sa_id: \"9510427\", sa_dept: \"01\", sa_position: \"A3\", sa_enterdate: \"19890317\", sa_desc: \"\"} ]; //시트객체 생성 IBSheet.create({ id: \"sheet\", // 생성할 시트의 id el: \"sheetDiv\", // 시트를 생성할 Dom 객체 및 id options: opt, // 생성될 시트의 속성 data: dataArr, // 생성될 시트의 정적데이터 sync: 1 // 동기로 시트 생성( 비동기로 시트 생성) }); //el에 html element 설정 IBSheet.create({ \"id\": \"sheet\", // 시트객체 이름 (SPA에서는 사용 X) \"el\": document.querySelector(\"div.part1 .gridarea\"), // 시트를 생성할 html element \"options\": opt, // 초기화 구문 \"data\": dataArr//초기 데이터 }); ```",
          "see": [
            {
              "label": "IBSheet.CommonOptions static",
              "url": "./common-options"
            },
            {
              "label": "IBSheet.onBeforeCreate static",
              "url": "./on-before-create"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.45|sync 기능 추가|"
        },
        "url": "docs/static/create.html"
      },
      {
        "cid": 908,
        "sid": "date-to-string",
        "name": "date-to-string",
        "label": "dateToString",
        "data": {
          "body": "> 날짜 객체(`new Date()`)나 유닉스 시간(1970/1/1 부터 지정한 일자까지 밀리초 단위)를 지정한 날짜형식의 포맷으로 리턴합니다. ### Syntax ```javascript string IBSheet.dateToString(time, format); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |time|`mixed`( `date` \\| `number` )|<span class='required'>필수</span>|javascript `Date()객체`나 `new Date().getTime()`으로 얻는 숫자값| |format|`string`|<span class='required'>필수</span>|마스킹 적용할 날짜 포맷 ([Format appendix](/docs/appx/format) 참고)| ### Return Value ***string*** : 마스킹이 적용된 문자열 ### Example ```javascript var maskedDate = IBSheet.dateToString(new Date(2019,2,1), \"yyyy-MM-dd\"); //\"2019-03-01\" var maskedDate = IBSheet.dateToString(1551155311957, \"yyyy/MM/dd dddd\"); //\"2019/02/26 화요일\" ```",
          "see": [
            {
              "label": "stringToDate static",
              "url": "/docs/static/string-to-date"
            },
            {
              "label": "Format appendix",
              "url": "/docs/appx/format"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/static/date-to-string.html"
      },
      {
        "cid": 909,
        "sid": "dispose-all",
        "name": "dispose-all",
        "label": "disposeAll",
        "data": {
          "body": "> javascript Window 객체 안에 포함된 모든 `시트객체`를 제거합니다. > SPA(Single Page Application)형식의 화면을 개발하다보면, 페이지 이동(컴포넌트 로드)시 DOM 안에 element는 제거되지만, Window객체의 javascript 전역변수는 유지되는 것을 볼 수 있습니다. > 시트도 생성시 전역변수 형태로 Window에 담기므로 SPA형식의 시스템을 구축시에는 페이지 이동(컴포넌트 로드)중에 해당 함수를 호출하여 Window의 시트객체를 클리어 주어야 합니다. ### Syntax ```javascript void IBSheet.disposeAll(dialogs, unload); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |dialogs|`boolean`|<span class='optional'>선택</span>|`static` 메소드들에 의해 생성된 달력, 메뉴, 다이얼로그들을 모두 제거합니다.| |unload|`boolean`|<span class='optional'>선택</span>|SPA 환경에서 컴포넌트 마다 `ibsheet.js`를 불러오는 경우, 시트를 완전히 제거할 때 시트 관련 메모리를 해제합니다.| ### Return Value ***none*** ### Example ```javascript //SPA형식으로 페이지를 로드 function movePage(url){ //페이지 이동 전에 현재 Window의 시트를 클리어 IBSheet.disposeAll(true); //새 페이지로 이동 $(\"#contents\").load(url, function(response, status, xhr) { //이동후 작업 }); } ```",
          "see": [
            {
              "label": "IBSheetLoader",
              "url": "https://ibsheet.github.io/loader-manual/"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.3|`unload` 인자 추가|"
        },
        "url": "docs/static/dispose-all.html"
      },
      {
        "cid": 910,
        "sid": "has-sheet",
        "name": "has-sheet",
        "label": "hasSheet",
        "data": {
          "body": "> 특정 아이디를 가진 시트가 있는지 여부를 체크합니다. > 해당 아이디의 시트가 있다면 true를 반환하고, 그렇지 않을 경우에는 false를 반환합니다. ### Syntax ```javascript object IBSheet.hasSheet(id); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |id|`string`|시트가 존재하는지 검색할 아이디| ### Return Value ***boolean*** ### Example ```javascript IBSheet.hasSheet(\"sheet\"); // \"sheet\"라는 아이디를 가진 시트가 있는지 확인합니다. ```",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.2.0.18|기능 추가|"
        },
        "url": "docs/static/has-sheet.html"
      },
      {
        "cid": 911,
        "sid": "number-to-string",
        "name": "number-to-string",
        "label": "numberToString",
        "data": {
          "body": "> 숫자를 주어진 포맷에 맞게 마스킹된 문자로 변경하여 리턴합니다 ### Syntax ```javascript string IBSheet.numberToString(num, format); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |num|`number`|<span class='required'>필수</span>|마스킹 할 숫자| |format|`string`|<span class='required'>필수</span>|마스킹 적용할 숫자 포맷 ([Format appendix](/docs/appx/format) 참고)| ### Return Value ***string*** : 마스킹이 적용된 문자열 ### Example ```javascript var maskedNum = IBSheet.numberToString(7314.1654, \"#,##0.00\"); //\"7,314.17\" ```",
          "see": [
            {
              "label": "stringToNumber static",
              "url": "/docs/static/string-to-number"
            },
            {
              "label": "Format appendix",
              "url": "/docs/appx/format"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/static/number-to-string.html"
      },
      {
        "cid": 912,
        "sid": "on-before-create",
        "name": "on-before-create",
        "label": "onBeforeCreate",
        "data": {
          "body": "> [(Static) IBSheet.create()](./create)함수가 호출되고 시트가 생성되기 전에 전달되는 `parameter(el, id, options 등)`를 수정할 수 있는 일종의 이벤트 입니다. > [(Static) IBSheet.CommonOptions](./common-options)와 시트 생성에 사용되는 옵션이 머지된 `options`를 `parameter`로 받습니다. > 해당 함수를 직접 구현하여 `options`에 설정되어야 할 프로젝트의 공통적인 내용을 정의하거나 수정할 수 있습니다. > <mark>해당 함수를 사용 시에는 반드시 수정된 parameter객체를 리턴해 주어야 정상적으로 시트가 생성됩니다.</mark> ### Syntax ```javascript IBSheet.onBeforeCreate = function(obj){ ... }; ``` ### Parameters | Name | Type | Description | |----------|----|----| |id|`string`|시트 객체 `id`| |el|`string`|시트가 생성될 div객체의 `id`| |options|`object`|시트 초기화 정보를 담고있는 `json object`| |data|`array[object]`|시트 생성과 동시에 로드될 `데이터 배열`| ### Return Value ***object*** : `options` 인자로 받은 받은 내용을 일부 수정하거나 그대로 리턴 ### Example ```javascript //ibsheet 초기화 공통 설정 IBSheet.onBeforeCreate = function (obj) { //모든 화면의 시트에 기본 컨택스트 메뉴를 설정한다. obj.options[\"Def\"][\"Row\"][\"Menu\"] = { Items:[ {Name: \"행 추가\"}, {Name: \"행 삭제\"}, { Menu: 1, Name: \"파일 저장\", Items: [ {Name: \"엑셀 다운로드\", Icon: \"./images/xls.gif\"}, {Name: \"Text 다운로드\", Icon: \"./images/txt.gif\"}, {Name: \"PDF 다운로드\", Icon: \"./images/pdf.gif\"}, ] } ] }; obj.options[\"Events\"][\"onSelectMenu\"] = function (evt) { switch (evt.result) { case \"행 추가\": evt.sheet.addRow({next: evt.row, visible: 1}) break; case \"행 삭제\": evt.sheet.deleteRow({row: evt.row, del: 1}); break; } } return obj; } ```",
          "see": [
            {
              "label": "IBSheet.create static",
              "url": "./create"
            },
            {
              "label": "IBSheet.CommonOptions static",
              "url": "./common-options"
            },
            {
              "label": "공통 이벤트(event) 처리 방법",
              "url": "/docs/appx/shared-event"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.5|`beforeCreate` -> `onBeforeCreate`로 이름 변경 (기존 `beforeCreate`도 사용 가능하지만 추천하지 않습니다.)|"
        },
        "url": "docs/static/on-before-create.html"
      },
      {
        "cid": 913,
        "sid": "on-render-first-finish-all",
        "name": "on-render-first-finish-all",
        "label": "onRenderFirstFinishAll",
        "data": {
          "body": "> `IBSheet` 객체에 선언된 시트가 모두 생성된 이후 발생하는 일종의 이벤트 입니다. > 해당 함수에 시트가 모두 생성된 후 처리할 작업을 작성합니다. ### Syntax ```javascript IBSheet.onRenderFirstFinishAll = function(obj){ ... }; ``` ### Parameters | Name | Type | Description | |----------|----|----| |sheet|`object`|마지막에 생성된 시트 객체| ### Return Value ***None*** ### Example ```javascript var data = [ {\"chgrDptNm\": \"전략기획\", \"taskId\": \"100201\", \"actnEndTm\": \"190000\", \"ordr\": \"1\", \"preTaskId\": \"100200\"}, {\"chgrDptNm\": \"실행예산\", \"taskId\": \"100204\", \"actnEndTm\": \"170000\", \"ordr\":\"2\", \"preTaskId\": \"100200\"} ]; IBSheet.onRenderFirstFinishAll = function(obj){ //시트가 모두 생성 된 후 처리할 작업 obj.sheet.loadSearchData(data); }; ``` ### Since |product|version|desc| |---|---|---| |core|8.0.0.5|기능 추가|",
          "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가|"
        },
        "url": "docs/static/on-render-first-finish-all.html"
      },
      {
        "cid": 914,
        "sid": "query-selector",
        "name": "query-selector",
        "label": "QuerySelector",
        "data": {
          "body": "> CSS 선택자에 따라 HTML 태그를 반환하는 함수를 설정합니다. > > 시트가 `ShadowDOM` 내부에 들어가 있으면 시트가 `document.getElementById`를 통해 시트 내부의 태그에 접근할 수가 없습니다. > > 이때 `IBSheet.QuerySelector`를 설정하여 시트가 시트 자체 내부의 태그에 접근 가능하도록 해당 옵션을 설정할 필요가 있습니다. > > 해당 옵션은 시트를 처음 생성할 때 설정해야 하며, 이후에는 동적으로 변경할 수 없습니다. ### Type `object` ### Options |Value|Description| |-----|-----| |`object`|CSS 선택자에 따라 HTML 태그를 반환하는 함수| ### Example ```javascript IBSheet.QuerySelector = shadow.querySelector.bind(shadow); // 시트가 시트 내부의 태그에 접근할 수 있도록 querySelector를 별도로 지정 ```",
          "see": [
            {
              "label": "ControlsTag cfg",
              "url": "/docs/props/cfg/controls-tag"
            },
            {
              "label": "DialogsArea cfg",
              "url": "/docs/props/cfg/dialogs-area"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.3.0.0|기능 추가|"
        },
        "url": "docs/static/query-selector.html"
      },
      {
        "cid": 915,
        "sid": "remove-html-tag",
        "name": "remove-html-tag",
        "label": "removeHTMLTag",
        "data": {
          "body": "> 인자로 들어온 문자열에서 HTML Tag형식의 문자열을 제거해서 문자열을 리턴합니다. ### Syntax ```javascript string IBSheet.removeHTMLTag(html); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |html|`string`|<span class='required'>필수</span>|대상 문자열| ### Return Value ***string*** : HTML Tag가 제거된 문자열 ### Example ```javascript var string = IBSheet.removeHTMLTag(\"<div><p>안녕하세요. <span style='font-family: consolas;'>Hello, World~!</span></p></div>\"); // \"안녕하세요.Hello, World~!\" ```",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/static/remove-html-tag.html"
      },
      {
        "cid": 916,
        "sid": "show-calendar-2",
        "name": "show-calendar",
        "label": "showCalendar",
        "data": {
          "body": "> 열의 타입을 `Date`로 설정시 사용할 수 있는 달력 컨트롤을 시트 외부에 input객체 주변에서도 사용하실 수 있습니다. > 달력 컨트롤이 제공하는 `API`와 `event`를 통해 다양한 기능을 사용하실 수 있습니다. ### Syntax ```javascript object IBSheet.showCalendar(calOption, position, callback); ``` ## 각 Parameter 기능 ### **1. calOption(object)** `calOption`을 통해 달력에 최초 날짜나 하단에 보여질 버튼, 여러날짜 선택 여부 등을 설정하실 수 있습니다. |Name|Type|Description| |---|---|---| |Date|`mixed`( `string` \\| `number` \\| `date` )|최초 보여질 날짜를 의미. 다음 3가지 형식으로 입력가능 1) 문자형으로 입력 (`Format`과 함께 사용) 2) 1970년 1월 1일을 기준으로 한 `timestamp` 숫자형 (ex: `new Date().getTime()` 과 동일한 숫자) 3) javascript `Date 객체` (ex: `new Date(년,월-1,일,시,분,초)` 와 같은 `Date`객체 ) | |Format|`string`|문자형으로 `Date` 입력시 `Date`와 함께 사용하며, `Date`의 형식을 정의합니다. `y(년), M(월), d(일), H(시간), m(분), s(초)`등의 예약어와 예약어를 제외한 문자를 조합해서 사용 가능합니다. ex: `{Date: \"2020-04-10\", Format: \"yyyy-MM-dd\"}` | |Range|`boolean`|달력 내에서 드래그를 통해 여러 날짜를 선택하게 할지 여부 `0(false)`:드래그 불가 (`default`) `1(true)`:드래그 허용 ![\"드래그선택\"](/assets/imgs/showCalendar1.png \"드래그선택\")| |TimeFormat|`string`|달력 하단에 `시, 분, 초` 값을 표시할 지 여부를 설정합니다. 'hh:mm'과 같이 설정해서 시, 분만 표시하거나 'hh:mm:ss'와 같이 설정해서 시, 분, 초를 모두 표시하실 수 있습니다. `Range`를 설정하지 않은 년, 월, 일이 모두 표시되는 달력에서만 적용 가능하며, **'hh:mm', 'hh:mm:ss' 형식(혹은 hh, mm, ss 사이에 '/', '-' 등을 기입한 형식)** 으로만 설정하실 수 있습니다. ex: `{Date: \"2020-04-10\", Format: \"yyyy-MM-dd\", TimeFormat: \"hh:mm:ss\"}` ![\"시분초\"](/assets/imgs/showCalendar2.png \"시분초\")| |ReadOnly|`boolean`|달력을 볼 수만 있고 선택이 불가능하게 합니다. `0(false)`:선택 불가 `1(true)`:선택 가능 (`default`)| |Buttons|`number`|달력 하단에 보여질 버튼을 숫자로 설정합니다. 1 : 오늘(Today) 2 : 지우기(Clear) 4 : 선택(Ok) 8 : 어제(Yesterday) '오늘' 버튼과 '선택' 버튼을 표시하고자 하는 경우 1+4 로 5를 넣으시면 됩니다. ![\"달력버튼\"](/assets/imgs/showCalendar3.png \"달력버튼\") |Buttons2|`boolean`|년월 달력 형태의 하단에 선택 버튼을 표시할지 여부 `0(false)`:버튼 표시안함 `1(true)`:버튼 표시함 (`default`) ![\"년월달력버튼\"](/assets/imgs/showCalendar4.png \"년월달력버튼\")| |RowsPrev|`number`|이전 월에 대해 몇 주 더 보기 기능 ![\"이전/다음 월보기\"](/assets/imgs/showCalendar5.png \"이전/다음 월보기\") [RowsPrev:2, RowsNext:3 설정시 화면]| |RowsNext|`number`|다음 월에 대해 몇 주 더 보기 기능| |Texts|`object`|달력 버튼에 보여질 글자를 설정합니다. 설정을 안하면 영문(Today, Ok 등)으로 보여집니다. ex: `{ Ok: \"선택\", Clear: \"지우기\", Today: \"오늘\",Yesterday:\"어제\"}`| |Modal|`boolean`|달력을 모달 형태로 띄움 `0(false)`:모달로 띄움 `1(true)`:모달로 띄우지 않음 (`default`)| |CloseOut|`boolean`|달력에서 마우스 커서가 빠져나가면 자동으로 닫힘 기능 사용 여부 `0(false)`:닫지 않음(`default`) `1(true)`:닫음 | |CloseTimeout|`number`|`CloseOut` 기능을 사용시 마우스 커서가 빠져나간 상태에서 몇초 후에 닫을지 설정.(ms단위, `default: 300ms`)| |Weeks|`number`|달력에 주차 표현 여부 설정(`default: 0`)| |Class|`string`|달력에 테마설정, `Class: css prefix(\"IB\") + \"Pick\"`| |ScrollUpdate|`boolean`|body 영역의 스크롤이 움직일 때 달력 창이 스크롤을 따라 움직일지 여부를 설정합니다. `0(false)`:움직이지 않음(`default`) `1(true)`:움직임| |IgnoreSize|`boolean`|달력의 Size가 Cfg 설정의 `Size`와 별도로 동작 됩니다. `0(false)`:`Size` 설정값과 동일하게 달력 적용(`default`) `1(true)`:`Size`와 상관없이 항상 Size:\"Normal\"로 적용| |StyleSize|`string`|달력의 Size를 적용합니다. [Size cfg](/docs/props/cfg/size) 와 동일한 옵션 값을 지정할 수 있습니다.| |MsgLocale|`string`|달력에서 사용할 언어(메세지 파일) Language Prefix를 설정합니다. [MsgLocale cfg](/docs/props/cfg/msg-locale)과 동일한 옵션 값을 지정할 수 있습니다.| ### **2. position(object)** position 속성을 통해 달력이 오픈되는 위치를 설정합니다. (자세한 내용은 [Position appendix](/docs/appx/position)을 참고) ### **3. callback(function)** 달력에서 특정 일자를 클릭하거나 선택 버튼을 눌렀을때 발생하는 콜백함수를 설정합니다. 함수의 인자로 선택한 날자에 대한 ms 숫자값이 리턴됩니다. `calOption`에서 `Range`속성을 통해 달력내에 여러 날짜를 선택시에는 \"~\"를 구분자로 ms숫자값이 리턴됩니다. 콜백 사용 예 ```javascript function callback(DD) { var format = \"yyyy/MM/dd\"; var d_str = \"\"; if (DD != \"\") { if (isNaN(DD)) { // Range를 통해 여러일자 선택시(1549206000000;1549551600000~1549897200000;1550070000000~1550761200000) var pd = DD.split(\";\"); for (var i = 0; i < pd.length; i++) { if (pd[i].indexOf('~') > -1) { var rdate = pd[i].split(\"~\"); pd[i] = IBSheet.dateToString(parseInt(rdate[0]), format) + \"~\" + IBSheet.dateToString(parseInt(rdate[1]), format); } else pd[i] = IBSheet.dateToString(parseInt(pd[i]), format); } d_str = pd.join(\";\"); } else { // 단일 일자 선택시 (1550156400000 숫자가 넘어옴) d_str = IBSheet.dateToString(DD, format); } } console.log(d_str); } IBSheet.showCalendar(null, { Mouse: 1 }, callback); ``` ## Calendar 이벤트 달력 컨트롤을 생성하거나 생성된 달력에서 날짜를 선택하거나 버튼을 클릭하는 등의 이벤트가 발생했을 때에 대한 로직을 구성합니다. 이벤트는 위에 `calOption` 설정시 같이 설정합니다. 이벤트 사용 예 ```javascript var calOption = { Buttons: 1, OnCanEditDate: function (date) { //일자가 2019.01.20일 보다 작으면 선택 못하게 막음 var sdate = new Date(2019, 0, 20, 0, 0, 0); if (date < sdate) { return false; } else { return true; } } } IBSheet.showCalendar(calOptions, { Mouse: 1 }); ``` ![\"특정일자선택불가\"](/assets/imgs/calCantSelect.png \"특정일자선택불가\") |이벤트 명|호출시점|Parameter|return| |---|---|---|---| |`OnClose`|달력 컨트롤이 닫힐 때 발생||| |`OnSave`|달력에서 특정 일자를 선택시 발생 `callback` 인자를 통해 함수를 연결하는 경우, 이 이벤트 기능을 대신하게 됩니다.|선택한 일자 ms|`0(false)`를 리턴시 선택을 취소| |`OnChange`|`Range`속성을 사용하여 드래그로 여러 일자를 선택 시 발생|선택한 일자 ms| |`OnCanEditDate`|달력 컨트롤이 오픈될 때 모든 일자에 대해 발생|javascript `Date 객체`|`0(false)`를 리턴시 해당 일자는 선택 불가능하게 표시됨| |`OnGetCalendarDate`|달력 컨트롤이 오픈될 때 모든 일자에 대해 발생|1. **date** 일자에 대한 javascript `Date 객체` 2. **text** 화면에 표시될 일자 3. **classes** 각 일자별 적용될 css class 배열 [normal, hover, selected, selected+hover] 4. **range** 달력의 `Range` 속성을 사용하여 여러 일자가 선택되어 있는 경우 시작일과 마지막일 배열 [startdate,enddate], `Range`속성을 사용하지 않는 경우에는 `undefind` |해당 일자에 표시될 문자. 문자가 없는 경우 해당일자부분에 `undefined`가 표시됨.| |`OnButtonClick`|달력 하단에 버튼을 클릭 시 발생|버튼의 종류에 따른 숫자값 `1 : OK, 2 : Cancel, 3 : Today, 4 : Yesterday`|리턴값으로 `Parameter`로 받은 버튼 숫자를 리턴, `0(false)`을 리턴시 클릭을 취소함| |`OnClickWeek`|달력 주차 클릭 시 발생|1. **year** 클릭 한 주차의 년도 2. **week** 클릭 한 주차| ## 달력 컨트롤 닫기 사용자가 클릭을 통해 닫는 것이 아니라 외부함수를 통해 현재 열려있는 달력 컨트롤을 닫으려면 다음과 같이 합니다. ```javascript var cal = IBSheet.showCalender(); //달력 컨트롤 생성 cal.Close(); //닫기 ``` ### Return Value ***object*** : 달력 객체 ### Example ```html <script> function showCal(dateInputElement) { var dateInput = document.getElementById(dateInputElement); var calOption = { Date: dateInput.value }; var position = { Mouse: 1 }; var callback = function (rtnDate) { var format = \"yyyy/MM/dd\"; var d_str = \"\"; if (rtnDate != \"\") { if (isNaN(rtnDate)) { // Range를 통해 여러일자 선택시(1549206000000;1549551600000~1549897200000;1550070000000~1550761200000) var pd = rtnDate.split(\";\"); for (var i = 0; i < pd.length; i++) { if (pd[i].indexOf('~') > -1) { var rdate = pd[i].split(\"~\"); pd[i] = IBSheet.dateToString(parseInt(rdate[0]), format) + \"~\" + IBSheet.dateToString(parseInt(rdate[1]), format); } else pd[i] = IBSheet.dateToString(parseInt(pd[i]), format); } d_str = pd.join(\";\"); } else { // 단일 일자 선택시 (1550156400000 숫자가 넘어옴) d_str = IBSheet.dateToString(rtnDate, format); } } dateInput.value = d_str; } //달력 오픈 var calObj = IBSheet.showCalendar(calOption, position, callback); } </script> <input type=\"text\" id=\"startDate\" value=\"2018-09-25\"><img src=\"cal.gif\" onclick=\"showCal('startDate')\"> ```",
          "see": [
            {
              "label": "appendix](/docs/appx/position)"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.34|ScrollUpdate 옵션 기본값 변경||core|8.1.0.88|`calOption`에 `IgnoreSize`, `StyleSize` 옵션 추가||core|8.1.0.89|`OnClickWeek` 이벤트 추가|"
        },
        "url": "docs/static/show-calendar.html"
      },
      {
        "cid": 917,
        "sid": "show-dialog-2",
        "name": "show-dialog",
        "label": "showDialog",
        "data": {
          "body": "> 시트가 제공하는 다이얼로그(레이어팝업)을 생성합니다. ### Syntax ```javascript object IBSheet.showDialog(dialog, pos); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |dialog|`object`|<span class='required'>필수</span>|`dialog` 에 대한 초기화 설정([Dialog appendix참고](/docs/appx/dialog))| |pos|`object`|<span class='optional'>선택</span>|메뉴가 표시될 위치([Position appendix참고](/docs/appx/position))| ### Return Value ***object*** : 다이얼로그 객체 ### Example ```javascript //화면 가운데에 다이얼로그를 alert 처럼 띄운다. var dlg = { \"Head\": \"IBSheet 경고\", \"Body\": \"<div>선택하신 일자가 마감일 이후 입니다. 다시 선택하여 주세요.</div>\", \"Modal\": 1, \"CloseClick\": 1, \"MinHeight\": 50 }; IBSheet.showDialog( dlg , {\"Align\":\"center, middle\", \"Width\":document.body.clientWidth, \"Height\":document.body.clientHeight} ); ```",
          "see": [
            {
              "label": "showDialog method",
              "url": "/docs/funcs/core/show-dialog"
            },
            {
              "label": "showDownloadDialog method",
              "url": "/docs/funcs/dialog/show-download-dialog"
            },
            {
              "label": "showEditDialog method",
              "url": "/docs/funcs/dialog/show-edit-dialog"
            },
            {
              "label": "showFindDialog method",
              "url": "/docs/funcs/dialog/show-find-dialog"
            },
            {
              "label": "showPivotDialog method",
              "url": "/docs/funcs/dialog/show-pivot-dialog"
            },
            {
              "label": "showUploadDialog method",
              "url": "/docs/funcs/dialog/show-upload-dialog"
            },
            {
              "label": "Dialog appendix",
              "url": "/docs/appx/dialog"
            },
            {
              "label": "Position appendix",
              "url": "/docs/appx/position"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/static/show-dialog.html"
      },
      {
        "cid": 918,
        "sid": "show-menu-2",
        "name": "show-menu",
        "label": "showMenu",
        "data": {
          "body": "> 원하는 위치에 컨텍스트 메뉴를 띄웁니다. > 생성된 메뉴 객체를 리턴합니다. ### Syntax ```javascript void IBSheet.showMenu(menu, pos, func, init); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |menu|`object`|<span class='required'>필수</span>|컨텍스트 메뉴로 보여질 메뉴객체([Menu appendix참고](/docs/appx/menu))| |pos|`object`|<span class='optional'>선택</span>|메뉴가 표시될 위치([Position appendix참고](/docs/appx/position))| |func|`function`|<span class='optional'>선택</span>|메뉴 내에서 `item`선택하거나 버튼 클릭시 콜백 함수([Menu appendix의 OnSave참고](/docs/appx/menu))| |init|`array[string]`|<span class='optional'>선택</span>|메뉴 내에 `Bool, Enum, Edit` 사용시 초기화 값 ex: `Bool`의 경우 [\"confirm\", \"reject\"] 식으로 `Name`을 배열로 넣으면 체크됨 `Enum`의 경우 [\"country: 1\"] 식으로 \"name: value\"식으로 입력 `Edit`의 경우 [\"inp1:사유를 입력해주세요\"] 식으로 입력| ### Return Value ***object*** ### Example ```javascript //특정 버튼 클릭시 버튼 하단에 컨텍스트 메뉴를 띄우자 document.getElementById(\"btnConfirm\").addEventListener(\"click\", function(){ var menu = { Items: [ {Text: \"결제작업\", Caption: 1}, {Name: \"confirmAll\", Text: \"전결\", Bool: 1, Group: 1}, {Name: \"confirm\", Text: \"결제\", Bool: 1, Group: 1}, {Name: \"reject\", Text: \"반려\", Bool: 1, Group: 1}, {Name: \"pendding\", Text: \"보류\", Bool: 1, Group: 1} ] }; pos = {\"Tag\": \"btnConfirm\"}; IBSheet.showMenu(menu, pos, function(item,data){ if (item.Name == \"confirmAll\") { //전결 process.. } else if (item.Name == \"confirm\") { //결제 process.. } }, [\"confirm\"]); },false); ```",
          "see": [
            {
              "label": "Menu appendix",
              "url": "/docs/appx/menu"
            },
            {
              "label": "Position appendix",
              "url": "/docs/appx/position"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/static/show-menu.html"
      },
      {
        "cid": 920,
        "sid": "string-to-date",
        "name": "string-to-date",
        "label": "stringToDate",
        "data": {
          "body": "> 문자열을 지정한 포맷으로 파싱하여 javascript `Date객체`로 리턴합니다. ### Syntax ```javascript object IBSheet.stringToDate(dateStr, format); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |dateStr|`string`|<span class='required'>필수</span>|날짜 형식의 문자열 (ex:\"2018-02-23\" or \"30/04/2015\"| |format|`string`|<span class='required'>필수</span>|파싱할 포맷| ### Return Value ***object*** : javascript Date 객체 ### Example ```javascript var dateObj = IBSheet.stringToDate(\"20180226\", \"yyyyMMdd\"); //Mon Feb 26 2018 00:00:00 GMT+0900 (한국 표준시) var dateObj = IBSheet.stringToDate(\"15-05-2019\", \"dd-MM-yyyy\"); //Wed May 15 2019 00:00:00 GMT+0900 (한국 표준시) ```",
          "see": [
            {
              "label": "dateToString static",
              "url": "/docs/static/date-to-string"
            },
            {
              "label": "Format appendix",
              "url": "/docs/appx/format"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/static/string-to-date.html"
      },
      {
        "cid": 921,
        "sid": "string-to-number",
        "name": "string-to-number",
        "label": "stringToNumber",
        "data": {
          "body": "> 문자열을 지정한 포맷으로 파싱하여 javascript 숫자로 리턴합니다. ### Syntax ```javascript number IBSheet.stringToNumber(numberStr, format); ``` ### Parameters |Name|Type|Required|Description| |----------|-----|---|----| |numberStr|`string`|<span class='required'>필수</span>|숫자 형식의 문자열 (ex:\"7,314.1654\")| |format|`string`|<span class='required'>필수</span>|파싱할 포맷| ### Return Value ***number*** ### Example ```javascript var number = IBSheet.stringToNumber('7,314.1654', \"#,##0.00\"); // 7314.1654 ```",
          "see": [
            {
              "label": "numberToString static",
              "url": "/docs/static/number-to-string"
            },
            {
              "label": "Format appendix",
              "url": "/docs/appx/format"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/static/string-to-number.html"
      },
      {
        "cid": 922,
        "sid": "version-2",
        "name": "version",
        "label": "version",
        "data": {
          "body": "> 시트의 제품 버전을 확인합니다. ### Syntax ```javascript string version(); ``` ### Return Value ***string***: 화면에 로드된 `ibsheet.js` 제품의 버전 및 로드된 플러그인들의 버전 문자열 ### Example ```javascript // 시트의 제품 버전 확인 IBSheet.version(); ```",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/static/version.html"
      }
    ]
  },
  {
    "gid": 7,
    "name": "appx",
    "label": "Appendix",
    "children": [
      {
        "cid": 923,
        "sid": "basic-course",
        "name": "basic-course",
        "label": "기초 개발자 교육",
        "data": {
          "body": "목차 1. 제품 파일 구성 2. 기본 시트 생성 방법 3. 함수와 이벤트 4. 시트 구조 이해 (<a href=\"../../#docs/start/basic-structure\" target=\"_blank\">Header, Head, Body, Foot, Solid</a>) 5. <a href=\"../../#docs/start/basic-structure\" target=\"_blank\">Def</a> 와 `ibsheet-common.js` 6. 렌더링과 데이터 로드 7. 데이터 추출과 저장 8. Formula 기능 사용 9. <a href=\"../../#docs/appx/solid\" target=\"_blank\">Solid (appendix)</a>, <a href=\"../../#docs/appx/menu\" target=\"_blank\">Menu (appendix)</a>, 달력 기능 10. 커스텀 다이얼로그 기능 사용 11. 파일 export/import 기능 사용 12. FAQ ## 1. 제품 파일 구성 IBSheet8 기본 파일 구성에 대해 설명하고(<a href=\"../../#docs/intro/files\" target=\"_blank\">참고</a>), `plugins 파일` 3개의 역할을 설명합니다. ## 2. 기본 시트 생성 방법 간단하게 javascript를 이용하여 시트 객체를 생성하는 방법을 설명합니다.(<a href=\"../../#docs/start/quick-start\" target=\"_blank\">참고</a>) ```javascript var OPT = { Cfg:{ Alternate:2, HeaderMerge:3 }, LeftCols:[ { Header: \"No\", Name: \"SEQ\", Type: \"Text\", Width:40, Align:\"Center\"}, ], Cols:[ { Header: \"이름\", Name: \"sa_nm\", Type: \"Text\", Width:80}, { Header: \"성별\", Name: \"sa_gender\", Type: \"Enum\", Enum:\"|남|여\",EnumKeys:\"|M|F\", MinWidth:50}, { Header: \"사원번호\", Name: \"sa_id\", Type: \"Text\", Align: \"center\", Width:70,Size:6,EditMask:\"^\\\\d*$\"}, { Header: \"부서\", Name: \"sa_dept\", Type: \"Enum\", Enum: \"|경영지원|총무|인사|설계|시공1|시공2\", EnumKeys: \"|01|02|03|04|05|06\",Width:80 }, { Header: \"직급\", Name: \"sa_position\", MinWidth:60, MaxWidth:60, Type: \"Enum\", Enum: \"|대표|상무|이사|부장|차장|과장|대리|사원\", EnumKeys: \"|A1|A2|A3|B0|B1|C4|C5|C6\"}, { Header: \"입사일\", Name: \"sa_enterdate\", Type: \"Date\", Width:100, Format: \"yyyy/MM/dd\", DataForamt:\"yyyyMMdd\", EditFormat:\"yyyy-MM-dd\"}, { Header: \"급여\", Name: \"sa_salary\", Type: \"Int\", Width:80}, { Header: \"퇴직여부\", Name: \"sa_retire\", Type: \"Radio\", Enum:\"|퇴직|재직\", EnumKeys:\"|Y|N\",Align:\"center\",MinWidth:125}, { Header: \"비고\", Name: \"sa_desc\", Type: \"Lines\", RelWidth:1 } ] }; IBSheet.create({ id:\"mySheet\", //생성하는 시트 이름 el:\"sheet_DIV\", //시트가 생성될 div 객체 id options:OPT //ibsheet 기본 설정 }); ``` ## 3. 함수와 이벤트 ibsheet 함수 와 이벤트에 대한 기본적인 사용법을 설명합니다. #### 1) <a href=\"../../#docs/funcs/method\" target=\"_blank\">기본적인 함수 사용 방법</a> - 자주 사용되는 함수 |함수명|기능설명| |---|---| |<a href=\"../../#docs/funcs/core/get-value\" target=\"_blank\">getValue</a>|셀의 값을 얻음| |<a href=\"../../#docs/funcs/core/set-value\" target=\"_blank\">setValue</a>|셀의 값을 수정| |<a href=\"../../#docs/funcs/core/get-string\" target=\"_blank\">getString</a>|포멧이 적용된 셀의 값을 얻음| |<a href=\"../../#docs/funcs/core/set-string\" target=\"_blank\">setString</a>|포멧을 포함한 문자열로 셀값을 수정| |<a href=\"../../#docs/funcs/core/set-all-check\" target=\"_blank\">setAllCheck</a>|bool타입 컬럼에서 전체 체크| |<a href=\"../../#docs/funcs/core/get-attribute\" target=\"_blank\">getAttribute</a>|행,열,셀의 속성을 얻음| |<a href=\"../../#docs/funcs/core/set-attribute\" target=\"_blank\">setAttribute</a>|행,열,셀의 속성을 수정| |<a href=\"../../#docs/funcs/core/add-row\" target=\"_blank\">addRow</a>|행 추가| |<a href=\"../../#docs/funcs/core/delete-row\" target=\"_blank\">deleteRow</a>|행 삭제| |<a href=\"../../#docs/funcs/core/remove-all\" target=\"_blank\">removeAll</a>|전체 데이터 제거| |<a href=\"../../#docs/funcs/core/dispose\" target=\"_blank\">dispose</a>|시트객체 초기화| |<a href=\"../../#docs/funcs/core/focus\" target=\"_blank\">focus</a>|특정 위치로 포커스 이동| |<a href=\"../../#docs/funcs/core/do-dort\" target=\"_blank\">doSort</a>|특정 컬럼 소팅| |<a href=\"../../#docs/funcs/core/do-filter\" target=\"_blank\">doFilter</a>|특정 컬럼 필터링| |<a href=\"../../#docs/funcs/core/make-sub-total\" target=\"_blank\">makeSubTotal</a>|소계 삽입 기능| |<a href=\"../../#docs/funcs/core/version\" target=\"_blank\">version</a>|제품의 버젼확인| #### 2) <a href=\"../../#docs/events/event\" target=\"_blank\">이벤트 사용 방법</a> - 자주 사용되는 이벤트 |이벤트명|기능설명| |---|---| |<a href=\"../../#docs/events/on-after-click\" target=\"_blank\">onAfterClick</a>|클릭시 발생 이벤트| |<a href=\"../../#docs/events/on-dbl-click\" target=\"_blank\">onDblClick</a>|더블클릭시 발생 이벤트| |<a href=\"../../#docs/events/on-before-change\" target=\"_blank\">onBeforeChange</a>|셀 값이 수정되기 전 발생 이벤트| |<a href=\"../../#docs/events/on-after-change\" target=\"_blank\">onAfterChange</a>|셀의 값이 수정된 후 발생 이벤트| |<a href=\"../../#docs/events/on-focus\" target=\"_blank\">onFocus</a>|시트 내에 포커스가 이동될때 발생 이벤트| |<a href=\"../../#docs/events/on-render-first-finish\" target=\"_blank\">onRenderFirstFinish</a>|시트 객체가 최초 생성되었을 때 발생 이벤트| #### 3) JSON 이벤트 (Properties/Event) - 특정 행이나 열 혹은 셀에 이벤트 정의(<a href=\"../../#docs/props/event/on-change\" target=\"_blank\">참고</a>) ## 4. 시트 구조 이해 아이비시트 각 구조 (헤더, 헤드, 바디, 풋)에 대해 이해하고, 행/열 객체에 대해 설명합니다. ![구조](/assets/imgs/structure.png \"시트 구조\") #### 1) 헤더행 2줄, 배경색, 글자색, 내용 변경하기 > 시트에 여러개의 헤더행을 생성할 수 있습니다. > 헤더행은 생성 후에도 타이틀을 변경하거나, 속성(글자색,배경색 등)을 변경할 수 있습니다. ```javascript //시트 생성부 options.Cols = [ { Header : [\"개인정보\",\"이름\"], Type : \"Text\", Name : \"userName\" }, //헤더행 두줄 { Header : [\"개인정보\",{Value:\"전화번호\",Color:\"#DDD\",TextColor:\"#FF4433\"}], Type : \"Text\" ...} //헤더행 글자, 배경색 설정하기 ]; //생성 후 해더 내용/속성 변경하기 //헤더가 한줄일때는 \"Header\" 라는 ID을 갖고 2번째 헤더행부터는 HR1,HR2… 식으로 ID를 갖습니다. sheet.setValue(sheet.getRowById(\"Header\"), \"sa_nm\" , \"성명\", 1 );//첫번째 헤더행 내용 변경 sheet.setAttribute({row:sheet.getRowById(\"HR1\"),attr:\"Color\",val:\"#FFED37\"}); //두번째 해더행의 배경색 변경 ``` **** #### 2) 행 객체에 대한 접근 및 값 확인(<a href=\"../../#docs/start/row\" target=\"_blank\">참고</a>) > ***시트 내에 모든 행은 `id`를 갖고 있고, 이 `id`를 통해 접근할 수 있습니다.*** > 첫번째 헤더행의 `id`는 `Header`이고 두번째 이후부터는 **HR1, HR2..** 식으로 자동 부여됩니다. > 데이터 행의 `id`는 생성 순서대로 **AR1, AR2, AR3...** 식으로 자동 부여됩니다. > 이외에 필터행은 `Filter`, 합계행은 `FormulaRow`등의 이름을 갖고 있습니다. > Head,Foot,Solid등의 행을 만들때는 직접 `id`를 지정하실 수 있습니다. ```javascript /** 행 객체 얻기 **/ //첫번째 데이터 행 var headerRow = sheet.getFirstRow(); //포커스 행 var focusRow = sheet.getFocusedRow(); //포커스된 행의 아래 행 var nrow = sheet.getNextRow( sheet.getFocusedRow() ); //포커스된 행의 위 행 var nrow = sheet.getPrevRow( sheet.getFocusedRow() ); //10번째 데이터 행 var row = sheet.getRowByIndex( 10 ); //합계행 var sumRow = sheet.getRowById(\"FormulaRow\"); //전체 데이터 행 얻기 var dataRows = sheet.getDataRows(); //현재 보여지는 행 얻기 var dataRows = sheet.getShownRows(); /** 행 객체 내에 값 확인 및 수정**/ var edit = sheet.getRowById(\"AR2\").CanEdit; var edit = sheet.getAttribute(sheet.getFocusedRow() , null , \"CanEdit\" ); sheet.setAttribute(sheet.getFocusedRow(), null, \"Color\" , \"#FF0000\",0); ``` #### 3) 열 속성 변경(<a href=\"../../#docs/start/col\" target=\"_blank\">참고</a>) > 시트 생성 시 Cols 속성을 통해 설정되는 컬럼에는 반드시 Name과 Type을 지정해 주셔야 합니다. > 시트가 생성된 이후에는 각 컬럼에 부여한 Name을 기준으로 컬럼의 속성을 확인하거나 변경할 수 있습니다. 다음과 같은 Name은 예약어로 사용에 주의가 필요합니다. (대/소문자 유의) |예약어|용도| |------|---| |SEQ|Type과 무관하게 자동으로 증가하는 숫자형식으로 동작 (모든 시트에는 SEQ가 존재)| |id|<mark>모든 행은 고유한 **id**가 있으므로 **id**를 별도로 컬럼이름으로 사용 불가</mark> (조회데이터에 \"`id`\"가 포함된 경우 `\"___id\"`로 조회됨.)| |STATUS|[getSaveJson()](/docs/funcs/core/get-save-json), [doSave()](/docs/funcs/core/do-save) 등 저장함수 호출시 자동으로 서버로 전송되는 상태값으로 사용| ```javascript //모든 컬럼명 얻기 var cols = sheet.getCols(); //컬럼 속성 확인 var color = sheet.getAttribute(null, \"saID\", \"Color\"); //컬럼 속성 변경 sheet.setAttribute({col:\"AMT_12\",attr:\"CanEdit\",val:0}); ``` #### 4) 헤드,풋 추가해 보기 헤더와 데이터 영역 사이나 데이터행 하단에 고정된 행을 설정할 수 있습니다. ```javascript var OPT = { //상단 고정행 Head : [ { id:\"HEAD1\",Kind:\"Head\",CanEdit:0, sa_salary:\"\",sa_salaryType:\"Text\",sa_retire:\"퇴직자만 보기\",sa_retireType:\"Text\",sa_descType:\"Bool\",sa_descAlign:\"left\",sa_descCanEdit:1, sa_descOnChange:function(evt){ if(evt.row[evt.col]){ evt.sheet.setFilter({name:\"myFilter\",filter:\"sa_retire=='Y'?1:0\",render:1}); }else{ evt.sheet.clearFilter(); } } } ], //하단 고정행 Foot : [ {id:\"FOOT1\",Kind:\"Foot\",sa_desc:\"2019년 자료\",CanEdit:0,Color:\"#FFDDEE\"} ] } ``` ## 5. 공통 기능 정의 (Def 와 ibsheet-common.js) #### 1) <a href=\"../../#docs/appx/init-structure\" target=\"_blank\">Def</a> 의 역할 시트 내에 모든 행이나 열에 공통 기능을 설정 할 수 있습니다. options.Def.Col을 통해 특정 속성을 모든 열에 설정해도, options.Cols를 통해 개별 열에 동일한 속성이 설정된 경우 개별 열에 설정된 값이 우선됩니다. #### 2) <a href=\"../../#docs/static/common-options\" target=\"_blank\">CommonOptions</a> 속성과 <a href=\"../../#docs/static/on-before-create\" target=\"_blank\">onBeforeCreate</a> 함수 사용 시스템 내에 모든 시트에 공통 기능을 설정 할 수 있습니다. CommonOptions를 통해 설정된 값보다 개별 시트에서 설정한 값이 우선되고, 이보다 onBeforeCreate 함수를 통해 설정된 값이 가장 우선됩니다. IBSheet.CommonOptions 는 ibsheet-common.js 에 정의되어 있습니다. #### 3) IB_Preset 과 <a href=\"../../#docs/props/col/extend\" target=\"_blank\">Extend</a> 열에 설정되는 여러가지 속성을 변수에 담아두었다가, Extend 속성을 동일한 기능을 하는 열을 손쉽게 생성할 수 있습니다. IB_Preset 변수는 ibsheet-common.js 파일에 정의 되어 있습니다. ## 6. 렌더링 과 데이터 로드 #### 1) 시트 내 값 변경과 렌더링 시트 내에 값을 변경하거나 색상을 변경하는 등 화면에 변화를 일으키는 경우 렌더링 타이밍에 주의하여야 합니다. ```javascript //여러번 렌더링이 일어나는 로직 var drows = sheet.getDataRows(); for(var i=0;i<drows.length;i++){ sheet.setValue(drows[i], \"DWT\" , \"사용불가\"); sheet.setAttribute( {row:drows[i],attr:\"Color\",\"#FF0000\"}); } //단 한번만 렌더링이 일어나는 로직 var drows = sheet.getDataRows(); for(var i=0;i<drows.length;i++){ //setValue나 setAttribute에 render인자값을 0으로 설정(값의 수정이 있어도 화면에 반영되지 않음) sheet.setValue(drows[i], \"DWT\" , 0 , 0 ); sheet.setAttribute( {\"row\":drows[i],attr:\"Color\",\"#FF0000\",\"render\":0}); } //최종 변경된 내용이 화면에 표시됨. sheet.rerender(); ``` 다양한 렌더링 함수 참고 - 시트 전체 렌더링 : <a href=\"../../#docs/funcs/core/rerender\" target=\"_blank\">rerender()</a> - 데이터 영역만 렌더링 : <a href=\"../../#docs/funcs/core/render-body\" target=\"_blank\">renderBody()</a> - 특정 행 하나만 렌더링 : <a href=\"../../#docs/funcs/core/refresh-row\" target=\"_blank\">refreshRow()</a> - 특정 셀 하나만 렌더링 : <a href=\"../../#docs/funcs/core/refresh-cell\" target=\"_blank\">refreshCell()</a> #### 2) 조회 / 데이터 로드 함수 이용 시트내에 데이터 로딩은 <a href=\"../../#docs/props/cfg/search-mode\" target=\"_blank\">SearchMode</a> 설정에 따라 달라집니다. |유형|함수명|기능설명| |---|---|---| |기본 조회|<a href=\"../../#docs/funcs/core/do-search\" target=\"_blank\">doSearch</a>|지정한 URL을 호출하여 리턴된 json을 시트에 로딩합니다.| |페이징 조회|<a href=\"../../#docs/funcs/core/do-search-paging\" target=\"_blank\">doSearchPaging</a>|페이징 조회(cfg:{SearchMode:3 or 4}) 사용시 지속적으로 호출할 서버 URL을 설정합니다.| |데이터 로드|<a href=\"../../#docs/funcs/core/load-search-data\" target=\"_blank\">loadSearchData</a>|json 데이터(string혹은 object)를 시트에 로딩합니다.| **위 함수는 모두 비동기 형식입니다.** #### 3) 관련 이벤트 조회/데이터 로딩 과정에서 다음과 같은 이벤트가 발생합니다. (중간에 렌더링함수는 제외) |순서|이벤트명|기능설명| |---|---|---| |1|<a href=\"../../#docs/events/on-receive-data\" target=\"_blank\">onReceiveData</a>|데이터 파싱 직전에 발생합니다. 로드 될 데이터를 조작할 수 있습니다.| |2|<a href=\"../../#docs/events/on-before-data-load\" target=\"_blank\">onBeforeDataLoad</a>|json 데이터 파싱 후 발생합니다. 파싱된 json 데이터를 조작할 수 있습니다.| |3|<a href=\"../../#docs/events/on-data-load\" target=\"_blank\">onDataLoad</a>|화면에 렌더링 전에 발생합니다.| |4|<a href=\"../../#docs/events/on-search-finish\" target=\"_blank\">onSearchFinish</a>|데이터에 대한 렌더링이 끝나고, 모든 조회 절차가 끝난 후에 발생합니다.| #### 4) 데이터 구조 <a href=\"../../#docs/appx/data-structure\" target=\"_blank\">조회/저장 데이터 구조 참고</a> ```javascript //일반적인 조회 데이터 구조 {\"data\":[ {\"colName1\":\"1234\", \"colName2\":\"abcd\",\"colName3\":\"가나다라\"}, {\"colName1\":\"1234\", \"colName2\":\"abcd\",\"colName3\":\"가나다라\"}, .... ]} ``` ## 7. 데이터 추출과 저장 #### 1) 데이터 추출 함수 다음과 같은 함수를 통해 시트내에 데이터를 추출할 수 있습니다. |함수명|기능설명| |---|---| |<a href=\"../../#docs/funcs/core/do-save\" target=\"_blank\">doSave</a>|시트에서 변경된 내용을 추출하여 서버로 전송하고, 서버에서 응답 JSON 내용에 따라 시트에 반영합니다.| |<a href=\"../../#docs/funcs/core/get-save-string\" target=\"_blank\">getSaveString</a>|시트 내에 수정된 내용을 행단 위로 querystring형식으로 추출하여 리턴합니다.| |<a href=\"../../#docs/funcs/core/get-save-json\" target=\"_blank\">getSaveJson</a>|시트 내에 수정된 내용을 행단 위로 json형식으로 추출하여 리턴합니다.| #### 2) 행,셀안에 데이터 수정 정보 확인 - 수정된 행 객체를 얻음 <a href=\"../../#docs/funcs/core/get-rows-by-status\" target=\"_blank\">getRowsByStatus()</a>함수를 수정,삭제,입력 에 따라 필요한 행 객체를 추출할 수 있습니다. - 수정된 값이 1개라도 존재하는지 여부 확인 <a href=\"../../#docs/funcs/core/has-changed-data\" target=\"_blank\">hasChangedData()</a>함수를 통해 true/false로 판별할 수 있습니다. - 특정 행의 수정여부를 확인 ```javascript var row = getRowByIndex(55); if(row[\"Changed\"]){ //해당 행은 수정된 내용이 있음. } if(row[\"Added\"]){ //신규로 추가된 행임. } if(row[\"Deleted\"]){ //삭제 예정행임 } ``` - 특정 셀의 수정여부 및 수정 전 값을 확인 ```javascript var row = sheet.getFocusedRow(); //Name이 AMT인 컬럼의 수정 여부 확인 if(row[\"AMTChanged\"]){//수정됨. //수정 전 값 확인 var oldValue = row[\"AMTOrgi\"]; } ``` - 수정한 내용 시트에 반영 <a href=\"../../#docs/funcs/core/accept-changed-data\" target=\"_blank\">acceptChangedData()</a>, <a href=\"../../#docs/funcs/core/apply-save-result\" target=\"_blank\">applySaveResult()</a> : 수정된 데이터를 시트에 반영합니다. (Deleted속성을 갖고 있는 행은 삭제하고, Added,Changed 속성은 행에서 제거합니다.) #### 3) 저장 함수 사용 <a href=\"../../#docs/funcs/core/do-save\" target=\"_blank\">doSave()</a> : 수정된 내용을 지정한 URL로 전송하고, 리턴된 결과에 따라 내용을 반영합니다. doSave함수는 getSaveString(데이터 취합), ajax(데이터 전송), acceptChangedData(상태 클리어) 함수가 순차적으로 동작합니다. doSave함수 사용시 리턴 json 형식(<a href=\"../../#docs/appx/data-structure\" target=\"_blank\">참고</a>) ```javascript { \"IO\":{ \"Result\":1, \"Message\":\"저장되었습니다.\" } } ``` #### 4) 저장 관련 이벤트 |순서|이벤트명|기능설명| |---|---|---| |1|<a href=\"../../#docs/events/on-save\" target=\"_blank\">onSave</a>|doSave함수 호출시 발생합니다.| |2|<a href=\"../../#docs/events/on-before-save\" target=\"_blank\">onBeforeSave</a>|doSave함수를 통해 수정한 데이터가 서버로 전송되기 전에 발생합니다.| |3|<a href=\"../../#docs/events/on-after-save\" target=\"_blank\">onAfterSave</a>|서버에서 저장에 대한 결과를 받은 후 발생합니다.| ## 8. formula 기능 #### 1) 합계 행 생성 컬럼 생성시 <a href=\"../../#docs/props/col/formula-row\" target=\"_blank\">FormulaRow</a>를 통해 하단에 합계행을 생성할 수 있습니다. 합계행에는 일반적인 컬럼의 합계 값 외에 평균이나 건수 등의 계산값도 표시 할 수 있습니다. #### 2) 컬럼 간의 연산 컬럼과 컬럼 간의 계산 결과를 표시하기 위한 <a href=\"../../#docs/props/col/formula\" target=\"_blank\">Formula</a>기능을 제공합니다. <a href=\"../../#docs/props/col/formula\" target=\"_blank\">Formula</a>속성이 설정된 컬럼은 사용자의 편집이 불가하고 자동 계산된 값을 표시합니다. 자세한 내용은 appendix의 <a href=\"../../#docs/appx/formula\" target=\"_blank\">Formula</a>를 참고해 주세요. #### 3) 속성에 대한 변경 컬럼의 속성을 변경하는 <a href=\"../../#docs/props/col/attribute-formula\" target=\"_blank\">Attribute+Formula</a> 기능을 제공합니다. <mark>**Formula**나 **Attribute+Formula** 기능을 사용하는 경우에는 반드시 <a href=\"../../#docs/props/row/can-formula\" target=\"_blank\">CanFormula</a>, <a href=\"../../#docs/props/row/calc-order\" target=\"_blank\">CalcOrder</a> 속성이 Def.Row에 설정되어야 합니다.</mark> ## 9. solid,contextmenu 기능 #### 1) solid 행 이해 시트 내에 독립적인 기능을 수행하는 행을 추가할 수 있습니다. appendix에 <a href=\"../../#docs/appx/solid\" target=\"_blank\">solid</a>를 참고해 주세요. #### 2) menu 기능 활용 마우스 우측 버튼 클릭시 표시되는 컨텍스트 메뉴를 설정할 수 있습니다. appendix에 <a href=\"../../#docs/appx/menu\" target=\"_blank\">menu</a>를 참고해 주세요. ## 10. 커스텀 다이얼로 기능 사용 **ibsheet-dialog.js** 파일을 통해 몇가지 다이얼로그 기능을 사용하실 수 있습니다. (아래 기능을 사용하기 위해서는 반드시 ibsheet-dialog.js 파일이 해당화면에 include되어 있어야 합니다.) |다이얼로그|함수명|역할| |---|---|---| |찾기|<a href=\"../../#docs/funcs/dialog/show-find-dialog\" target=\"_blank\">showFindDialog</a>|시트 내에 조회된 데이터에서 특정 문자를 찾거나, 표시합니다.| |상세보기|<a href=\"../../#docs/funcs/dialog/show-edit-dialog\" target=\"_blank\">showEditDialog(rowObject,width,height)</a>|특정 행의 내용을 다이얼로그로 표시합니다.| |피벗|<a href=\"../../#docs/funcs/dialog/show-pivot-dialog\" target=\"_blank\">showPivotDialog()</a>|시트의 각 컬럼의 Type에 따라 피벗 다이얼로그를 생성하여 표시합니다.| |다운로드|<a href=\"../../#docs/funcs/dialog/show-download-dialog\" target=\"_blank\">showDownloadDialog()</a>|시트에 조회 된 내용 중 사용자가 원하는 행/열을 지정하여 다운로드 할 수 있습니다.| |업로드|<a href=\"../../#docs/funcs/dialog/show-upload-dialog\" target=\"_blank\">showUploadDialog()</a>|엑셀의 내용을 시트에 로드하기 전에 미리보기 다이얼로그를 통해 사용자가 컬럼의 순서를 정할수 있습니다.| |소트|<a href=\"../../#docs/funcs/dialog/show-sort-dialog\" target=\"_blank\">showSortDialog()</a>|다이얼로그를 통해 여러개 컬럼을 동시에 소팅 할 수 있습니다.| ## 11. 파일 export/import 기능 사용 파일을 export하거나 import 하는 방법은 크게 서버에서 수행하는 방법과 클라이언트에서 수행하는 방법으로 나누어 집니다. ### 서버에서 export/import 하는 방법 서버에서 파일에 대한 import/export 작업을 위해서는 사전 작업이 필요합니다. <a href=\"../../#docs/appx/import-export\" target=\"_blank\">엑셀 업로드/다운로드 설정하기</a> 부분을 참고 하시기 바랍니다. - 엑셀 다운로드/업로드 기능 <a href=\"../../#docs/funcs/excel/down-to-excel\" target=\"_blank\">down2Excel()</a>, <a href=\"../../#docs/funcs/excel/load-excel\" target=\"_blank\">loadExcel()</a> 함수를 통해 데이터 다운로드,업로드를 하실 수 있습니다. - 텍스트 다운로드/업로드 기능 <a href=\"../../#docs/funcs/excel/down-to-text\" target=\"_blank\">down2Text()</a>, <a href=\"../../#docs/funcs/excel/load-text\" target=\"_blank\">loadText()</a> 함수를 통해 데이터 다운로드,업로드를 하실 수 있습니다. ### 클라이언트에서 import/export 하는 방법 javascript를 이용하여 import/export 작업을 위해서는 아래와 같은 작업이 필요합니다. #### 1) jszip.min.js 파일 추가하기 /plugins/jszip.min.js 파일을 추가 합니다. #### 2) 다음 함수를 통해 import/export 기능 수행 - 엑셀,text 다운로드 기능 <a href=\"../../#docs/funcs/excel/exportData\" target=\"_blank\">exportData()</a> - 엑셀,text 업로드 기능 <a href=\"../../#docs/funcs/excel/importData\" target=\"_blank\">importData()</a> ## 12. FAQ - 시트에 버튼을 추가하거나 혹은 Click이벤트를 통해 layer형태의 팝업을 띄우는 경우, 파업 내에 시트나 input element에서 입력을 해도 계속 파업을 띄운 시트에서 입력이 이루어지는 문제. 시트를 클릭하여 팝업을 띄우는 경우, 시트는 아직까지 포커스를 자신이 갖고 있다고 판단하기 때문에 발생하는 문제입니다. 팝업을 띄울때, [blur()](/docs/funcs/core/blur)함수를 호출하여 더 이상 시트가 포커스를 잡지 않게 해야 합니다. - 조회 직후 시트가 포커스를 가져가지 않게 하는 방법. 시트는 데이터를 로딩후 첫번째 행,첫번째 열에 포커스를 갖게 됩니다. 만약 조회 후 포커스를 가져가지 않게 하려면 (cfg)[IgnoreFocused](/docs/props/cfg/ignore-focused) 속성을 1로 설정하시면 됩니다. - 컬럼에 [Attribute+Formula](/docs/props/col/attribute-formula) 선언하니까 다른 [Formula](/docs/props/col/formula)까지 동작하지 않는 문제 Formula만 사용할때 계산 순서를 결정하는 [CalcOrder](/docs/props/row/calc-order)를 설정하지 않으면 컬럼명의 알파벳 순으로 자동 계산을 합니다. 하지만 Attribute+Formula가 사용되면 Attribute+Formula와 일반 Formula에 대한 연산 순서를 모두 CalcOrder에 정의하여야만 정상 작동하게 됩니다. - 시트 생성후 조회를 했는데 오류가 나거나 조회가 간헐적으로 안되는 문제 시트 생성 이전에 조회함수를 호출하여 발생하는 경우가 많습니다. 시트 생성이 비동기 형태이기 때문에 IBSheet.[create()](/docs/static/create)함수 호출 이후에 조회 함수를 호출하게되면 이러한 문제가 발생할 수 있습니다. 문제를 해결하기 위해서는 생성 후 발생 이벤트인 [onRenderFirstFinish](/docs/events/on-render-first-finish)에서 조회 함수를 호출하여야 합니다. - 시트를 제거하거나 시트를 다시 생성하는 방법 화면 내에 모든 시트를 제거하려면 IBSheet.[disposeAll()](/docs/static/dispose-all)함수를 호출하면 됩니다. 단일 시트를 제거할때는 sheet.[dispose()](/docs/funcs/core/dispose)함수를 통해 제거할 수 있습니다. 이렇게 제거된 함수를 다시 생성하는 것은 일반적인 시트를 생성하는 것과 동일하게 IBSheet.[create()](/docs/static/create)함수를 사용하시면 됩니다.",
          "see": [
            {
              "label": "파일 구성 introduction",
              "url": "/docs/intro/files"
            },
            {
              "label": "Quick Start getting started",
              "url": "/docs/start/quick-start"
            },
            {
              "label": "시트 객체 기본 구조 getting stated",
              "url": "/docs/start/basic-structure"
            },
            {
              "label": "시트 객체 구조 getting stated",
              "url": "/docs/appx/init-structure"
            },
            {
              "label": "SearchMode cfg",
              "url": "/docs/props/cfg/search-mode"
            },
            {
              "label": "Extend col",
              "url": "/docs/props/col/extend"
            },
            {
              "label": "method 사용법 기초 method",
              "url": "/docs/funcs/method"
            },
            {
              "label": "doSearch method",
              "url": "/docs/funcs/core/do-search"
            },
            {
              "label": "doSearchPaging method",
              "url": "/docs/funcs/core/do-search-paging"
            },
            {
              "label": "down2Excel method",
              "url": "/docs/funcs/excel/down-to-excel"
            },
            {
              "label": "down2Text method",
              "url": "/docs/funcs/excel/down-to-text"
            },
            {
              "label": "getSaveString method",
              "url": "/docs/funcs/core/get-save-string"
            },
            {
              "label": "getSaveJson method",
              "url": "/docs/funcs/core/get-save-json"
            },
            {
              "label": "getChangedData method",
              "url": "/docs/funcs/core/get-changed-data"
            },
            {
              "label": "loadSearchData method",
              "url": "/docs/funcs/core/load-search-data"
            },
            {
              "label": "loadExcel method",
              "url": "/docs/funcs/excel/load-excel"
            },
            {
              "label": "loadText method",
              "url": "/docs/funcs/excel/load-text"
            },
            {
              "label": "rerender method",
              "url": "/docs/funcs/core/rerender"
            },
            {
              "label": "renderBody method",
              "url": "/docs/funcs/core/render-body"
            },
            {
              "label": "refreshRow method",
              "url": "/docs/funcs/core/refresh-row"
            },
            {
              "label": "refreshCell method",
              "url": "/docs/funcs/core/refresh-cell"
            },
            {
              "label": "showDownloadDialog method",
              "url": "/docs/funcs/dialog/show-download-dialog"
            },
            {
              "label": "showEditDialog method",
              "url": "/docs/funcs/dialog/show-edit-dialog"
            },
            {
              "label": "showFindDialog method",
              "url": "/docs/funcs/dialog/show-find-dialog"
            },
            {
              "label": "showPivotDialog method",
              "url": "/docs/funcs/dialog/show-pivot-dialog"
            },
            {
              "label": "showUploadDialog method",
              "url": "/docs/funcs/dialog/show-upload-dialog"
            },
            {
              "label": "event 사용법 기초 event",
              "url": "/docs/events/event"
            },
            {
              "label": "onReceiveData event",
              "url": "/docs/events/on-receive-data"
            },
            {
              "label": "onBeforeDataLoad event",
              "url": "/docs/events/on-before-data-load"
            },
            {
              "label": "onDataLoad event",
              "url": "/docs/events/on-data-load"
            },
            {
              "label": "onSearchFinish event",
              "url": "/docs/events/on-search-finish"
            },
            {
              "label": "onSave event",
              "url": "/docs/events/on-save"
            },
            {
              "label": "onBeforeSave event",
              "url": "/docs/events/on-before-save"
            },
            {
              "label": "onAfterSave event",
              "url": "/docs/events/on-after-save"
            },
            {
              "label": "static 객체 란 static",
              "url": "/docs/static/static"
            },
            {
              "label": "onBeforeCreate static",
              "url": "/docs/static/on-before-create"
            },
            {
              "label": "CommonOptions static",
              "url": "/docs/static/common-options"
            },
            {
              "label": "Solid appendix",
              "url": "/docs/appx/solid"
            },
            {
              "label": "Menu appendix",
              "url": "/docs/appx/menu"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/basic-course.html"
      },
      {
        "cid": 924,
        "sid": "design",
        "name": "design",
        "label": "css 디자인 변경/적용하기",
        "data": {
          "body": "> ibsheet의 기본 테마는 짙은 남색과 푸른 톤의 색상으로 /default/main.css파일을 통해 자동 설정 됩니다. > 하지만 이러한 테마는 함수나 속성을 통해 다른 css파일을 사용하시거나, css파일의 내용을 수정함으로써 다양한 디자인을 부여하실 수 있습니다. > ibsheet에서 제공하는 테마 이외에도 (assets/ibsheet/css) 폴더 아래에 사용자가 원하는 css파일을 생성하여 사용할 수 있습니다. > 아래에 ibsheet에서 제공하는 기본 테마 유형 5가지와 시트 내에 부위별 css 클래스에 대해 알아봅니다. ## 1. 기본제공 되는 테마 5가지 ibsheet는 5가지 테마를 제공하고 있습니다. ### 테마 - 기본테마<`IB`> (/css/default/main.css) ![default](/assets/imgs/defaultTheme.png \"기본테마\") - Grace 테마<`IBGR`> (/css/grace/main.css) ![Grace](/assets/imgs/graceTheme.png \"Grace\") - Material 테마<`IBMR`> (/css/material/main.css) ![Material](/assets/imgs/materialTheme.png \"Material\") - Mint 테마<`IBMT`> (/css/mint/main.css) ![Mint](/assets/imgs/mintTheme.png \"Mint\") - Simple 테마<`IBSP`> (/css/simple/main.css) ![Simple](/assets/imgs/simpleTheme.png \"Simple\") ## 2. 테마 파일의 이해 ibsheet의 각 클래스 명은 `테마별 prefix` + `실제 클래스 명`의 구조로 이루어집니다. 가령 /css/default/main.css 파일을 텍스트 편집기로 열어보면 `.IBHeaderRowHeight` 나 `.IBColorHoveredCell` 식의 클래스가 있는데, 이것을 보아 default 테마의 prefix는 **`IB`** 이고 뒤에 **`HeaderRowHeight`** 나 **`ColorHoveredCell`** 등의 실제 각 부위에 대한 클래스 명칭임을 알 수 있습니다. grace테마에 해당하는 /css/grace/main.css 파일을 열어보면 `.IBGRClassFocusedCell` 이나 `.IBGREditInput` 클래스가 있는데, grace테마의 prefix는 **`IBGR`** 임을 알수 있습니다. [/css/default/main.css 예] ```css .IBMain{font-family:'Noto Sans CJK kr','Noto Sans KR','Noto Sans','Verdana','Malgun Gothic','Nanum Gothic',sans-serif;font-style:normal;font-weight:normal;font-variant:normal} .IBMain *{font-family:inherit;font-style:inherit;font-weight:inherit;font-variant:inherit;text-overflow:ellipsis;word-wrap:normal;word-break:normal} .IBMain,.IBMain *{font-size:13px;line-height:18px} .IBWide,.IBWide *{font-size:15px;line-height:20px} .IBGiant,.IBGiant *{font-size:21px;line-height:24px} .IBHigh,.IBHigh *{font-size:21px;line-height:22px} ... ``` [/css/grace/main.css 예] ```css .IBGRMain{font-family:'Noto Sans CJK kr','Noto Sans KR','Noto Sans','Verdana','Malgun Gothic','Nanum Gothic',sans-serif;font-style:normal;font-weight:normal;font-variant:normal} .IBGRMain *{font-family:inherit;font-style:inherit;font-weight:inherit;font-variant:inherit;text-overflow:ellipsis;word-wrap:normal;word-break:normal} .IBGRMain,.IBGRMain *{font-size:13px;line-height:18px} .IBGRWide,.IBGRWide *{font-size:15px;line-height:20px} .IBGRGiant,.IBGRGiant *{font-size:21px;line-height:24px} .IBGRHigh,.IBGRHigh *{font-size:21px;line-height:22px} ... ``` ***ibsheet에서 테마를 설정할때는 해당 테마의 <mark>prefix</mark>가 무엇인지 알아야합니다.*** ## 3. 테마 변경 방법 기본테마 대신 다른 테마 파일을 사용하는 방법에는 두 가지 방법이 있습니다. ### 정적 테마 변경 시트 생성시점에서 default 대신에 미리 지정한 테마를 사용하게 끔 설정하는 방법입니다. 주로 공통 속성을 설정하는 [CommonOptions](/docs/static/common-options)에서 [Style](/docs/props/cfg/style) 속성을 통해 설정하게 됩니다. ex) ```html <!--//설정할 theme에 해당하는 css 파일이 link테그를 통해 화면에 추가되어 있어야 합니다. --> <link rel=\"stylesheet\" type=\"text/css\" href=\"../ibsheet/css/default/main.css\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"../ibsheet/css/mint/main.css\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"../ibsheet/css/simple/main.css\"> <script> IBSheet.CommonOptions = { Cfg: { //사용할 css파일의 prefix 명 Style: \"IBMT\", //mint테마 } ... } </script> ``` ### 동적 테마 변경 이미 시트가 생성된 상태(`default` 테마가 적용된)에서 다른 테마로 교체하는 방법입니다. ```javascript // prefix , css파일 경로 , 즉시반영여부 sheet.setTheme(\"IBMT\", \"../assets/ibsheet/css/mint/main.css\",1) ``` ## 4. 시트 부위별 class 명 다음은 각 부분을 수정하기 위핸 클래스명 입니다.(`default` 테마 기준) ***전체영역*** |클래스명|역할| |---|---| |`.IBMain`|전체 폰트 사이즈,유형(family) **개별설정이 없으면 이 설정을 상속받음**| |`.IBType`|전체 셀의 padding **개별 설정이 없으면 이 설정을 상속받음**| ***헤더영역*** |클래스명|역할| |---|---| |`.IBHeaderRowHeight`|헤더 행의 높이| |`.IBCellHeader`|헤더 행의 배경색,border 색(border가 없는 경우 `.IBCellBase`설정을 상속)| |`.IBHeaderText`|헤더 행의 font(글자색,사이즈, 유형)| |`.IBColorHoveredCellHeader`|헤더 셀 Hover시 색상| ***데이터영역*** |클래스명|역할| |---|---| |`.IBRowHeight`|데이터 행 높이| |`.IBCellBase`|데이터 셀 border| |`.IBHoverRowBackground`|데이터 행 Hover 시 배경 색상| |`.IBHoverRowBorder`|데이터 행 Hover 시 border 색상| |`.IBColorHoveredCell`|데이터 셀 Hover 시 배경 색상| |`.IBHoverCellBorder`|데이터 셀 Hover 시 border 색상| |`.IBFocusRowBackground`|데이터 행 focus 시 배경 색상| |`.IBFocusRowBorder`|데이터 행 focus 시 border 색상| |`.IBColorFocusedCell`|데이터 셀 focus 시 배경 색상| |`.IBFocusCellBorder`|데이터 셀 focus 시 border 색상| |`.IBColorSelected`|데이터 셀 select 시 배경 색상| |`.IBColorReadOnly`|편집 불가능한 셀의 배경색| |`.IBEditCellBorder`|편집 input 객체 border| |`.IBColorDefault`|기본 행의 배경색| |`.IBColorAlternate`|짝수 행의 배경색 *(cfg)[Alternate](/docs/props/cfg/alternate) 속성에 영향을 받음*| **기타 영역** |클래스명|역할| |---|---| |`.IBInfoRow`|건수정보 표시행 **InfoRow**| |`.IBFormulaRow`|합계행| |`.IBNoDataRow`|NoData 행 *\"조회된 데이터가 없습니다\" 표시행*| |`.IBHeadRow`|상단 고정행 *(row)Color나 (row)TextColor 속성을 통해 설정할 것을 권함*| |`.IBFootRow`|하단 고정행 (FormulaRow 포함) *(row)Color나 (row)TextColor 속성을 통해 설정할 것을 권함*| |`.IBDialogButton, u.IBSheetButton`|버튼 타입 설정시 button 디자인 <!-- **개별 버튼 디자인을 설정하려면 (col)[ButtonClass](/docs/props/col/button-class)내용을 참고** -->| |`.IBTipMain,.IBTipBody`|풍선도움말 (툴팁)| |`.IBHintMain,.IBHintOuter`|힌트| |`.IBMessage`|메세지 **[shoMessage()](/docs/funcs/core/show-message),[showMessageTime()](/docs/funcs/core/show-message-time)을 통해 보여지는 메세지 상자**| |`.IBEnumMenuList`|드롭 다운 리스트(Enum타입)의 item 크기 (main.css에 없을 경우 추가하여 사용)| |`.IBEnumMenuListText`|드롭 다운 리스트(Enum타입)의 item font설정 (main.css에 없을 경우 추가하여 사용)| **각종 icon** |클래스명|역할| |---|---| |`.IBSort1Right,.IBSort2Right,.IBSort3Right`|정렬 icon| |`.IBDateRight`|달력 icon| |`.IBEnumLeft, .IBEnumRight, .IBEnumTop, .IBEnumBottom`|Enum icon| |`.IBBool0,IBBool1,IBBool0RO,IBBool1RO`|체크박스 icon *순서대로 [편집가능 언체크, 편집가능 체크, 편집불가능 언체크, 편집불가능 체크]*| |`.IBBool2,.IBBool3,IBBool2RO,.IBBool3RO`|라디오 icon *순서대로 [편집가능 언체크, 편집가능 체크, 편집불가능 언체크, 편집불가능 체크]*| ***페이지네비게이션*** |클래스명|역할| |---|---| |`.IBToolPagerFirst, .IBToolPagerFirst1`|첫번째 페이지로 이동 버튼| |`.IBToolPagerPrev, .IBToolPagerPrev1`|이전 페이지로 이동 버튼| |`.IBToolPagerNext, .IBToolPagerNext1`|다음 페이지로 이동 버튼| |`.IBToolPagerLast, .IBToolPagerLast1`|마지막 페이지로 이동 버튼| |`.IBPagerEdit > div`|현재 페이지 표시 객체| ## 5. Size 속성에 따른 className 간혹 기본적인 시트의 크기(글자,행의 높이 등)를 늘리거나 줄이고 싶은 경우가 있습니다. 가령 좁은화면에서 많은 내용을 보기 위해 글자의 크기나, 행의 높이를 줄이거나, 혹은 시인성을 높이기 위해 이러한 것을 기존값보다 늘리고자 하는 경우인데 이럴 때 [Size](/docs/props/cfg/size) 속성을 사용하게 됩니다. [Size](/docs/props/cfg/size) 속성은 기본값(Normal) 보다 더 크게하는 High,Big 이나 더 작게하는 Low,Small 등이 값을 설정하게 되는데,이러한 속성 값에 대응하기 위해 css 파일에도 별도로 클래스를 두고 있습니다. 아래는 simple 테마 main.css 파일 내용 일부입니다. ```css .IBSPRowHeight{height:30px} /* 기본행의 높이 */ .IBSPHigh .IBSPRowHeight{height:40px} /* Size가 High인 경우 행의 높이 */ .IBSPBig .IBSPRowHeight{height:50px} /* Size가 Big인 경우 행의 높이 */ .IBSPLow .IBSPRowHeight{height:27px} /* Size가 Low인 경우 행의 높이 */ .IBSPSmall .IBSPRowHeight{height:22px} /* Size가 Small인 경우 행의 높이 */ ``` ## 6. 트리 디자인 변경하기 IBSheet는 브라우저 확대/축소에 대응하기 위해 아이콘 이미지를 모두 base64의 svg 형태로 제공하고 있습니다. 따라서 트리의 노드 아이콘, 연결선등의 디자인을 변경하고자 하시는 경우에는 css파일에서 해당 svg 문자열을 찾아 모두 변경하셔야 합니다. 트리를 구성하는 각 svg 문자열은 아래와 같습니다. |<span style='word-break:keep-all'>이미지</span>|설명|base64 코드| |---|---|---| ||<span style='word-break:keep-all'>가로연결선</span>|<div style='width:900px;word-break:break-all'>data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxMjggMSI+DQo8bGluZSB4MT0iMCIgeTE9IjAuNSIgeDI9IjEyOCIgeTI9IjAuNSIgc3Ryb2tlPSIjQ0REOEU0Ii8+DQo8L3N2Zz4NCg==</div>| ||<span style='word-break:keep-all'>세로연결선</span>|<div style='width:900px;word-break:break-all'>data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAyIDEyOCI+DQo8bGluZSB4MT0iMC41IiB5MT0iMCIgeDI9IjAuNSIgeTI9IjEyOCIgc3Ryb2tlPSIjQ0REOEU0Ii8+DQo8L3N2Zz4NCg==</div>| |![접힌상태](/assets/imgs/treeIconPlus.png \"접힌상태\")|<span style='word-break:keep-all'>접힘 아이콘([NoTreeLines](/docs/props/cfg/no-tree-lines):0)</span>|<div style='width:900px;word-break:break-all'>data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0wIDBoMzIwdjMyMEgweiIvPjxwYXRoIGZpbGw9IiM0MTRENUMiIGQ9Ik0zMDAgMjB2MjgwSDIwVjIwaDI4MG0yMC0yMEgwdjMyMGgzMjBWMHoiLz48cGF0aCBmaWxsPSIjNDE0RDVDIiBkPSJNODIuNSAxNDcuNWgxNTV2MjVoLTE1NXoiLz48cGF0aCBmaWxsPSIjNDE0RDVDIiBkPSJNMTQ3LjUgODIuNWgyNXYxNTVoLTI1eiIvPjwvc3ZnPg==</div>| |![펼친상태](/assets/imgs/treeIconMinus.png \"펼친상태\")|<span style='word-break:keep-all;'>펼침 아이콘([NoTreeLines](/docs/props/cfg/no-tree-lines):0)</span>|<div style='width:900px;word-break:break-all'>data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0wIDBoMzIwdjMyMEgweiIvPjxwYXRoIGZpbGw9IiM0MTRENUMiIGQ9Ik0zMDAgMjB2MjgwSDIwVjIwaDI4MG0yMC0yMEgwdjMyMGgzMjBWMHoiLz48cGF0aCBmaWxsPSIjNDE0RDVDIiBkPSJNODIuNSAxNDcuNWgxNTV2MjVoLTE1NXoiLz48L3N2Zz4=</div>| |![불가](/assets/imgs/treeIconX.png \"불가\")|<span style='word-break:keep-all;'>드래그 드롭 불가</span>|<div style='width:900px;word-break:break-all'>data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0Y3NDYyMyIgc3Ryb2tlLXdpZHRoPSIzMCIgZD0iTTI2MCA2MEw2MCAyNjBNMjYwIDI2MEw2MCA2MCIvPjwvc3ZnPg==</div>| |![위로삽입](/assets/imgs/treeIconAbove.png \"위로삽입\")|<span style='word-break:keep-all;'>드래그 드롭시 위로 삽입</span>|<div style='width:900px;word-break:break-all'>data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxwYXRoIGZpbGw9IiM0OUJBQkYiIGQ9Ik0yMCA1Mi4xMmgxNzguMjJWMi4zNmw5Ny40NCA3NS4xOS05Ny40NCA3NS4xOVYxMDNINzAuOTJ2NDguNjZMMjAgMTgzLjQ2VjUyLjEyeiIvPjwvc3ZnPg==</div>| |![자식으로](/assets/imgs/treeIconRight.png \"자식으로\")|<span style='word-break:keep-all;'>드래그 드롭시 자식으로 삽입</span>|<div style='width:900px;word-break:break-all'>data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxwYXRoIGZpbGw9IiMzRDU1NzUiIGQ9Ik0xNDQuMTggMjgwdi02OS40Nkg0My4xNlYxMDkuNDhoMTAxLjAyVjQwbDEzMi42OCAxMjAtMTMyLjY4IDEyMHoiLz48L3N2Zz4=</div>| |![아래로삽입](/assets/imgs/treeIconBelow.png \"아래로삽입\")|<span style='word-break:keep-all;'>드래그 드롭시 아래로 삽입</span>|<div style='width:900px;word-break:break-all'>data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxwYXRoIGZpbGw9IiM0OUJBQkYiIGQ9Ik0yNC4zMzUgMTM3Ljc4OGw1MC45MiAzMS44djQ4LjY2aDEyNy4zdi00OS43NGw5Ny40MzkgNzUuMTktOTcuNDM5IDc1LjE5di00OS43NjFIMjQuMzM1VjEzNy43ODh6Ii8+PC9zdmc+</div>| |![접힌상태](/assets/imgs/treeIconFold.png \"접힌상태\")|<span style='word-break:keep-all;'>접힘 아이콘([NoTreeLines](/docs/props/cfg/no-tree-lines):1)</span>|<div style='width:900px;word-break:break-all'>data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQxNEQ1QyIgc3Ryb2tlLXdpZHRoPSI1MCIgZD0iTTEwMCA2MGwxMDAgMTAwLTEwMCAxMDAiLz48L3N2Zz4=</div>| |![펼친상태](/assets/imgs/treeIconExpand.png \"펼친상태\")|<span style='word-break:keep-all;'>펼침 아이콘([NoTreeLines](/docs/props/cfg/no-tree-lines):1)</span>|<div style='width:900px;word-break:break-all'>data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQxNEQ1QyIgc3Ryb2tlLXdpZHRoPSI1MCIgZD0iTTYwIDEwMGwxMDAgMTAwIDEwMC0xMDAiLz48L3N2Zz4=</div>| ### Since |product|version|desc| |---|---|---| |core|8.0.0.0|기능 추가|",
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/design.html"
      },
      {
        "cid": 925,
        "sid": "dialog",
        "name": "dialog",
        "label": "Dialog",
        "data": {
          "body": "> 지정한 위치에 레이어팝업 형식의 다이얼로그를 생성합니다. > 시트 안에서 다이얼로그 생성시 sheet.showDialog() 함수를 사용하고, 시트 외부에서는 IBSheet.showDialog() 를 통하여 사용하실 수 있습니다. ## 사용 가능한 속성 |Name|Type|Description| |---|---|---| |Head|`string`|다이얼로그 상단에 들어갈 타이틀| |Foot|`string`|다이얼로그 하단에 들어갈 타이틀| |Header|`string`|**시트의 특정 셀 위에 다이얼로그를 생성할 때 해당 셀이 다이얼로그의 헤더가 됩니다**. 이 속성은 해당 셀에 보여질 문자열(다이얼로그가 닫히면 자동으로 사라짐)을 설정합니다. 아래 속성 설명에서 헤더라 함은 모두 이 셀을 의미합니다.| |HeadClose|`boolean`|Head가 설정되어 있을 때, 헤더 타이틀 우측편에 닫기 위한 X 버튼을 보여줄지 여부| |CanFocus|`boolean`|다이얼로그 생성시 포커스를 갖게 할 것인지 여부| |Modal|`boolean`|다이얼로그 생성시 화면에 다른 객체에 접근하지 못하게끔 합니다.| |Body|`string`|다이얼로그 안에 구성할 HTML 내용을 설정합니다.| |Wrap|`boolean`|다이얼로그 내부의 내용이 다이얼로그 너비보다 큰 경우 줄넘김 시킬지 여부를 설정합니다.| |MaxHeight|`number`|헤더를 제외한 다이얼로그의 최대 높이를 설정합니다. MaxHeight값보다 다이얼로그 내부의 내용이 크면 세로 스크롤바가 생성됩니다.| |MinHeight|`number`|헤더를 제외한 다이얼로그의 최소 높이를 설정합니다.| |MaxWidth|`number`|다이얼로그의 최대 너비 다이얼로그 안에 내용이 MaxWidth보다 크면 overflow-x:hidden으로 감춰집니다. 0으로 설정하면 다이얼로그 안에 셀의 너비에 맞게 자동으로 크기가 결정됩니다. Position속성에 Width가 설정되어 있는 경우 (Position)Width 값이 우선 적용 됩니다.| |MinWidth|`number`|다이얼로그의 최소 너비 0으로 설정하면 다이얼로그 안에 셀의 너비에 맞게 자동으로 크기가 결정됩니다. Position속성에 Width가 설정되어 있는 경우 (Position)Width 값이 우선 적용 됩니다.| |Area|`object`|다이얼로그를 브라우저 내에 특정 범위 안에서만 보여지게끔 합니다. (지정한 영역을 넘어서 창크기를 조절하거나 다이얼로그의 위치를 이동할 수 없음) 영역은 X, Y (영역의 시작점)과 Width, Height(영역의 크기)로 설정합니다. ex ) { X:100, Y:100, Width:400, Height:500 }| |Position|`object`|다이얼로그의 생성 위치를 설정합니다.([Position appendix](/docs/appx/position)을 참고)| |HeadDrag|`boolean`|다이얼로그의 헤드(헤더아님)를 드래그하여 다이얼로그의 위치를 변경할 지 여부를 설정합니다.| |Shadow|`boolean`|다이얼로그에 우측아래로 그림자를 표현할 지 여부| |ShadowHeader|`boolean`|다이얼로그 헤더의 우측아래로 그림자를 표현할 지 여부| |CloseOut|`boolean`|마우스커서가 다이얼로그 밖으로 나가거나 다이얼로그 헤더 위로 가면 다이얼로그를 닫습니다.| |CloseTimeout|`number`|다이얼로그에서 커서가 벗어났을 때 지정한 시간이 경과시 닫습니다(기본값 300, 밀리초 단위)| |CloseClickHeader|`boolean`|다이얼로그 헤더를 클릭하면 다이얼로그를 닫습니다.| |CloseAfter|`number`|다이얼로그가 오픈 된 이후 특정 시간 경과 후 자동으로 다이얼로그를 닫습니다.(밀리초 단위)| |CloseClick|`boolean`|다이얼로그를 클릭시 다이얼로그를 닫습니다.| |ZIndex|`number`|해당 다이얼로그가 갖게 될 z-index를 설정합니다.(default:258)| ## 다이얼로그 객체 showDialog()의 리턴 값이나 sheet.Dialog 를 통해 현재 생성된 다이얼로그에 접근할 수 있습니다. 이와 같은 Dialog 객체는 다음과 같은 속성과 함수를 갖습니다. ### Property Tag : 다이얼로그안의 HTML객체를 갖고 있습니다. ```javascript //Tag 사용 예 var dialogObj = IBSheet.showDialog(...); var x = dialogObj.Tag.querySelector(\"#dlgInput\").value; ``` ### method Close() : 선택한 다이얼로그 창을 닫습니다. ```javascript //Close() 사용 예 dialogObj = sheet.Dialog; // 열려있는 Dialog 객체를 시트로 부터 얻음 dialogObj.Close(); // Dialog 객체를 닫음. ``` ![dialog](/assets/imgs/dialog0.png \"다이얼로그\") [아래 Example 다이얼로그 사용 예] ### Example ```javascript function openDlg() { var dialog = { Header: \"계산 중\", // 다이얼로그를 오픈한 셀에 표시될 글자 Head:\"환율계산기\", // 다이얼로그 상단 타이틀 Foot: \"ibleaders co.,ltd\", // 다이얼로그 하단 타이틀 MinWidth:0, // 다이얼로그 너비 Body: \"<div>\" // 다이얼로그 안 내용 + \"<select id='inputUnit' onchange='calc()'>\" + \"<option value='USD'>USD</option><option value='JPY'>JPY</option>\" + \"<option value='EUR'>EUR</option><option value='CNY'>CNY</option>\" + \"<option value='KRW'>KRW</option>\" + \"</select>\" + \" <input type='text' id='inputMoney' class='number' onchange='calc()'/>\" + \"</div> \" + \"<div style='text-align: center;'><i class='fas fa-equals'></i></div>\" + \"<div>\" + \"<select id='outputUnit' onchange='calc()'>\" + \"<option value='USD'>USD</option><option value='JPY'>JPY</option>\" + \"<option value='EUR'>EUR</option><option value='CNY'>CNY</option>\" + \"<option value='KRW'>KRW</option></select>\" + \" <input type='text' id='outMoney' class='number readonly' />\" + \"</div>\" + \"<div style='text-align:center;padding:10px 0 5px 0;'>\" + \"<button type='button' onclick='confirmCalc()'>확인</button>\" + \"</div>\" }; sheet.showDialog({row : sheet.getRowById(\"AR5\"), col: \"AMOUNT06\", dialog: dialog}); } // 확인 버튼 클릭시 function confirmCalc() { var dd = sheet.Dialog; var v = dd.Tag.querySelector(\"#outMoney\").value; dd.Row[dd.Col] = v; sheet.refreshCell(dd.Row,dd.Col); dd.Close(); } // 다이얼로그 내에 값 변경시 function calc() { var dd = sheet.Dialog; var inpU = dd.Tag.querySelector(\"#inputUnit\"); var outU = dd.Tag.querySelector(\"#outputUnit\"); var inpV = dd.Tag.querySelector(\"#inputMoney\"); var outV = dd.Tag.querySelector(\"#outMoney\"); if (inpV.value == \"\") return; var baseCurrency = inpV.value; switch (inpU.value) { case 'EUR': baseCurrency = parseFloat(inpV.value) * 1.13546; break; case 'JPY': baseCurrency = parseFloat(inpV.value) * 0.00903; break; case 'CNY': baseCurrency = parseFloat(inpV.value) * 0.14929; break; case 'KRW': baseCurrency = parseFloat(inpV.value) * 0.00089; break; } switch(outU.value) { case 'EUR': outV.value = baseCurrency * 0.8807; break; case 'JPY': outV.value = baseCurrency * 110.803; break; case 'CNY': outV.value = baseCurrency * 6.6984; break; case 'KRW': outV.value = baseCurrency * 1118.15; break; case 'USD': outV.value = baseCurrency * 1; break; } } ```",
          "see": [
            {
              "label": "showDialog method",
              "url": "/docs/funcs/core/show-dialog"
            },
            {
              "label": "showDownloadDialog method",
              "url": "/docs/funcs/dialog/show-download-dialog"
            },
            {
              "label": "showEditDialog method",
              "url": "/docs/funcs/dialog/show-edit-dialog"
            },
            {
              "label": "showFindDialog method",
              "url": "/docs/funcs/dialog/show-find-dialog"
            },
            {
              "label": "showPivotDialog method",
              "url": "/docs/funcs/dialog/show-pivot-dialog"
            },
            {
              "label": "showUploadDialog method",
              "url": "/docs/funcs/dialog/show-upload-dialog"
            },
            {
              "label": "showDialog static",
              "url": "/docs/static/show-dialog"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/dialog.html"
      },
      {
        "cid": 926,
        "sid": "event-error",
        "name": "event-error",
        "label": "event error 객체",
        "data": {
          "body": "> 이벤트 호출 시 에러가 발생하면 에러에 대한 정보를 담고 있는 error 객체 > onBeforeChange, onResultMask 이벤트 호출 시 에러가 발생되면 error 객체에 에러 정보가 설정됩니다. ### Properties |Name| Type | Description | |----------|-----|-------| |Action |`string`|에러가 발생하게 된 동작| |Changes |`object`|셀 값을 변경 시도 시, 사용자의 시도와 다른 값이 반환되는 경우에 대한 정보를 담은 배열(ex [[message1, row1, col1],[message2, row2, col2],...] )| |Errors |`object`|셀에 들어갈 수 없는 값을 설정 시도하였을때 해당 셀의 위치 정보와 에러 메시지 정보를 담은 배열(ex [[message1, row1, col1],[message2, row2, col2],...] )| ### 설정될 수 있는 Action 값 |Name| Description | |-----------------|-----------| |Clear|셀 값을 클리어하는 경우| |Move|포커스된 영역의 셀들을 이동 시| |Copy|포커스된 영역의 셀들을 복사 시| |Fill|셀 값에 대한 자동완성 실행하는 경우| |Paste|클립보드의 값을 셀에 붙여넣기를 시도하는 경우| |Formula|Formula 계산을 시도하는 경우| |Validate|설정된 마스킹 옵션에 따라 유효성 검사를 실행하는 경우|",
          "see": [
            {
              "label": "onBeforeChange event",
              "url": "/docs/events/on-before-change"
            },
            {
              "label": "onResultMask event",
              "url": "/docs/events/on-result-mask"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/event-error.html"
      },
      {
        "cid": 927,
        "sid": "fastload-constraints",
        "name": "fastload-constraints",
        "label": "가상 스크롤 조회에 대한 제약 사항",
        "data": {
          "body": "> SearchMode 설정이 0, 3일 가상 스크롤 방식을 지원합니다. > 이 때, 일부 타입과 기능을 사용하는데 있어 제약이 있습니다. ## 현재 사용할 수 없는 기능 |Feature|Description| |---|---| |`피벗`|피벗된 시트가 아닌 일반 데이터 시트는 사용 가능| |`Cfg.NoVScroll`|시트의 높이를 데이터의 높이만큼 지정하는 옵션이므로 사용불가| ## 권장하지 않는 타입(데이터행의 높이에 동적으로 영향을 주어 스크롤 시 문제가 될 수 있음) - Lines - Html - Img - Icon - Button",
          "see": [
            {
              "label": "SearchMode cfg",
              "url": "/docs/props/cfg/search-mode"
            },
            {
              "label": "Type appendix",
              "url": "/docs/appx/type"
            },
            {
              "label": "Type col",
              "url": "/docs/props/col/type"
            },
            {
              "label": "Type cell",
              "url": "/docs/props/cell/type"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.3|트리 및 그룹 기능 지원|"
        },
        "url": "docs/appx/fastload-constraints.html"
      },
      {
        "cid": 928,
        "sid": "file-type-upload",
        "name": "file-type-upload",
        "label": "File Type 업로드",
        "data": {
          "body": "> 열 또는 셀의 [Type](/docs/props/type)을 `File`로 설정 시 파일 업로드를 할 수 있습니다. > Input태그가 각 셀마다 생성되며, 사이드 버튼 클릭 시 업로드 창이 열리고 파일을 선택할 수 있습니다. > 시트에 추가된 파일은 저장시 서버로 전송되며, 저장 로직 처리 후 파일이름과 저장경로를 응답하면 파일을 다운로드 할 수 있습니다. > 파일 업로드(추가, 편집) 후에는 해당 파일을 클릭해도 서버호출(다운로드)이 일어나지 않습니다. > [Path](/docs/props/cell/path) 혹은 [FilePath](/docs/props/cfg/export)가 설정된 경우에만 셀에 데이터가 표시됩니다. ## 1. 조회 > 조회 데이터는 `(Col) Name : 파일이름`, `(Col) Name + \"Path\" : \"파일 저장경로\"`의 내용으로 조회해야 합니다. > `Cfg.Export.FilePath` 에 파일 저장 경로 설정시 `Path`를 설정하지 않아도 파일 다운로드 가능 합니다. ``` 예) 컬럼 설정 정보 Cols:[{\"Header\": \"파일\",\"Type\": \"File\",\"Name\": \"lblist\",\"Width\": 300,\"Align\": \"Center\"}] 조회 데이터 {\"data\": [{\"lblist\":\"file.xlsx\", \"lblistPath\":\"/customer-sample/\", \"lblistAlias\":\"파일.xlsx\"}]} ``` ## 2. 저장 > 저장은 [doSave()](/docs/funcs/core/do-save)를 이용하거나 ajax 통신 후 결과를 [applySaveResult()](/docs/funcs/core/apply-save-result)를 이용하여 시트에 반영 합니다. #### ajax 로 저장하기 ```javascript var url = '../jsp/samples/customer/file_save.jsp'; var saveData = sheet.getSaveJson({saveMode:2, formData: true}); //시트의 데이터와 file를 추출 $.ajax({ url: url, data: saveData, method: \"POST\", enctype: 'multipart/form-data', contentType: false, processData: false, cache: false, success:function(data){ var result = data.IO.Result; var fileData = data.IO.data; //결과를 시트에 반영한다. //저장처리 이후 파일 다운로드 동작을 하려면 fileData에 값을 전달해야 한다. sheet.applySaveResult(result, null, null, fileData); } }); ``` ### 저장 후 시트에서 서버로 전송하는 저장 데이터 규격 - 파일 타입 컬럼데이터는 `rowID$colName: (binary)` 형태로 업로드 된 파일이 서버로 전송되며 저장 데이터에서는 제외됩니다. ```jsp Data: { \"data\":[ {\"id\":\"AR1\", \"STATUS\":\"Changed\"}, {\"id\":\"AR2\", \"STATUS\":\"Changed\"}, ] } AR1$file1: (binary) AR2$file: (binary) ``` ### 저장 작업 후 서버 응답 데이터 규격 ```javascript // 서버에서 시트로 보낼 응답 규격 // 성공 시 {\"IO\": { \"Result\": 0 , \"Message\": \"저장 되었습니다.\", \"data\":[ //저장처리 이후 파일 다운로드 하려면 필요 {\"file\":\"file.xlsx\", \"filePath\":\"/customer-sample/\", \"id\":\"AR7\"}, {\"file\":\"file1.xlsx\", \"filePath\":\"/customer-sample/\", \"id\":\"AR4\"}, ] } } // 실패 시 Result 값을 음수로 설정. {\"IO\": {\"Result\": -9, Meassage:\"오류내용...\" }} ``` ### 서버 예제 ```jsp <%@ page language=\"java\" contentType=\"application/json; charset=UTF-8\" pageEncoding=\"UTF-8\"%> <%@ page import=\"java.util.*, javax.servlet.*, com.ibleaders.utility.ib_json.*\"%> <%! // 파일 이름 가지고 오는 함수 예시 public String getFilename(Part part) { for (String cd : part.getHeader(\"content-disposition\").split(\";\")) { if (cd.trim().startsWith(\"filename\")) { String filename = cd.substring(cd.indexOf('=') + 1).trim().replace(\"\\\"\", \"\"); return filename.substring(filename.lastIndexOf('/') + 1).substring(filename.lastIndexOf('\\\\') + 1); } } return null; } %> <% request.setCharacterEncoding(\"utf-8\"); response.setContentType(\"application/json\"); response.setStatus(200); boolean process = false; JSONArray jsonArr = new JSONArray(); try { Collection<Part> parts = request.getParts(); for(Part part : parts){ if (part.getHeader(\"Content-Disposition\").contains(\"filename=\")) { // 파일에 대한 처리 JSONObject file = new JSONObject(); String fileParam = part.getName(); String id = fileParam.split(\"\\\\$\", 2)[0]; String col = fileParam.split(\"\\\\$\", 2)[1]; String filename = getFilename(part); String filepath = \"C:/myPath/temp/\"; part.write(filepath + filename); file.put(\"id\", id); file.put(col, filename); file.put(col + \"Path\", filepath); jsonArr.add(file); } else { // 다른 값에 대한 처리 String colName = part.getName(); String value = request.getParameter(part.getName()); } } process = true; } catch(Exception ex) { System.out.println(ex.getMessage()); process = false; } JSONObject result = new JSONObject(); JSONObject IO = new JSONObject(); try { int res = process ? 0 : -9; // Result 오류에 관해서는 음수값을 셋팅한다. -1 ~ -7 까지는 시트가 사용하는 코드이므로 이 값은 피한다. IO.put(\"Result\", res); IO.put(\"data\", jsonArr); result.put(\"IO\", IO); // 통신 관련 객체 } catch(Exception ex) { result.put(\"Exception\", ex); } out.print(result); %> ```",
          "see": [
            {
              "label": "type appendix",
              "url": "/docs/appx/type"
            },
            {
              "label": "doSave method",
              "url": "/docs/funcs/core/do-save"
            },
            {
              "label": "getSaveJson method",
              "url": "/docs/funcs/core/get-save-json"
            },
            {
              "label": "applySaveResult method",
              "url": "/docs/funcs/core/apply-save-result"
            },
            {
              "label": "Alias cell",
              "url": "/docs/props/cell/Alias"
            },
            {
              "label": "Path cell",
              "url": "/docs/props/cell/Path"
            },
            {
              "label": "onBeforeFileDown event",
              "url": "/docs/events/on-before-file-down"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.5|기능 추가|"
        },
        "url": "docs/appx/file-type-upload.html"
      },
      {
        "cid": 929,
        "sid": "format-3",
        "name": "format",
        "label": "Format",
        "data": {
          "body": "> 데이터가 화면에 보여질 형식을 정의합니다. > 가령 Type이 \"Int\"이고 Format이 \"#,###원\"인 경우, 실제값이 15000이라면 시트에는 **15,000원** 으로 표시됩니다. > ***[타입](./type)별로 정의되는 구문이 다르며***, 실제 셀값은 변경되지 않습니다.(저장작업을 통해 서버로 전송시 실제 값(포맷이 적용되지 않은 값)이 전송됩니다.) >`\"결과: #,###원\"처럼 Format을 사용하며 ':' 등 특수문자를 사용하시는 경우 특수문자 앞에 '\\\\'를 붙여주셔야 합니다.` --- ## 1. 타입이 Text, Lines 인 경우 ### 구분자로 연결된 문자열 형식으로 실제 값의 앞,뒤에 붙이고 싶은 문자를 설정하거나,원래 문자열 중 일부 글자를 다른 글자로 변경할수 있습니다. Object형식을 사용하는 경우에는 Key:Value 형식으로 실제 값과 그에 대해 보여질 값으로 설정 하실 수 있습니다. **1) 구분자 활용 방식** * 첫문자를 구분자로 사용하여 구분된 설정 값들의 나열로 정의됩니다. * 구분자로 사용된 문자는 설정할 내용에 포함되선 안됩니다. ### Syntax ```javascript // 구분자 활용 방식 '|'이 구분자 Format: \"|LetterType|Prefix|Postfix|Search|Flags|Replace\" ``` |Value|Description| |---|---| |LetterType|대소문자를 구분할지 여부 및 기타 설정 0 : 대소문자 구분 없음 1 : 영문을 소문자로 표현 2 : 영문을 대문자로 표현 3 : 각 지역 문자의 소문자 사용 4 : 각 지역 문자의 대문자 사용| |Prefix|셀 값 앞에 붙일 문자열| |Postfix|셀 값 뒤에 붙일 문자열| |Search|정규 표현식으로 찾을 문자열로, Replace 구문에 있는 값으로 대체되어 보일 문자열| |Flags|자바스크립트 정규식의 Flag(i,g,m 사용 가능) *i : 대소문자 구분 안함, g : 처음부터 끝까지 모두 변경 , m : 줄넘김 포함 검색*| |Replace|Search 구문으로 찾은 문자열을 대체할 문자열| ### Example *열 설정* ```javascript options.Cols = [ { Name:\"sTitle\", Type:\"Text\", //셀의 값을 모두 대문자로 보여줍니다. 또한 앞에 '☜☜☜', 뒤에 '☞☞☞' 문자를 추가하고, 셀 값에 있는 \"=\" 문자열을 \":::\" 로 대체합니다. Format:\"|2|☜☜☜|☞☞☞|=|ig|:::\" }, ... ] ``` *조회 데이터* ```json {\"Data\":[ {... \"sTitle\":\"붉은 악마=Red Devils\", ...} ]} ``` *시트내에 보여지는 데이터* ![보여지는 데이터](/assets/imgs/textFormat2.png \"보여지는 데이터\") **2) 객체 방식** * JSON 형태로 (문자열도 가능), 실제값과 화면에 보여질 문자열의 쌍으로 구성됩니다. * 영문자를 사용하는 경우 대소문자를 **반드시** 구분해야하며, 화면에 보여질 값에 HTML 코드를 사용할 수 있습니다. ### Syntax ```javascript // 객체 방식 Format: \"{'Key1':'Value1', 'Key2':'Value2', 'key3':'Value3' ... }\" ``` **[구분자 활용 방식]** |Value|Description| |---|---| |Key|셀의 실제 값(서버에서 조회되거나 저장시 서버로 전송됨)| |Value|Data에 설정된 값을 대체할 문자열(화면에 보여질 문자)| ### Example *열 설정* ```javascript options.Cols = [ { Name:\"sCountry\", Type:\"Text\", // 셀 값이 A인 경우 한국으로, B인 경우 일본으로, C인 경우 중국으로 대체되어 화면에 보입니다. Format:\"{'A':'<b>한국</b>','B':'일본','C':'중국'}\" } ... ] ``` *조회 데이터* ```json {\"Data\":[ {... \"sCountry\":\"A\", ...} ]} ``` *실제 보여지는 데이터* ![보여지는 데이터](/assets/imgs/textFormat4.png \"보여지는 데이터\") ***Text타입에서 주민등록번호나, 카드번호와 같이 숫자와 구분자로 연결된 형식의 Format을 적용하고자 하실 경우에는 [CustomFormat](/docs/props/col/custom-format)속성을 사용하세요.*** --- ## 2. 타입이 Date 인 경우 * 예약어의 조합 * y(년), M(월), d(일), H(시간), m(분), s(초)등의 예약어와 예약어를 제외한 문자를 조합해서 사용 가능합니다. * 포맷이 비어있는 경우 yyyy/MM/dd 형식을 기본값으로 사용합니다. * 년도는 yyyy(4자리 표현), yy(마지막 2자리 표현. 값이 2018이면 18, 2008이면 08로 표시), y(마지막 1~2자리 표현. 값이 2018이면 18, 2008이면 8로 표시)가 사용가능합니다. * 나머지 예약어는 2자리 표현과 1,2자리 표현을 사용할 수 있습니다. 예를 들어 월의 경우 MM(2자리 표현. 값이 12이면 12, 08이면 08로 표시), M(1~2자리 표현. 값이 12이면 12, 08이면 8로 표시)이 사용 가능합니다. ### Syntax ```javascript // 예약어의 조합 Format: \"yyyy.MM.dd\" ``` ### Example *열 설정* ```javascript options.Cols = [ { \"Name\" : \"startDate\", \"Type\" : \"Date\", \"Format\" : \"yyyy.MM.dd\", //화면에 보이는 데이터의 형식 \"EditFormat\" : \"dd-MM-yyyy\",//편집시 사용자에게 보여질 데이터 형식 \"DataFormat\" : \"yyyyMMdd\" //서버에서 데이터를 받거나 보낼때 데이터 형식 } ... ] ``` *조회 데이터* ```json {\"Data\":[ {... \"startDate\":\"20190725\", ...} //2019년 7월 25일 ]} ``` *실제 보여지는 데이터* ![보여지는 데이터](/assets/imgs/dateFormat1.png \"보여지는 데이터\") *편집시 보여지는 데이터* ![편집시 보여지는 데이터](/assets/imgs/dateFormat2.png \"편집시 보여지는 데이터\") ***Date타입에서는 [DataFormat](/docs/props/col/data-format), [EditFormat](/docs/props/col/edit-format) 속성을 통해 서버에서 갖고올 데이터 형식이나 편집시 사용자에게 보여질 형식도 설정할 수 있습니다.*** ***Date타입과 그에 따른 포맷들(Format,EditFormat,DateFormat)을 [Extend](/docs/props/col/extend) 속성을 통해 한번에 정의할 수 있습니다.*** *Extend:IB_Preset 사용 설정* ```javascript options.Cols = [ { \"Name\" : \"startDate\", \"Extend\" : IB_Preset.YMD // Type, Format, EditFormat등이 미리 정의된 변수 사용 } ... ] ``` --- ## 3. 타입이 Int, Float 인 경우 * 예약어의 조합 * \"0\" : 값이 없는 경우 0을 기본값으로 채웁니다. * \"#\" : 값이 있을때만 표현됩니다. * \"%\" : 값에 100을 곱한 값이 표현됩니다. %는 #또는 0과 같이 사용해야합니다. ex: \"#,##0.##%\" 100을 곱한 계산값이 아닌 원래값의 뒤에 \"%\"기호만 추가하고자 하실 때는,`\"#,###\\\\%\"` 로 설정하시면 됩니다. 위의 예약어와 예약어를 제외한 문자를 조합해서 사용 가능합니다. ex:\"$ #,##0.00\" `;(세미콜론)`으로 구분해서 값이 양수, 음수, 0일 때에 따라 화면에 보일 형식을 다르게 설정할 수 있습니다. <b>'_', 'e', '8', '?', '*' '@'에 해당하는 문자는 사용하시려면 반드시 문자 앞에 `\"\\\\\"`을 덧붙여주셔야 합니다. </b> <mark>Type이 \"Int\"인 컬럼은 \"#,##0\", \"Float\"인 컬럼은 \"#,##0.######\"를 기본 포멧으로 갖습니다.</mark> ### Syntax ```javascript //;을 이용하여 양수,음수,0 일때의 포맷을 다르게 설정 Format: \"#,###원;외상 #,###원;-\" ``` ### Example *열 설정* ```javascript options.Cols = [ { Name:\"sNum\", Type:\"Int\", Format:\"#,###만원\" // Format:\"플러스 #,###;마이너스 #,###;없음\" // 100은 플러스100 -100은 마이너스100 0은 없음 으로 표시됩니다. } ... ] ``` *조회 데이터* ```json {\"Data\":[ {... \"sNum\":56200, ...} ]} ``` *실제 보여지는 데이터* ![보여지는 데이터](/assets/imgs/intFormat.png \"보여지는 데이터\") --- ## 4. 타입이 Html 인 경우 * JSON 형태로 (문자열도 가능), 실제값과 화면에 보여질 값의 쌍으로 구성됩니다. (위에 Text 타입의 객체 방식과 동일) ### Syntax ```javascript // 객체 방식 Format: \"{'Key1':'Value1', 'Key2':'Value2', 'key3':'Value3' ... }\" ``` |Value|Description| |---|---| |Key|셀의 실제 값(서버에서 조회되거나 저장시 서버로 전송됨)| |Value|Data에 설정된 값을 대체할 문자열(HTML 태그)| ### Example ```html <style> .alertCircle{ position:relative;left:30%;width:30px;height:25px;border-radius:50px;color:#FFFFFF;line-height:25px;font-size:12px } </style> <script> options.Cols = [ { Name:\"ALERT\", Type:\"Html\", Width:80, Format:{ \"0\":\"<div class='alertCircle' style='background-color:#009688;'>안전</div>\" ,\"1\":\"<div class='alertCircle' style='background-color:#ff9800;'>주의</div>\" ,\"2\":\"<div class='alertCircle' style='background-color:#db4437;'>위험</div>\" }, } ... ] </script> ``` |조회된 데이터|실제 보여지는 데이터| |---|---| |![조회데이터](/assets/imgs/htmlFormat1.png \"조회 된 데이터\")|![보여지는 데이터](/assets/imgs/htmlFormat2.png \"보여지는 데이터\") --- ## 5. 타입이 Link 인 경우 **1) 구분자 활용 방식** * 첫문자를 구분자로 사용하여 구분된 설정 값들의 나열로 정의됩니다. * 구분자로 사용된 문자는 설정할 내용에 포함되선 안됩니다. ### Syntax ```javascript // 구분자 활용 방식 '|'이 구분자 Format: \"|UrlPrefix|UrlPostfix|HtmlPrefix|HtmlPostfix\" ``` |Value|Description| |---|---| |UrlPrefix|실제 링크 url의 앞에 추가될 문자열| |UrlPostfix|실제 링크 url의 뒤에 추가될 문자열| |HtmlPrefix|화면에 보일 링크 텍스트의 앞에 추가될 html 코드| |HtmlPostfix|화면에 보일 링크 텍스트의 뒤에 추가될 html 코드| ### Example ```javascript options.Cols = [ { Name:\"sLink\", Type:\"Link\", //1. anchor 태그의 앞에 URL //2. anchor 태그의 뒤 URL //3. anchor 태그 앞에 붙여질 text or html //4. anchor 태그 뒤에 붙여질 text or html Format:\"|/EMS/gm1/board.do?contents=|&group=USER4\" +\"|<img src='./assets/imgs/hot.svg' style='width:20px;height:20px;'>\" +\"|<img src='./assets/imgs/new.jpg' style='width:20px;height:20px;'>\" } ... ] ``` 조회된 데이터 ([Link 타입에 대한 데이터 구조 참고](./type)) ```json {\"Data\":[ {... \"LinkData\":\"|487141|Best way to save and edit text data without a database|_self \" ...} ]} ``` |실제 보여지는 데이터|link 된 내용| |---|---| |![보여지는 데이터](/assets/imgs/linkFormat1.png \"보여지는 데이터\")|![보여지는 데이터](/assets/imgs/linkFormat2.png \"보여지는 데이터\")| **2) 객체 방식** * JSON 형태로 (문자열도 가능), 옵션과 추가할 문자열의 쌍으로 구성됩니다. ### Syntax ```javascript // 객체 방식 Format: \"{'UrlPrefix':'Value1', 'UrlPostfix':'Value2', 'HtmlPrefix':'Value3', 'HtmlPostfix':'Value4'}\" ``` |Value|Description| |---|---| |UrlPrefix|실제 링크 url의 앞에 추가될 문자열| |UrlPostfix|실제 링크 url의 뒤에 추가될 문자열| |HtmlPrefix|화면에 보일 링크 텍스트의 앞에 추가될 html 코드| |HtmlPostfix|화면에 보일 링크 텍스트의 뒤에 추가될 html 코드| ### Example ```javascript options.Cols = [ { Name: \"sLink\", Type: \"Link\", Format: { UrlPrefix:\"/EMS/gm1/board.do?contents=\", UrlPostfix:\"&group=USER4\", HtmlPrefix:\"<img src='./assets/imgs/hot.svg' style='width:20px;height:20px;'>\", HtmlPostfix:\"<img src='./assets/imgs/new.jpg' style='width:20px;height:20px;'>\" }, } ... ] ``` 조회된 데이터 ([Link 타입에 대한 데이터 구조 참고](./type)) ```json {\"Data\":[ {... \"LinkData\":\"|487141|Best way to save and edit text data without a database|_self \" ...} ]} ``` |실제 보여지는 데이터|link 된 내용| |---|---| |![보여지는 데이터](/assets/imgs/linkFormat1.png \"보여지는 데이터\")|![보여지는 데이터](/assets/imgs/linkFormat2.png \"보여지는 데이터\")| --- ## 6. 타입이 Img 인 경우 **1) 구분자 활용 방식** * 첫문자를 구분자로 사용하여 구분된 설정 값들의 나열로 정의됩니다. * 구분자로 사용된 문자는 설정할 내용에 포함되선 안됩니다. ### Syntax ```javascript // 구분자 활용 방식 '|'이 구분자 Format: \"|UrlPrefix|UrlPostfix|HtmlPrefix|HtmlPostfix|LinkPrefix|LinkPostfix\" ``` |Value|Description| |---|---| |UrlPrefix|이미지의 src 속성 앞에 추가될 문자열| |UrlPostfix|이미지의 src 속성 뒤에 추가될 문자열| |HtmlPrefix|이미지 태그 앞에 추가될 html 코드| |HtmlPostfix|이미지 태그 뒤에 추가될 html 코드| |LinkPrefix|이미지 클릭시 이동할 링크 앞에 추가될 경로 URL| |LinkPostfix|이미지 클릭시 이동할 링크 뒤에 추가될 경로 URL| ### Example ```javascript options.Cols = [ { Name: \"sImg\", Type: \"Img\", //1. img 태그의 src 값의 앞에 추가될 경로 //2. img 태그의 src 값의 뒤에 추가될 경로 //3. img 태그 앞에 넣고 싶은 text나 html //4. img 태그 뒤에 넣고 싶은 text나 html //5. 이미지를 클릭시 연결될 URL의 앞에 추가될 경로 //6. 이미지를 클릭시 연결될 URL의 뒤에 추가될 경로 Format: \"|http://ibsheet.com/demo/images/icons/|.jpg|<button cls='imgMBtn'>|</button>|/EMS/gm1/board.do?contents=|&group=USER4\" } ... ] ``` ([Image 타입에 대한 데이터 구조 참고](./type)) **2) 객체 방식** * JSON 형태로 (문자열도 가능), 옵션과 추가할 문자열의 쌍으로 구성됩니다. ### Syntax ```javascript // 객체 방식 Format: \"{'UrlPrefix':'Value1', 'UrlPostfix':'Value2', 'HtmlPrefix':'Value3', 'HtmlPostfix':'Value4', 'LinkPrefix':'Value5', 'LinkPostfix':'Value6'}\" ``` |Value|Description| |---|---| |UrlPrefix|이미지의 src 속성 앞에 추가될 문자열| |UrlPostfix|이미지의 src 속성 뒤에 추가될 문자열| |HtmlPrefix|이미지 태그 앞에 추가될 html 코드| |HtmlPostfix|이미지 태그 뒤에 추가될 html 코드| |LinkPrefix|이미지 클릭시 이동할 링크 앞에 추가될 경로 URL| |LinkPostfix|이미지 클릭시 이동할 링크 뒤에 추가될 경로 URL| ### Example ```javascript options.Cols = [ { Name: \"sImg\", Type: \"Img\", Format: { UrlPrefix: \"http://ibsheet.com/demo/images/icons/\", UrlPostfix: \".jpg\", HtmlPrefix: \"<button cls='imgMBtn'>\", HtmlPostfix: \"</button>\", LinkPrefix: \"/EMS/gm1/board.do?contents=\", LinkPostfix: \"&group=USER4\" } } ... ] ```",
          "see": [
            {
              "label": "Type appendix",
              "url": "./type"
            },
            {
              "label": "CustomFormat col",
              "url": "/docs/props/col/custom-format"
            },
            {
              "label": "DataFormat col",
              "url": "/docs/props/col/data-format"
            },
            {
              "label": "EditFormat col",
              "url": "/docs/props/col/edit-format"
            },
            {
              "label": "Format col",
              "url": "/docs/props/col/format"
            },
            {
              "label": "CustomFormat cell",
              "url": "/docs/props/cell/custom-format"
            },
            {
              "label": "DataFormat cell",
              "url": "/docs/props/cell/data-format"
            },
            {
              "label": "EditFormat cell",
              "url": "/docs/props/cell/edit-format"
            },
            {
              "label": "Format cell",
              "url": "/docs/props/cell/format"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/format.html"
      },
      {
        "cid": 930,
        "sid": "formula-2",
        "name": "formula",
        "label": "Formula",
        "data": {
          "body": "셀의 값(value)이나 속성(글자색,배경색 등)을 주변 열과의 계산을 통해 나온 결과 값으로 설정해 주는 기능입니다. ### 시트의 Formula 기능에는 1. 일반적인 수식계산을 위한 Formula(이하 **일반 Formula**)와 2. 셀의 속성값 변경을 위해 사용되는 Attribute+Formula(이하 **속성 Formula**)가 있습니다. > Formula로 계산된 결과를 가지는 셀은 기본적으로 편집이 불가능하지만 CanEditFormula를 1로 설정시 편집이 가능합니다. > Formula 내에서 시트와 데이터 행 객체, 열이름에 대한 접근은 예약어 Sheet, Row, Col을 통해 가능합니다. > Formula 설정에서 특정 열이름을 사용 시 각 데이터 행 객체 별로 열이름에 해당하는 열의 셀 값을 계산에 사용합니다. > **Formula에 외부 함수를 단독으로 사용하는 경우 함수는 반드시 값을 리턴해야합니다.** > Formula는 값이 변경된 경우 다른 셀의 refresh 여부와 상관없이 기본적으로 변경된 값이 화면에 노출됩니다. > > * <mark>**Formula를 시트에 적용하기 위해 기본적으로 (row)[CanFormula](/docs/props/row/can-formula) 속성을 설정해야 하며,**</mark> > * <mark>**attribute+Formula를 사용하는 경우에는 반드시 (row)[CalcOrder](/docs/props/row/calc-order) 속성도 설정해야 합니다.**</mark> **매우주의 : `attribute+Formula`와 일반 `Formula`를 같이 사용하는 경우에는, 일반 Formula에 대해 `컬럼명`을 `CalcOrder`에 설정해 주어야 합니다.** > ### Syntax ```Javascript options.Def = { Row: { // 일반 행에서 Formula 사용 CanFormula: 1, CalcOrder:\"Formula가 선언된 열이름\" } }; options.Cols = [ { // 일반 Formula \"Formula\": \"주변 열과의 계산을 통해 나온 결과를 해당 셀의 값으로 사용\" or // 속성(Color,TextColor,CanEdit 등)이 대상 속성명Formula: \"속성 값을 설정하기 위한 계산식\" } ] ``` ### Formula 적용 대상 |대상|설명| |----|----| |셀 값|셀 값에 들어갈 값을 동적으로 계산합니다.| |셀 속성|셀의 특정 속성에 설정될 값을 동적으로 계산합니다.| |열 속성|열의 특정 속성에 설정될 값을 동적으로 계산합니다.| ### Example ```Javascript options.Def = { Row:{ // Formula 기능을 사용할지 여부를 설정합니다. CanFormula: 1, // Formula의 계산 순서를 설정합니다. Formula 사용 시 반드시 CalcOrder는 설정되어야합니다. // 열이름 간에 띄어쓰지말고 전부 붙여쓰셔야 합니다. CalcOrder:\"sCountColor,sMoneyTextColor,sResult,sComment,sGrade\" } }; options.Cols = [ { Name:\"sCount\", Type:\"Int\", // 화면에 표시될 배경색을 설정하기 위한 Formula ColorFormula: 'Value < 0 ? \"rgb(245, 226, 24)\" : Value == 0 ? \"\" : \"rgb(11, 231, 109)\"' }, ... { Name: \"sMoney\", Type: \"Int\", // 화면에 표시될 텍스트 컬러 속성을 설정하기 위한 Formula TextColorFormula: \"Value < 3000 ? '#ff0000' : '#f0694e'\", }, ... { Name:\"sResult\", Type:\"Float\", // 값을 설정하기 위한 Formula Formula: \"sCount * sPrice - (sCount * sPrice * sDiscount) / 100\" }, ... { Name:\"sComment\", Type:\"Text\", // Formula에서 외부 함수 사용의 예시 Formula: \"useFormula1(Sheet,Row,Col)\" }, ... { Name:\"sGrade\", Type:\"Text\", // Formula에서 외부 함수 사용의 예시2 Formula: useFormula2 } ]; function useFormula1(fr) { //fr 포뮬러 객체 fr.Sheet, fr.Row, fr.Col 로 접근 가능 var rtnValue = (fr.Row['QT1']+fr.Row['QT2'])/2; ... //반드시 리턴이 있어야 합니다. return rtnValue; } //obj.Sheet, obj.Row, obj.Col function useFormula2(obj) { var Value = obj.Row[obj.Col]; ... //반드시 리턴이 있어야 합니다. return Value; } ```",
          "see": [
            {
              "label": "CanFormula Row",
              "url": "/docs/props/row/can-formula"
            },
            {
              "label": "CalcOrder Row",
              "url": "/docs/props/row/calc-order"
            },
            {
              "label": "attribute+Formula col",
              "url": "/docs/props/col/attributeformula"
            },
            {
              "label": "FormulaRow col",
              "url": "/docs/props/col/formula-row"
            },
            {
              "label": "Formula col",
              "url": "/docs/props/col/formula"
            },
            {
              "label": "attribute+Formula cell",
              "url": "/docs/props/cell/attribute-formula"
            },
            {
              "label": "calculate method",
              "url": "/docs/funcs/core/calculate"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/formula.html"
      },
      {
        "cid": 931,
        "sid": "header-2",
        "name": "header",
        "label": "Header",
        "data": {
          "body": "> 여러줄의 헤더를 설정하거나, 헤더에 내용을 수정하거나 체크박스 등을 삽입하는 방법에 대해 알아봅니다. ## 1. 단일 헤더행 가장 간단하게 Cols값 설정시 Header속성을 통해 헤더 타이틀을 설정하실 수 있습니다. ```javascript init.Cols = [ {Header:\"첫번째 열 타이틀\", Type:\"Int\", Name:\"sActSum\", Width:100}, {Header:\"두번째 열 타이틀\", Type:\"Date\", Name:\"sDate\", Width:120}, ... ] ``` [단일헤더행] ![단일 헤더행](/assets/imgs/onelineHeader.png \"단일 헤더행\") ## 2. 여러줄 헤더행 Header 속성에 값을 배열형태로 설정하시면 두줄 이상의 헤더행을 설정하실 수 있습니다. ```javascript init.Cols = [ {Header:[\"경제활동인구\",\"취업자\",\"소계\"], Type:\"Int\", Name:\"sEmplySum\"}, {Header:[\"경제활동인구\",\"취업자\",\"남자\"], Type:\"Int\", Name:\"sEmplyM\"}, {Header:[\"경제활동인구\",\"취업자\",\"여자\"], Type:\"Int\", Name:\"sEmplyW\"}, ... ]; ``` [다중헤더행] ![여러줄 헤더행](/assets/imgs/multilineHeader.png \"여러줄 헤더행\") ## 3. 헤더행 내용 수정 데이터 행과 마찬가지로 해더행 객체를 통해 행의 값을 얻거나 수정하실 수 있습니다. 해더행의 ID는 다음과 같은 형식으로 자동을 부여됩니다. 1) 헤더행이 한 줄인 경우, 헤더행의 ID는 `Header`입니다. 2) 헤더행이 두 줄 이상인 경우, 첫번째 헤더행의 ID는 `Header`이고 두번째 이후부터는 `HR1`,`HR2`.. 로 부여됩니다. ```javascript //첫번째 헤더행의 sPosition 열의 내용 얻기 var hdStr = sheet.getValue( sheet.getRowById(\"Header\"), \"sPosition\" ); //세번째 헤더행의 sPosition 열에 내용 수정하기 sheet.setValue( sheet.getRowById(\"HR2\"), \"sPosition\" , \"직책\" ) ``` ## 4. 헤더에 글자색,배경색 변경 및 이미지 넣기 열 설정시 Header 속성에 값을 문자열이 아닌 object 형태를 통해서 헤더 셀이 배경색이나 글자색등 다양한 기능을 설정하실 수 있습니다. 아래 예제에서 Header속성 내에 Color,TextColo,Type 등을 확인해 보세요. ```javascript init.Cols = [ //헤더 셀에 배경색을 \"#FF0000\"으로 설정 {Header:{Value:\"헤더 타이틀1\", Color:\"#FF0000\"}, Type:\"Text\", Width:150, Name:\"Col1\"}, //헤더 셀에 글자색을 \"#FFFF00\"으로 설정 {Header:{Value:\"헤더 타이틀2\", TextColor:\"#FFFF00\"}, Type:\"Text\", Width:120, Name:\"Col2\"}, //헤더 셀에 객체를 설정 {Header:{Value:\"|./assets/imgs/am.jpg|||||\",Type:\"Img\"}, Type:\"Text\", Width:120, Name:\"Col3\"}, ... ]; ``` [헤더 색상,타입변경] ![헤더색상,타입변경](/assets/imgs/multiFuncHeader.png \"헤더색상,타입변경\") ## 5. 헤더체크박스 Type이 Bool인 열은 `HeaderCheck`속성을 통해서 헤더 셀에 체크박스를 설정하실 수 있습니다. ```javascript init.Cols = [ {Header:\"No\", Name:\"SEQ\", Width:\"90\"}, {Header:{Value:\"확인\",HeaderCheck:1}, Type:\"Bool\", Name:\"sCheck\", Width:\"60\"}, {Header:\"회사\", Type:\"Text\", Name:\"sCompany\", Width:\"150\"}, ... ] ``` [헤더셀 체크박스] ![헤더셀 체크박스](/assets/imgs/headerCheck.png \"헤더셀 체크박스\")",
          "see": [
            {
              "label": "HeaderCheck col",
              "url": "/docs/props/col/header-check"
            },
            {
              "label": "Header col",
              "url": "/docs/props/col/header"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/header.html"
      },
      {
        "cid": 932,
        "sid": "ibsheet7-migration",
        "name": "ibsheet7-migration",
        "label": "Migration",
        "data": {
          "body": "## 1. 제품 파일 변경 <a name=\"chapter-1\"></a> ### 각 파일의 기능 비교 <a name=\"diff-files\"></a> |IBSheet7 파일|기능|IBSheet8 파일| |---|---|---| |ibsheet.js|제품core|ibsheet.js| |ibleaders.js|라이선스|ibleaders.js| |ibsheetinfo.js|초기화 상수,함수|ibsheet-common.js| |ibmsg|메세지 파일|ko.js, en.js| |Main폴더|css파일 및 이미지|css/테마폴더| |ibsheet.cfg|공통 기능 속성|ibsheet-common.js| |없음|찾기,피봇등 공통 다이얼로그|ibsheet-dialog.js| |없음|파일 export/import 관련 모듈|ibsheet-excel.js| ibsheet7을 통해 제품 개발시에는 실제 화면에 필수적으로 include 해야 하는 파일은 `ibsheet.js`와 `ibsheetinfo.js` 였습니다. 이 두 개 파일만 추가하면 나머지 파일들(`ibmsg`, `ibsheet.cfg`, `ibsheet.css`)은 ajax통신을 통해 자동으로 화면에 로딩 되었었습니다. IBSheet8에서는 기존에 `ibmsg`나 `ibsheet.cfg`와 같이 확장자가 없거나, cfg와 같이 개별적인 확장자를 갖는 파일은 모두 js형태로 변경되었고 각 파일은 직접 화면에 include하는 형태로 변경되었습니다. 따라서 IBSheet8로 마이그레이션 시에는 다음과 같은 파일들이 추가되어야 합니다. ### IBSheet8 사용 파일 <a name=\"ibsheet8-files\"></a> - 필수 파일 1. `ibsheet.js` (IBSheet8 코어) 2. `/locale/ko.js` (혹은 `en.js`) (다국어 메세지 파일) 3. `/css/default/main.css` (기본디자인 css) - 선택 파일 1. `ibsheet-common.js` (공통기능 설정) 2. `ibsheet-dialog.js` (각종 다이얼로그 사용) 3. `ibsheet-excel.js` (엑셀,텍스트 다운로드/업로드) ### example <a name=\"ibsheet8-import\"></a> ```html // AS-IS <script type=\"text/javascript\" src=\"/common/sheet/js/ibsheet.js\"></script> <script type=\"text/javascript\" src=\"/common/sheet/js/ibsheetinfo.js\"></script> ``` ```html // TO-BE // - 필수 파일 <link rel=\"stylesheet\" href=\"/common/ibsheet8/css/default/main.css\"> <script type=\"text/javascript\" src=\"/common/ibsheet8/ibsheet.js\"></script> <script type=\"text/javascript\" src=\"/common/ibsheet8/locale/ko.js\"></script> // - 선택 추가 파일 <script type=\"text/javascript\" src=\"/common/ibsheet8/ibsheet-common.js\"></script> <script type=\"text/javascript\" src=\"/common/ibsheet8/ibsheet-dialog.js\"></script> <script type=\"text/javascript\" src=\"/common/ibsheet8/ibsheet-excel.js\"></script> ``` IBSheet8은 기본적으로 CSS3를 사용함으로 IE10 이상의 브라우저에서 정상적으로 보여집니다. ## 2. 객체 생성 및 초기화 <a name=\"chapter-2\"></a> ### 객체 생성 <a name=\"create-ibsheet\"></a> IBSheet7의 객체 생성 단계는 다음과 같습니다. 1. `createIBSheet`(혹은 `createIBSheet2`)함수를 이용하여 기본 시트 객체 생성 2. 초기화 함수(`IBS_InitSheet`)를 통해 열의 개수,기능을 설정 IBSheet8은 위 두개 과정이 합쳐진 형태로 단일 함수내에서 객체에 대한 생성 및 초기화가 이루어지게 됩니다. ```javascript //AS-IS // 1. 시트 객체를 #sheetDIV 객체에 지정한 크기로 생성(생성객체,id,너비,높이) createIBSheet2( document.getElementById(\"sheetDIV\"),\"mySheet\",\"100%\",\"250px\"); // 2. 시트 초기화 var initSheet = { Cfg:{SearchMode:2}, Cols:[ {Header:\"No\",Type:\"Seq\",SaveName:\"SEQ\",Width:60}, {Header:\"이름\",Type:\"Text\",SaveName:\"sName\",Width:100,Align:\"Center\"}, {Header:\"부서\",Type:\"Combo\",SaveName:\"sDept\",Width:80,ComboText:\"인사|총무|개발|설계\",ComboCode:\"A01|A04|B01|B02\"}, ... ] } //초기화 함수 호출(시트객체,초기화 설정 구문) IBS_InitSheet(mySheet,initSheet); ``` ```javascript //TO-BE var initSheet = { Cfg:{SearchMode:2}, Cols:[ {Header:\"No\",Type:\"Int\",Name:\"SEQ\",Width:60}, {Header:\"이름\",Type:\"Text\",Name:\"sName\",Width:100,Align:\"Center\"}, {Header:\"부서\",Type:\"Enum\",Name:\"sDept\",Width:80,Enum:\"|인사|총무|개발|설계\",EnumKeys:\"|A01|A04|B01|B02\"}, ... ] } //시트 객체 생성 및 초기화(높이,너비는 sheetDIV객체의 크기를 따른다) IBSheet.create({ el:\"sheetDIV\" //생성객체 id:\"mySheet\" //id options:initSheet //초기화 설정 구문 }); ``` ### 초기화 구문 변경 부분 <a name=\"init-ibsheet\"></a> 기존 IBSheet7의 각 열 별 타입, 포맷, 기능에 대해서 IBSheet8에서 변경된 내용을 아래에서 확인해 보세요. **주요 초기화 기능 변경** ***Cfg(SetConfig)*** |ibsheet7 속성명|기능설명|변경 내용| |---|---|---| |AutoFitColWidth|지정한 시점마다 각 열의 너비를 가로 스크롤바가 생기지 않는 범위 내로 조정해 주는 기능|열 생성시 [RelWidth (col)](/docs/props/col/rel-width) 속성을 통해 각 열의 너비를 비율로 조정하는 형태로 변경| |CountFormat,CountPosition,PagingPosition|조회된 데이터 건수 표시 기능|[InfoRowConfig (cfg)](/docs/props/cfg/info-row-config) 속성을 통해 설정| |DragMode|드래그 방식,가능 여부 설정| [CanDrag (cfg)](/docs/props/cfg/can-drag) 속성을 통해 설정 가능| |HeaderRowHeight,DataRowHeight|헤더,데이터 행의 높이를 설정|css 를 통해 설정하는 형태로 변경 [Size (cfg)](/docs/props/cfg/size)를 통해 시트의 행 높이, 아이콘 크기, 버튼 크기 등 전체적인 크기 조절이 가능| |FrozenCol,FrozenColRight|좌우측 열고정 기능|[LeftCols, RightCols](/docs/appx/init-structure) 속성을 통해 시트 생성시 설정. 이후로는 [setFixedCols (method)](/docs/funcs/core/set-fixed-clos) 함수로 변경가능| |MergeSheet|헤더, 데이터행의 머지종류 설정|[HeaderMerge (cfg)](/docs/props/cfg/header-merge),[DataMerge (cfg)](/docs/props/data-merge), [PrevColumnMerge (cfg)](/docs/props/cfg/prev-column-merge) 속성으로 변경| |Page|한번에 렌더링할 행의 개수|[PageLength (cfg)](/docs/props/cfg/page-length)로 명칭 변경| |SearchMode|조회 렌더링 방식 설정|[SearchMode (cfg)](/docs/props/cfg/search-mode)동일 하지만 Mode는 조금씩 다르며 일부 모드는 추가됨| |SumPosition|합계 행에 대한 위치|[setFormulaRowPosition (method)](/docs/funcs/core/set-formula-row-position) 함수를 통해 설정| |ToolTip|풍선도움말 사용여부|row,col 속성 설정에서 `Tip` [(row)](/docs/props/row/tip) [(col)](/docs/props/col/tip) [(cell)](/docs/props/cell/tip)으로 변경| |UseHeaderActionMenu|헤더행 컨텍스트 메뉴 기능|[Def/Header](/docs/appx/init-structure)에서 [Menu](/docs/appx/menu) 속성으로 설정| ***Cols(InitColumns)*** #### [Type](/docs/appx/type) 속성 <a name=\"init-col-type\"></a> |Type명|변경내용| |---|---| |Text|일반 문자형 타입으로 동일. 단 `MultiLineText`(여러개행)속성 사용시에는 `Lines`타입이 별도 제공됩니다. |Status|지원안함 `Status`타입 열의 유무와 상관없이 시트 내에 변경사항에 대한 관리가 자동으로 이루집니다. 일반적으로 수정된 행은 노란색(`.IBColorChanged`),입력은 파란색(`.IBColorAdded`),삭제는 붉은색(`.IBColorDeleted`) 배경색으로 변경되어 표시 됩니다. 서버로 전송되는 행 상태에 대한 값은 기본적으로 'STATUS' 로 전송되며 이름을 변경하고 싶은 경우에는 Cfg에서 `ReqStatusName` 속성으로 변경할수 있습니다. 기존에 `I`, `U`, `D`로 서버로 전송되던 값은 `Added`, `Changed`, `Deleted` 로 전송됩니다. 이를 기존과 동일한 `I`, `U`, `D`로 변경하시려면 ko.js(메세지파일)에서 `ReqStatusAdded`, `ReqStatusChanged`, `ReqStatusDeleted`를 `I`, `U`, `D`로 수정해 주세요. 기존 IBSheet7과 마찬가지로 사용자에게 행의 입력/수정/삭제 여부를 별도 열을 통해 표시하고자 하는 경우에는 아래 <a href=\"#mig-status-type\">Status 타입 마이그레이션</a> 부분을 참고해 주세요.| |DelCheck|지원안함 `deleteRow()`함수를 통해서 행의 상태를 삭제로 변경할 수 있습니다. IBSheet7처럼 체크박스를 두고 상태를 삭제로 변경하고자 하신다면 열의 Type을 `Bool`로 설정하시고 [OnChange (json event)](/docs/props/event/on-change)를 통해 행의 상태를 바꾸게끔 설정하시면 됩니다. 자세한 코드는 아래 <a href=\"#mig-del-check-type\">DelCheck 타입 마이그레이션</a> 부분 참고해주세요.| |CheckBox|`Bool`타입으로 변경되었습니다. |DummyCheck|지원안함 `Bool` 타입으로 설정하고 [NoChanged (col)](/docs/props/col/no-changed) 속성을 1로 설정하시면 됩니다. |Radio| `Radio`로 동일합니다.| |Combo| `Enum` 타입으로 변경되었습니다. 콤보의 item을 설정하던 `ComboText`, `ComboCode`는 각각 [Enum (col)](/docs/props/col/enum), [EnumKeys (col)](/docs/props/enum-keys)로 변경되었습니다. 특히 `Enum`, `EnumKeys`의 첫번째 글자를 구분자로 사용하는 것을 주의해 주세요. 보다 자세한 내용은 아래 <a href=\"#mig-combo-combo-edit-type\">Combo,ComboEdit 타입 마이그레이션</a>을 참고해 주세요.| |ComboEdit|지원안함. <a href=\"#mig-combo-combo-edit-type\">Combo,ComboEdit 타입 마이그레이션</a>을 참고해 주세요.| |AutoSum|타입은 Int나 Float으로 설정하시고, [FormulaRow (col)](/docs/props/col/formula-row) 속성을 사용하시면 합계나 평균을 표시할 수 있습니다.| |Image|`Img`타입으로 변경되었습니다. 특히 데이터 구조가 크게 변경되었으므로 [Type](/docs/appx/type)부분의 내용을 참고해 주세요. |Int|`Int`로 동일합니다.| |Float|`Float`로 동일합니다.| |Date|`Date`로 동일합니다.| |Popup|지원안함. 열 우측에 버튼을 두고자 하시는 경우에는 `Button`속성을 통해 설정하실 수 있습니다. ex) {Type:\"Text\",Name:\"DEPTPOP\",`Button:\"../assets/imgs/popup.png\"`} 버튼 클릭시 발생하는 이벤트는 [onButtonClick (event)](/docs/events/on-button-click)을 참고하세요.| |Pass|`Pass`로 동일합니다.| |Seq|지원안함 열의 타입을 Int로 설정하시고, `Name`을 `\"SEQ\"`로 지정하시면 자동 순번열 형태로 동작합니다.| |Html|`Html`로 동일합니다.| |Button|`Button`으로 동일합니다. 단 [onButtonClick (event)](/docs/events/on-button-click)이벤트 대신 [onClick (event)](/docs/events/on-click)이벤트를 통해 클릭에 대한 로직을 구성하셔야 합니다.| |Result|지원안함| |Sparkline|D3 라이브러리를 이용하여 구현 가능 ([스파크차트 예제 참고](https://www.ibsheet.com/v8/ibsheet/html/examples.html))| #### Format 속성 <a name=\"init-format\"></a> IBSheet8에서는 타입별로 설정할 수 있는 포맷이 다양하고 기본적인 [Format (col)](/docs/props/col/format) 외에도 [DataFormat (col)](/docs/props/col/data-format), [EditFormat (col)](/docs/props/col/edit-format), [CustomFormat (col)](/docs/props/col/custom-format)를 통해 서버와 주고받을 데이터 유형이나 사용자 편집시 보여질 데이터 유형 등을 설정할 수 있습니다. 이로 인해 굉장히 유연하고 다양한 형태의 포맷을 지원할 수 있습니다. 또한 자주 사용되는 설정들을(`Format`,`DataFormat`,`EditFormat`...) `IB_Preset` 혹은 다른 변수에 담아두고, 해당 포맷이 필요한 경우 [Extend (col)](/docs/props/col/extend) 속성을 통해 쉽게 사용하실 수 있습니다. ```javascript //AS-IS var Cols = [ {Type:\"Date\",SaveName:\"eDate\",Width:100,Format:\"Ymd\"}, ]; ``` ```javascript //TO-BE opt.Cols = [ //YMD 안에 Type,Width,Format 등이 모두 설정되어 있음. {Name:\"eDate\",Extend:IB_Preset.YMD}, ]; ``` IB_Preset 변수는 `ibsheet-common.js` 파일 내에 있습니다. #### 그외에 속성 <a name=\"init-etc\"></a> |속성명|IBSheet8 지원 방법| |---|---| |AcceptKeys,ExceptKeys|지원안함 [ResultMask (col)](/docs/props/col/result-mask) 속성을 통해 정규식으로 로직을 구성하셔야 합니다. 기존 코드에 대해 IBSheet8에서 [EditMask (col)](/docs/props/col/edit-mask) 변환하는 코드는 아래 <a href=\"#mig-accept-keys-except-keys\">AcceptKeys,ExceptKeys 마이그레이션</a>을 참고해 주세요.| |Align|이전과 동일 (center,left,right)| |ApproximateType|컬럼별 설정 불가. (locale파일(ko.js)에서 Format.DecimalAdjust 값에 따라 결정(ceil,round,floor)| |AutoSum|[FormulaRow (col)](/docs/props/col/formula-row) 속성으로 변경. 사용법은 유사하나 함수 연결도 가능해졌습니다.| |BackColor|[Color (col)](/docs/props/col/color)로 속성명 변경. 사용법은 동일합니다.| |CalcLogic|[Formula (col)](/docs/props/col/formula)속성으로 변경되고 기능이 확장되었습니다. 자세한 내용은 [Formula (appendix)](/docs/appx/formula)를 참고해 주세요.| |ColMerge|[ColMerge (col)](/docs/props/col/col-merge)속성으로 동일합니다.| |ComboCode,ComboText|위에 `Combo`, `ComboEdit` 타입에 대한 마이그레이션에서 언급한 것과 같이 [Enum (col)](/docs/props/col/enum), [EnumKeys (col)](/docs/props/col/enum-keys)로 변경되었습니다. 마이그레이션시 IBSheet8에서는 첫번째 글자를 구분자로 사용하는 것을 주의해 주세요.| |Edit,EditLen|`Edit`는 [CanEdit (col)](/docs/props/col/can-edit)로 `EditLen`은 [Size (col)](/docs/props/col/size)로 변경되었습니다.| |EmptyToReplaceChar|[EmptyValue (col)](/docs/props/col/empty-value)로 변경되었습니다. |FontBold,FontUnderline|[TextStyle (col)](/docs/props/col/text-style)로 속성명 변경. bold외 밑줄,스트라이크,기울임등을 설정할 수 있습니다.| |FontColor|[TextColor (col)](/docs/props/col/text-color)로 속성명 변경. 사용법은 동일합니다.| |Hidden|[Visible (col)](/docs/props/col/visible)로 변경되었습니다. 따라서 값도 기존과 반대로 입력되어야 합니다.([Hidden (col)](/docs/props/col/hidden)속성은 실제 행의 높이 혹은 열의 너비만 줄여서 표시합니다.)| |KeyField|[Required (col)](/docs/props/col/required)로 속성명 변경. 사용법은 동일합니다.| |MaximumValue,MinimumValue|onEndEdit 이벤트를 override 하여 구현하여야 합니다. ([예제참고](#user-content-maximumvalueminimumvalue-마이그레이션))| |SaveName|[Name (col)](/docs/props/col/name)으로 속성명 변경. __특히 `Name`은 필수요소로 모든 열에는 반드시 `Name`속성이 있어야 합니다. 또한 한 시트 내에 동일한 `Name`을 갖는 열이 2개 이상 있어도 안됩니다.__| |Sort|[CanSort (col)](/docs/props/col/can-sort)로 속성명 변경. 사용법은 동일합니다.| |ToolTip|[Tip (col)](/docs/props/col/tip)으로 속성명 변경. 사용법은 동일합니다.| |TreeCol|지원안함 트리기능 사용시 [MainCol cfg](/docs/props/cfg/main-col)속성을 통해 트리가 될 열을 지정하셔야 합니다.| |InsertEdit|[AddEdit(col)](/docs/props/col/add-edit)으로 속성명 변경| |UpdateEdit|[ChangeEdit(col)](/docs/props/col/change-edit)으로 속성명 변경| |Width|기존과 동일합니다. 그리고 [MinWidth (col)](/docs/props/col/min-width), [MaxWidth (col)](/docs/props/col/max-width), [RelWidth (col)](/docs/props/col/rel-width)를 통해 열 너비의 최소,최대 크기나 상대적 크기를 설정하실 수 있습니다.| ## 3. 이벤트 대응 <a name=\"chapter-3\"></a> #### 이벤트 사용 방법 변경 <a name=\"events-use\"></a> IBSheet7에서 이벤트는 global window객체 안에 `시트id_이벤트명` 형식의 함수를 만드는 형태였습니다. IBSheet8에서는 다른 속성과 마찬가지로 [Events](/docs/appx/init-structure)라는 속성명안에서 필요한 이벤트를 정의하는 형태로 변경되었습니다. 또한 각 이벤트별로 달랐던 argument의 개수도 IBSheet8에서는 모든 이벤트가 동일하게 `evtParam` 객체 하나를 받고, `evtParam` 객체안에 각 이벤트에 따라 다른 인자를 갖는 형태로 바뀌었습니다. ```javascript //AS-IS //change 이벤트 function mySheet_OnChange(row, col, value, oldValue) { if (col == 5 && value > 100) { alert(\"최대 100 까지 입력 가능합니다.\"); } } //click 이벤트 function mySheet_OnClick(row, col, value, cellx, celly, cellw, cellh, rowtype) { if (mySheet.ColSaveName(col) == \"SA_NO\") { showEmpPopup( value ,\"simple\" ); } } ``` ```javascript //TO-BE opt.Events = { //change 이벤트 onAfterChange:function(evtParam) { if (evtParam.col == \"AVGRST\" && evtParam.val > 100 ) { alert(\"최대 100 까지 입력 가능합니다.\"); } }, //click 이벤트 onAfterClick:function(evtParam) { if (evtParam.col == \"SA_NO\") { showEmpPopup( evtParam.sheet.getValue(evtParam.row, evtParam.col) ); } } } ``` #### 자주 사용되는 이벤트 <a name=\"events-favorite\"></a> IBSheet7에서 자주 사용되는 이벤트에 대해 IBSheet8에서 변경된 부분을 확인합니다. 이벤트의 발생 시점은 조금씩 차이가 있을 수 있습니다. 이벤트 명칭이 기존에 `파스칼케이스(PascalCase)`에서 `카멜케이스(camelCase)`로 변경된 점을 주의해 주세요. |이벤트명|IBSheet8 이벤트|설명| |---|---|---| |OnAfterEdit|[onAfterEdit (event)](/docs/events/on-after-edit)|| |OnBeforeCheck|[onBeforeChange (event)](/docs/events/on-before-change)|별도에 `CheckBox`타입에서만 발생하는 이벤트는 없고,해당 이벤트는 모든 타입의 열에서 발생합니다.| |OnBeforeDownload|[onBeforeDownload (event)](/docs/events/on-before-download)|| |OnBeforePaste|[onBeforePaste (event)](/docs/events/on-before-paste)|| |OnButtonClick|[onClick (event)](/docs/events/on-click)|`Button`타입에서만 발생하는 이벤트는 없고,해당 이벤트는 모든 타입의 열에서 발생합니다. JSON Evnet [onClickSide (props event)](/docs/props/event/on-click-side) 를 사용할 수도 있습니다.| |OnChange|[onAfterChange (event)](/docs/events/on-after-change)|[setValue (method)](/docs/funcs/core/set-value)와 같이 외부 함수를 통한 변경에서는 발생하지 않습니다.| |OnClick|[onAfterClick (event)](/docs/events/on-after-click)| IBSheet8의 [onClick (event)](/docs/events/on-click)는 IBSheet7의 동일 이벤트보다 발생 시점이 앞섭니다. 따라서 마이그레이션시 [onAfterClick (event)](/docs/events/on-after-click)를 사용해 주세요.| |OnDblClick|[onDblClick (event)](/docs/events/on-dbl-click)|| |OnDownFinish|[onExportFinish (event)](/docs/events/on-export-finish)|명칭변경| |OnKeyUp, OnKeyDown|[onKeyUp (event)](/docs/events/on-key-up), [onKeyDown (event)](/docs/events/on-key-down)|| |OnLoad|[onRenderFirstFinish (event)](/docs/events/on-render-first-finish)|이벤트의 발생시점은 IBSheet7의 OnLoad와 다르나, 최초 생성후 1회 발생하는 점에서 동일합니다.| |OnLoadData|[onBeforeDataLoad (event)](/docs/events/on-before-data-load)|명칭변경| |OnLoadExcel, OnLoadText|[onImportFinish (event)](/docs/events/on-import-finish)|단일 이벤트에서 공통처리| |OnMouseDown, OnMouseUp, OnMouseMove|[onMouseDown (event)](/docs/events/on-mouse-down), [onMouseUp (event)](/docs/events/on-mouse-up), [onMouseMove (event)](/docs/events/on-mouse-move)|| |OnMovePage|[onBeforeGoToPage (event)](/docs/events/on--before-go-to-page)|명칭변경| |OnRowSearchEnd|[onRowLoad (event)](/docs/events/on-row-load)|명칭변경| |OnSaveEnd|[onAfterSave (event)](/docs/events/on-after-save)|IBSheet7의 OnSaveEnd는 저장 후 데이터 반영 및 렌더링 처리까지 끝난 상태에서 발생하나, [onAfterSave (event)](/docs/events/on-after-save)는 저장데이터를 서버에서 전송받은 직후 발생합니다.| |OnSearchEnd|[onSearchFinish (event)](/docs/events/on-search-finish)|명칭변경| |OnSelectMenu|[onSelectMenu (event)](/docs/events/on-select-menu)|| |OnSelectCell|[onFocus (event)](/docs/events/on-focus)|명칭변경| |OnSort|[onAfterSort (event)](/docs/events/on-after-sort)|명칭변경| |OnHScroll, OnVScroll|[onScroll (event)](/docs/events/on-scroll)|단일 이벤트에서 공통처리| ## 4. 자주 사용되는 함수 대응 <a name=\"chapter-4\"></a> IBSheet7에서 비교적 자주 사용되었다고 생각되는 함수에 대해 지원 여부와 변경된 내용입니다. |IBSheet7 함수명|기능 설명|IBSheet8 지원 여부| |---|---|---| |ActionMenu|데이터 영역에서 마우스 우측 버튼 클릭시 컨텍스 메뉴 생성|[Menu](/docs/appx/menu)속성으로 대체| |CellAlign|셀의 좌우 정렬 값 설정|[Align (cell)](/docs/props/cell/align)속성으로 대체. ex) `sheet.setAttribute(row,'colName','Align','Right');`| |CellBackColor|셀의 배경색 변경|[Color (cell)](/docs/props/cell/color)속성으로 대체. ex) `var color = sheet.getAttribute(row, 'colName', 'Color');`| |CellComboItem|셀의 드롭리스트 아이템 변경|[Enum (cell)](/docs/props/cell/enum), [EnumKeys (cell)](/docs/props/cell/enum-keys) 속성으로 대체. ex) `sheet.setAttribute(row, 'colName', 'Enum', '\\|사장\\|과장\\|대리\\|사원');` `sheet.setAttribute(row, 'colName', 'EnumKeys', '\\|A01\\|B0\\|B2\\|C0');`| |CellEditable|셀의 편집가능 여부|[CanEdit (cell)](/docs/props/cell/can-edit)속성으로 대체. ex) `sheet.setAttribute(row, 'colName', 'CanEdit', 0);`| |CellFont|셀의 다양한 폰트 유형 설정|[TextFont (cell)](/docs/props/cell/text-font), [TextStyle (cell)](/docs/props/cell), [TextSize (cell)](/docs/props/cell) 속성으로 대체 ex) `sheet.setAttribute(row, 'colName', 'TextSize', '1.3em');` |CellFontBold|셀의 font-weight 수정|[TextStyle (cell)](/docs/props/cell/text-style)속성으로 대체 ex) `sheet.setAttribute(row, 'colName', 'TextStyle', 1);` |CellFontColor|셀의 폰트 색상 변경|[TextColor (cell)](/docs/props/cell/text-color)속성으로 대체 ex) `var color = sheet.getAttribute(row, 'colName', 'TextColor');` |CellFontItalic|셀의 font-style를 italic으로 수정|[TextStyle (cell)](/docs/props/cell/text-style)속성으로 대체| |CellFontName|셀의 font-family 수정|[TextFont (cell)](/docs/props/cell/text-font)속성으로 대체| |CellFontSize|셀의 font-size 수정|[TextSize (cell)](/docs/props/cell/text-size)속성으로 대체| |CellFontStrike|셀 내용에 취소선(strike) 설정|[TextStyle (cell)](/docs/props/cell/text-style)속성으로 대체| |CellFontUnderline|셀 내용에 밑줄(Underline) 설정|[TextStyle (cell)](/docs/props/cell/text-style)속성으로 대체| |CellVAlign|셀 내용의 상하 정렬 설정|[VAlign (cell)](/docs/props/cell/v-align)속성으로 대체 ex) `sheet.setAttribute(row, 'colName', 'VAlign', 'top');`| |CellImage|이미지 셀의 이미지 변경|[getValue (method)](/docs/funcs/core/get-value), [setValue (method)](/docs/funcs/core/set-value)함수로 변경([Img타입에 대한 데이터 확인](/docs/appx/type)) ex) `sheet.setValue(row, 'colName', '\\|./img/pic/sw97231.png\\|200\\|300');`| |CellSearchValue|셀의 최초 로딩된 데이터 확인|[Orig (cell)](/docs/props/cell/orig)속성으로 대체 ex) `var orgValue = sheet.getAttribute( sheet.getRowById(\"AR99\") , \"CLS\" , \"Orig\");`| |CellText|셀의 값을 포맷이 적용된 상태로 얻거나 설정|[getString (method)](/docs/funcs/core/get-string), [setString (method)](/docs/funcs/core/set-string)함수로 대체 ex) `var v = sheet.getString(row, col);`| |CellValue|셀의 값을 포맷을 제거한 상태로 얻거나 설정|[getValue (method)](/docs/funcs/core/get-value), [setValue (method)](/docs/funcs/core/set-value)함수로 대체 ex) `sheet.setValue(row, 'colName', 'A01');`| |CheckAll|열 전체에 값을 체크|[setAllCheck (method)](/docs/funcs/set-all-check)함수로 대체 ex) `sheet.setAllCheck('colName', 1);` | |CheckedRows|체크된 전체 행의 개수를 얻음|[getRowsByChecked (method)](/docs/funcs/core/get-row-by-checked)함수를 이용 ex) `var cnt = sheet.getRowsByChecked( 'sCheck' ).length;`| |ColBackColor|열 전체의 배경색 설정|[Color (col)](/docs/props/col/color)속성으로 대체 ex) `sheet.setAttribute(null, 'colName', 'Color', '#FF9AE0');`| |ColFontBold||열 전체의 font-weight를 설정|[TextStyle (col)](/docs/props/col/text-style)속성으로 대체 ex) `sheet.setAttribute(null, 'colName', 'TextStyle', 1);`| |ColFontColor|열 전체의 글자색을 설정|[TextColor (col)](/docs/props/col/text-color)속성으로 대체 ex) `sheet.setAttribute(null, 'colName', 'TextColor', '#FF0000');`| |ColFontUnderline|열 전체 내용에 밑줄(Underline)설정|[TextStyle (col)](/docs/props/col/text-style)속성으로 대체 ex) `sheet.setAttribute(null, 'colName', 'TextStyle', 4);`| |ColWidth|열의 너비 설정|[Width (col)](/docs/props/col/width)속성으로 대체 ex) `sheet.setAttribute(null, 'colName', 'Width', 250);`| |ColEditable|열의 편집 가능여부 설정|[CanEdit (col)](/docs/props/col/can-edit)속성으로 대체 ex) `sheet.setAttribute(null, 'colName', 'CanEdit', 0);`| |ColInsert|신규 열 추가 기능|[addCol (method)](/docs/funcs/core/add-col)함수로 변경| |ColHidden|열 보임/감춤 설정|[hideCol (method)](/docs/funcs/core/hide-col)함수로 변경 [Visible (col)](/docs/props/col/visible)속성으로 대체 가능 ex) `sheet.setAttribute(null, 'colName', 'Visible', 0);`| |ColSaveName|열 index를 기준으로 `Name`을 확인|[getColByIndex (method)](/docs/funcs/core/get-col-by-index)함수로 대체 ex) `var c = sheet.getColByIndex(4);`| |ColumnSort|지정한 열 소팅|[doSort (method)](/docs/funcs/core/do-sort)함수로 대체 ex) `sheet.doSort('colName1|-colName2');`| |ColValueDup|열내 중복행 검사|[getRowsByDup (method)](/docs/funcs/core/get-rows-by-dup)함수로 대체 ex) `var dupRows = sheet.getRowByDup({cols:'colName','firstOnly':1});`| |ColValueDupRows|열내 전체 중복행 추출|[getRowsByDup (method)](/docs/funcs/core/get-rows-by-dup)함수로 대체 ex) `var dupRows = sheet.getRowByDup({cols:'colName'});`| |CountFormat|조회건수 표시|[setInfoRow (method)](/docs/funcs/core/set-info-row)함수로 대체| |CountPosition|조회 건수 표시 위치|[setInfoRow (method)](/docs/funcs/core/set-info-row)함수로 대체| |CurrentColInfo|현재 열 정보(순서,너비등) 추출|[getCurrentColInfo (method)](/docs/funcs/core/get-current-col-info), [setCurrentColInfo (method)](/docs/funcs/core/set-current-col-info)함수로 동일| |DataCopy|행 복사 기능|[copyRow (method)](/docs/funcs/core/copy-row)함수로 대체 ex) `sheet.copyRow(sheet.getFocusedRow());`| |DataInsert|행 추가 기능|[addRow (method)](/docs/funcs/core/add-row)함수로 대체 ex) `sheet.addRow();`| |DataMove|행 이동 기능|[moveRow (method)](/docs/funcs/core/move-row)함수로 대체 ex) `sheet.moveRow(row, nextRow);`| |DirectDown2Excel||| |DirectLoadExcel||| |DoAllSave|전체 데이터 저장|[doSave (method)](/docs/funcs/core/do-save)함수에 `saveMode`인자로 대체 ex) `sheet.doSave({url:'saveData.do',saveMode:0});`| |DoPrint|시트데이터 인쇄|[doPrint (method)](/docs/funcs/core/do-print)함수로 동일| |DoSave|시트 데이터 저장|[doSave (method)](/docs/funcs/core/do-save)함수로 동일| |DoSearch|시트 데이터 조회|[doSearch (method)](/docs/funcs/core/do-search)함수로 동일| |DoSearchPaging|SearchMode가 서버페이징 인 경우 조회 함수|[doSearchPaging (method)](/docs/funcs/core/do-search-paging)함수로 동일| |Down2Excel|시트를 excel파일로 export|[down2Excel (method)](/docs/funcs/excel/down-to-excel)함수로 동일| |Down2ExcelBuffer|여러개의 시트를 엑셀파일로 export|지원안함| |Down2Pdf||| |Down2Text|시트의 내용을 text파일로 export|[down2Text (method)](/docs/funcs/excel/down-to-text)함수로 동일| |Editable|시트 전체에 대한 편집가능 여부설정|[CanEdit (cfg)](/docs/props/cfg/can-edit)속성으로 대체 ex) `sheet.CanEdit = 0; sheet.renderBody();`| |EnterBehavior||| |Enable|시트 활성화 여부|[enable (method)](/docs/funcs/core/enable),[disable (method)](/docs/funcs/core/disable) 두개 함수로 변경| |ExportData||| |ExtendLastCol|마지막 열의 자동 너비 조절 기능|[RelWidth (col)](/docs/props/col/rel-width)속성을 통해 열간 너비 비율 조정 가능| |FindCheckedRow|특정 열에 체크된 행 추출 기능|[getRowsByChecked (method)](/docs/funcs/core/get-rows-by-checked)함수로 변경| |FindStatusRow|상태변화된 행 추출 기능|[getRowsByStatus (method)](/docs/funcs/core/get-rows-by-status)함수로 변경 | |FindSubSumRow||| |FindText|특정 문자를 포함하는 행 추출 기능|[findText (method)](/docs/funcs/core/find-text)함수로 동일| |FitColWidth|열의 너비 재조정|[RelWidth (col)](/docs/props/col/rel-width)속성을 통해 자동 조정는 형태로 변경| |FitSizeCol|열의 너비를 열내에 가장 긴글자를 갖는 셀에 맞게 조정|[fitSize (method)](/docs/funcs/core/fit-size)함수로 변경| |FocusAfterProcess|데이터 로딩 후 첫번째 행에 포커스를 둘지 여부|[IgnoreFocused (cfg)](/docs/props/cfg/ignore-focused)속성으로 대체 0으로 설정하면 데이터 로딩 후 첫번째 행에 포커스를 이동 시킴 (default: 0)| |FrozenCol|좌측 열 고정 기능|[setFixedLeft (method)](/docs/funcs/core/get-fixed-left)함수로 변경| |FrozenRows|상단에 행 고정 기능|[setFixedTop (method)](/docs/funcs/core/set-fixed-top)함수로 변경 | |GetCellProperty|행또는 셀에 속성 확인 기능|[getAttribute (method)](/docs/funcs/core/get-attribute)함수 통해 확인 가능 ex) `var colEdit = sheet.getAttribute({col:'colName',attr:'CanEdit'});` | |GetChildRows|트리사용시 특정행의 자식행 추출|[getChildRows (method)](/docs/funcs/core/get-child-rows)함수로 동일| |GetComboInfo|드랍리스트의 item 내용 확인|[Enum (col)](/docs/props/col/enum), [EnumKeys (col)](/docs/props/col/enum-keys)속성을 통해 확인 가능 ex) `var enum = sheet.getAttribute(null, 'colName', 'Enum');`| |GetCurrentPage|현재 페이지 index를 확인|[getPageIndex (method)](/docs/funcs/core/get-page-index)함수로 변경| |GetDataFirstRow|첫번째 데이터행 index 확인|[getFirstRow (method)](/docs/funcs/core/get-first-row)함수로 변경| |GetDataLastRow|마지막 데이터행 index 확인|[getLastRow (method)](/docs/funcs/core/get-last-row)함수로 변경| |GetEditText|현재 편집중인 내용 확인|| |GetSaveData|ajax 통신 전용 함수|지원 안함| |GetSaveJson|시트 내 데이터를 json형식으로 추출|[getSaveJson (method)](/docs/funcs/core/get-save-json)함수로 동일| |GetSaveString|시트 내 데이터를 querystring형식으로 추출|[getSaveString (method)](/docs/funcs/core/get-save-string)함수로 동일| |GetSearchData|ajax 통신 전용 함수|지원 안함| |GetSelectionCols|현재 선택된 열 index 추출|[getSelectedRanges (method)](/docs/funcs/core/get-selection-ranges)함수를 통해 선택 영역 전체를 얻는 형태로 변경| |GetSelectionRows|현재 선택된 행 index 추출|[getSelectedRanges (method)](/docs/funcs/core/get-selection-ranges)함수를 통해 선택 영역 전체를 얻는 형태로 변경| |HeaderActionMenu|헤더행에서 마우스 우측버튼 클릭시 컨텍스트 메뉴 표시 기능|[Menu (row)](/docs/props/row/menu)속성을 [Def.Header](/docs/appx/init-structure)에 설정하는 형태로 변경(`ibsheet-common.js` 참고)| |HeaderBackColor|헤더행에 대한 배경색|가급적 css 파일에서 설정하는 것을 권장. [Def.Header](/docs/appx/init-structure)에 [Color (row)](/docs/props/row/color)속성으로 통해 설정 가능| |HeaderCheck|헤더 체크박스에 대한 체크/언체크 설정|[Checked (cell)](/docs/props/cell/checked)속성을 통해 설정 ex) sheet.getAttribute(sheet.Header,\"CheckData\",\"Checked\");| |HeaderFontBold|헤더 타이틀 font-weight 설정|가급적 css 파일에서 설정하는 것을 권장.[Def.Header](/docs/appx/init-structure)에 [TextStyle (row)](/docs/props/row/text-style)속성으로 통해 설정 가능| |HeaderFontColor|헤더 타이틀 글자색 설정|가급적 css 파일에서 설정하는 것을 권장.[Def.Header](/docs/appx/init-structure)에 [TextColor (row)](/docs/props/row/text-color)속성으로 통해 설정 가능| |HeaderRows|헤더 행의 개수|[getHeaderRows (method)](/docs/funcs/core/get-header-rows)함수로 확인 가능 ex) `var hcnt = sheet.getHeaderRows().length;`| |HideFilterRow|필터행 제거 기능|[hideFilterRow (method)](/docs/funcs/core/hide-filter-row)함수로 동일| |HideProcessDlg|대기 이미지 제거|[hideMessage (method)](/docs/funcs/core/hide-message)함수로 변경| |HideSubSum|소계 행 제거|[removeSubTotal (method)](/docs/funcs/core/remove-sub-total)함수로 변경| |IBCloseCalendar|달력 제거|[IBSheet.showCalendar (static)](/docs/static/show-calendar)함수로 생성된 객체의 [`다이얼로그객체.Close` (appendix)](/docs/appx/dialog)함수로 변경| |IBShowCalendar|시트 외부영역에서 달력 오픈|[IBSheet.showCalendar (static)](/docs/static/show-calendar)함수로 변경| |ImageList|이미지 파일 index 설정|지원안함| |InitCellProperty|셀단위 설정 변경|각 셀(cell)에서 사용가는한 속성 형태로 변경| |InitColumns|열 초기화|[IBSheet.create (static)](/docs/static/create)함수에 통합| |InitComboNoMatchText||| |InitHeaders<a name=\"mig-init-headers\"></a>|헤더 기본 기능 설정|[Cfg](/docs/appx/init-structure) 속성으로 통합. ex) `options.Cfg = {CanColResize:0,CanSort:1}; //전체 소팅,리사이징 금지`| |IsDataModified|데이터 수정 여부 확인|[hasChangedData (method)](/docs/funcs/core/has-changed-data)함수로 변경| |IsHaveChild|자식노드 유무확인|[getChildRows (method)](/docs/funcs/core/get-child-rows)를 이용해서 반환되는 배열의 길이가 0이상이면 자식이 1개 이상 존재하는걸 알 수 있음| |LastCol|마지막 열 index 얻기|[getLastCol (method)](/docs/funcs/core/get-last-col)함수로 변경(열의 Name이 리턴)| |LastRow|마지막 행 index 얻기|[getLastRow (method)](/docs/funcs/core/get-last-row)함수로 변경(마지막 데이터 행 객체을 리턴)| |LoadSaveData|저장 결과에 대한 반영|[applySaveResult (method)](/docs/funcs/core/apply-save-result)함수로 변경| |LoadSearchData|조회 데이터 로드|[loadSearchData (method)](/docs/funcs/core/load-search-data)함수로 동일(xml 지원 안함)| |LoadExcel|엑셀파일 데이터 로드|[loadExcel (method)](/docs/funcs/excel/load-excel)함수로 동일| |LoadExcelBuffer|여러개 워크시트 내용 로등|[loadExcelBuffer (method)](/docs/funcs/excel/load-excel-buffer)함수로 동일| |LoadText|텍스트 파일 데이터 로드|[loadText (method)](/docs/funcs/core/load-text)함수로 동일| |MergeSheet|데이터 자동 병합 기능|[HeaderMerge (cfg)](/docs/props/cfg/header-merge), [DataMerge (cfg)](/docs/props/cfg/data-merge)속성으로 변경| |MouseCol|마우스 커서가 위치한 열 index|[getMouseCol (method)](/docs/funcs/core/get-mouse-col)함수로 변경(열의 Name 리턴)| |MouseHoverMode|데이터위에 마우스 Hover시 표현 설정|[Hover (cfg)](/docs/props/cfg/hover)속성으로 변경 ex) `sheet.Hover = 1; //셀단위`| |MouseRow|마우스 커서가 위치한 행 index|[getMouseRow (method)](/docs/funcs/core/get-mouse-row)함수로 변경(행 객체 리턴)| |MouseToolTipText|풍선도움말 표시 설정|[showTip (method)](/docs/funcs/core/show-tip)함수로 변경 ex) `sheet.showTip('<div class=\"warn\">분기 마감 3일 전입니다.</div>');`| |MoveColumnPos|열 위치 변경|[moveCol (method)](/docs/funcs/core/move-col)함수로 변경| |PagingPosition|페이지네이션 설정|[InfoRowConfig (cfg)](/docs/props/cfg/info-row-config)속성에 통합| |RangeBackColor|특정 영역의 배경색 변경|렌더링 시점을 직접 컨트롤 할수 있으므로 [setAttribute (method)](/docs/funcs/core/set-attribute)함수를 통해 각 cell별로 [Color (cell)](/docs/props/cell/color)속성을 설정(`render`인자를 0으로)하고, 설정이 끝났을때 [rerender (method)](/docs/funcs/core/rerender)함수를 호출| |RangeFontBold|특정 영역의 font-weight변경|렌더링 시점을 직접 컨트롤 할수 있으므로 [setAttribute (method)](/docs/funcs/core/set-attribute)함수를 통해 각 cell별로 [TextStyle (cell)](/docs/props/cell/text-style)속성을 설정(`render`인자를 0으로)하고, 설정이 끝났을때 [rerender (method)](/docs/funcs/core/rerender)함수를 호출| |RangeFontColor|특정 영역의 글자색 변경|렌더링 시점을 직접 컨트롤 할수 있으므로 [setAttribute (method)](/docs/funcs/core/set-attribute)함수를 통해 각 cell별로 [TextColor (cell)](/docs/props/cell/text-color)속성을 설정(`render`인자를 0으로)하고, 설정이 끝났을때 [rerender (method)](/docs/funcs/core/rerender)함수를 호출| |RangeText|특정 영역의 내용 추출|렌더링 시점을 직접 컨트롤 할수 있으므로 [setString (method)](/docs/funcs/core/set-string)함수를 통해 각 cell별로 값을 설정(`render`인자를 0으로)하고, 설정이 끝났을때 [rerender (method)](/docs/funcs/core/rerender)함수를 호출| |RangeValue|특정 영역의 내용 추출|렌더링 시점을 직접 컨트롤 할수 있으므로 [setValue (method)](/docs/funcs/core/set-value)함수를 통해 각 cell별로 값을 설정(`render`인자를 0으로)하고, 설정이 끝났을때 [rerender (method)](/docs/funcs/core/rerender)함수를 호출| |RedrawSum|합계 재 계산|[calculate (method)](/docs/funcs/core/calculate)함수로 변경| |RemoveAll|전체 데이터 삭제|[removeAll (method)](/docs/funcs/core/remove-all)함수도 동일| |RenderSheet|수정 내용 일시 반영 중지/실행|[renderBody (method)](/docs/funcs/core/renderBody), [rerender (method)](/docs/funcs/core/rerender)함수로 변경| |ReNumberSeq|Seq열에 대한 다시 순번 매김|지원안함 매번 자동으로 순번을 계산함.| |Reset|시트 객체 클리어|[dispose (method)](/docs/funcs/core/dispose)함수를 호출해서 시트를 완전히 제거하고 같은 id로 다시 생성([IBSheet.create (static)](/docs/static/create))| |ReturnCellData|셀 데이터를 최초 로딩된 데이터로 변경|[revertCell (method)](/docs/funcs/core/revert-cell)함수로 변경| |ReturnColumnPos|열의 순서를 최초 생성상태로 되돌림|지원안함| |ReturnData|행 전체 데이터를 최초 로딩된 데이터로 변경|[revertRow (method)](/docs/funcs/core/revert-row)함수로 변경| |RowBackColor|행 배경색 변경|[Color (row)](/docs/props/row/color)속성으로 대체 ex) `sheet.setAttribute(row, null, 'Color', '#FFAA99');`| |RowBackColorD|삭제될 행의 배경색|css파일 `.IBColorDeleted` class에서 설정| |RowBackColorI|추가행의 배경색|css파일 `.IBColorAdded` class에서 설정| |RowBackColorU|수정된 행의 배경색|css파일 `.IBColorChanged` class에서 설정| |RowCount|상태별 행 개수 확인|[getRowsByStatus (method)](/docs/funcs/core/get-rows-by-status)나 [getTotalRowCount (method)](/docs/funcs/core/get-total-row-count)함수로 확인 가능| |RowData|행의 값을 json형태로 얻거나 설정|[getRowById (method)](/docs/funcs/core/get-row-by-id), [getFocusedRow (method)](/docs/funcs/core/get-focused-row)등 모든 행 객체를 통해 값 얻기 가능| |RowDelete|행 즉시 삭제|[removeRow (method)](/docs/funcs/core/remove-row)함수로 변경| |RowEditable|행 전체 수정 가능 여부 설정|[CanEdit (row)](/docs/props/row/can-edit)속성으로 대체 ex) `sheet.setAttribute(row, null, 'CanEdit', 0);`| |RowExpanded|트리 사용시 자식행에 대한 펼침 여부 설정|[setExpandRow (method)](/docs/funcs/core/set-expand-row)함수로 변경| |RowFontColor|행의 글자색 변경|[TextColor (row)](/docs/props/row/text-color)속성으로 대체 ex) `var fc = sheet.getAttribute(row, null, 'TextColor');`| |RowHeight|행의 높이 설정|[getRowHeight (method)](/docs/funcs/core/get-row-height)함수로 확인 [Height (row)](/docs/props/row/height)속성으로 높이 변경. ex) `sheet.setAttribute(sheet.getFocusedRow(), null, \"Height\", 200);`| |RowHeightMax|전체 데이터 행의 최대 높이 설정|[Def.Row.MaxHeight](/docs/appx/init-structure)속성으로 설정 ex) `sheet.Def.Row.MaxHeight = 100; sheet.rerender();`| |RowHeightMin|전체 데이터 행의 최소 높이를 설정|[Def.Row.MinHeight](/docs/appx/init-structure)속성으로 설정 ex) `sheet.Def.Row.MinHeight = 50; sheet.rerender();`| |RowHidden|행을 보임/감춤 설정|[Visible (row)](/docs/props/row/visible)속성으로 대체 ex) `sheet.setAttribute(row, null, 'Visible', 0);` [hideRow (method)](/docs/funcs/core/hide-row)함수로 변경 ex) `sheet.hideRow(row, null, 0);`| |RowLevel|트리 사용시 행의 Depth index 설정|`Level`속성으로 대체(확인만 가능) ex) `var lvl = sheet.getAttribute(row, null, 'Level');` [moveRow (method)](/docs/funcs/core/move-row)함수로 행을 이동시켜야함.| |SaveNameCol|열 명에 대한 Index|[getColIndex (method)](/docs/funcs/core/get-col-index)함수로 변경| |SearchRows|로드된 데이터 행의 수|[getDataRows (method)](/docs/funcs/core/get-data-rows)함수로 변경 하지만 상태가 변경된 데이터행을 제외하고 싶다면 다음과 같이 갯수를 구할 수 있습니다. ex) `var searchRow = sheet.getDataRows() - sheet.getRowsByStatus(\"Added,Deleted\").length;`| |SelectCell|특정 위치로 포커스 이동|[focus (method)](/docs/funcs/core/focus)함수로 변경 ex) `sheet.focus(row, 'colName');`| |SelectCol|특정 열로 포커스 이동|[focus (method)](/docs/funcs/core/focus)함수로 변경 ex) `sheet.focus(null, 'colName');` `var fc = sheet.getFocusedCol();`| |SelectionMode|행,셀단위 select 설정|[SelectingCells (cfg)](/docs/props/cfg/selecting-cells)속성으로 대체| |SelectRow|특정 행으로 포커스 이동|[focus (method)](/docs/funcs/core/focus)함수로 변경 ex) `sheet.focus(row, null);` `var fr = sheet.getFocusedRow();`| |SetBlur|시트내 포커스 제거|[blur (method)](/docs/funcs/core/blur)함수로 변경 ex) `sheet.blur(2);`| |SetColProperty|열 속성 변경|[setAttribute (method)](/docs/funcs/core/set-attribute)를 통해 각종 속성 설정 가능 ex) `sheet.setAttribute(null, 'colName', 'CanEdit', 0);`| |SetConfig|초기 기능 설정|[IBSheet.create (static)](/docs/static/create)함수에 [Cfg](/docs/appx/init-structure)속성으로 대체| |SetEndEdit|편집 종료 기능|[endEdit (method)](/docs/funcs/core/end-edit)함수로 변경| |SetHeaderMode|헤더행에 대한 기능 설정|위에 <a href=\"#mig-init-headers\">InitHeaders</a>함수에 대한 설명 참고. ex) `sheet.CanSort = 0;`| |SetMergeCell|특정 영역에 대한 span|[setMergeRange (method)](/docs/funcs/core/set-merge-range)함수로 변경| |SetSelectRange|특정 영역 선택|[selectRange (method)](/docs/funcs/core/select-range)함수로 변경| |SetSplitMergeCell|머지된 영역에 대해 머지취소|[setMergeCancel (method)](/docs/funcs/core/set-merge-cancel)함수로 변경| |SheetWidth|시트의 너비 변경|[IBSheet.create (static)](/docs/static/create)함수로 생성할때 지정된 el객체의 너비를 수정| |SheetHeight|시트이 높이 변경|[IBSheet.create (static)](/docs/static/create)함수로 생성할때 지정된 el객체의 높이 수정| |ShowCalendar|특정 셀위에 달력 팝업 open|[AutoCalendar (cfg)](/docs/props/cfg/auto-calendar)속성으로 대체| |ShowColumnPopup|열에 설정한 컨텍스트 메뉴를 표시|[showMenu (method)](/docs/funcs/core/show-menu)함수로 유사하게 기능 구현 가능 ex) `var menu = sheet.getAttribute(sheet.getFocusedRow(),\"sCompany\",\"Menu\");` `sheet.showMenu(sheet.getFocusedRow(),\"sCompany\",menu);`| |ShowFilterRow|필터행 표시|[showFilterRow (method)](/docs/funcs/core/show-filter-row)함수로 동일 | |ShowFindDialog|찾기 다이얼로그 창 open|[showFindDialog (method)](/docs/funcs/dialog/show-find-dialog)함수로 동일(`ibsheet-dialog.js` 파일 필요)| |ShowGroupRow|그룹행 생성|solid 행 사용으로 변경| |ShowMsgMode|메세지 event 발생 여부 설정|| |ShowPivotDialog|피봇 다이얼로그 창 open|[showPivotDialog (method)](/docs/funcs/dialog/show-pivot-dialog)함수로 변경(`ibsheet-dialog.js` 파일 필요)| |ShowProcessDlg|대기 이미지 표시|[showMessage (method)](/docs/funcs/core/show-message)함수로 변경| |ShowSubSum|소계행 생성 기능|[makeSubTotal (method)](/docs/funcs/core/make-sub-total)함수로 변경| |ShowToolTip|풍선도움말 표시|[showTip (method)](/docs/funcs/core/show-tip)함수로 변경| |ShowTreeLevel|트리 시트 사용시 지정한 Depth까지 펼침|[showTreeLevel (method)](/docs/funcs/core/show-tree-level)함수로 동일| |SumBackColor|합계 행에 대한 배경색|css파일의 `.IBFormulaRow` class에서 설정 혹은 합계행에 대해 직접 설정 ex) `var frow = sheet.getRowById(\"FormulaRow\");` `sheet.setAttribute(frow, null, 'Color', \"#FF0099\");`| |SumFontBold|합계 행에 대한 font-weight|css파일의 `.IBFormulaRow` class에서 설정| |SumFontColor|합계 행에 대한 글자색 설정|css파일의 `.IBFormulaRow` class에서 설정| |SumRowHidden|합계 행 보입/감춤 설정|[showRow (method)](/docs/funcs/core/show-row), [hideRow (method)](/docs/funcs/core/hide-row)로 분리 및 변경 [Visible (row)](/docs/props/row/visible)속성으로 대체 ex) `sheet.setAttribute(sheet.FormulaRow, null, \"Visible\", true);`| |SumValue|합계 행의 값 설정|[getValue (method)](/docs/funcs/core/get-value), [setValue (method)](/docs/funcs/core/set-value)함수로 변경 ex) `sheet.setValue(sheet.FormulaRow, \"sAmt\", 250000);`| |TabBehavior|포커스 상태에서 'Tab'키 클릭시 동작 설정|| |Theme|테마 설정|[setTheme (method)](/docs/funcs/core/set-theme)만 동일| |ToolTipText|특정 셀에 풍선도움말 설정|[Tip (cell)](/docs/props/cell/tip)속성으로 대체 ex) `sheet.setAttribute(row, 'colName', 'Tip', '사원번호를 먼저 입력하세요');`| |TopRow|최상단의 행 index 확인|[getShownRows (method)](/docs/funcs/core/get-shown-rows)함수로 확인 가능 ex) `var trow = sheet.getShownRows()[0];`| |TotalRows|전체 데이터 건수 설정|[getTotalRowCount (method)](/docs/funcs/core/get-total-row-count)함수로 변경| |Visible|시트 전체 보임/감춤 설정|[IBSheet.create (static)](/docs/static/create)로 생성할때 지정된 el객체에 대해 display나 visibility 변경| ## 5. 마이그레이션시 차이점,유의사항 <a name=\"chapter-5\"></a> 1. 객체 접근,렌더링 시점 변화 <a name=\"mig-approach\"></a> IBSheet8에서는 기존 버전의 제품과 달리 시트 내부의 각 객체에 직접 접근하여 값을 확인하거나 수정하는 방식으로 변경되었습니다. 또한 각 함수의 수행 후에 즉시 렌더링이 일어나던 IBSheet7과 달리 렌더링이 필요한 순간 렌더링 함수를 호출하여 실제 화면에 반영하는 방식으로 루프를 돌면서 하는 작업들에 있어서 성능이 개선되었습니다. 아래 예제는 \"TOTAL\"라는 열에 대해 전체 데이터를 확인하여 열의 값이 100보다 큰 경우, 해당 셀의 배경색을 붉은색으로 표시하게 끔 로직을 구성하는 예제를 참고해 주세요. ```javascript //AS-IS //첫번째 데이터 행부터 마지막 데이터 행까지 루프를 돈다. for (var i = sheet.GetDataFirstRow(); i <= sheet.GetDataLastRow(); i++) { if (sheet.GetCellValue(i,\"TOTAL\") > 100){ //셀 내의 값을 clone해서 가져옴. sheet.SetCellBackColor(i,\"TOTAL\", \"#FF0000\"); //해당 셀에 배경색을 붉은색으로 변경한다. (함수 호출시마다 렌더링이 발생함.) } } ``` ```javascript //TO-BE //전체 데이터행 객체를 배열로 얻음 var rows = sheet.getDataRows(); for (var i = 0; i < rows.length; i++) { //한 행 객체를 얻음 var row = rows[i]; //row 객체 내에서 값을 비교하고 설정한다. //이렇게 수정해도 실제 화면에 반영(렌더링)되지는 않는다. if (sheet.getValue(row, \"TOTAL\") > 100) { sheet.setAttribute(row, \"TOTAL\", \"Color\", \"#FF0000\", 0);//render 속성을 0 } } //전체 수정된 내용을 화면에 반영 sheet.renderBody(); ``` IBSheet7의 경우 빈번한 렌더링 발생과 값에 대한 핸들링 방식의 차이로 인해 성능을 저해해 왔습니다. IBSheet8에서는 객체에 대한 직접 접근 및 렌더링 시점 조절을 통해 이러한 작업에 있어서 강점이 있습니다. 실제로 위 예제는 IBSheet7과의 로직 차이를 설명하기 위해 작성된 것으로 IBSheet8에 [Formula](./formula) 기능을 이용하면 보다 간단하고 빠르게 해당 기능을 구현하실 수 있습니다. 2. Tree(트리)데이터 파싱 <a name=\"mig-parse-tree-data\"></a> IBSheet7에서는 트리를 사용하는 경우 두가지 데이터 구조를 지원하였습니다. 1) `Items` 속성을 이용한 단계적인 구조 트리 데이터 ```javascript {Data:[ {ID:1,sName:\"할아버지\",Items:[ {ID:2,sName:\"큰아버지\"}, {ID:3,sName:\"아버지\",Items:[ {ID:5,sName:\"형\"}, {ID:6,sName:\"나\"} ]}, {ID:4,sName:\"작은아버지\"} ]} ]} ``` 2) `Level` 속성을 이용한 Depth지정 트리 데이터 ```javascript {Data:[ {ID:1 ,Level:1,sName:\"할아버지\"}, {ID:2 ,Level:2,sName:\"큰아버지\"}, {ID:3 ,Level:2,sName:\"아버지\"}, {ID:5 ,Level:3,sName:\"형\"}, {ID:6 ,Level:3,sName:\"나\"}, {ID:4 ,Level:2,sName:\"작은 아버지\"}, ]} ``` IBSheet8에서는 기본적으로 위에 1) `Items` 속성을 이용한 트리데이터 구조를 지원합니다. 그리고 이전과 마찬가지로 `Level` 속성을 이용한 파싱을 사용하시려면 `ibsheet-common.js` 안에 `v7.convertTreeData` 함수를 이용하여야 합니다. **`IBSheet.v7`에 정의된 API는 시트 객체를 바인딩해줘야합니다.** ```javascript // IBSheet7의 Level 데이터 구조를 변경해 줌. sheet.loadSearchData( IBSheet.v7.convertTreeData(jsonData) ); ``` ## 6. 기타 <a name=\"chapter-6\"></a> ### Status 타입 마이그레이션 <a name=\"mig-status-type\"></a> ibsheet7에서 행의 상태를 보여주는 \"Status\"타입이 ibsheet8에는 없고, 행에 대한 추가,삭제,수정시 자동으로 관리됩니다. (행 객체 안에 Added,Deleted,Changed 속성이 추가됨) 그리고 상태에 따라 기본적으로 행의 색상이 변경됩니다. (파랑:신규,분홍:삭재,노랑:수정) 만약 ibsheet7처럼 상태를 보여주는 컬럼을 만들고자 하시는 경우에는 `IBSheet-common.js` 파일에 `IB_Preset.STATUS`를 (Col)[Extend](/docs/props/col/extend)하시면 됩니다. ```javascript var initSheet = { Cols:[ //Status 열처럼 동작하는 열을 만든다. { Header: \"상태\", Name: \"RStatus\", Extend: IB_Preset.STATUS } ] }; ``` 참고 - 위 IB_Preset.STATUS의 내용을 ibsheet-common.js 에 찾아보면 [Formula (col)](/docs/props/col/formula)를 사용하므로 [Def/Row](/docs/appx/init-structure)에 [CanFormula (row)](/docs/props/row/can-formula) 속성이 1로 설정하고 [CalcOrder (row)](/docs/props/row/calc-order) 속성이 설정 되어야 합니다. - 저장 시 [Formula (col)](/docs/props/col/formula)로 `STATUS` 데이터 값이 변경되므로 `local/언어.js` 파일 안에 문자열(`\"ReqStatusAdded\": \"Added\"`(I), `\"ReqStatusChanged\": \"Changed\"`(U), `\"ReqStatusDeleted\": \"Deleted\"`(D), `\"ReqStatusEmpty\": \"\"`(R))을 수정해야 합니다. - IBSheet7의 `Cfg.ImageStatus` 속성처럼 상태를 별도 이미지로 표시하고자 하는 경우에는 [Format (col)](/docs/props/col/format)에서 입력,수정,삭제 대신 해당 이미지를 넣어 주시면 됩니다. ```js Format:{\"I\":\"<img src='../images/added.gif'>\",\"U\":\"<img src='../images/changed.gif'>\",\"D\":\"...\"} ``` ### DelCheck 타입 마이그레이션 <a name=\"mig-del-check-type\"></a> 열 생성시 [OnChange (json event)](/docs/props/event/on-change)를 통해 값에 따라 행의 상태를 변경하는 로직을 넣어 줍니다. `IBSheet-common.js` 파일에 `IB_Preset.DelCheck`를 (Col)[Extend](/docs/props/col/extend)하시면 됩니다. ```javascript var initSheet = { Cols:[ //DelCheck 열 처럼 동작하는 열을 만든다. { Header:\"삭제\", Name:\"DEL\", Extend: IB_Preset.DelCheck } ] }; ``` ### Combo,ComboEdit 타입 마이그레이션 <a name=\"mig-combo-combo-edit-type\"></a> `Combo` 타입은 [Enum](/docs/appx/type)타입으로 변경되었고, `ComboText`, `ComboCode`는 각각 [Enum (col)](/docs/props/col/enum), [EnumKeys (col)](/docs/props/enum-keys) 속성으로 변경되었습니다. ```javascript //AS-IS {Header:\"직급\", Type:\"Combo\", SaveName:\"Position\", ComboText:\"사원|대리|과장|차장|부장\", ComboCode:\"A0|A1|B0|B1|B3\"} ``` ```javascript //TO-BE (Enum,EnumKeys속성의 첫번째 글자가 구분자로 사용됨을 주의) {Header:\"직급\", Type:\"Enum\", Name:\"Position\", Enum:\"|사원|대리|과장|차장|부장\", EnumKeys:\"|A0|A1|B0|B1|B3\"} ``` `ComboEdit`는 [Defaults (col)](/docs/props/col/defaults), [Format (col)](/docs/props/col/format), [EditFormat (col)](/docs/props/col/edit-format), [Suggest (col)](/docs/props/col/suggest) 속성을 사용하여 유사하게 동작하는 열을 만드실 수 있습니다. ```javascript //AS-IS {Header:\"직급\", Type:\"ComboEdit\", SaveName:\"Position\", ComboText:\"사원|대리|과장|차장|부장|이사|상무|사장\", ComboCode:\"A0|A1|B0|B1|B3|C0|C1|C2\"} ``` ```javascript //TO-BE var comboText = \"사원|대리|과장|차장|부장|이사|상무|사장\"; var comboCode = \"A0|A1|B0|B1|B3|C0|C1|C2\"; { Header:\"직급\", Type:\"Text\", Name:\"Position\", Button: \"Defaults\", // 화면에 표시될 셀 값의 Format 형태를 설정. 값이 A0면 \"사원\"이 화면에 표시 Format: { \"A0\": \"사원\", \"A1\": \"대리\", \"B0\": \"과장\", \"B1\": \"차장\", \"B3\": \"부장\", \"C0\": \"이사\", \"C1\": \"상무\", \"C2\": \"사장\" }, // 셀 편집시 화면에 표시될 Format 형태를 설정 EditFormat: { \"A0\": \"사원\", \"A1\": \"대리\", \"B0\": \"과장\", \"B1\": \"차장\", \"B3\": \"부장\", \"C0\": \"이사\", \"C1\": \"상무\", \"C2\": \"사장\" }, Suggest:\"|\"+comboText, // 입력시 아이템 필터링 Defaults: \"|\"+comboCode // 셀 선택시 기본값 } ``` 위와 같이 설정하면 사용가능합니다. `ComboEdit` 사용은 [onBeforeCreate (static)](/docs/static/on-before-create)이벤트에서 공통으로 설정하여 사용하시기 바랍니다. ### AcceptKeys,ExceptKeys 마이그레이션 <a name=\"mig-accept-keys-except-keys\"></a> `AcceptKeys`와 `ExceptKeys`는 둘다 특정 문자에 대한 입력만 허용하거나 불허하는 기능입니다. IBSheet7에서는 `E(영문)`, `N(숫자)`, `K(한글)` 와 같은 예약어와 함께 특정 원하는 문자를 다음과 같이 설정하였습니다. ```javascript //AS-IS var Cols = [ //AcceptKeys 예 영문자,숫자,-(기호)만 허용 {Type:\"Text\", Name:\"SA_NO\", AcceptKeys:\"E|N|[-]\" }, //ExceptKeys 예 영문자와 !,@,# 는 입력 불가 {Type:\"Text\", Name:\"SA_PRT\", ExceptKeys:\"E|[!@#]\" } ]; ``` ```javascript ///TO-BE opt.Cols = [ //AcceptKeys 대신 EditMask를 이용하여 영문자,숫자,-(기호)만 허용 {Type:\"Text\", Name:\"SA_NO\", EditMask:\"^[a-zA-Z|\\\\d|\\\\-]*$\" }, //ExceptKeys 대신 EditMask를 이용하여 영문자와 !,@,# 는 입력 불가 {Type:\"Text\", Name:\"SA_PRT\", EditMask:\"^[^a-zA-Z|^!|^@|^#]*$\" } ]; ``` 정규식에 익숙하지 않다면 [onBeforeCreate (static)](/docs/static/on-before-create)에서 공통로직을 통해 기존에 설정한 `AcceptKeys`, `ExceptKeys`를 자동으로 [EditMask (col)](/docs/props/col/edit-mask)로 변환하게 할 수도 있습니다. 아래 로직을 참고해 주세요. ```javascript //시트 생성 직전에 발생하는 이벤트(IBSheet.create함수에 넣은 인자가 opt안에 모두 들어있음.) IBSheet.onBeforeCreate = function(opt){ var acceptExceptKeysMig = function(Cols){ for(var i = 0; i < Cols.length; i++) { var c = Cols[i]; //EditMask를 통해 AcceptKeys를 유사하게 구현한다. if (c[\"AcceptKeys\"]) { var setV = c[\"AcceptKeys\"]; var acceptKeyArr = setV.split(\"|\"); var mask = \"\"; for (var i = 0; i < acceptKeyArr.length; i++) { switch (acceptKeyArr[i]) { case \"E\": mask += \"|a-zA-Z\"; break; case \"N\": mask += \"|\\\\d\"; break; case \"K\": mask += \"|\\\\u3131-\\\\u314e\\\\u314f-\\\\u3163\\\\uac00-\\\\ud7a3\"; break; default: if (acceptKeyArr[i].substring(0, 1) == \"[\" && acceptKeyArr[i].substring(acceptKeyArr[i].length-1) == \"]\") { var otherKeys = acceptKeyArr[i].substring(1, acceptKeyArr[i].length-1); for (var x = 0; x < otherKeys.length; x++) { if ([\".\",\"-\",\"$\",\"^\",\"*\",\"+\",\"|\",\"(\",\")\"].indexOf(otherKeys[x]) > -1) { mask += \"|\\\\\" + otherKeys[x]; } else { mask += \"|\" + otherKeys[x]; } } } break; } } c.EditMask = \"^[\" + mask.substring(1) + \"]*$\"; //EditMask를 통해 ExceptKeys를 유사하게 구현한다. } else if(c[\"ExceptKeys\"]) { var setV = c[\"ExceptKeys\"]; var acceptKeyArr = setV.split(\"|\"); var mask = \"\"; for (var i = 0; i < acceptKeyArr.length; i++) { switch (acceptKeyArr[i]) { case \"E\": mask += \"|^a-zA-Z\"; break; case \"N\": mask += \"|^\\\\d\"; break; case \"K\": mask += \"|^\\\\u3131-\\\\u314e\\\\u314f-\\\\u3163\\\\uac00-\\\\ud7a3\"; break; default: if (acceptKeyArr[i].substring(0, 1) == \"[\" && acceptKeyArr[i].substring(acceptKeyArr[i].length-1) == \"]\") { var otherKeys = acceptKeyArr[i].substring(1, acceptKeyArr[i].length-1); for (var x = 0; x<otherKeys.length; x++) { if ([\".\",\"-\",\"$\",\"^\",\"*\",\"+\",\"|\",\"(\",\")\"].indexOf(otherKeys[x]) > -1) { mask += \"|^\\\\\" + otherKeys[x]; } else { mask += \"|^\" + otherKeys[x]; } } } break; } } c.EditMask = \"^[\" + mask.substring(1) + \"]*$\"; } } } acceptExceptKeysMig(opt.options.Cols); if(opt.options.LeftCols) acceptExceptKeysMig(opt.options.LeftCols); if(opt.options.RightCols) acceptExceptKeysMig(opt.options.RightCols); //반드시 수정된 opt를 리턴해야 시트가 만들어짐. return opt; } ``` ### MaximumValue,MinimumValue 마이그레이션 [IBSheet.onBeforeCreate](../static/on-before-create) 이벤트에서 [onEndEdit](../events/on-end-edit) 이벤트를 공통 정의 함으로써 구현 가능합니다. 아래 내용을 참고해 주세요. 1. ibsheet-common.js 에 onBeforeCreate 이벤트를 다음과 같이 정의 합니다. ```js _IBSheet.onBeforeCreate = function(init) { //event 공통 정의 init.options.Events = init.options.Events || {}; // 개별 화면에서 선언한 onEndEdit가 있는 경우, orgEndEdit에 저장 if(typeof init.options.Events.onEndEdit != \"undefined\") { init.options.Events.orgEndEdit = init.options.Events.onEndEdit; } // onEndEdit 이벤트 공통 정의 init.options.Events.onEndEdit = function(evt) { // 컬럼에 MinimumValue 가 정의 돈 경우 if (typeof evt.sheet.Cols[evt.col].MinimumValue != \"undefined\") { if (evt.sheet.Cols[evt.col].MinimumValue > Number(evt.raw)) { alert( \"입력 가능한 최소값은\" + evt.sheet.Cols[evt.col].MinimumValue + \"입니다.\" ); // 편집창을 빠져나가지 못하게 함 return true; } } // 컬럼에 MaximumValue가 정의 된 경우 if (typeof evt.sheet.Cols[evt.col].MaximumValue != \"undefined\") { if (evt.sheet.Cols[evt.col].MaximumValue < Number(evt.raw)) { alert( \"입력 가능한 최대값은\" + evt.sheet.Cols[evt.col].MaximumValue + \"입니다.\" ); return true; } } // 개별화면에서 정의한 onEndEidt가 있는 경우 if(typeof init.options.Events.orgEndEdit != \"undefined\") { return init.options.Events.orgEndEdit(evt) } } return init; } ``` 2. 시트 생성시 IBSheet7 제품과 동일하게 MaximumValue, MinimumValue를 정의하여 사용합니다. ```js const initSheet = { Cols:[ {Header:\"이익\", Type: \"Int\", Name:\"income\", MinimumValue:1000 }, // 값은 1000 이상 입력 가능 {Header:\"손해\", Type: \"Int\", Name:\"loss\", MaximumValue:0 } // 값은 0 이하 입력 가능 ... ] } IBSheet.create({ id: \"mySheet\", el: \"sheetDIV\", options: initSheet }) ```"
        },
        "url": "docs/appx/ibsheet7-migration.html"
      },
      {
        "cid": 933,
        "sid": "import-export",
        "name": "import-export",
        "label": "엑셀파일 업로드/다운로드",
        "data": {
          "body": "> 시트의 내용을 엑셀이나,텍스트 파일로 다운로드 하거나, 반대로 파일의 내용을 읽어 시트에 업로드하는 방법에 대해 알아봅니다. > **이 내용은 서버 기반 파일 다운로드/업로드 방법을 설명합니다.** > **클라이언트 기반 다운로드/업로드는 [exportData](/docs/funcs/export-data)/[importData](/docs/funcs/import-data) 함수를 참고해 주세요.** ## 필수 파일 요소 업로드/다운로드 작업을 위해서 다음과 같은 파일이 필요합니다. 1. 서버모듈(엑셀모듈) |파일명|용도| |---|---| |ibsheet8-1.x.x.jar|엑셀 서버코어모듈| |ibsheet8-hwpx-1.0.x.jar|`down2Hwpx` 서버코어모듈| |poi-4.1.2, poi-ooxml-4.1.2, poi-ooxml-schemas-4.1.2|엑셀 파일 생성/파싱 모듈| |commons-collections4-4.4.jar, commons-compress-1.19.jar commons-math3-3.6.1.jar, curvesapi-1.06.jar, servlet-api.jar SparseBitSet-1.2.jar, xmlbeans-3.1.0.jar |poi 이용시 필요 파일| |commons-codec-1.13.jar|엑셀 업로드 관련 인코딩 모듈, `down2Hwpx`시 필요| |commons-logging-1.1.3.jar|로그 모듈| |ib-itext.jar|pdf 다운로드 모듈| |batik-all-1.17.jar, commons-io-2.11.0.jar xml-apis-ext-1.3.04.jar, xmlgraphics-commons-2.9.jar |이미지 처리 관련 모듈, `down2Hwpx`시 필요| - dotnet 4.0 이용시 필요 파일 |파일명|용도| |---|---| |IBSheet8-4.0.dll|엑셀 서버코어모듈| |IBSheet8-4.0.resources.dll|엑셀 서버코어 서브모듈| |Syncfusion.Compression.Base.dll, Syncfusion.Core.dll, Syncfusion.XlsIO.Base.dll|엑셀 생성/파싱 모듈| |wkhtmltopdf.exe|pdf생성 모듈| ### 서버모듈 확인 방법(엑셀 모듈) 서버에서 jar 파일이 정상적으로 로드되었는지 다음 구문을 통해 확인 할 수 있습니다. ```jsp <% System.out.println(com.ibleaders.ibsheet.util.Version.getVersion()); %> ``` 위와 같이 jsp파일에 입력시 서버에 콘솔창에 다음과 같은 메세지가 나오면 정상입니다. (각 jar 파일에 버젼 정보를 확인해 주세요.) ```console ******************************************************************************** # ibsheet8-1.1.X # IBSheet(H) 8.0.0.0~ # IBChart(H) 7.3.0.1~ ******************************************************************************** Class Info : org.apache.poi.ss.usermodel.Workbook jar path : /D:/tomcat/tomcat-8.5_servertest/webapps/ibsheet8_demo_test/WEB-INF/lib/poi-4.1.2.jar jar Version : Apache POI 4.1.2 Required Version : POI 3.8 beta3 or later ******************************************************************************** Class Info : org.apache.poi.ooxml.POIXMLDocument jar path : /D:/tomcat/tomcat-8.5_servertest/webapps/ibsheet8_demo_test/WEB-INF/lib/poi-ooxml-4.1.2.jar jar Version : Apache POI 4.1.2 Required Version : POI 3.8 beta3 or later ******************************************************************************** Class Info : org.openxmlformats.schemas.spreadsheetml.x2006.main.CTWorkbookPr jar path : /D:/tomcat/tomcat-8.5_servertest/webapps/ibsheet8_demo_test/WEB-INF/lib/poi-ooxml-schemas-4.1.2.jar jar Version : Apache POI 4.1.2 Required Version : POI 3.8 beta3 or later ******************************************************************************** Class Info : org.openxmlformats.schemas.spreadsheetml.x2006.main.CTWorkbook jar path : /D:/tomcat/tomcat-8.5_servertest/webapps/ibsheet8_demo_test/WEB-INF/lib/poi-ooxml-schemas-4.1.2.jar jar Version : Apache POI 4.1.2 Required Version : POI 3.8 beta3 or later ******************************************************************************** Class Info : org.apache.xmlbeans.XmlBeans jar path : /D:/tomcat/tomcat-8.5_servertest/webapps/ibsheet8_demo_test/WEB-INF/lib/xmlbeans-3.1.0.jar jar Version : Required Version : XMLBeans 2.3.0 or later ******************************************************************************** POI Core Library file:/D:/tomcat/tomcat-8.5_servertest/webapps/ibsheet8_demo_test/WEB-INF/lib/poi-4.1.2.jar POI OOXML Library file:/D:/tomcat/tomcat-8.5_servertest/webapps/ibsheet8_demo_test/WEB-INF/lib/poi-ooxml-4.1.2.jar ``` 3. jsp,aspx 파일 |파일명|용도| |---|---| |DirectDown2Excel.jsp(aspx)|엑셀파일 다운로드| |DirectLoadExcel.jsp(aspx)|엑셀파일 업로드| |Down2Excel.jsp(aspx)|엑셀파일 다운로드| |Down2Hwpx.jsp|한글(Hwpx) 파일 다운로드, 닷넷은 지원하지 않음| |Down2Text.jsp(aspx)|텍스트파일 다운로드| |Down2Pdf.jsp(aspx)|PDF파일 다운로드| |LoadExcel.jsp(aspx)|엑셀파일 업로드| |LoadText.jsp(aspx)|텍스트파일 업로드| 4. 플러그인 파일 include 파일 시트를 이용하여 다운로드/업로드 작업을 할 모든 페이지에는 `/plugins/ibsheet-excel.js` 파일이 인클루드 되어야 합니다. ## 준비 과정 ### jsp 파일경로 설정 시트 생성시 Cfg 프로퍼티에 `Export.Url` 속성을 통해 jsp 파일이 위치한 경로를 설정해야 합니다. ```json options.Cfg = { \"Export\":{ \"Url\":\"/assets/ibsheet/jsp\" } } ``` ## 기능 구현 [down2Excel](/docs/funcs/excel/down-to-excel)이나 [loadText](/docs/funcs/excel/load-text)함수를 통해 시트의 내용을 다운로드/업로드 하실 수 있습니다. ```javascript sheet.down2Excel({\"fileName\":\"boardList.xlsx\",\"sheetDesign\":1,\"merge\":1}); ``` ![down2Excel](/assets/imgs/down2Excel.png) 업로드/다운로드 함수에 대한 자세한 기능은 해당 함수에 대한 메뉴얼 파트를 참고해 주세요.",
          "see": [
            {
              "label": "Export cfg",
              "url": "/docs/props/cfg/export"
            },
            {
              "label": "DirectDown2Excel method",
              "url": "/docs/funcs/excel/direct-down-to-excel"
            },
            {
              "label": "DirectLoadExcel method",
              "url": "/docs/funcs/excel/direct-load-excel"
            },
            {
              "label": "down2Excel method",
              "url": "/docs/funcs/excel/down-to-excel"
            },
            {
              "label": "Down2Hwpx method",
              "url": "/docs/funcs/excel/down-to-hwpx"
            },
            {
              "label": "loadExcel method",
              "url": "/docs/funcs/excel/load-excel"
            },
            {
              "label": "down2Text method",
              "url": "/docs/funcs/excel/down-to-text"
            },
            {
              "label": "loadText method",
              "url": "/docs/funcs/excel/load-text"
            },
            {
              "label": "down2Pdf method",
              "url": "/docs/funcs/excel/down-to-pdf"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.1.0.85|Down2Hwpx 기능 추가||excel|1.1.2|Down2Hwpx 기능 추가||jar|1.0.0|Down2Hwpx 기능 추가|"
        },
        "url": "docs/appx/import-export.html"
      },
      {
        "cid": 934,
        "sid": "init-structure",
        "name": "init-structure",
        "label": "시트 객체 구조",
        "data": {
          "body": "***시트 객체 초기화(options)*** ## 초기화 구문 구조 ``` options.(ROOT) ├── Def // 각 영역의 공통 기능 설정 │ ├── Row:{} // 모든 데이터 행의 공통 기능 설정 │ ├── Col:{} // 모든 데이터 열의 공통 기능 설정 │ ├── Header:{} // 헤더 행의 공통 기능 설정 │ ├── CustomID:{} // 임의의 행에 대한 설정 │ ├── Group: {} // Group 행에 대한 설정 │ ├── SubSum : {} // 소계/누계 행에 대한 설정 │ └── FormulaRow:{} // FormulaRow행(합계)에 대한 설정 │ ├── Cfg:{} // 시트 전역 기능 설정 │ ├── LeftCols:[] // 왼쪽 고정 영역 열 설정 ├── Cols:[] // 기본열 설정(가운데 영역) ├── RightCols:[] // 우측 고정 영역 열 설정 │ ├── Events:{} // 이벤트 선언 │ ├── Head:[] // 헤드영역에 커스텀행 추가/정의 ├── Foot:[] // 풋 영역에 커스텀행 추가/정의 ├── Solid:[] // Solid 행 추가/정의 └── Filter:{} // 필터 행 추가/정의 ``` 시트설정 예) ```javascript var OPT = { \"Def\" : { // 공통 속성 설정 \"Col\": { // 모든 열 공통 설정 (col property) \"CanEdit\": 0 }, \"Row\": { // 모든 행 공통 설정 (row property) \"AlternateColor\": \"#FEEDFF\", \"Spanned\": 1 }, \"Header\": { // 헤더행 공통 설정 (row property) \"Align\": \"Center\", \"TextStyle\": 1 }, \"MyCustomRow\": { // 임의의 행 공통 설정 (row property) \"Color\": \"#666666\", \"TextColor\": \"#FFFFFF\", \"CanFocus\": 0 }, \"FormulaRow\": { // FormulaRow 설정 (row property) \"Spanned\": true, \"SEQSpan\": 2 }, \"Group\": { // Group 행 설정 (row property) \"Expanded\": 1, \"sPrice\": { \"Formula\": sPriceFormula } }, \"SubSum\": { // 소계/누계 행 설정 (row property) \"AFormat\": \"#,##0.##\", \"BFormat\": \"#,##0\" } }, \"Cfg\": { // 전역 기능 설정(cfg property) \"LeftCanResize\": 1, \"LeftWidth\": 100, \"RightCanResize\": 1, \"RightWidth\": 100 }, \"LeftCols\": [ // 왼쪽영역(LeftSection) 고정 열 설정 (col property) { \"Header\": \"NO\", \"Type\": \"Int\", \"Name\": \"SEQ\", \"Width\": 50 },{ \"Header\": {\"Value\": \"\", \"Type\": \"Bool\"}, \"Type\": \"Bool\", \"CanEdit\": 1, \"CanSort\": 0, \"Name\": \"CHK\", \"MaxWidth\": 40 } ], \"Cols\": [ // 기본 열 설정(가운데영역) (col property) { \"Header\": { // 열의 헤더 설정 개별 셀 설정 \"Value\": \"부서명\", \"Color\": \"#085820\" }, \"Name\": \"deptName\", \"Type\": \"Text\", \"Size\": 30 }, { \"Header\": \"1분기\", \"Name\": \"qt1\", \"Type\": \"Int\", \"Width\": 100, \"Format\": \"#,##0 만원\", \"FormulaRow\": \"Avg\" }, { \"Header\": \"2분기\", \"Name\": \"qt2\", \"Type\": \"Int\", \"Width\": 100, \"Format\": \"#,##0 만원\", \"FormulaRow\": \"Avg\", \"Color\": \"#EDEDED\" }, { \"Header\": \"3분기\", \"Name\": \"qt3\", \"Type\": \"Int\", \"Width\": 100, \"Format\": \"#,##0 만원\", \"FormulaRow\": \"Avg\" }, { \"Header\": \"4분기\", \"Name\": \"qt4\", \"Type\": \"Int\", \"Width\": 100, \"Format\": \"#,##0 만원\", \"FormulaRow\": \"Avg\", \"Color\": \"#EDEDED\" } ], \"RightCols\": [ // 오른쪽영역(RightSection) 고정 열 설정 (col property) { \"Header\": \"1년 합산\", \"Name\": \"YEARSUM\", \"Type\": \"Int\", \"Format\": \"#,##0 만원\", \"Formula\": \"qt1+qt2+qt3+qt4\", \"Width\": 100 } ], \"Foot\": [ // 풋 영역 설정 { \"Def\": \"MyCustomRow\", \"SEQ\": {\"Type\": \"Text\"}, \"CHK\": {\"Type\": \"Text\"}, \"deptName\": {\"Value\": \"2017년 자료\", \"TextColor\": \"#FF0000\", \"Span\": 5, \"Format\": \"\", \"Type\": \"Text\", \"Align\": \"Center\"}, \"YEARSUM\": {\"Type\": \"Text\", \"Format\": \"\", \"Value\": \"\", \"Formula\": \"\"} } ], \"Events\":{ // 이벤트 설정 \"onSelectMenu\":function (evt) { } }, \"Solid\": [ // Solid 행 설정 ], \"Filter\": { // 필터 행 설정 컬럼명: { // 컬럼 단위로 필요한 기능을 셋팅 할 수 있음. Button: 'Defaults', Defaults: '|*Rows' } } }; ``` ## 조회 데이터 구조 ```js { \"data\":[ {\"deptName\": \"국내영업 1팀\", \"qt1\": 15030, \"qt2\": 21102, \"qt3\": 20308, \"qt4\": 23041}, {\"deptName\": \"국내영업 2팀\", \"qt1\": 25100, \"qt2\": 42460, \"qt3\": 38740, \"qt4\": 54765}, {\"deptName\": \"국내영업 3팀\", \"qt1\": 11474, \"qt2\": 19671, \"qt3\": 24746, \"qt4\": 20754}, {\"deptName\": \"해외 영업팀\", \"qt1\": 24146, \"qt2\": 24654, \"qt3\": 24164, \"qt4\": 48121} ] } ``` ![로드된 시트 이미지](/assets/imgs/basicSheet.png \"로드된 시트 이미지\") [로드된 시트 이미지] ## 이벤트 호출(event) 시트는 일반적으로 기본 이벤트와 행, 열, 셀에서 설정 가능한 `JSON 이벤트`를 가집니다. 시트 생성, 데이터 & 통신, 행, 열, 셀, 셀 타입, 페이징, 전역 설정 부분에서 각각 사용될 수 있는 다양한 이벤트가 있습니다. 이벤트 설정 방법 : 시트 생성 시 사용되는 `options`에 설정 ```javascript options.Events : { // 일반 event onAfterChange:function (params) { alert(params.oldval + \"값이 \" + params.val + \"로 수정되었습니다.\"); } } options.Cols: [ // JSON event { Name: \"ColName\", OnClickSide:function () {alert(\"JSON Event\");} }, ... ] ```",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/init-structure.html"
      },
      {
        "cid": 935,
        "sid": "kind-2",
        "name": "kind",
        "label": "Kind",
        "data": {
          "body": "> 시트 내에 모든 행은 각각의 역할(기능)이 있습니다. 가장 일반적인 역할로는 헤더와 데이터 행이 있을수 있는데, 그 외에도 헤더의 하단에 붙어 있는 필터나 그룹 등 다양한 기능이 존재합니다. ### Kind의 종류 |Kind|Description| |---|---| |*Group*|헤더 상단에 위치하여 지정한 열에 대한 그룹핑 기능을 수행합니다. ![그룹](/assets/imgs/groupRow.png \"그룹행\")| |*Header*|데이터 영역 상단에 항상 보여지게 되는 행으로 열의 위치 변경, 소팅 등의 기본적인 기능을 가지고 있습니다. ![헤더](/assets/imgs/header.png \"헤더행\")| |*Filter*|헤더와 데이터 영역 사이에 위치하며, 각 셀에 값을 입력시 열 별로 해당 값을 포함하는 행만 남기고 나머지 행을 감추는 기능을 가지고 있습니다. ![필터](/assets/imgs/filter.png \"필터행\")| |*Search*|필터와 데이터 행 사이에 위치하여 입력한 값을 포함하는 행만 남기고 나머지 행을 감추는 기능을 합니다. ![찾기](/assets/imgs/searchRow.png \"찾기행\")| |*Data*|일반적인 데이터 행입니다. ![데이터](/assets/imgs/dataRow.png \"데이터행\")| |*Head*|헤더 행 아래 고정된 행을 의미합니다. ![Head](/assets/imgs/kindHead.png \"Head\")| |*Foot*|합계 행이나 데이터 행 아래 고정된 행을 의미합니다. ![Head](/assets/imgs/kindFoot.png \"Head\")| |*Space*|빈 공간의 행으로 시트 내의 열의 너비에 영향을 받지 않는 다양한 셀 객체를 넣을 수 있습니다.(일반적인 솔리드 행) 또한 행의 위치도 헤더의 위나, 푸터의 위나 아래 등 다양한 곳에 위치할 수 있습니다. ![스페이스](/assets/imgs/spaceRow.png \"스페이스행\")|",
          "see": [
            {
              "label": "Kind row",
              "url": "/docs/props/row/kind"
            },
            {
              "label": "getRowKind method",
              "url": "/docs/funcs/core/get-row-kind"
            },
            {
              "label": "Solid appendix",
              "url": "/docs/appx/solid"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/kind.html"
      },
      {
        "cid": 936,
        "sid": "make-loop",
        "name": "make-loop",
        "label": "Loop문 만들기",
        "data": {
          "body": "> 조회된 데이터 전체에 대해서 for loop문을 수행하는 것 보다는 가급적 formula를 이용하여 로직을 구성하는 것이 성능적으로 좋습니다. > 하지만 formula를 통해 수행하기 어려운 경우라면 어쩔수 없이 행(row)나 열(col) 에 대해서 처음부터 끝까지 Loop문을 만들어 수행해야 하는 경우도 있습니다. ## 1. 행(row)단위 Loop문 만들기 행 단위로 Loop문을 구성할 때는 [getDataRows()](/docs/funcs/core/get-data-rows)함수를 통해 전체 데이터 행들을 배열로 받은 후, 배열 안에 각 행의 객체를 접근하는 형태로 로직을 구성할 수 있습니다. ### Example ```javascript //첫번째 데이터부터 마지막 데이터까지 Loop 문을 수행하면서 특정 열(열이름:CHK)에 체크 된 행 객체를 배열형태로 반환하는 참고용 로직입니다. //실제로는 getRowsByChecked()함수를 통해 아래와 같은 작업을 수행할 수 있습니다. //전체 데이터 행을 배열로 얻는다. var rows = sheet.getDataRows(); var checkRowArr = []; for (var i = 0; i < rows.length; i++) { //CHK 열이 체크되어 있으면 if (rows[i][\"CHK\"] == 1) { //배열에 넣는다. checkRowArr.push(row); } } //전체 체크된 행의 개수를 console에 출력 console.log(checkRowArr.length); ``` ## 2. 열(col)단위 Loop문 만들기 열 단위로 Loop문을 구성할 때는 [getCols()](/docs/funcs/core/get-cols)함수를 통해 전체 열이나, 눈에 보여지는 열, 편집 가능한 열 등을 배열로 받은 후, 배열 안에 각 열이름을 접근하는 형태로 로직을 구성할 수 있습니다. ### Example ```javascript //첫번째 데이터 행을 기준으로 Loop 문을 수행하여 Type이 Text인 열의 열이름을 배열에 담아 리턴하는 참고용 로직입니다. //눈에 보여지는 열(감춰진 열 제외)만 추출 var colsArr = sheet.getCols(\"Visible\"); var textColArr = []; var fRow = sheet.getFirstRow(); //첫번째 행 for (var i = 0; i < colsArr.length; i++) { //첫번째 행에 전체 열의 타입을 비교하여 if (sheet.getType(fRow,colsArr[i]) === \"Text\") { //배열에 넣는다. textColArr.push(colsArr[i]); } } //Type이 Text인 열들을 console에 출력 console.log(textColArr); ```",
          "see": [
            {
              "label": "getDataRows method",
              "url": "/docs/funcs/core/get-data-rows"
            },
            {
              "label": "getCols method",
              "url": "/docs/funcs/core/get-cols"
            },
            {
              "label": "getFirstRow method",
              "url": "/docs/funcs/core/get-first-row"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/make-loop.html"
      },
      {
        "cid": 937,
        "sid": "menu-5",
        "name": "menu",
        "label": "Menu",
        "data": {
          "body": "> 마우스 우측 버튼 클릭시 보여질 컨텍스트 메뉴의 모양과 내용을 설정합니다. > 단순한 컨텍스트 메뉴를 사용 시에는 구분자로 연결한 문자열로 설정할 수 있습니다. (ex: Menu:\"|저장|취소|미리보기\" ) > 보다 복잡한 구조의 컨텍스트 메뉴를 표현할 때는 json 형식으로 설정해야 합니다. > 메뉴를 선택하거나, 확인 버튼을 클릭하면 onSelectMenu 이벤트를 통해 선택한 내용을 확인할 수 있습니다. ## Menu 속성 Menu에서 설정되는 속성은 크게 두가지로 나뉩니다. 1. 메뉴 객체 대한 속성 2. 메뉴 내에 특정 item 에 대한 속성 ```js { \"Menu\":{ \"Buttons\":[ \"Ok\", \"Cancel\" ], \"Items\":[ {\"Name\":\"미국\",\"Value\":1,\"Bool\":1}, {\"Name\":\"일본\",\"Value\":0,\"Bool\":1}, {\"Name\":\"중국\",\"Value\":0,\"Bool\":1}, {\"Name\":\"북한\",\"Value\":1,\"Bool\":1} ], \"OnSave\":function(item,data) { alert(\"[\"+data.join(\",\")+\"]를 선택하셨습니다.\"); } } } ``` ![메뉴기능](/assets/imgs/menuBasic.png) ### 1. 메뉴 객체 대한 속성 |Name|Type|Description| |---|---|---| |*Items*|`array[object]`|메뉴에 보여질 아이템들을 배열 형태로 설정합니다.| |*Default*|`object`|Items 배열 내에 설정된 모든 하위 아이템 객체에 공통으로 적용해야 할 내용을 설정합니다. ex) //하위 아이템들을 체크박스 형식으로 설정 Default:{ Bool:1 }, Items:[{}, {}, {}] | |*SaveType*|`number`|여러 아이템을 선택 혹은 수정 후 최종적으로 onSelectMenu이벤트로 전달될 값을 설정합니다. 설정에 따라 리턴되는 값은 다음과 같습니다. 0 : 빈값이 아닌 아이템만 리턴됩니다. Bool속성을 사용하는 아이템은 체크된 경우 Name속성이 리턴되며, 편집가능한 타입의 아이템은 Name:Value형태로 리턴됩니다. 1 : 수정된 아이템들만 리턴됩니다. Bool속성을 사용하는 아이템은 Name: 0, Name: 1 형태로 리턴되며, 편집가능한 타입의 아이템은 Name: Value 형태로 리턴됩니다. 2 : 모든 값들이 리턴됩니다. Bool속성을 사용하는 아이템은 Name: 0, Name: 1 형태로 리턴되며, 편집가능한 타입의 아이템은 Name: Value 형태로 리턴됩니다. 3 : 모든 값들이 리턴됩니다. Bool속성을 사용하는 아이템은 0/1 형태로 리턴되며, 편집가능한 타입의 아이템은 Value 만 리턴됩니다. 4 : 모든 값들이 리턴됩니다. Bool속성을 사용하는 아이템은 0/1 대신 언체크는 \"\"(공백)/체크는 Name이 리턴되며, 편집가능한 타입의 아이템은 Value 만 리턴됩니다.| |*Buttons*|`array[string]`|메뉴 하단에 표시될 버튼을 배열로 설정합니다. 설정할 수 있는 버튼은 다음과 같습니다. \"Ok\":선택한 값을 리턴 \"Clear\":Bool속성 사용하는 아이템에 대해 전체 선택 혹은 선택 취소 \"Cancel\":선택값을 무시하고 메뉴 닫기 ex) \"Buttons\":[ \"Ok\", \"Cancel\" ]| |*ExpandTime*|`number`|Level속성을 통해 하위 아이템을 트리 형식으로 표현할 때 상위 아이템에 마우스 호버 시 설정된 시간(ms단위) 이후에 자동으로 하위 아이템 메뉴가 펼쳐집니다. 0으로 설정시 항상 하위 아이템 메뉴가 펼쳐진 상태로 보여지며 접기 위한 아이콘도 표시되지 않습니다. (default:200)| |*CollapseOther*|`boolean`|트리 형식 사용시 사용자가 어떤 상위 아이템을 클릭하여 하위 아이템 메뉴가 보여지도록 펼치면, 자동으로 기존에 펼쳐져 있던 다른 상위 아이템의 하위 아이템 메뉴를 접게 합니다.(default:1)| |*ShowHint*|`boolean`|메뉴 크기가 작아서 일부 내용이 안보이는 경우, 마우스 커서 호버시 해당 아이템의 너비를 늘려 가려진 부분을 보여줍니다.| ### 2. 메뉴 내 특정 item에 대한 속성 |Name|Type|Description| |---|---|---| |*Name* **필수**|`string`|각 아이템의 이름을 설정합니다. Text속성을 설정하지 않는 경우 Name으로 설정한 값이 아이템 리스트에 보여집니다. Value속성이 설정되지 않는 경우 Name으로 설정한 값이 전달됩니다. Name은 아이템 별로 고유해야 합니다.| |*Text*|`string`|메뉴에 보여질 아이템 텍스트를 설정합니다. Text속성을 설정하지 않는 경우 Name으로 설정한 값이 아이템 리스트에 보여집니다.| |*Value*|`string`|특정 아이템을 선택시 전달할 값을 설정합니다. Value속성이 설정되지 않는 경우 Name으로 설정한 값이 전달됩니다. 다만 Bool:1 로 각 아이템에 체크박스를 두는 경우에는 용도가 완전히 달라져서 체크박스에 대한 초기 선택 여부로 사용됩니다.| |*Icon*|`string`|아이템 텍스트 왼쪽에 보여질 아이콘의 url을 설정합니다.| |*IconWidth*|`number`|아이콘 객체의 너비를 설정합니다.| |*LeftHtml*|`string`|아이템 텍스트 왼쪽에 원하는 HTML객체를 넣습니다.| |*LeftWidth*|`number`|왼쪽 HTML객체의 너비를 설정합니다.| |*RightHtml*|`string`|아이템 텍스트 오른쪽에 원하는 HTML객체를 넣습니다.| |*RightWidth*|`number`|오른쪽 HTML객체의 너비를 설정합니다.| |*Height*|`number`|아이템 객체의 최소 높이를 설정합니다.(설정하지 않는 경우 내용의 높이에 따라 자동 결정됩니다.)| |*Hidden*|`boolean`|특정 아이템 객체의 감춤 여부를 설정합니다. 아이템이 자식 메뉴를 갖고 있는 경우, 자식도 모수 숨겨집니다.| |*Disabled*|`boolean`|특정 아이템을 비활성화 합니다. 아이템이 보이지만 선택이 불가능한 상태가 됩니다.| |*Default*|`object`|Items 배열 내에 설정된 모든 하위 아이템 객체에 공통으로 적용해야 할 내용을 설정합니다. ex) //하위 아이템들에게 동일한 Icon을 적용한다. Default:{ Icon:\"./image/icon/bt.gif\", IconWidth:24 }, Items:[{},{},{}] | |*Caption*|`boolean`|특정 아이템을 머릿말로 사용합니다. 이 기능을 설정시 해당아이템은 선택되지 않습니다. <pre>Menu:{ Items:[ {Name:\"N1\",Text:\"연령별\",Caption:1}, {Name:\"N2\",Text:\"경행대\"}, {Name:\"N3\",Text:\"성인\"}, {Name:\"N4\",Text:\"청소년\"}, {Name:\"N5\",Text:\"어린이\"} ] }</pre> ![Caption](/assets/imgs/menuCaption.png \"Caption\")| |*Items*|`array[object]`|특정 아이템 아래 하위 아이템 객체를 설정합니다.| |*Level*|`boolean`|하위 아이템 객체들을 Tree 형식으로 표현합니다. ![Level](/assets/imgs/menuLevel.png \"Level\")| |*Expanded*|`number`|Level속성을 통해 아이템을 Tree 형식으로 표현할때 아이템의 펼침 여부를 설정합니다. -1 : 펼쳐져있고 닫기 불가 1 : 펼쳐저 있고 닫기 가능 0 : 닫혀 있음 <b>이 속성은 상위의 CollapseOther 나 ExpandTime 속성에 영향을 받습니다.</b>| |*Menu*|`boolean`|하위 아이템 객체들을 부모아이템 우측에 메뉴 형식으로 표현합니다. ![Menu](/assets/imgs/menuMenu.png \"Menu\")| |*Columns*|`number`|하위 아이템 객체를 여러개 열으로 나누어 표현합니다. <pre>Menu:{ Items:[ { Columns:2, Items:[ {Name:\"안보전략\"}, {Name:\"군사발전\"}, {Name:\"국방자원\"} ] } ] }</pre> ![Columns](/assets/imgs/menuColumns.png \"Columns\") |*ColumnSizes*|`string`|열당 들어갈 아이템 개수를 \",\"를 구분자로 설정합니다. 가령 Columns:3 이고 ColumnSizes:\"3,2,4\"인 경우, 다음과 같이 표시됩니다. ![ColumnSizes](/assets/imgs/menuColumnSizes.png \"ColumnSizes\")| |*Bool*|`boolean`|아이템 텍스트 우측에 체크박스를 표시합니다. 이 속성이 적용된 아이템은 클릭시 체크박스의 값이 변경됩니다. 체크된 전체 아이템은 Buttons속성을 통해 \"확인\"버튼을 클릭하시면 onSelectMenu 이벤트로 전달됩니다. ![Bool](/assets/imgs/menuBool.png \"Bool\")| |*Group*|`number`|Bool속성을 사용하는 아이템들 간에 Radio 그룹을 형성하여 같은 그룹 내에서는 하나의 아이템만 선택가능하게 합니다. Group의 값은 1이상의 숫자로 설정할 수 있습니다.| |*UnCheck*|`boolean`|Group 속성을 사용하는 아이템에서 Radio에 대한 선택을 해제할 수 있는지 여부를 설정합니다.| |*GroupAll* *CheckAll*|`number` `boolean`|Bool 속성을 사용하는 아이템들 중에서 같은 GroupAll 속성값을 갖는 아이템들은 CheckAll설정이 되어있는 아이템이 체크될때 같이 체크 됩니다.<pre>//과일전체 아이템 선택시 사과,배,오렌지 아이템도 선택됩니다. Menu:{ Items:[ {Name:\"과일전체\",Bool:1,GroupAll:200,CheckAll:1}, {Name:\"사과\",Bool:1,GroupAll:200}, {Name:\"배\",Bool:1,GroupAll:200}, {Name:\"오렌지\",Bool:1,GroupAll:200}, ] }</pre>| |*NoAll*|`boolean`|설정한 아이템은 \"전체취소(Clear)/전체선택(All)\"버튼의 영향을 받지 않게 됩니다.| |*Enum*|`boolean`|하위 아이템을 부모아이템 우측에 콤보 형태로 표현할지 여부를 설정합니다. ![Enum](/assets/imgs/menuEnum.png \"Enum\")| |*Edit*|`boolean`|아이템 텍스트 우측에 편집 가능한 input 객체를 표시합니다. {Name:\"이름\",Edit:1,Width:150}설정시 ![Edit](/assets/imgs/menuEdit.png \"Edit\")| |*Width*|`number`|Enum속성 사용시 콤보 박스의 너비를 설정합니다. Edit 속성 사용시 input 객체의 너비를 설정합니다.| |*Left*|`boolean`|Bool속성 사용시 체크박스를 왼쪽에 위치시킵니다. Enum속성을 사용시 콤보박스를 왼쪽에 위치시킵니다. Edit속성을 사용시 input 객체를 왼쪽에 위치시킵니다.| --- ## Menu 이벤트 전역으로 발생하는 onShowMenu나 onSelectMenu 이벤트 외에 메뉴별로 각각 이벤트를 설정할 수 있습니다. 메뉴에 설정되는 이벤트도 속성과 마찬가지로 전역 이벤트와 특정 아이템에 설정하는 이벤트로 나뉩니다. ### 1. 메뉴 전체 이벤트 #### OnSave 메뉴를 선택하거나 확인 버튼을 클릭시 발생합니다.(메뉴가 닫히고 나서 발생) 1. 특정 아이템을 클릭하는 경우 item인자에 클릭한 item객체가 넘어오고, Name/Value 속성을 통해 값을 확인하실수 있습니다. data에는 null이 담깁니다. 2. 편집가능한 아이템을 수정 후 확인 버튼을 클릭하는 경우 item인자는 null이 넘어오고, data인자에 선택한 아이템의 값이 배열로 담겨 넘어옵니다. |인자|유형|기능설명| |---|---|---| |item|`object`|메뉴에서 선택한 아이템 객체| |data|`array`|메뉴에서 선택한 아이템들의 값| #### OnButton 하단에 버튼을 클릭시 발생합니다. OnSave보다 먼저 발생합니다. false를 리턴시 버튼 클릭에 대한 후 처리 기능을 막을수 있습니다. |인자|유형|기능설명| |---|---|---| |button|`string`|선택한 버튼 문자열| ### 2. 아이템 개별 이벤트 #### OnClick 특정 메뉴 아이템을 클릭시 발생 합니다. 리턴값에 따라 다양한 기능을 부여할 수 있습니다. * false를 리턴시 : 아이템 클릭 후 발생하는 모든 기능을 실행하지 않고 메뉴를 계속 탐색할 수 있습니다. * true를 리턴시 : 아이템 클릭 후 발생하는 모든 기능을 실행하지 않고 메뉴를 닫습니다. * null을 리턴시 : 클릭으로인한 기본 동작(메뉴 아이템 선택)을 실행합니다. 이벤트 안에서 클릭한 아이템(MenuItem)은 this로 (아이템 Name의 경우 this.Name으로 접근) 바인딩됩니다. this.Owner를 통해 해당 아이템을 가지고 있는 전체 메뉴 객체에 접근 가능하며 부모 아이템 이나 메뉴는 this.Parent로 접근 가능합니다. 시트 셀에서 메뉴가 생성된 경우 this.Owner.Sheet, this.Owner.Row, this.Owner.Col로 메뉴가 생성된 시트, 행, 열이 접근가능합니다. #### OnChanged 수정이 가능한 형태의 아이템(Bool, Enum, Edit 속성 사용)에서 변경사항이 있을시 발생합니다. (변경사항 적용되기전 발생) 아이템은 Owner(Menu)라는 프로퍼티를 통해 해당 아이템을 가지고 있는 전체 메뉴를 접근 가능합니다. 이벤트 안에서 클릭한 아이템(MenuItem)은 this로(아이템 Name의 경우 this.Name으로 접근하고, 원래의 값은 this.Value로 접근)바인딩됩니다. this.Owner를 통해 해당 아이템을 가지고 있는 전체 메뉴 객체에 접근 가능하며 부모 아이템이나 메뉴는 this.Parent로 접근 가능합니다. 시트 셀에서 메뉴가 생성된 경우 this.Owner.Sheet, this.Owner.Row, this.Owner.Col로 메뉴가 생성된 시트, 행, 열이 접근가능합니다. 값이 설정되기 위해 반드시 Value를 리턴해야 하며 변경사항을 무시하기 위해선 this.Value를 리턴해야합니다. --- ## Example ```js { Menu:{ Buttons:[\"Ok\",\"Cancel\"], Items:[ { Menu:1, Name:\"과일\", Items:[ {Name:\"과일이름\",Caption:1}, {Name:\"사과\",Bool:1}, {Name:\"배\",Bool:1}, {Name:\"오렌지\",Bool:1} ] }, { Enum:1, Name:\"채소\", Items:[ {Name:\"당근\"}, {Name:\"오이\"}, {Name:\"가지\"}, {Name:\"토마토\"} ] }, { Level:1, Expanded:1, Default:{OnClick:ItemClickHandler}, Name:\"나물\", Items:[ {Name:\"도라지\"}, {Name:\"더덕\"}, {Name:\"미나리\"} ] } ], OnButton:function(button){ if(button == \"Cancel\"){ if(!confirm(\"정말로 취소하시겠습니까?\")){ return false; } } } } } ``` ![Menu](/assets/imgs/menu.png \"Menu\")",
          "see": [
            {
              "label": "Menu row",
              "url": "/docs/props/row/menu"
            },
            {
              "label": "EnumMenu col",
              "url": "/docs/props/col/enum-menu"
            },
            {
              "label": "Menu col",
              "url": "/docs/props/col/menu"
            },
            {
              "label": "EnumMenu row",
              "url": "/docs/props/row/enum-menu"
            },
            {
              "label": "Menu cell",
              "url": "/docs/props/cell/menu"
            },
            {
              "label": "onSelectMenu event",
              "url": "/docs/events/on-select-menu"
            },
            {
              "label": "onShowMenu event",
              "url": "/docs/events/on-show-menu"
            },
            {
              "label": "showMenu static",
              "url": "/docs/static/show-menu"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/menu.html"
      },
      {
        "cid": 938,
        "sid": "page-object",
        "name": "page-object",
        "label": "페이지 객체(Page Object)",
        "data": {
          "body": "> (cfg)[SearchMode](/docs/props/cfg/search-mode)의 값이 0이 아닌 경우, 시트는 데이터 행들을 (cfg)[PageLength](/docs/props/cfg/page-length)에서 부여한 갯수 단위로 묶어서 관리합니다. > 이때 [페이지 객체](/docs/appx/page-object)의 개념이 생겨나는데, [페이지 객체](/docs/appx/page-object)는 자신이 갖고 있는 행들 중 첫번째 행과 마지막 행,그리고 이전 페이지와 다음 페이지에 대한 링크를 갖고 있습니다. > 특히 페이지 네비게이션을 갖는 SearchMode:4를 사용하는 경우에는, [goToPage()](/docs/funcs/core/go-to-page)와 같은 함수를 통해 페이지 단위로 이동할 수 있습니다. >**<mark>주의</mark> : Page 객체의 index는 0 부터 시작합니다.** ## Page 객체 얻기 getPage로 시작하는 몇가지 함수를 통해 페이지 객체를 얻을 수 있습니다. ```javascript var page = sheet.getPageByIndex(3); //3번 페이지 객체를 얻습니다. ``` ## Page 객체의 링크정보 |Name|Description| |---|---| |nextSibling|다음 [페이지 객체](/docs/appx/page-object)| |previousSibling|이전 [페이지 객체](/docs/appx/page-object)| |firstChild|페이지가 갖고 있는 행들 중 첫번째 행| |lastChild|페이지가 갖고 있는 행들 중 마지막 행| |parentNode|부모행 객체| |childNodes.length|페이지가 갖고 있는 행의 개수| ```javascript function moveNextPage(){ //현재 보여지는 첫번째 행으로 부터 현재 페이지를 얻음. var page = sheet.getPageByRow( sheet.getShownRows()[0] ); // if(!page.nextSibling){ sheet.showMessage(\"마지막 페이지 입니다.\",1200); }else{ sheet.goToPage(page.nextSibling); } //첫번째 페이지로 이동하기 sheet.goToPage(0); } ```",
          "see": [
            {
              "label": "getShownRows method",
              "url": "/docs/funcs/core/get-shown-rows"
            },
            {
              "label": "getPageByIndex method",
              "url": "/docs/funcs/core/get-page-by-index"
            },
            {
              "label": "getPageByRow method",
              "url": "/docs/funcs/core/get-page-by-row"
            },
            {
              "label": "goToPage method",
              "url": "/docs/funcs/core/go-to-page"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/page-object.html"
      },
      {
        "cid": 939,
        "sid": "position",
        "name": "position",
        "label": "Position",
        "data": {
          "body": "> [달력](/docs/static/show-calendar)이나 [컨텍스트 메뉴](/docs/static/show-menu),[다이얼로그](/docs/static/show-dialog) 같이 독립적으로 오픈할 수 있는 객체에 대해서 생성 위치를 설정합니다. ### Parameters |Name|Type|Description| |---|---|---| |X|`number`|화면의 최 좌측을 기준으로 가로방향 픽셀단위 위치 설정(css left와 비슷)| |Y|`number`|화면의 최 상단을 기준으로 세로방향 픽셀단위 위치 설정(css top와 비슷)| |Mouse|`boolean`|마우스 커서의 위치를 기준으로 생성할지 여부. 이 속성을 사용시 X,Y는 마우스 커서의 위치를 기준으로 계산됩니다.| |Tag|`string`|달력이나 다이얼로그를 위치시키고자 하는 html 객체의 id를 설정 ex : \\<div id='calDiv'>\\</div> var pos = {Tag:\"calDiv\"};| |Width|`number`|다이얼로그가 표시될 수 있는 영역 너비(X를 기준으로 한 우측방향)| |Height|`number`|다이얼로그가 표시될 수 있는 영역 높이(Y를 기준으로 한 아래방향)| |Align|`string`|Width,Height 속성을 통한 영역을 기준으로 수평,수직 정렬 (수평정렬값,수직정렬값 식으로 문자열로 설정) **수평정렬값**<ul><li>*prev* : <span style='color:#b98e22'>left의 바깥쪽. 다이얼로그가 스크린을 벗어나면 자동으로 next로 변경됩니다.</span></li><li>*next* : <span style='color:#b98e22'>right의 바깥쪽. 다이얼로그가 스크린을 벗어나면 자동으로 prev로 변경됩니다.</span></li><li>*left* : <span style='color:#b98e22'>영역 내의 왼쪽으로 정렬. 다이얼로그가 스크린을 벗어나면 자동으로 right으로 변경됩니다.</span></li><li>*right* : <span style='color:#b98e22'>영역 내의 오른쪽으로 정렬. 다이얼로그가 스크린을 벗어나면 자동으로 left으로 변경됩니다.</span></li><li>*center* : <span style='color:#b98e22'>영역 내의 가운데로 정렬. 다이얼로그가 스크린을 벗어나면 자동으로 수평으로 이동합니다.</span></li></ul> **수직정렬값**<ul><li>*above* : <span style='color:#b98e22'>top의 바깥쪽. 다이얼로그가 스크린을 벗어나면 자동으로 below로 변경됩니다.</span></li><li>*below* : <span style='color:#b98e22'>bottom의 바깥쪽. 다이얼로그가 스크린을 벗어나면 자동으로 top로 변경됩니다.</span></li><li>*top* : <span style='color:#b98e22'>영역 내의 위쪽 정렬. 다이얼로그가 스크린을 벗어나면 자동으로 bottom으로 변경됩니다.</span></li><li>*bottom* : <span style='color:#b98e22'>영역 내의 아래쪽 정렬. 다이얼로그가 스크린을 벗어나면 자동으로 top으로 변경됩니다.</span></li><li>*middle* : <span style='color:#b98e22'>영역 내의 가운데 정렬. 다이얼로그가 스크린을 벗어나면 자동으로 수직으로 이동합니다.</span></li></ul> default : \"left,below\" | |Move|`boolean`|창의 크기가 변경되는 경우 상대적인 위치로 달력이나 다이얼로그의 위치를 자동으로 옮길지 여부| |Resize|`boolean`|창의 크기가 변경되는 경우 다이얼로그의 크기도 자동으로 변경할 지 여부| |Realign|`boolean`|창의 크기가 변경되는 경우 Align으로 설정한 위치도 자동으로 맞출지 여부| ### Example ```javascript //화면 좌측 상단으로 기준으로 오른쪽으로 100px, 아래로 200px 이동한 위치에 생성 var pos = {X:100 , Y:200}; //마우스 커서가 있는 위치에 생성 var pos = {Mouse: true}; //특정 html element가 있는 위치 하단에 생성 var pos = {Tag:\"opCalBtn\"}; ```",
          "see": [
            {
              "label": "showCalendar static",
              "url": "/docs/static/show-calendar"
            },
            {
              "label": "showMenu static",
              "url": "/docs/static/show-menu"
            },
            {
              "label": "showDialog static",
              "url": "/docs/static/show-dialog"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/position.html"
      },
      {
        "cid": 940,
        "sid": "row-object",
        "name": "row-object",
        "label": "행 객체(Row Object)",
        "data": {
          "body": "> sheet.[getFocusedRow](/docs/funcs/core/get-focused-row)()나 sheet.[getRowById](/docs/funcs/core/get-row-by-id)(\"AR11\") 등의 함수를 통해 얻게 되는 데이터 행 객체는 해당 행의 값과, 각 열 별로 설정한 속성값([CanEdit](/docs/props/row/can-edit)나 [Visible](/docs/props/row/visible) 등) 그리고 주변행이나 부모행에 대한 링크 정보를 갖고 있습니다. ## Row의 값 행 객체가 갖고 있는 각 열의 값을 확인하거나 수정하실 수 있습니다. ```javascript var row = sheet.getRowById(\"AR1\"); var AmtColumnValue = row[\"AMT\"]; //AMT 열의 값을 얻습니다. row[\"AMT\"] = 2300; //AR1행의 AMT 열의 값을 2300으로 수정합니다. //수정된 값은 화면에 즉시 반영되지 않고, refreshCell() 이나 refreshRow()함수를 호출하셔야 반영됩니다. ``` ## Row의 속성값 행 객체의 각 열에 부여한 속성을 확인 하거나 수정하실 수 있습니다. ```javascript var row = sheet.getFocusedRow(); var isEditable = row[\"AMTCanEdit\"]; //AMT 열의 수정가능여부를 확인합니다. row[\"AMTCanEdit\"] = 0; //포커스된 행의 AMT열의 수정가능여부를 수정불가로 변경합니다. //속성값에 따라 refreshCell() 이나 refreshRow()함수를 호출하셔야 반영될 수 있습니다. ``` ## Row의 링크정보 행객체는 각 행의 위의 행,아래 행, 부모행, 자식행에 대한 링크를 갖고 있습니다. |Name|Description| |---|---| |nextSibling|아래 행 객체(트리 사용시에는 같은 부모 안에서 아래 형제 행. 없으면 null)| |previousSibling|위 행 객체(트리 사용시에는 같은 부모 안에서 위 형제 행. 없으면 null)| |firstChild|트리 사용시 현재 행 객체의 첫번째 자식행 객체| |lastChild|트리 사용시 현재 행 객체의 마지막 자식행 객체| |parentNode|부모행 객체| ```javascript var row = sheet.getFocusedRow(); var nextRow = row.nextSibling; //포커스 된 행의 아래 행 객체 var parentRow = row.parentNode; //포커스 된 행의 부모행 객체 ```",
          "see": [
            {
              "label": "행(Row) 구조에 대한 이해 getting started",
              "url": "/docs/start/row"
            },
            {
              "label": "getFocusedRow method",
              "url": "/docs/funcs/core/get-focused-row"
            },
            {
              "label": "getRowById method",
              "url": "/docs/funcs/core/get-row-by-id"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/row-object.html"
      },
      {
        "cid": 941,
        "sid": "shared-event",
        "name": "shared-event",
        "label": "공통 이벤트(event) 처리 방법",
        "data": {
          "body": "> 시스템 내에 모든 시트에서 동일하게 이벤트를 처리하기 위한 방법을 가이드 합니다. > 시트의 이벤트 처리 방법은 javascript의 일반적인 이벤트 핸들링 방식(addEventListener)과 달라 하나의 이벤트에 하나의 업무(함수)만 연결 가능합니다. > 이러한 연유로 조회나 저장과 같은 ajax 통신 이후에 공통적인 후 처리(오류 발생시 메세지 처리나 페이지 이동)와 개별 페이지 내에서 이벤트 수행이 같이 설정되어야 하는 경우 어려움이 발생합니다. ## 공통에서 설정한 이벤트를 개별페이지 설정시 덮어씌우는 경우 모든 시트에서 조회시 오류가 발생하였을 때에 대한 후처리 로직을 공통 개발자가 [CommonOptions](/docs/static/common-options) 에 정의했다고 가정했을 때, ```javascript // ibsheet-common.js 내에 [CommonOptions](/docs/static/common-options)를 통해 이벤트 설정 IBSheet.CommonOptions = { \"Events\":{ //모든 화면의 시트에서 조회 결과 Result 값이 -100인 경우, session 종료로 판단, 로그인 화면으로 이동 시킨다. \"onBeforeDataLoad\" : function(evtParam){ if( evtParam.result == -100 ){ alert(\"세션이 종료되었습니다.\\n로그인 화면으로 이동합니다.\"); location.href = \"/login.do\"; }else if( evtParam.result < 0 ){ alert(\"오류가 발생하였습니다.\\n\"+evtParam.message); } } } } ``` 아래와 같이 개별 화면 개발자가 onBeforeDataLoad 이벤트를 사용하면 [CommonOptions](/docs/static/common-options) 에서 정의한 이벤트는 덮어씌어집니다. ```javascript // 개별 화면에서 시트 이벤트 설정 sheetOption = { \"Cfg\":{}, \"Cols\":[ ... ], \"Events\":{ \"onBeforeDataLoad\" : function(evtParam){ var data = evtParam.data; for( var i = 0; i < data.length; i++ ){ //조회 된 데이터 중 ValidReq 컬럼의 값이 N인 행의 배경색을 \"#FFAABB\"로 표시 if( data[i][\"ValidReq\"] == 'N' ){ data[i][\"Color\"] = \"#FFAABB\"; } } } } }; ``` ## 공통 이벤트를 처리하기 위한 방법 ibsheet-common.js 파일 내에 [IBSheet.onBeforeCreate()](/docs/static/on-before-create) 함수에서 각 화면에서 설정한 이벤트를 저장해 두었다가 공통 처리 로직 이후에 호출시켜 줍니다. [IBSheet.onBeforeCreate()](/docs/static/on-before-create)는 [시트 객체 생성(IBSheet.create())](/docs/static/create)직전에 호출됩니다. ```javascript // ibsheet 초기화 공통 설정 (obj를 통해 시트 생성시 create()에 넣은 parameter가 전달됨) IBSheet.onBeforeCreate = function(obj){ //Events 설정이 없는 경우 Events 객체 생성 if( !obj.options[\"Events\"] ){ obj.options[\"Events\"] = {}; } obj.options.PageEvent = {}; //각 페이지(화면)에서 정의한 이벤트를 따로 options.PageEvent라는 속성에 넣어 둔다. if( obj.options[\"Events\"][\"onBeforeDataLoad\"] ){ obj.options.PageEvent[\"onBeforeDataLoad\"] = obj.options[\"Events\"][\"onBeforeDataLoad\"]; } if( obj.options[\"Events\"][\"onAfterSave\"] ){ obj.options.PageEvent[\"onAfterSave\"] = obj.options[\"Events\"][\"onAfterSave\"]; } if( obj.options[\"Events\"][\"onEndEdit\"] ){ obj.options.PageEvent[\"onEndEdit\"] = obj.options[\"Events\"][\"onEndEdit\"]; } //onBeforeDataLoad 이벤트에 대한 처리 (조회시 오류 공통 처리) obj.options[\"Events\"][\"onBeforeDataLoad\"] = function(evtParam){ //공통로직 처리!!!!! // result -1 ~ -9 까지는 이미 예약된 오류코드 if( evtParam.result == -100 ){ alert(\"세션이 종료되었습니다.\"); location.href = \"/login.do\"; return; }else if(evtParam.response.status == 404){ location.href = \"/noPageFound.do\"; return; }else if(evtParam.response.status == 500){ location.href = \"/serverError.do\"; return; } //개별 화면 이벤트에 대한 처리(위에 PageEvent에 담아둔 함수를 호출한다) if( evtParam.sheet.options.PageEvent && evtParam.sheet.options.PageEvent[\"onBeforeDataLoad\"] ){ //세션이 종료된게 아니라면 해당 페이지의 이벤트를 호출한다. return evtParam.sheet.options.PageEvent[\"onBeforeDataLoad\"](evtParam); } } //onAfterSave 이벤트에 대한 처리 (저장시 오류 공통 처리) obj.options[\"Events\"][\"onAfterSave\"] = function(evtParam){ //공통로직 처리!!!!! // result -1 ~ -9 까지는 이미 예약된 오류코드 if( evtParam.result == -100 ){ alert(\"세션이 종료되었습니다.\"); location.href = \"/login.do\"; return; }else if(evtParam.result == -200){ alert(\"저장 중 오류가 발생하였습니다.\"); return; }else if(evtParam.response.status == 404){ location.href = \"/noPageFound.do\"; return; }else if(evtParam.response.status == 500){ location.href = \"/serverError.do\"; return; } //개별 화면 이벤트에 대한 처리(위에 PageEvent에 담아둔 함수를 호출한다) if( evtParam.sheet.options.PageEvent && evtParam.sheet.options.PageEvent[\"onAfterSave\"] ){ //세션이 종료된게 아니라면 해당 페이지의 이벤트를 호출한다. return evtParam.sheet.options.PageEvent[\"onAfterSave\"](evtParam); } } //onEndEdit 이벤트에 대한 처리 (편집시 커스텀 validation 공통 처리) obj.options[\"Events\"][\"onEndEdit\"] = function(evtParam){ // 각 컬럼 생성시 정의한 validation 관련 속성에 대한 검증을 공통으로 처리한다. var rtnValue = evtParam.val; /* 1. maxvalue(최대입력허용값),minvalue(최소입력허용값) 속성에 대한 처리 이런 속성은 제품에는 없지만 시트 생성시 Cols에 선언하면 getAttribute를 통해 얻을 수 있습니다. ex: OPT.Cols = [ // 이런 속성은 없지만 컬럼 설정시 넣어 둠 {Header:\"TOTCS\", Type:\"Float\", Name: \"roe\", maxvalue:100, minvalue:0} ]; */ // 모든 화면의 시트에서 각 컬럼에 maxvalue,minvalue 속성이 있는 경우 검사 if(evtParam.save === 1){// 사용자 편집에 의해 이벤트 발생시에만 동작 var min = evtParam.sheet.getAttribute(evtParam.row, evtParam.col, \"minvalue\"); if(typeof min != \"undefined\" && min > evtParam.val) { alert(`해당 컬럼에 최소 입력 값은 ${min}입니다`); return true; // true 리턴시 편집 종료가 안됨 } var max = evtParam.sheet.getAttribute(evtParam.row, evtParam.col, \"maxvalue\"); if(typeof max != \"undefined\" && max < evtParam.val) { alert(`해당 컬럼에 최대 입력 값은 ${max}입니다`); return true; // true 리턴시 편집 종료가 안됨 } } /* 2. replaceInput(입력값에 대한 치환) 속성에 대한 처리 이런 속성은 제품에는 없지만 시트 생성시 Cols에 선언하면 getAttribute를 통해 얻을 수 있습니다. ex: function toUpper(str) { return str.toUpperCase(); } OPT.Cols = [ // 이런 속성은 없지만 컬럼 설정시 넣어 둠 {Header:\"TOTCS\", Type:\"Float\", Name: \"roe\", replaceInput:toUpper} ]; */ // 모든 화면의 시트에서 각 컬럼에 replaceInput 속성이 있는 경우 검사 if(evtParam.save === 1){// 사용자 편집에 의해 이벤트 발생시에만 동작 var recInp = evtParam.sheet.getAttribute(evtParam.row, evtParam.col, \"replaceInput\"); if(typeof recInp === \"function\") { rtnValue = recInp(rtnValue); evtParam.val = rtnValue; } } //개별 화면 이벤트에 대한 처리(위에 PageEvent에 담아둔 함수를 호출한다) if( evtParam.sheet.options.PageEvent && evtParam.sheet.options.PageEvent[\"onEndEdit\"] ){ //세션이 종료된게 아니라면 해당 페이지의 이벤트를 호출한다. return evtParam.sheet.options.PageEvent[\"onEndEdit\"](evtParam); } return rtnValue; } return obj; //반드시 리턴해 줘야 함. } ``` 위와 같이 공통 로직의 처리 이후, 개별 페이지 이벤트에 대한 처리를 할 지, 혹은 순서를 반대로 할 지 자유롭게 설정 가능합니다. > **<mark>주의</mark> :** > - **위와 같은 방식을 사용하더라도 시트 생성 후, [bind](/docs/events/event) 함수를 통해 이벤트를 설정하면 공통적으로 설정한 이벤트 내용은 덮어씌어집니다.** > **따라서 가급적 [bind](/docs/events/event) 함수를 통한 이벤트 설정은 사용하지 마실 것을 권합니다.** > - **이벤트 별로 return이 있는 이벤트(ex:onClick)는 공통로직 구성시에 반드시 return 해줘야 정상 동작합니다.**",
          "see": [
            {
              "label": "event 사용법 기초",
              "url": "/docs/events/event"
            },
            {
              "label": "CommonOptions static",
              "url": "/docs/static/common-options"
            },
            {
              "label": "onBeforeCreate static",
              "url": "/docs/static/before-create"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/shared-event.html"
      },
      {
        "cid": 942,
        "sid": "sheet-height",
        "name": "sheet-height",
        "label": "시트객체 높이 설정",
        "data": {
          "body": "> 시트객체의 높이를 설정하는 방법을 알아봅니다. ## 1. 시트의 높이 시트의 높이는 시트 생성시 **el** 객체에 부여한 높이를 따릅니다. 가령 el객체가 다음과 같이 500px로 설정되어 있다면 시트의 높이는 500px가 됩니다. ```html <div id=\"sheetDIV\" style=\"width:100%;height:500px\"></div> <script> //시트 객체 생성 IBSheet.create({ id:\"sheet1\", el:\"sheetDIV\", options:{...} }); </script> ``` - 여기서 만약 el 객체에 높이가 없다면 자동으로 800px 높이를 갖게 됩니다. - 시트객체의 높이가 정적인 행(헤더,합계 행)조차 표현하지 못할 정도로 작은 경우에는 시트가 생성되지 않습니다. ## 2. 시트의 높이 수정 시트의 너비나 높이를 창에 크기에 따라서 늘어나거나 줄어들게 끔 하고자 하신다면 el객체의 너비/높이는 100%로 설정하시고, 시트의 부모 DIV객체에 너비/높이를 부여하여 조정하시는 것이 좋습니다. ```html <!-- 시트 부모 DIV --> <div class=\"sheet_wrapper\" style=\"width:100%;min-height:200px;height:calc(100% - 130px)\"> <!-- 시트 객체 --> <div id=\"sheetDIV\" style=\"width:100%;height:100%\"></div> </div> ``` el의 너비나 높이를 **percent**로 부여할 때는 상위(부모) 객체의 너비나 높이가 <mark>명확</mark>해야 합니다. 가령 el객체의 높이가 100%인데, 부모 DIV의 높이가 정의되지 않았을 시에는 시트가 생성되지 않습니다. 고정된 사이즈로 시트의 높이를 변경하고자 하실때도, 시트 객체보다는 부모객체를 조정해 주세요. ```js //.sheet_wrapper 객체의 높이를 680px로 변경 sheet.MainTag.parentNode.style.height = \"680px\"; ``` ## 3. 조회된 데이터에 따른 높이 자동 수정 조회된 데이터의 양에 따라 시트의 높이를 자동으로 조정하시려면 (Cfg)[NoVScroll](/docs/props/cfg/no-v-scroll):1을 사용하시면 됩니다. NoVScroll은 SearchMode:0에서는 동작하지 않습니다. ## 4. 시트에 최대 높이 설정 조회된 데이터가 적을때는 높이를 작게하여 보여주다가, 조회된 데이터가 일정 건수보다 많아졌을때 시트의 높이를 고정하고 세로스크롤이 보여지게 끔 하기 위해서는 다음과 같은 로직을 조회 종료 이벤트([onSearchFinish](/docs/events/on-search-finish))에서 호출하여 주세요. ```js var options = { Cols:[], Events:{ onSearchFinish:function(evtParam){ //조회된 데이터가 10개 행 이상일때는 세로 스크롤을 사용해 보여준다. resizeSheet( evtParam.sheet, evtParam.getDataRows().length, 10); } } }; /* 공통함수 특정 건수 이상 조회시 스크롤을 생성 (시트객체 , 조회된 데이터 행수, 보여질 기준행 수 ) */ function resizeSheet(sheet,dataRowCnt, baseRowCnt){ var p = sheet.MainTag.parentNode; //시트 부모 객체 var h = sheet.MainTag.clientHeight; //시트객체 높치 //시트에서 데이터 영역을 제외한 나머지 영역에 대한 높이 var hOtherRows = h - sheet.MainTable.tBodies[0].querySelector('.IBBodyMid').clientHeight - sheet.MainTable.tBodies[0].querySelector(\".HeightSpace\").parentNode.offsetHeight; //기준행과 조회된 데이터행 수에 따라 부모의 크기를 바꾼다. if(dataRowCnt < baseRowCnt){ p.style.height = ((dataRowCnt * sheet.RowHeight) + hOtherRows)+\"px\"; }else{ p.style.height = ((baseRowCnt * sheet.RowHeight) + hOtherRows)+\"px\"; } } ```",
          "see": [
            {
              "label": "NoVScroll cfg",
              "url": "/docs/props/cfg/no-v-scroll"
            },
            {
              "label": "onSearchFinish event",
              "url": "/docs/events/on-search-finish"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.6|추가|"
        },
        "url": "docs/appx/sheet-height.html"
      },
      {
        "cid": 943,
        "sid": "solid",
        "name": "solid",
        "label": "Solid",
        "data": {
          "body": "> 시트 내에 헤더 주변이나 푸터 주변에 고정된 행을 생성하여 사용하 실 수 있습니다. 솔리드로 만들어진 행은 시트의 열의 개수나 너비에 영향을 받지 않고 독립적으로 구성됩니다. ![솔리드 행](/assets/imgs/solid1.gif \"솔리드 사용 예\") [솔리드로 생성된 행 예] ## 설정 구문 ```javascript options.Solid = [ { \"id\": \"mySolidRow\", //솔리드 행의 ID 부여 \"Space\": 5, //솔리드 행의 위치 (아래에 위치 참고) \"Height\": 40, //솔리드 행의 높이 설정 \"Cells\": \"Today,Spacer1,DESC,BtnRed,Spacer1,BtnYellow,Spacer2,DESC2,DESC3\", //커스텀 셀의 순서 \"CanFormula\": 1, \"CalcuOrder\": \"DESC3\", //각 셀의 기능 정의 \"Spacer1\": { // 중간 공백 셀 Type: \"Text\", Width: 3, CanEdit: 0, CanFocus: 0 }, \"Spacer2\": { // 중간 공백 셀 정의 Type: \"Text\", Width: 10, CanEdit: 0, CanFocus: 0 }, \"Today\": { //오늘 날짜 셀 Type: \"Text\", CanFocus: 0, CanEdit: 0, Color: \"#334477\", TextColor: \"#EEEEEE\", Align: \"Center\", Value: \"오늘일자 : \" + IBSheet.dateToString(new Date(), \"yyyy-MM-dd\") }, \"DESC\": { // 레이블 셀 Type: \"Text\", CanFocus: 0, CanEdit: 0, Align: \"Right\", Width: 120, Value: \"위험도 변경 :\" }, \"BtnRed\": { //위험 버튼 셀 Type: \"Button\", Button: \"Button\", Name: \"redBtn\", Class: \"RED\", Value: \"위험\", Width: 40, OnClick: function (e) { if (e.row) { e.row.Color = \"#FFAAAA\"; e.sheet.refreshRow(e.row); } } }, \"BtnYellow\": { //주의 버튼 셀 Type: \"Button\", Button: \"Button\", Name: \"yellowBtn\", Class: \"YELLOW\", Value: \"주의\", Width: 40, OnClick: function (e) { if (e.row) { e.row.Color = \"#FFFFAA\"; e.sheet.refreshRow(e.row); } } }, \"DESC2\": { // 레이블 셀 Type: \"Text\", Value: \"검수까지 남은 기한:\", Align: \"Right\", CanFocus: 0, CanEdit: 0, Width: 120 }, \"DESC3\": { // Formula를 이용한 남은기한 계산 셀 Type: \"Text\", Color: \"#DDD\", Formula: function (f) { return f.Row ? ((f.Row.DTDY31 - new Date(2018, 1, 23)) / 86400000) + \" 일\" : \"\"; }, Width: 120 } } ]; ``` ## 위치 솔리드 행은 Space 속성 값에 따라 다음과 같이 위치할 수 있습니다. |위치|Space값|생성예| |---|---|---| |시트 밖 상단|-1|![\"시트밖상단\"](/assets/imgs/solid-1.png \"시트밖상단\")| |시트 안 헤더 위|0|![\"시트안헤더위\"](/assets/imgs/solid0.png \"시트안헤더위\")| |시트 안 헤더 아래|1|![\"시트안헤더아래\"](/assets/imgs/solid1.png \"시트안헤더아래\")| |시트 안 푸터 위|2|![\"시트안풋위\"](/assets/imgs/solid2.png \"시트안풋위\")| |시트 안 푸터 아래|3|![\"시트안풋아래\"](/assets/imgs/solid3.png \"시트안풋아래\")| |시트 안 가로스크롤바 아래|4|![\"시트 안 가로스크롤바 아래\"](/assets/imgs/solid4.png \"시트 안 가로스크롤바 아래\")| |시트 밖 하단|5|![\"시트밖하단\"](/assets/imgs/solid5.png \"시트밖하단\")| --- ## 솔리드를 이용한 예약된 기능 솔리드 행을 이용하여 **그룹행**이나 **찾기행**을 만들어 사용하실 수 있습니다. 1. 그룹행 사용하기 다음과 같은 구성을 통해 그룹행을 생성하실 수 있습니다. 그룹행 생성시 열의 헤더셀을 드래그하여 그룹행 위로 드롭하면 해당 열을 기준으로 한 그룹핑이 이루어 집니다. ```javascript options.Solid = [ { \"id\":\"myGroupRow\", //솔리드 행의 ID 부여 \"Space\":0, //솔리드 행의 위치 \"Kind\":\"Group\" //솔리드 행의 종류 } ]; ``` ![그룹행사용](/assets/imgs/group.png \"그룹행 생성\") 2. 찾기(Search)행 사용하기 찾기 행을 통해 시트 내에 원하는 데이터를 선택하거나 표시할 수 있습니다. ```javascript options.Solid = [ { \"Kind\": \"Search\", // 솔리드 행의 종류 \"Space\": 1, // 솔리드 행의 위치 \"id\": \"searchZone\", // 솔리드 행의 ID 부여 Cells: \"Expression,Spacer1,Filter,Select,Mark,Find,Clear,Spacer2\", // 솔리드 행 내에 Cell 생성. //Expression, Filter, Select, Mark, Find, FindPrev, Clear는 내장 설정 예약어 Expression: { // 검색하기 위한 expression 설정 Action: \"Last\", // expression 셀 내용이 변경되었을때 취할 동작에 대한 설정 //Filter,Select,Mark,Find,FindPrev,Last 를 설정할 수 있음(Last는 이전 행동을 계속함.) Left: \"5\", // 셀 좌측에 지정한 px 만큼의 빈 공간 생성 MinWidth: \"90\", // 최소 너비 px 단위 // MaxWidth: \"300\", EmptyValue: \"<s>검색어를 입력해 주세요</s>\" // input의 placeholder 속성과 동일한 기능 }, Spacer1: { // 중간 공백 셀 정의 Width: \"10\", Type: \"Empty\", CanFocus:0 }, Spacer2: { Width: \"10\", Type: \"Empty\", CanFocus:0 }, Filter: { //필터 기능 버튼 (Expression 셀에 입력한 글자를 바탕으로 전체 열에 대해 필터링 실시) ButtonText: \"필터\" }, Select: { //선택 기능 버튼 (Expression 셀에 입력한 글자를 바탕으로 행단위로 선택) ButtonText: \"선택\" }, Mark: { //표시 기능 버튼 (Expression 셀에 입력한 글자를 포함하고 있는 행에 배경색을 변경) ButtonText: \"마킹\" }, Find: { //찾기 기능 버튼 (Expression 셀에 입력한 글자를 포함하고 있는 셀을 찾음. 아래로 계속 찾기 가능) ButtonText: \"찾기\" }, Clear: { //클리어 기능 버튼 (위에서 한 행위(필터,선택,마킹등을 원상복귀)) ButtonText: \"클리어\", Width: \"50\" } } ]; ``` ![찾기행사용](/assets/imgs/searchRow2.png \"찾기행 생성\")",
          "see": [
            {
              "label": "appendix](./kind)"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/appx/solid.html"
      },
      {
        "cid": 944,
        "sid": "spa-react",
        "name": "spa-react",
        "label": "react 환경에서 IBSheet 개발",
        "data": {
          "body": "> React 환경에서 IBSheet의 개발 방법을 가이드 합니다. > > 개발 순서는 다음과 같습니다. > 1. ibsheet-loader를 이용한 IBSheet js 파일 import > 2. <IBSheetReact> 컴포넌트를 통한 IBSheet 객체 생성 > 3. typescript 사용시 interface를 통한 개발 편의 확보 ## 1. ibsheet-loader를 통한 IBSheet js 파일 import ibsheet.js 파일은 npmjs를 통해 배포할 수 없는 구조로 되어 있습니다. 따라서 public 폴더에 ibsheet.js 와 css 파일을 복사해 두고, ibsheet-loader를 통해 객체를 import하는 방법을 제공하고 있습니다. **entry point에 해당하는 html 파일에 직접 ibsheet.js 나 css 파일을 include 하는 경우에는 ibsheet-loader를 사용하실 필요가 없습니다.** ### 1.1 ibsheet-loader 설치 #### using npm([Official](https://nodejs.org/)) ```bash $ npm i @ibsheet/loader ``` ### 1.2 loader를 이용한 ibsheet.js 및 관련 파일 import loader를 사용시 `ibsheet.js`와 `plugin`, `locale`, `css` 파일을 import 하실 필요가 없습니다. (loader가 import 합니다.) ```js import loader from '@ibsheet/loader' const loaderOption = { name: 'ibsheet', baseUrl: '/ibsheet', // ibsheet.js 파일 위치 (리액트 환경의 경우 /public/ibsheet/ibsheet.js 파일이 위치함을 의미) //theme: \"mint\", // css 파일 테마 (설정이 없으면 /css/default/main.css 사용, 생략가능) locales: [\"en\",\"ko\"], // locale 파일 (설정이 없으면 /locale/ko.js 파일 사용, 생략가능) plugins: [ // plugin 파일 \"dialog\", \"common\", \"excel\" ], // ibsheet license string license: \"W2FtSztPKCJzazYxYjJxbn8QYkI6Rjd0ODh4bDBkLWMrKwQnTXcJYS4gXTwlZjF5AhpYJ3FCPxMjPWVgMWYydA==\" }; loader.load(loaderOption); //실제 ibsheet파일을 import ``` - `loader.load()`를 통한 import는 메인 페이지(entry point)에서 **1회**만 하시면 됩니다. - `baseUrl<public/path>` 속성에서 지정한 위치에 ibsheet.js와 css, locale, plugins 파일이 있어야 합니다. ## 2. IBSheetReact 컴포넌트를 이용한 ibsheet 객체 생성 ### 해당 컴포넌트는 <mark>Node.js v18 이상과 호환되는 React v18 이상에서 지원</mark>됩니다. ### 2.1 @ibsheet/react 컴포넌트 설치 #### using npm([Official](https://nodejs.org/)) ```bash npm i @ibsheet/react ``` ### 2.2 IBSheetReact 컴포넌트를 이용한 시트 생성 IBSheetReact 컴포넌트를 이용하여 시트를 생성하고, 생성된 객체를 이용한 후속작업(행추가 함수)을 수행합니다. ```js import { IBSheetReact, IB_Preset } from '@ibsheet/react'; import { useRef } from 'react'; function App() { // 시트 ref 객체 const mySheet = useRef(null); // 시트 초기화 const options = { Cfg: { SearchMode: 0 }, Cols: [ { Header: 'No', Type: 'Int', Name: 'SEQ' }, { Header: 'Name', Type: 'Text', Name: 'name' }, { Header: 'Age', Type: 'Int', Name: 'age' }, { Header: 'Ymd', Name: 'sDate_Ymd', Extend: IB_Preset.YMD, Width: 110 }, ], Events: { // 시트 생성 시점에서 이벤트 설정 onBeforeChange: function (evt) { console.log(`${evt.oldval}값이 ${evt.val}값으로 수정되었습니다.`); }, }, }; const DATA = [ { name: 'John Doe', age: 30, sDate_Ymd: '20250922' }, { name: 'Jane Smith', age: 25, sDate_Ymd: '20241108' } ]; // 시트 객체 크기 결정 const customStyle = { width: '700px', height: '600px', border: '1px solid #ccc', }; // 행추가 버튼 클릭시 호출됨 const handleAddRow = () => { mySheet.current.addRow(); }; return ( <> <div className=\"btn\"> <button type=\"button\" onClick={handleAddRow}> 행추가 </button> </div> <IBSheetReact ref={mySheet} // 시트 ref 객체 options={options} // 시트 초기화 data={DATA} // 초기 데이타 (생략 가능) style={customStyle} // 시트객체 크기 /> </> ); } export default App; ``` [react 예제](https://stackblitz.com/edit/vitejs-vite-ejncmlbw) ## 3. react + typescript 를 이용한 개발시 IBSheet interface 사용 @ibsheet/react 컴포넌트에 포함된 typescript interface를 이용 할 수 있습니다. 앞선 1. ibsheet-loader를 통해 ibsheetjs 파일을 로드하는 부분은 동일합니다. ```js import { IBSheetReact, IB_Preset, type IBSheetInstance, // 시트 객체 type IBSheetOptions, // 시트 초기화 option type IBSheetEvents // 시트 이벤트 파라미터 } from '@ibsheet/react'; import { useRef } from 'react'; function App() { // 시트 객체 let mySheet = useRef<IBSheetInstance | null>(null); // onAfterChange 이벤트 핸들 const handelAfterChange:IBSheetEvents[\"onAfterChange\"] = (evt) => { alert(`'${evt.sheet.getString(evt.sheet.getRowById(\"Header\"),evt.col)}'열의 값이 ${evt.val}로 수정되었습니다.`); } // 시트 초기화 const options: IBSheetOptions = { Cfg: { SearchMode: 0 }, Cols: [ { Header: 'No', Type: 'Text', Name: 'SEQ', Width: 60}, { Header: '이름', Type: 'Text', Name: 'name', Width: 120, RelWidth: 1 }, { Header: '나이', Type: 'Int', Name: 'age', Width: 80 }, { Header: '입사일', Name: 'sDate_Ymd', Extend: IB_Preset.YMD, Width: 110 }, { Header: '', Type: 'Button', Name: 'confirm', DefaultValue: \"확인\"} ], Events: { onAfterChange: handelAfterChange } }; // 임시 초기 데이터터 const data = [ { id: '1', name: 'John Doe', age: 30, sDate_Ymd:'20250923' }, { id: '2', name: 'Jane Smith', age: 25, sDate_Ymd:'20251002' }, ]; // Add Row 버튼 클릭 핸들 const addRow = () => { if (mySheet.current) { mySheet.current.addRow(); } }; // Export xls 버튼 핸들 const exportXls = () => { if (mySheet.current) { mySheet.current.exportData({fileName:'ibsheet_react_typescript_example.xlsx'}); } }; // 시트 너비,높이 const customStyle = { width: '800px', height: '600px', border: '1px solid #ccc', }; return ( <div> <div> <button onClick={addRow}>Add Row</button> <button onClick={exportXls}>Export xls</button> </div> <IBSheetReact ref={mySheet} // 시트 ref 객체 options={options} //시트초기화 구문 data={DATA} //데이터 (생략가능) style={customStyle} // 시트객체 크기 /> </div> ); } export default App; ``` [react+typescript 예제](https://stackblitz.com/edit/vitejs-vite-bsfserm2)",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.3.0.0|기능 추가|"
        },
        "url": "docs/appx/spa-react.html"
      },
      {
        "cid": 945,
        "sid": "spa-vue-caution",
        "name": "spa-vue-caution",
        "label": "vue 환경에서 IBSheet 개발 시 주의사항",
        "data": {
          "body": "> Vue 환경에서 IBSheetVue 컴포넌트를 이용한 개발 시 주의사항 입니다. ## onMounted 와 IBSheet 객체 생성 - IBSheet 객체는 비동기로 생성되기 때문에 **onMounted** 시점에서 시트의 생성이 완료 되지 않았을 수 있습니다. - IBSheet 객체의 생성이 완료 된 이후에 **onRenderFirstFinish** 이벤트 발생합니다. - 생성 시점을 명확하게 하시려면 IBSheetVue 컴포넌트에 <mark>v-if</mark>를 추가하여 onMounted 이후에 생성 되게끔 조절하는 것이 좋습니다. [App.vue 파일] ```html <script setup> import { IBSheetVue, IB_Preset } from '@ibsheet/vue'; import { ref, shallowRef, onMounted } from 'vue'; import { sheetData } from './data.js'; // 시트 생성 시점 const createSheet = ref(false); // 시트 객체를 담을 ref 객체 const mySheet = shallowRef(null); // 시트 객체 너비/높이 style const customStyle = { width: '100%', height: '400px', border: '1px solid #ccc', }; const sheetOptions = { LeftCols: [ { Header: 'No', Type: 'Int', Width: 50, Align: 'Center', Name: 'SEQ', CanMove: 0, CanFocus: 0, }, ], //중앙(메인) 컬럼 설정 Cols: [ { Header: '선택', Type: 'Bool', Name: 'CHK', Width: '50', Align: 'Center', CanEdit: 1, }, { Header: '대차계약번호', Type: 'Text', Name: 'CONTRACTNO', Width: '120', Align: 'Center', CanEdit: 0, }, { Header: '대차지점', Type: 'Text', Name: 'DELIVERYDEPTNAME', Width: '120', Align: 'Center', CanEdit: 0, TextColor: 'BLUE', }, { Header: '차량번호', Type: 'Text', Name: 'CARNO', Width: '120', Align: 'Center', CanEdit: 1, Tip: 1, }, { Header: '차명(FULL차명)', Type: 'Text', Name: 'CARNAMEMSTNAME', Width: '200', Align: 'Left', CanEdit: 1, }, { Header: '24시간기본요금', Type: 'Float', Name: 'RENTFEE', Width: '120', Align: 'Right', CanEmpty: 1, Format: ',#.##', }, { Header: '출고일자', Type: 'Date', Name: 'RENTDATE', Width: '100', Align: 'Center', Format: 'yyyy/MM/dd', DataFormat: 'yyyyMMdd', CanEdit: 0, }, { Header: '입고일자', Type: 'Date', Name: 'RETURNDATE', Width: '100', Align: 'Center', Format: 'yyyy/MM/dd', DataFormat: 'yyyyMMdd', CanEdit: 0, }, { Header: '대차유형', Type: 'Text', Name: 'PROMOCODE', Width: '100', Align: 'Center', CanEdit: 1, }, { Header: '순서', Type: 'Text', Name: 'NO', Width: '50', Align: 'Center', DefaultValue: 'defaultValue', }, { Header: '할인율', Type: 'Int', Name: 'DISCOUNTRATE', Width: '50', Align: 'Center', Format: '#,##0', CanEdit: 1, }, ], Events: { // 시트 생성 완료 이벤트 onRenderFirstFinish: (evt) => { // 시트객체 생성시 1회만 발생합니다. // v-if를 통해 항상 onMounted 이후에 생성됩니다. mySheet.value = evt.sheet; // 생성된 시트 객체를 ref객체에 담음 mySheet.value.loadSearchData(sheetData); }, }, }; // 화면 마운트 시점 (IBSheet객체는 만들어지기 전) onMounted(async () => { // 화면 초기화 로직 수행 // .... // 서버 데이터 가져오기 (시간이 걸리는 작업이 있다고 가정) await new Promise((resolve) => setTimeout(resolve, 500)); // v-if 를 통해 onMounted 함수 마지막 부분에서 시트객체 생성 createSheet.value = true; }); </script> <template> <h1>IBSheet + Vue</h1> <IBSheetVue v-if=\"createSheet\" :options=\"sheetOptions\" :style=\"customStyle\" /> </template> ``` [v-if를 통한 시트객체 생성 예제](https://stackblitz.com/edit/vitejs-vite-qljaavkt?file=data.js)",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.3.0.0|기능 추가|"
        },
        "url": "docs/appx/spa-vue-caution.html"
      },
      {
        "cid": 946,
        "sid": "spa-vue",
        "name": "spa-vue",
        "label": "vue 환경에서 IBSheet 개발",
        "data": {
          "body": "> Vue 환경에서 IBSheet의 개발 방법을 가이드 합니다. > > 개발 순서는 다음과 같습니다. > 1. ibsheet-loader를 이용한 IBSheet js 파일 import > 2. <IBSheetVue> 컴포넌트를 통한 IBSheet 객체 생성 > 3. typescript 사용시 interface를 통한 개발 편의 확보 ## 1. ibsheet-loader를 통한 IBSheet js 파일 import ibsheet.js 파일은 npmjs를 통해 배포할 수 없는 구조로 되어 있습니다. 따라서 public 폴더에 ibsheet.js 와 css 파일을 복사해 두고, ibsheet-loader를 통해 객체를 import하는 방법을 제공하고 있습니다. **entry point에 해당하는 html 파일에 직접 ibsheet.js 나 css 파일을 include 하는 경우에는 ibsheet-loader를 사용하실 필요가 없습니다.** ### 1.1 ibsheet-loader 설치 #### using npm([Official](https://nodejs.org/)) ```bash $ npm i @ibsheet/loader ``` ### 1.2 loader를 이용한 ibsheet.js 및 관련 파일 import loader를 사용시 `ibsheet.js`와 `plugin`, `locale`, `css` 파일을 import 하실 필요가 없습니다. (loader가 import 합니다.) ```js import loader from '@ibsheet/loader' const loaderOption = { name: 'ibsheet', baseUrl: '/ibsheet', // ibsheet.js 파일 위치 (리액트 환경의 경우 /public/ibsheet/ibsheet.js 파일이 위치함을 의미) //theme: \"mint\", // css 파일 테마 (설정이 없으면 /css/default/main.css 사용, 생략가능) locales: [\"en\",\"ko\"], // locale 파일 (설정이 없으면 /locale/ko.js 파일 사용, 생략가능) plugins: [ // plugin 파일 \"dialog\", \"common\", \"excel\" ], // ibsheet license string license: \"W2FtSztPKCJzazYxYjJxbn8QYkI6Rjd0ODh4bDBkLWMrKwQnTXcJYS4gXTwlZjF5AhpYJ3FCPxMjPWVgMWYydA==\" }; loader.load(loaderOption); //실제 ibsheet파일을 import ``` - `loader.load()`를 통한 import는 메인 페이지(entry point)에서 **1회**만 하시면 됩니다. - `baseUrl<public/path>` 속성에서 지정한 위치에 ibsheet.js와 css, locale, plugins 파일이 있어야 합니다. ## 2. IBSheetVue 컴포넌트를 이용한 ibsheet 객체 생성 ### 해당 컴포넌트는 <mark>Node.js v18 이상과 호환되는 Vue 3 이상에서 지원</mark>됩니다. ### 2.1 @ibsheet/vue 컴포넌트 설치 #### using npm([Official](https://nodejs.org/)) ```bash npm i @ibsheet/vue ``` ### 2.2 IBSheetVue 컴포넌트를 이용한 시트 생성 IBSheetVue 컴포넌트를 이용하여 시트를 생성하고, 생성된 객체를 이용한 후속작업(행추가 함수)을 수행합니다. [App.vue 파일] ```html <script setup> import { IBSheetVue, IB_Preset } from '@ibsheet/vue'; import { shallowRef } from 'vue'; // 시트 객체를 담을 ref 객체 const mySheet = shallowRef(null); const sheetOptions = { // Your IBSheet configuration options Cfg: { Style: 'mint', }, Cols: [ // 헤더 타이틀 , 컬럼 유형, 컬럼 명, 열너비 비율율 { Header: 'No', Type: 'Text', Name: 'SEQ', RelWidth: 30 }, // 필수 입력 여부,최대 입력 글자 수 { Header: 'Name', Type: 'Text', Name: 'name', RelWidth: 120, Required: 1, Size: 10, }, { Header: 'Age', Type: 'Int', Name: 'age', RelWidth: 60 }, { Header: 'Ymd', Name: 'sDate_Ymd', Extend: IB_Preset.YMD, RelWidth: 110 }, ], Events: { // 값 변경 이벤트 onBeforeChange: (evt) => { console.log(`${evt.oldval}값이 ${evt.val}로 변경되었습니다. `); }, // 시트 생성 완료 이벤트 onRenderFirstFinish: (evt) => { // 시트객체 생성시 1회만 발생합니다. mySheet.value = evt.sheet; // 생성된 시트 객체를 ref객체에 담음음 }, }, }; // 조회 데이터 const sheetData = [ { name: 'John Doe', age: 30, sDate_Ymd: '20251011' }, { name: 'Jane Smith', age: 25, sDate_Ymd: '20251205' }, ]; // 시트 객체 너비/높이 style const customStyle = { width: '100%', height: '400px', border: '1px solid #ccc', }; const handleAddRow = (evt) => { // 행 추가 mySheet.value.addRow(); }; const handleLoadData = (evt) => { // 데이터 로드 mySheet.value.loadSearchData(sheetData); }; const handleGetData = (evt) => { // 수정된 데이터 추출 const saveData = mySheet.value.getSaveJson(); // 정상 처리 if (saveData.data.length) { alert('수정된 행 데이터 \\n\\n\\n' + JSON.stringify(saveData)); } else { // 오류 발생 if (saveData.Code == 'IBS000') { alert('수정된 데이터가 없습니다.'); } else if (saveData.Code == 'IBS010') { alert( `${mySheet.value.getRowIndex(saveData.row)} 행의 ${ saveData.col } 열은 필수 입력 항목입니다.` ); } } }; </script> <template> <h1>IBSheet + Vue</h1> <div class=\"btn\"> <button @click=\"handleAddRow\">행 추가</button> <button @click=\"handleGetData\">수정된 데이터 확인</button> <button @click=\"handleLoadData\">데이터로드</button> </div> <IBSheetVue :options=\"sheetOptions\" :style=\"customStyle\" /> </template> ``` [vue 예제](https://stackblitz.com/edit/vitejs-vite-brpanol5) <mark>[IBSheet 객체 생성 시점에 따른 주의 사항](./spa-vue-caution)</mark> ## 3. vue + typescript 를 이용한 개발시 IBSheet interface 사용 @ibsheet/vue 컴포넌트에 포함된 typescript interface를 이용 할 수 있습니다. 앞선 1. ibsheet-loader를 통해 ibsheetjs 파일을 로드하는 부분은 동일합니다. ```html <script setup lang=\"ts\"> import { IBSheetVue, IB_Preset, type IBSheetInstance, type IBSheetOptions, type IBSheetEvents, } from '@ibsheet/vue'; import { shallowRef } from 'vue'; // 시트 객체를 담을 ref 객체 const mySheet = shallowRef<IBSheetInstance>(null); // 시트 클릭 이벤트 const handleAfterClick: IBSheetEvents['onAfterClick'] = (evt) => { console.log( `${evt.sheet.getRowIndex(evt.row)}행, ${evt.sheet.getString( evt.sheet.getRowById('Header'), evt.col )}열이 클릭되었습니다.` ); }; // 시트 객체 생성 이벤트 (객체 생성시 1회 발생) const handleRenderFinish: IBSheetEvents['onRenderFirstFinish'] = (evt) => { // ref 객체에 생성된 시트 객체를 넣어 줌 mySheet.value = evt.sheet; }; // 시트 초기화 구문 const sheetOptions: IBSheetOptions = { // Your IBSheet configuration options Cfg: { SearchMode: 0, }, Def: { Col: { RelWidth: 1 }, }, Cols: [ // 헤더 타이틀, 컬럼 유형(필수), 컬럼 명(필수), 열 너비 비율 { Header: 'No', Type: 'Text', Name: 'SEQ', RelWidth: 50 }, { Header: { Value: '', HeaderCheck: 1, IconAlign: 'Center' }, Type: 'Bool', Name: 'CHK', CanSort: 0, RelWidth: 50, }, { Header: '이름', Type: 'Text', Name: 'name', RelWidth: 200 }, { Header: '나이', Type: 'Int', Name: 'age', RelWidth: 100 }, { Header: '입사일', Name: 'sDate_Ymd', Extend: IB_Preset.YMD, RelWidth: 120, }, ], Events: { onAfterClick: handleAfterClick, onRenderFirstFinish: handleRenderFinish, }, }; const sheetData = [ { name: 'John Doe', age: 30, sDate_Ymd: '20251011' }, { name: 'Jane Smith', age: 25, sDate_Ymd: '20251205' }, ]; // 시트객체 너비, 높이 const customStyle = { width: '500px', height: '400px', border: '1px solid #ccc', }; const handleAddRow = () => { // 신규 행 추가 mySheet.value.addRow(); }; const handleExportXls = () => { // 엑셀 다운로드 (클라이언트 모듈 사용) mySheet.value.exportData({ fileName: 'ibsheet_vue_typescript_example.xlsx' }); }; const handleLoadData = () => { // 데이터 로드드 mySheet.value.loadSearchData(sheetData); }; </script> <template> <div class=\"btn\"> <button @click=\"handleAddRow\">Add Row</button> <button @click=\"handleLoadData\">Load Data</button> <button @click=\"handleExportXls\">Export Xls</button> </div> <IBSheetVue :options=\"sheetOptions\" :style=\"customStyle\" /> </template> ``` [vue+typescript 예제](https://stackblitz.com/edit/vitejs-vite-fx91nwtn)",
          "see": [],
          "since": "|product|version|desc||---|---|---||core|8.3.0.0|기능 추가|"
        },
        "url": "docs/appx/spa-vue.html"
      },
      {
        "cid": 947,
        "sid": "type-3",
        "name": "type",
        "label": "Type",
        "data": {
          "body": "> 각 열의 종류를 정의합니다. ### 열의 종류별 기능 |Type|Preview|Description| |---|---|---| |*Text*|![Text](/assets/imgs/typeText.png)|가장 일반적인 형태로 숫자,문자 구분없이 사용이 가능하면 데이터에 줄넘김 문자를 사용하더라도 한 행으로 보여집니다.| |*Lines*|![Text](/assets/imgs/typeLines.png)|Text 타입과 마찬가지로 숫자,문자 구분없이 사용이 가능하며, 데이터에 줄넘김 문자(`\\n` 또는 `\\r\\n`)를 포함시 행의 높이를 높여 보여줍니다.| |*Int*|![Text](/assets/imgs/typeInt.png)|정수 유형으로 숫자 외에 \"-\" 기호만 허용 됩니다. 기본값은 0을 갖으며, \"\"(공백)을 기본값으로 설정하려면 Cols설정시에 CanEmpty:1를 설정해야 합니다. 포맷에 따라 실제 값과 다르게 보여질 수 있습니다. <mark>기본 Format:\"#,##0\"</mark>| |*Float*|![Text](/assets/imgs/typeFloat.png)|실수 유형으로 숫자 외에 \"-\"와 \".\" 기호만 허용 됩니다.(\",\"을 입력시 소수점 구분자로 처리) 기본값은 0을 갖으며, \"\"(공백)을 기본값으로 설정하려면 Cols설정시에 CanEmpty:1를 설정해야 합니다. 포맷에 따라 실제 값과 다르게 보여질 수 있습니다. 가령 5432.629라는 실제값을 같는 열에 포맷을 [Format](./format):\"#,##0.00\"으로 설정한 경우, 시트에는 5,432.63 으로 보여지게 됩니다. <mark>기본 Format:\"#,##0.######\"</mark>| |*Date*|![Text](/assets/imgs/typeDate.png)|날짜 유형으로 달력팝업이나 직접 입력을 통해 날짜를 수정할 수 있습니다. 제품 내부적으로는 new Date().getTime() 형식의 숫자 값을 갖고 있습니다. 서버에서 조회 되는 데이터도 별도의 설정([DataFormat](/docs/props/col/data-format))을 하지 않는 경우에는 이와 같은 타입스템프 숫자가 입력되어야 합니다. **2019-07-25일을 조회해야 하는 경우 서버에서는 1563980400000가 리턴되어야 합니다.** [EditFormat](/docs/props/col/edit-format),[Format](/docs/props/col/format)을 통해 데이터 로드시 형식과 편집시 형식, 보여질 형식을 지정할 수 있습니다.| |*Button*|![Text](/assets/imgs/typeButton.png)|버튼을 보여주고 클릭시 이벤트(onClick)를 통해 기능을 정의하여 사용하실 수 있습니다. 별 다른 설정이 없는 경우에는 \\<u\\>태그를 통해 버튼을 생성합니다. [Button](/docs/props/col/button)속성을 통해 직접적인 \\<button\\>태그를 사용한 버튼과 HTML형식의 버튼을 설정하실 수 있습니다. `Button` 타입의 버튼 클릭 시 동작을 막고자 한다면 [Disabled](/docs/props/col/disabled) 속성을 통하여 제어 가능합니다.| |*Link*|![Text](/assets/imgs/typeLink.png)|셀에 보이는 텍스트 클릭시 연결되는 URL 그리고 target을 설정하여 사용하실 수 있습니다. 텍스트는 [TextStyle](/docs/props/col/text-style), [TextColor](/docs/props/col/text-color)를 사용하여 스타일 변경이 가능합니다 데이터는 다음과 같은 순서로 구분자를 이용한 문자열로 입력하거나 조회 되어야 합니다. **\\|URL\\|Text\\|Target** 여기서 Target는 Link를 클릭시 이동할 target(_blank ,_parent ,_self ,_top ,특정 window명)이 됩니다. ex) \"\\|./pos/acceptCos.do\\|조건확인\\|_self \" **데이터로 가져온 문자열의 가장 첫번째 문자가 구분자로 사용됩니다.** | |*Html*|![Text](/assets/imgs/typeHtml.png)|값으로 들어온 HTML태그를 별다른 변환없이 그대로 열에 보여줍니다 기본적으로 편집은 불가능하며, 엑셀 다운로드시에는 tag가 그대로 엑셀파일에 노출되기 때문에 주의가 필요합니다.| |*Img*||열에 이미지를 표현하고 클릭시 지정한 URL로 링크를 설정하실 수 있습니다. 데이터는 다음과 같은 순서로 구분자를 이용한 문자열로 입력하거나 조회 되어야 합니다. **\\|URL\\|Width\\|Height\\|Left\\|Top\\|LinkUrl\\|Target\\|Backgroud-size** 위에서 LinkUrl은 이미지를 사용자가 클릭시 연결할 URL경로를 의미하며, Target은 Link타입에서와 마찬가지로 a태그의 target을 의미합니다. Width, Height, Left, Top은 각각 이미지의 너비, 높이, 원위치에서 왼쪽으로의 이동, 원위치에서 아래로의 이동을 의미합니다.(css sprites) Backgroud-size는 배경 이미지 크기를 의미합니다. 기본적으로 `background-size:100% 100%` 의 속성이 적용되며 css에서 사용하는 속성과 동일하게 사용하실 수 있습니다. **데이터로 가져온 문자열의 가장 첫번째 문자가 구분자로 사용됩니다.** | |*Enum*|![Text](/assets/imgs/typeEnum.png)|HTML의 select 태그와 유사하게 한 셀안에 여러개의 아이템을 리스트 형식으로 표현하는 타입 입니다. [Enum](/docs/props/col/enum)과 [EnumKeys](/docs/props/col/enum-keys) 속성으로 통해 보여질 아이템의 문자열과 값을 설정할 수 있습니다. 데이터는 EnumKeys에 정의한 값 중에 하나를 입력하거나 조회하시면 됩니다.| |*Radio*|![Text](/assets/imgs/typeRadio.png)|HTML의 Radio와 유사하게 한 셀안에 여러개의 아이템을 Radio 형식으로 표현하는 타입 입니다. [Enum](/docs/props/col/enum)과 [EnumKeys](/docs/props/col/enum-keys) 속성으로 통해 보여질 문자열과 해당하는 값을 설정할 수 있습니다. 데이터는 EnumKeys에 정의한 값 중에 하나를 입력하거나 조회하시면 됩니다.| |*Bool*|![Text](/assets/imgs/typeBool.png)![Text](/assets/imgs/typeBool2.png)|checkbox와 같이 내부적으로 0/1 혹은 false/true 두 종류의 값만 갖는 타입입니다.| |*Pass*||password 형식으로 입력된 값을 보여주지 않고 글자수와 무관하게 ***로 보여줍니다.| |*File*||파일을 선택해서 업로드 및 다운로드할 수 있는 기능을 제공합니다. ie 9 이하에서는 사용 불가능 합니다. `File` 타입의 좌우 버튼을 감추고자 한다면 [Disabled](/docs/props/col/disabled) 속성을 통하여 제어 가능합니다.| |*Drag*||행을 드래그하기 위한 컬럼입니다. 드래그시 행이 드래그됩니다.|",
          "see": [
            {
              "label": "Button col",
              "url": "/docs/props/col/button"
            },
            {
              "label": "EditFormat col",
              "url": "/docs/props/col/edit-format"
            },
            {
              "label": "DataFormat col",
              "url": "/docs/props/col/data-format"
            },
            {
              "label": "Enum col",
              "url": "/docs/props/col/enum"
            },
            {
              "label": "EnumKeys col",
              "url": "/docs/props/col/enum-keys"
            },
            {
              "label": "Type col",
              "url": "/docs/props/col/type"
            },
            {
              "label": "Type cell",
              "url": "/docs/props/cell/type"
            },
            {
              "label": "Format appendix",
              "url": "/docs/appx/format"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가||core|8.0.0.5|기능 추가||core|8.1.0.88|Drag 타입 컬럼 추가|"
        },
        "url": "docs/appx/type.html"
      }
    ]
  },
  {
    "gid": 8,
    "name": "dataStructure",
    "label": "Data Structure",
    "children": [
      {
        "cid": 948,
        "sid": "1data-structure",
        "name": "1data-structure",
        "label": "데이터 규격",
        "data": {
          "body": "조회나 저장 작업을 위해 서버 호출시 서버에서 리턴되어야 할 \"응답 데이터\"의 형식을 정의합니다. ## 시트 생성시 데이터 형식 ```javascript //IBSheet.create()에 data 속성을 통해 생성시 데이터 구조 IBSheet.create({ id:\"sheet\", // 생성할 시트의 id el:\"sheetDiv\", // 시트를 생성할 Dom 객체 및 id options: options, // 생성될 시트의 속성 // 생성될 시트의 정적데이터 data: [ {\"sa_name\":\"홍길동\",\"sa_no\":\"940154\",\"sa_dept\":\"A021\"}, {\"sa_name\":\"김지수\",\"sa_no\":\"950757\",\"sa_dept\":\"B022\"} ] }); ``` ## doSearch나 loadSearchData Method 데이터 규격 ```js // Data 속성안에 배열형태로 데이터 구성 {\"Data\": [ {\"sa_name\":\"홍길동\",\"sa_no\":\"940154\",\"sa_dept\":\"A021\"}, {\"sa_name\":\"김지수\",\"sa_no\":\"950757\",\"sa_dept\":\"B022\"} ] } ``` ## doSearchPaging Method 데이터 규격 ```js // Data 속성안에 배열형태로 데이터 구성 (cfg)PageLength 에서 설정한 개수만큼 {\"Data\": [ {\"sa_name\":\"홍길동\",\"sa_no\":\"940154\",\"sa_dept\":\"A021\"}, {\"sa_name\":\"김지수\",\"sa_no\":\"950757\",\"sa_dept\":\"B022\"} ], \"Total\":25410 //<-- DB상의 전체건수 전체 건수 } ``` ## 데이터와 결과 규격 ```js // Data 속성안에 배열형태로 데이터 구성 {\"Data\": [ {\"sa_name\":\"홍길동\",\"sa_no\":\"940154\",\"sa_dept\":\"A021\"}, {\"sa_name\":\"김지수\",\"sa_no\":\"950757\",\"sa_dept\":\"B022\"} ], \"IO\": {\"Result\": 0, Message: \"조회 성공\"} } ``` ## 조회 데이터 내에 Row property,Cell property 적용(중요) ```js // 조회 데이터 안에 Row property에 해당하는 내용을 데이터와 함께 적용 {\"Data\": [ // 행의 색상을 붉은색으로 표시 {\"sa_name\":\"홍길동\",\"sa_no\":\"940154\",... , Color:\"#FF8888\"}, // 행 편집 불가 {\"sa_name\":\"김지수\",\"sa_no\":\"950757\",... , CanEdit:0} ] } ``` ```js // 조회 데이터 안에 \"컬럼명+Cell Property\" 형식으로 설정시 Cell 기능 부여 {\"Data\": [ // sn_id cell 글자색 설정 {\"sn_id\":\"209321\",\"lot\":\"k0923123\", sn_idTextColor:\"#FF0000\"}, // lot cell 편집 불가 {\"sn_id\":\"209327\",\"lot\":\"r2019283\", lotCanEdit:0}, // pos 컬럼(Enum타입)에 item을 해당 셀만 다르게 설정 {\"pos\":\"A02\", posEnum: \"|성남시|부천시|광명시|화성시\", posEnumKeys: \"|A00|A01|A02|A03\"} ] } ``` ## 조회 데이터 내에 JSON Event 적용 ```js // 조회 데이터에 JSON 이벤트를 포함할수 있습니다. {\"Data\": [ // sa_name컬럼의 값 수정시 sawonPop() 함수 호출 {\"sa_name\":\"홍길동\",sa_nameOnChange:\"sawonPop\"}, ], } ``` 조회 작업시 서버에서 리턴 된 데이터는 [onReceiveData](/docs/events/on-receive-data), [onBeforeDataLoad](/docs/events/on-before-data-load), [onDataLoad](/docs/events/on-data-load) 이벤트를 통해 확인하실 수 있습니다. ## Tree 데이터 규격 ### 일반적인 Tree 데이터 형태 ```js // Items 속성안에 자식 행을 추가하는 형태로 구성 {\"Data\": [ //1 Depth {sProduct:\"내부 시스템 개발 사업\",sCustomer:\"B사\",sDate:\"20180116\", sCustomerRowSpan:2, //2 Depth Items:[ {sProduct:\"글로벌 통합 인사시스템\",sKind:\"프로젝트\", sCount:\"1\",sPrice:\"192\"}, {sProduct:\"LEGACY SW 공급\",sKind:\"소프트웨어\", sCount:\"1\",sPrice:\"420\"} ] }, //1 Depth {sProduct:\"복무급여고도화시스템\",sCustomer:\"D사\",sDate:\"20171031\", //2 Depth Items:[ {sProduct:\"병원 전자구매 및 조달시스템\",sKind:\"납품\",sCount:\"1\",sPrice:\"303\",sDiscount:\"10\" } ] }, //1 Depth {sProduct:\"2017~2018 솔루션 납품 및 판매\",sCustomer:\"E사\",sDate:\"20170520\", //2 Depth Items:[ {sProduct:\"병원 개발/CDP 구축\",sKind:\"프로젝트\",sCount:\"1\",sPrice:\"29\"}, {sProduct:\"성능개량사업 군수지원교보재\",sKind:\"프로젝트\",sCount:\"1\",sPrice:\"15.5\",sDiscount:\"5\"}, {sProduct:\"SHE시스템 구축\",sKind:\"프로젝트\",sCount:\"1\",sPrice:\"79\"}, {sProduct:\"Cost Quotation System\",sKind:\"프로젝트\",sCount:\"1\",sPrice:\"3\"}, {sProduct:\"전사업무지원시스템\",sKind:\"프로젝트\",sCount:\"1\",sPrice:\"59.5\"}, {sProduct:\"통합판매관리시스템\",sKind:\"프로젝트\",sCount:\"1\",sPrice:\"39\"}, {sProduct:\"E-HR시스템\",sKind:\"유지보수\", //3 Depth Items:[ {sProduct:\"물산 E-HR시스템\",sKind:\"기타\",sCount:\"1\",sPrice:\"4\"}, {sProduct:\"제조 E-HR시스템\",sKind:\"기타\",sCount:\"1\",sPrice:\"4\" } ] }, {sProduct:\"건설 외주실적 단가시스템\",sKind:\"납품\",sCount:\"1\",sPrice:\"95\"}, {sProduct:\"인재육성시스템\",sKind:\"프로젝트\",sCount:\"1\",sPrice:\"7\"}, {sProduct:\"웹사이트 액티브X제거 관련 SW 구매\",sKind:\"프로젝트\", sCount:\"1\",sPrice:\"22.5\" } ]} ] } ``` ### 간단한 Tree 데이터 형태 ```js var treeData = { \"Data\":[ {Level:0 ,sProduct:\"병원 개발/CDP 구축\",sKind:\"프로젝트\",sCount:\"1\",sPrice:\"29\"}, {Level:1 ,sProduct:\"성능개량사업 군수지원교보재\",sKind:\"프로젝트\",sCount:\"2\",sPrice:\"15.5\",sDiscount:\"5\"}, {Level:3 ,sProduct:\"SHE시스템 구축\",sKind:\"프로젝트\",sCount:\"1\",sPrice:\"79\"}, {Level:2 ,sProduct:\"Cost Quotation System\",sKind:\"프로젝트\",sCount:\"1\",sPrice:\"3\"}, {Level:3 ,sProduct:\"전사업무지원시스템\",sKind:\"프로젝트\",sCount:\"1\",sPrice:\"59.5\"}, {Level:3 ,sProduct:\"통합판매관리시스템\",sKind:\"프로젝트\",sCount:\"1\",sPrice:\"39\"}, ] } ``` 위와같이 Level을 통해 각 행의 Depth를 가져온 후 데이터 로드시점에서 ibsheet-common.js에서 제공하는 convert함수를 통해 변환하여 로드한다. (Level의 대소문자 주의) ```js var convertData = IBSheet.v7.convertTreeData(treeData); sheet.loadSearchData(convertData)); ``` <hr> ## getChangedData 메소드로 수정된 데이터만 추출시 ```javascript // 서버에 request로 보내지는 Data 객체는 다음과 같은 사항을 포함 // 1) 변경 대상이 되는 셀의 행 id // 2) 셀 변경 사항의 종류(추가/삭제/변경) // 3) 변경 대상이 되는 셀의 열이름을 프로퍼티로 하고 해당하는 프로퍼티의 값으로 변경된 데이터 값 Data: {\"IO\": { }, \"Changes\": [{\"id\": \"AR1\", \"Changed\": 1, \"열이름\": \"변경된 값\"}]} ``` ## 저장시 데이터 규격 서버사이드에서 저장작업 후 클라이언트 측으로 전달되어야 하는 json 구조는 아래와 같습니다. ```javascript // 서버에서 시트로 보낼 응답 규격 성공시 : {\"IO\": {\"Result\": 0 , Message:\"저장 되었습니다.\"}} // Result에 0이상의 양수 설정 실패시 : {\"IO\": {\"Result\": -100, Message:\"오류내용...\" }} // Result 값을 -1 ~ 7을 제외한 음수로 설정. ``` 저장 결과가 성공인 경우 `입력/수정` 상태의 행은 `조회` 상태로 돌아가고 `삭제` 상태의 행은 시트에서 `제거` 됩니다. 저장 결과가 실패인 경우 기존 상태를 유지하며 [doSave()](/docs/funcs/core/do-save)함수는 종료됩니다. 리턴되는 값에 `IO`나 `Result` 와 같은 속성이 없는 경우 다음과 같이 처리 됩니다. |리턴되는 결과|서버상태|처리 형태| |-|-|-| |`IO` 안에 `Result`가 없는 경우|200|성공으로 판단. [onAfterSave](/docs/events/on-after-save)이벤트에 result는 0리턴| |결과가 아무것도 없는 경우|200|실패로 판단. [onAfterSave](/docs/events/on-after-save)이벤트에 result는 -5리턴| |서버에서 오류가 발생한 경우|400이상의 값|실패로 판단. [onAfterSave](/docs/events/on-after-save)이벤트에 result는 -3 리턴| 리턴되는 값에 `Message`가 있을 경우 `Message` 에 설정된 내용을 메세지로 표시하고, 없는 경우에는 `Result` 값에 따라 아래의 표의 기준에 해당하는 에러 메세지를 언어팩에서 가져와 표시합니다. |Result Code|Message|언어팩 변수명| |----------|----|---| |-1|Url의 값이 없습니다.|\"ResultErrEmptyURL\"| |-2|Url의 값이 잘못됐습니다.|\"ResultErrBadURL\"| |-3|Url의 주소를 찾을 수 없습니다.|\"ResultErrNotFound\"| |-4|문서 형식이 잘못됐습니다.|\"ResultErrBadDocumentFormat\"| |-5|Url에서 응답이 없습니다.|\"ResultErrEmptyResponse\"| |-6|연결시간이 초과됐습니다.|\"ResultErrRequestTimeout\"| |-7|데이터 형식이 잘못됐습니다.|\"ResultErrBadDataFormat\"| |-8 ~|알 수 없는 오류|\"ResultErrUnknown\"| ## Type:\"File\" 설정 후 저장시 데이터 규격(자세한 설정은 [File Type 업로드 (appendix)](/docs/appx/file-type-upload)참고) ```javascript // 서버에서 시트로 보낼 응답 규격 // 성공 시 {\"IO\": { \"Result\": 0 , \"Message\": \"저장 되었습니다.\", \"data\":[ //저장처리 이후 파일 다운로드 하려면 필요 {\"file\":\"file.xlsx\", \"filePath\":\"/customer-sample/\", \"id\":\"AR7\"}, {\"file\":\"file1.xlsx\", \"filePath\":\"/customer-sample/\", \"id\":\"AR4\"}, ] } } // 실패 시 Result 값을 음수로 설정. {\"IO\": {\"Result\": -9, Meassage:\"오류내용...\" }} ``` ```jsp // 서버 예제 <%@ page language=\"java\" contentType=\"application/json; charset=UTF-8\" pageEncoding=\"UTF-8\"%> <%@ page import=\"java.util.*, org.json.*\"%> <% request.setCharacterEncoding(\"utf-8\"); response.setContentType(\"application/json\"); response.setStatus(200); JSONObject result = new JSONObject(); // 서버에서 시트로 보낼 JSON 형식의 통신 관련 객체 JSONObject IO = new JSONObject(); // 결과를 담고 있는 객체 try { if(조건) { IO.put(\"Result\", 0); // 결과를 담고 있는 객체에 Result 프로퍼티로 성공/실패 여부를 보냅니다. 0으로 설정 시 성공. -2 ~ -9로 설정 시 실패. 실패하는 경우 시트에서 오류 메시지를 띄웁니다. IO.put(\"Message\", \"성공\"); // 서버에서 시트로 전달할 메시지(onAfterSave 이벤트의 message 인자로 받을 수 있습니다) } else { IO.put(\"Result\", -200); IO.put(\"Message\", \"실패\"); } result.put(\"IO\", IO); } catch(Exception ex) { result.put(\"Exception\", ex); } out.print(result); %> ``` 저장 작업시 서버에서 리턴한 결과는 [onAfterSave](/docs/events/on-after-save)이벤트를 통해 확인하실 수 있습니다.",
          "see": [
            {
              "label": "doSearch method",
              "url": "/docs/funcs/core/do-search"
            },
            {
              "label": "doSearchPaging method",
              "url": "/docs/funcs/core/do-search-paging"
            },
            {
              "label": "loadSearchData method",
              "url": "/docs/funcs/core/load-search-data"
            },
            {
              "label": "getChangedData method",
              "url": "/docs/funcs/core/get-changed-data"
            },
            {
              "label": "onAfterSave event",
              "url": "/docs/events/on-after-save"
            },
            {
              "label": "onReceiveData",
              "url": "/docs/events/on-receive-data"
            },
            {
              "label": "onBeforeDataLoad",
              "url": "/docs/events/on-before-data-load"
            },
            {
              "label": "onDataLoad",
              "url": "/docs/events/on-data-load"
            }
          ],
          "since": "|product|version|desc||---|---|---||core|8.0.0.0|기능 추가|"
        },
        "url": "docs/dataStructure/1data-structure.html"
      }
    ]
  },
  {
    "gid": 9,
    "name": "userGuide",
    "label": "User Guide",
    "children": [
      {
        "cid": 951,
        "sid": "feature-2",
        "name": "feature",
        "label": "제품 주요 기능 리스트",
        "data": {
          "body": "`IBSheet 8`의 주요 기능에 대한 안내입니다. 아래 기능들은 각 기능의 사용설정이 된 화면에서, 화면 이용자가 사용할 수 있는 기능 목록입니다. ## 주요한 제품의 기능 1. [헤더 기능](/docs/userGuide/header) 2. [Drag & Drop 기능](/docs/userGuide/dragNdrop) 3. [힌트 및 풍선 도움말 기능](/docs/userGuide/hint) 4. [메뉴 기능](/docs/userGuide/menu) 5. [필터링 기능](/docs/userGuide/filter) 6. [찾기 기능](/docs/userGuide/search) 7. [피벗 기능](/docs/userGuide/pivot) 8. [그룹핑 기능](/docs/userGuide/group) 9. [다양한 import/export 기능](/docs/userGuide/excel)"
        },
        "url": "docs/userGuide/feature.html"
      },
      {
        "cid": 954,
        "sid": "header-3",
        "name": "header",
        "label": "헤더 기능",
        "data": {
          "body": "## *열 너비 변경* 헤더 셀의 너비를 조절하여 컬럼의 크기를 조절할 수 있습니다. ![열너비 조절](/assets/imgs/col_width_control.gif \"열너비 조절\") ## *열 위치 이동* 사용자가 헤더 셀에서 Drag & Drop을 통해 열의 너비를 변경하거나 열의 위치를 수정하실 수 있습니다. ![단일 헤더 열이동](/assets/imgs/oneHeader_move2.gif \"단일 헤더 열이동\") [**드래그를 통한 열 위치 이동 예1**] ![다중 헤더 열이동](/assets/imgs/twoHeader_move.gif \"다중 헤더 열이동\") [**드래그를 통한 열 위치 이동 예2**] ## *다중 열 정렬* 헤더 셀을 클릭하거나 제공되는 API를 통해 단일열 뿐 아니라 여러개 열에 대해 동시에 정렬하실 수 있습니다. (별도 설정하지 않는 경우, 기본 3개 컬럼에 대해 순차적으로 정렬 가능) ![다중열소트](/assets/imgs/col_sorting.gif \"여러개 열에 대한 소팅\") [**여러개 열에 대한 소팅 예**] ## *정렬 다이얼로그* 또한 별도의 정렬 다이얼로그를 띄우는 경우 다이얼로그를 통해 소팅될 컬럼과 순서를 설정할 수 있습니다. ![정렬다이얼로그](/assets/imgs/sortDialog.gif \"정렬다이얼로그\") [**다이얼로그를 통한 소팅 예**] ## *헤더 메뉴* 헤더 셀에서 마우스 우클릭을 통해 메뉴를 띄울 수 있습니다. 컬럼 표시 여부, 컬럼 정보 저장 여부, 필터행 여부는 ibsheet-common.js에서 공통으로 제공하는 기능입니다. 화면 개발 시 보여지는 메뉴의 구성을 추가/삭제하여 설정할 수 있습니다. ![헤더메뉴](/assets/imgs/header_menu.png \"헤더메뉴에서 기능 선택\") [**헤더 메뉴**] ### *1) 다중컬럼 보이기/감추기* 컬럼의 표시 여부를 설정하여 일부 컬럼을 감추거나 보이게 할 수 있습니다. ![다중컬럼 감추기/보이기1](/assets/imgs/HeaderMenu_showCol1.gif \"다중컬럼 감추기/보이기1\") [**다중컬럼 감추기/보이기**] 헤더가 여러줄인 경우, 트리 형태로 표시됩니다. ![다중컬럼 감추기/보이기2](/assets/imgs/HeaderMenu_showCol2.gif \"다중컬럼 감추기/보이기2\") [**헤더가 여러줄인 경우 다중컬럼 감추기/보이기**] 단, <mark>멀티레코드 형태의 그리드에서는 지원하지 않습니다.</mark> ![다중컬럼 감추기/보이기3](/assets/imgs/HeaderMenu_showCol3.png \"다중컬럼 감추기/보이기3\") [**멀티레코드 그리드에서는 메뉴노출이 되지 않음**] ### *2) 컬럼 정보 저장* 시트의 정보를 로컬/세션 스토리지에 저장할 수 있습니다. ![컬럼 정보 저장](/assets/imgs/sessionStorage.gif \"컬럼 정보 저장\") [**컬럼 순서 수정 후 새로고침 시 저장한 순서로 생성됨**] 컬럼 정보 저장을 취소하면 새로고침 시 초기 설정의 시트를 확인할 수 있습니다. ### *3) 필터행 생성* 헤더 아래 필터행을 생성하거나 제거할 수 있습니다. ![필터행 생성](/assets/imgs/HeaderMenu_filter.gif \"필터행 생성/제거\") [**필터행 생성/제거**]"
        },
        "url": "docs/userGuide/header.html"
      },
      {
        "cid": 949,
        "sid": "dragNdrop",
        "name": "dragNdrop",
        "label": "Drag & Drop 기능",
        "data": {
          "body": "## *시트 내 셀 이동* 시트 내에서 행이나 셀을 Drag하여 이동하실 수 있습니다. ![시트내 행이동](/assets/imgs/row_move.gif \"행드래그드롭\") [**시트내 행이동**] ![시트내 셀이동](/assets/imgs/cell_move.gif \"셀드래그드롭\") [**시트내 셀이동**] ## *시트 간 행 이동* 행이나 셀을 Drag하여 다른 시트에 복사하거나 이동하실 수 있습니다. ![행이동](/assets/imgs/other_row_move.gif \"시트간 행드래그드롭\") [**시트간 행이동**]"
        },
        "url": "docs/userGuide/dragNdrop.html"
      },
      {
        "cid": 955,
        "sid": "hint",
        "name": "hint",
        "label": "힌트 및 풍선 도움말 기능",
        "data": {
          "body": "## *힌트 기능* 열의 너비가 부족하여 셀안의 모든 내용이 보여지지 않을 때, 마우스커서가 올라간 셀에 한하여 셀의 크기를 임시적으로 늘려 내용을 보여주는 기능을 제공합니다. ![힌트기능](/assets/imgs/hint.gif \"힌트기능\") [**힌트기능 예**] ## *풍선 도움말 기능* 마우스커서가 올라간 셀에 한하여 풍선 도움말을 표시하는 기능을 제공합니다. ![툴팁기능](/assets/imgs/tooltip.gif \"툴팁기능\") [**풍선 도움말 기능 예**]"
        },
        "url": "docs/userGuide/hint.html"
      },
      {
        "cid": 956,
        "sid": "menu-6",
        "name": "menu",
        "label": "메뉴 기능",
        "data": {
          "body": "사용자가 헤더 셀에서 마우스 우클릭을 통해 메뉴를 띄우거나 데이터 행에서 마우스 우클릭으로 컬럼 메뉴를 띄울 수 있습니다. 단, 이 기능은 <b>각 화면에 해당 기능이 설정된 경우에만</b> 사용할 수 있으며, 보여지는 메뉴의 구성도 화면개발 시 자유롭게 설정할 수 있습니다. ## *컨텍스트 메뉴* 데이터 행에서 마우스 우클릭을 통해 메뉴를 띄웁니다. 메뉴 구성은 설정에 따라 자유롭게 설정할 수 있습니다. ![컨텍스트 메뉴](/assets/imgs/showMenu.png \"마우스 커서가 있는 위치에 컨텍스트메뉴를 띄움\") [**컨텍스트 메뉴 기능 예1**] ![컨텍스트 메뉴](/assets/imgs/contextmenu.gif \"마우스 커서가 있는 위치에 컨텍스트메뉴를 띄움\") [**컨텍스트 메뉴 기능 예2**] ## *컨텍스트 메뉴 기능 응용* 시트 내에서 마우스 우측버튼 클릭시 다양한 기능의 컨텍스트 메뉴를 구성하여 사용하실 수 있습니다. 아래 예제는 엑셀 다운로드 기능을 데이터 영역에 설정한 예제입니다. ![컬럼메뉴](/assets/imgs/menuIcon.png \"컬럼메뉴에서 엑셀 다운로드 기능 선택\") [**컨텍스트 메뉴 기능 예3**] ## `ibsheet-common.js`의 컨텍스트 메뉴 `ibsheet-common.js`에서는 시트의 헤더를 마우스 우클릭하면 기본적으로 컨텍스트 메뉴가 설정되어 있습니다. ### 1. 컬럼 표시 여부 메뉴 - `컬럼 표시 여부` 메뉴는 시트에 [onReadMenu](/docs/events/on-read-menu) 이벤트가 설정되어 있는 경우에는 생성되지 않습니다. - 해당 메뉴는 [onReadMenu](/docs/events/on-read-menu) 이벤트가 처음 발생한 시점의 시트 열 상태를 기준으로 구성됩니다. 즉, 처음 보여지는 열들을 기준으로 메뉴 항목이 설정됩니다. - `IBSheet.MenuFunctions` 객체 내 메뉴 구성에 사용되는 함수들이 저장되어있습니다. ```javascript // ibsheet-common.js _IBSheet.MenuFunctions = { getContextMenu: getContextMenu, // setItemBool: setItemBool, // toggleCols: toggleCols, }; // 특정 위치에 '컬럼 표시 여부' 메뉴 표시 예시 sheet.showMenu({ row: sheet.getRowById(\"AR2\"), col: \"TextData\", menu: IBSheet.MenuFunctions.getContextMenu(sheet) }); ```"
        },
        "url": "docs/userGuide/menu.html"
      },
      {
        "cid": 952,
        "sid": "filter",
        "name": "filter",
        "label": "필터링 기능",
        "data": {
          "body": "헤더 아래 필터행을 통해 사용자가 조회 된 데이터 중에 찾고자 하는 내용을 필터링 하여 볼 수 있는 기능을 제공합니다. 한 셀 안에서 and나 or 조건을 통해 필터링 하거나 여러개 열간에 and나 or 조건을 통해 필터링 하실 수 있습니다. ## *문자 컬럼 필터링* 문자 컬럼의 경우 필터행에 작성한 문자열을 포함하거나, 시작하는 등의 조건에 따라 필터링이 가능합니다. ![필터기능](/assets/imgs/basic_filter.gif \"필터행을 통한 필터링\") [**문자 컬럼 기본 필터링 예**] ![필터기능](/assets/imgs/string_filter.gif \"필터행을 통한 필터링\") [**문자 조건에 따른 필터링 예**] 다수의 문자를 검색할 때는 ','(and검색) 나 ';'(or검색)을 사용하실 수 있습니다. (ex '싼타페;2200;기본형' 싼타페와 2200, 기본형 글자를 전부 포함한 행만 남기고 감춤) (ex 'QM5,모닝' QM5 또는 모닝 글자를 하나라도 포함한 행 전부 남기고 감춤) ![필터기능](/assets/imgs/and_filter.gif \"and 연산자를 사용한 필터링\") [**and 연산자(,) 필터링 예**] ![필터기능](/assets/imgs/or_filter.gif \"or 연산자를 사용한 필터링\") [**or 연산자(;) 필터링 예**] ## *숫자 컬럼 필터링* 숫자 컬럼의 경우 등호, 부등호, 상위 10 등의 조건에 따라 필터링이 가능합니다. ![필터기능](/assets/imgs/int_filter.gif \"필터행을 통한 필터링\") [**숫자 조건에 따른 필터링 예**] ![필터기능](/assets/imgs/top10_filter.gif \"필터행을 통한 필터링\") [**상위 10개 항목 필터링 예**] 숫자나 날짜에 대해서는 '&#126;'(물결) 를 통해 구간을 필터링할 수 있습니다. (ex '20111101&#126;20111130' 2011년 11월 1일부터 2011년 11월 30일까지만 남기고 모두 감춤) ![필터기능](/assets/imgs/dateRange_filter.gif \"범위 연산자를 사용한 필터링\") [**날짜 구간 필터링 예**] ## *콤보 컬럼 필터링* 콤보 컬럼의 경우 원하는 항목만 선택하여 필터링이 가능합니다. ![필터기능](/assets/imgs/enum_filter.gif \"필터행을 통한 필터링\") [**콤보 컬럼의 필터행 사용 예**] ## *날짜 컬럼 필터링* 날짜 컬럼의 경우 원하는 날짜 범위만큼 필터링이 가능합니다. ![필터기능](/assets/imgs/date_filter.gif \"필터행을 통한 필터링\") [**날짜 컬럼의 필터행 사용 예**]"
        },
        "url": "docs/userGuide/filter.html"
      },
      {
        "cid": 958,
        "sid": "search",
        "name": "search",
        "label": "찾기 기능",
        "data": {
          "body": "그리드 내에서 찾기 다이얼로그를 띄워 원하는 데이터를 검색하거나, 원하는 내용으로 바꿀 수 있습니다. 해당 기능은 데이터 내에서 텍스트 기준으로 검색/변경이 가능합니다. ## *검색 / 바꾸기* **검색 기능** 시트에서 ctrl+F 키를 눌러, 찾기 다이얼로그를 사용하실 수 있습니다. ![찾기다이얼로그](/assets/imgs/showFindDialog_1.png) [**찾기 다이얼로그**] 찾기 다이얼로그로 전체 컬럼 또는 특정 컬럼에서 찾을 수 있습니다. ![찾기다이얼로그](/assets/imgs/findDialog1.gif) [**찾기 다이얼로그 사용방법**] **바꾸기 기능** 찾기 다이얼로그에서 바꾸기 기능을 사용할 수 있습니다. ![찾기다이얼로그](/assets/imgs/findDialog2.gif)"
        },
        "url": "docs/userGuide/search.html"
      },
      {
        "cid": 957,
        "sid": "pivot",
        "name": "pivot",
        "label": "피벗 기능",
        "data": {
          "body": "피벗 다이얼로그를 통해 사용자가 피벗팅 할 데이터를 구성하고, 계산 결과를 확인하실 수 있습니다. ## *피벗 다이얼로그* 대상에 맞게 컬럼 기준을 설정한 뒤 피벗 테이블을 생성할 수 있습니다. 시트에서 ctrl+alt+t 키를 눌러, 피벗 다이얼로그를 사용하실 수 있습니다. ![피벗 다이얼로그](/assets/imgs/pivotDialog.gif) [**피벗팅 다이얼로그**] ![피벗팅 결과](/assets/imgs/pivotDialog_result.png) [**피벗팅 결과**]"
        },
        "url": "docs/userGuide/pivot.html"
      },
      {
        "cid": 953,
        "sid": "group-2",
        "name": "group",
        "label": "그룹핑 기능",
        "data": {
          "body": "그룹핑 기능이 활성화 된 시트에서 사용자가 드래그를 통해 조회된 데이터를 그룹지어 볼 수 있습니다. 그룹핑 기능은 그룹핑 기능이 추가된 화면에서만 사용 가능합니다. ## *그룹핑* 특정 열을 기준으로 그룹핑된 데이터를 확인할 수 있습니다. ![그룹기능](/assets/imgs/basic_group.gif \"그룹핑 기능\") [**특정 열을 기준으로 그룹핑 예**] ## *그룹핑된 데이터에서 소계 계산* 그룹된 데이터 내에서 소계 등의 계산 결과를 확인할 수 있습니다. ![그룹기능](/assets/imgs/group_subtotal.gif \"그룹핑 기능\") [**그룹핑된 데이터 내에서 소계 계산 예**]"
        },
        "url": "docs/userGuide/group.html"
      },
      {
        "cid": 950,
        "sid": "excel",
        "name": "excel",
        "label": "다양한 import/export 기능",
        "data": {
          "body": "`엑셀, text, pdf` 등의 파일형식으로 데이터를 다운로드 하거나, `엑셀, csv, text` 파일을 업로드 하는 기능을 제공합니다. 엑셀 업로드 또는 다운로드 시 옵션을 설정하는 다이얼로그를 띄울 수 있습니다. ## *다운로드 다이얼로그* 엑셀이나 텍스트 다운로드 시 다운로드 다이얼로그를 띄워 선택적으로 컬럼과 파일명을 설정할 수 있습니다. 다운로드 다이얼로그에서 다운받기 원하는 컬럼과 행을 선택할 수 있습니다. ![다운로드다이얼로그](/assets/imgs/excel_dialog.gif \"다운로드 다이얼로그\") [**선택적으로 컬럼 엑셀 다운로드 예**] ![다운로드다이얼로그](/assets/imgs/excel_result.png) [**다운받은 엑셀 결과**] ## *다양한 파일 형식 다운로드* 엑셀, text, pdf 등의 파일 형식으로 다운로드할 수 있습니다. ![txt 다운로드](/assets/imgs/txt_dialog.gif \"txt 다운로드\") [**txt 형식 다운로드 예**] ![txt 다운로드](/assets/imgs/txt_result.png) [**다운받은 txt 결과**] ![pdf 다운로드](/assets/imgs/pdf_result.png) [**다운받은 pdf 결과**] ## *업로드 다이얼로그* 엑셀 업로드를 통해 파일을 화면에 올릴 때, 업로드 다이얼로그를 띄워 올리려는 데이터를 미리보기 하고 데이터를 수정/삭제 할 수 있습니다. ![업로드다이얼로그](/assets/imgs/excel_uploadDialog.png) [**엑셀 업로드 다이얼로그**] ![업로드다이얼로그](/assets/imgs/txt_uploadDialog.png) [**txt/csv 업로드 다이얼로그**]"
        },
        "url": "docs/userGuide/excel.html"
      }
    ]
  },
  {
    "gid": 10,
    "name": "styleGuide",
    "label": "Style 적용 가이드",
    "children": [
      {
        "cid": 961,
        "sid": "css",
        "name": "css",
        "label": "기본 CSS 적용",
        "data": {
          "body": "## CSS 파일 링크 html파일에서 link tag로 사용하시려는 css파일을 호출하셔야 합니다. 아래 예제코드에서는 demo사이트에서 사용되는 기본 테마의 css를 경로를 설정한 사항입니다. ```html <!-- ibsheet css --> <link rel=\"stylesheet\" href=\"https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/default/main.css\"/> ``` * * * ## CSS 파일이 적용되지 않은 경우 IBSheet는 사용 시, 테마에 맞는 CSS 파일을 호출하셔야 합니다. 만약 해당 테마에 맞는 CSS파일이 호출되지 않은 경우 아래 캡처와 같이 sheet div안에 tag가 생성되었으나, tag에 맞는 css정보를 찾지 못하여 하얀색 화면만 보일 수 있습니다. sheet영역 개발자도구 확인 ![sheet영역 개발자도구](/assets/imgs/styleguide_css_sheet_developer_tool.png \"sheet영역 개발자도구\") sheet영역 개발자도구에서 선택한 영역 ![sheet영역 개발자도구 선택영역](/assets/imgs/styleguide_css_sheet_developer_tool_selection.png \"sheet영역 개발자도구 선택영역\")"
        },
        "url": "docs/styleGuide/css.html"
      },
      {
        "cid": 970,
        "sid": "theme",
        "name": "theme",
        "label": "테마 적용",
        "data": {
          "body": "## 기본 테마 종류 현재 배포되고 있는 테마는 다음과 같습니다. `기본`, `기본(이미지)`, `grace`, `material`, `mint`, `simple`, `gray` 이 중 기본(이미지) 테마에서만 이미지를 png, gif파일로 제공합니다. 그 외의 테마는 base64로 인코딩된 svg파일로 이미지를 제공합니다. 테마명 옆의 ()안에는 테마의 Prefix명입니다. `ibsheet.js`파일의 경로를 `/assets/ibsheet/`로 가정하고 설명하겠습니다. 기본 테마 (`IB`) ```html <link rel=\"stylesheet\" href=\"/assets/ibsheet/css/default/main.css\"/> ``` ![default theme](/assets/imgs/styleguide_css_default_theme.png \"default theme\") 기본(이미지) 테마 (`IB`) ```html <link rel=\"stylesheet\" href=\"/assets/ibsheet/css/default_img/main.css\"/> ``` ![default theme](/assets/imgs/styleguide_css_default_theme.png \"default theme\") grace 테마 (`IBGR`) ```html <link rel=\"stylesheet\" href=\"/assets/ibsheet/css/grace/main.css\"/> ``` ![grace theme](/assets/imgs/styleguide_css_grace_theme.png \"grace theme\") material 테마 (`IBTR`) ```html <link rel=\"stylesheet\" href=\"/assets/ibsheet/css/material/main.css\"/> ``` ![material theme](/assets/imgs/styleguide_css_material_theme.png \"material theme\") mint 테마 (`IBMT`) ```html <link rel=\"stylesheet\" href=\"/assets/ibsheet/css/mint/main.css\"/> ``` ![mint theme](/assets/imgs/styleguide_css_mint_theme.png \"mint theme\") simple 테마 (`IBSP`) ```html <link rel=\"stylesheet\" href=\"/assets/ibsheet/css/simple/main.css\"/> ``` ![simple theme](/assets/imgs/styleguide_css_simple_theme.png \"simple theme\") gray 테마 (`IBGY`) ```html <link rel=\"stylesheet\" href=\"/assets/ibsheet/css/gray/main.css\"/> ``` ![gray theme](/assets/imgs/styleguide_css_gray_theme.png \"gray theme\") * * * ## 테마 적용 방법 테마의 Prefix명은 [Style cfg](/docs/props/cfg/style)에서 설정하거나, [setTheme func](/docs/funcs/core/set-theme)에서 변경할 테마의 prefix파라미터에서 사용됩니다. [Style cfg](/docs/props/cfg/style)로 사용하시는 경우, 앞서 사용하실 테마에 맞는 css파일을 먼저 호출하셔야 합니다. [setTheme func](/docs/funcs/core/set-theme)로 테마를 적용하시는 경우, 테마의 prefix명과 테마의 css파일의 경로가 파라미터로 사용됩니다."
        },
        "url": "docs/styleGuide/theme.html"
      },
      {
        "cid": 967,
        "sid": "layout",
        "name": "layout",
        "label": "각 영역별(Layout) 명칭 소개",
        "data": {
          "body": "## 헤더와 데이터 헤더 영역은 각 컬럼에서 Header속성에 설정한 값이 출력 되는 영역으로 해당 컬럼에서 사용되는 데이터에 대한 설명을 나타내는 영역입니다. 데이터 영역은 헤더 영역의 하단에 위치하며, 바인딩 된 데이터가 출력 되는 영역입니다. 일반적으로 데이터 영역과 구분을 위해 배경색을 적용하여 쉽게 알아보실 수 있습니다. ```javascript var OPT = { //틀고정 좌측 컬럼 설정 \"LeftCols\": [ {\"Type\": \"Int\",\"Width\": 50,\"Align\": \"Center\",\"Name\": \"SEQ\"} ], //중앙(메인) 컬럼 설정 \"Cols\": [ {\"Header\": [\"회사명\",\"회사명\"],\"Type\": \"Text\",\"Name\": \"sCorp\",\"MinWidth\": \"100\",\"Align\": \"Center\",\"CanEdit\": 1, RelWidth: 1}, {\"Header\": [\"사원수\",\"사원수\"],\"Type\": \"Int\",\"Name\": \"sPerson\",\"Width\": \"80\",\"Align\": \"Right\",\"CanEdit\": 1}, {\"Header\": [\"금년신입\",\"금년신입\"],\"Type\": \"Int\",\"Name\": \"sNewPerson\",\"Width\": \"70\",\"Align\": \"Right\",\"CanEdit\": 1}, {\"Header\": [\"평균연봉\",\"평균연봉\"],\"Type\": \"Float\",\"Name\": \"sPay\",\"Width\": \"100\",\"Align\": \"Right\",\"CanEdit\": 1}, {\"Header\": [\"평균보너스\",\"평균보너스\"],\"Type\": \"Float\",\"Name\": \"sBonus\",\"Width\": \"100\",\"Align\": \"Right\",\"CanEdit\": 1}, {\"Header\": [\"전년매출\",\"전년매출\"],\"Type\": \"Int\",\"Name\": \"sPreYear\",\"Width\": \"120\",\"Align\": \"Right\",\"CanEdit\": 1,\"Format\": \"#,### 만원\"}, {\"Header\": [\"금년매출\",\"금년매출\"],\"Type\": \"Float\",\"Name\": \"sYear\",\"Width\": \"120\",\"Align\": \"Right\",\"CanEdit\": 1}, {\"Header\": [\"전년대비\\n 증감율\",\"전년대비\\n 증감율\"],\"Type\": \"Float\",\"Name\": \"sGrow\",\"Width\": \"100\",\"Align\": \"Right\",\"CanEdit\": 1,\"Format\": \"#,##0.##\\\\%\"}, {\"Header\": [\"내년기대\\n 증감율\",\"내년기대\\n 증감율\"],\"Type\": \"Float\",\"Name\": \"sPreGrow\",\"Width\": \"100\",\"Align\": \"Right\",\"CanEdit\": 1,\"Format\": \"#,##0.##%\"} ] } ``` ![헤더와 데이터 영역](/assets/imgs/styleguide_layout_base.png \"헤더와 데이터 영역\") * * * ## 좌우측 고정영역(Section) 좌우측 고정영역([Section col](/docs/props/col/section))은 시트에서 좌, 우측에 각각 고정적으로 컬럼을 출력하기 위해 사용되는 영역으로, 시트 생성 시 좌측 영역은 LeftCols에서 설정하며, 우측 영역은 RightCols를 통해 설정합니다. LeftCols가 설정되어 출력 되는 영역을 Left Section, Cols가 설정되어 출력 되는 영역을 Center Section, RightCols가 설정되어 출력 되는 영역을 Right Section이라고 구분합니다. ```javascript var OPT = { //틀고정 좌측 컬럼 설정 \"LeftCols\": [ {\"Header\": [\"기간\",\"기간\",\"기간\"],\"Type\": \"Text\",\"Name\": \"Year\",\"Width\": \"160\",\"Align\": \"Center\",\"CanEdit\": 0,\"RawSort\": 1}, ], //틀고정 우측 컬럼 설정 \"RightCols\": [ {\"Header\": [\"세대당 \\n 인구\",\"세대당 \\n 인구\",\"세대당 \\n 인구\"],\"Type\": \"Float\",\"Name\": \"PG\",\"Radio\": 1,\"Width\": \"100\",\"Align\": \"Right\",\"CanEdit\": 1,\"RawSort\": 1}, {\"Header\": [\"65세이상 \\n 고령자\",\"65세이상 \\n 고령자\",\"65세이상 \\n 고령자\"],\"Type\": \"Int\",\"Name\": \"Elder\",\"Radio\": 1,\"Width\": \"100\",\"Align\": \"Right\",\"CanEdit\": 1,\"RawSort\": 1} ] ... } ``` ![좌우측 고정영역](/assets/imgs/styleguide_layout_section.png \"좌우측 고정영역\") * * * ## 스크롤 영역 스크롤 영역은 시트의 스크롤이 출력 되는 영역으로 데이터의 길이가 시트의 높이보다 길 경우 세로 스크롤이 출력되며, 컬럼의 길이가 시트가 출력 되는 영역보다 길 경우 가로 스크롤이 출력됩니다. 세로 스크롤은 시트 가장 우측에 위치하며, 가로 스크롤은 시트 가장 하단에 위치합니다. ![스크롤 영역](/assets/imgs/styleguide_layout_scroll.png \"스크롤 영역\") * * * ## Space Space영역은 시트에서 빈 공간의 행을 표현하며, 시트 내의 열의 너비에 영향을 받지 않는 다양한 셀 객체를 넣을 수 있는 영역입니다. Solid 행이나 NoData 행이 여기에 해당합니다. 시트에서 데이터가 출력 되고 남은 영역도 Space 영역에 해당합니다. ![Space](/assets/imgs/styleguide_layout_space.png \"Space\") * * * ## 그 외 (Group헤더, Formula, InfoRow등) 그 외에 Group 기능을 사용할 때, 시트 상단에 Grouping된 컬럼의 헤더 Text가 출력되는 Group Header가 있습니다. ![Group헤더](/assets/imgs/styleguide_layout_group_header.png \"Group헤더\") [InfoRowConfig cfg](/docs/props/cfg/info-row-config)속성을 통해 시트 상단 혹은 하단에 별도의 행을 통해 조회된 데이터의 개수나 페이지 네비게이션을 설정할 수 있는 InfoRow 영역도 존재합니다. InfoRow를 상단에 출력 ![InfoRow 상단](/assets/imgs/styleguide_layout_inforow_top.png \"InfoRow 상단\") InfoRow를 하단에 출력 ![InfoRow 하단](/assets/imgs/styleguide_layout_inforow_bottom.png \"InfoRow 하단\") 그 외에도 컬럼에서 [FormulaRow col](/docs/props/col/formula-row)에서 설정한 계산 값이 출력 되는 Formula영역이 있습니다. ![FormulaRow](/assets/imgs/styleguide_layout_formula_row.png \"FormulaRow\")"
        },
        "url": "docs/styleGuide/layout.html"
      },
      {
        "cid": 965,
        "sid": "header-4",
        "name": "header",
        "label": "헤더 영역",
        "data": {
          "body": "## 헤더 셀 배경색 ### **.IBCellHeader** IBCellHeader는 Header영역의 셀의 배경색 및 border를 관리하는 클래스입니다. ```css .IBCellHeader { /* 셀 배경색 변경 */ background: #585858; } ``` 기본 테마의 헤더 ![기본 테마의 헤더](/assets/imgs/styleguide_header_style1.png \"기본 테마의 헤더\") 커스텀 배경색 적용 ![커스텀 배경색 적용](/assets/imgs/styleguide_header_style2.png \"커스텀 배경색 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#header?customCss=.IBCellHeader%7B%0A%20%20%2F*%20%EC%85%80%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background%3A%23585858%3B%0A%7D\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> * * * ## 헤더 border 설정 ### **.IBCellHeader** IBCellHeader는 Header영역의 셀의 배경색 및 border를 관리하는 클래스입니다. ```css .IBCellHeader { /* 하단 border 색상 변경 */ border-bottom: 1px solid #ff0000; /* 우측 border 색상 변경 */ border-right: 1px solid #50ffee; } ``` 기본 테마의 헤더 ![기본 테마의 헤더](/assets/imgs/styleguide_header_style1.png \"기본 테마의 헤더\") 커스텀 Border 색 적용 ![커스텀 Border 색 적용](/assets/imgs/styleguide_header_style3.png \"커스텀 Border 색 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#header?customCss=.IBCellHeader%7B%0A%20%20%2F*%20%ED%95%98%EB%8B%A8%20border%20%EC%83%89%EC%83%81%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20border-bottom%3A1px%20solid%20%23ff0000%3B%0A%20%20%2F*%20%EC%9A%B0%EC%B8%A1%20border%20%EC%83%89%EC%83%81%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20border-right%3A1px%20solid%20%2350ffee%3B%0A%7D\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a>"
        },
        "url": "docs/styleGuide/header.html"
      },
      {
        "cid": 964,
        "sid": "header-icon",
        "name": "header-icon",
        "label": "헤더 영역(아이콘)",
        "data": {
          "body": "## 필수 입력 아이콘 ### **.IBRequired** `.IBRequired`는 Header영역에서 필수 값을 항목의 아이콘을 관리하는 클래스입니다. ```css .IBRequired { /* 노란색 별 이미지를 빨간 색 별 이미지로 교체 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ny45NCA0Ny45NCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0Ny45NCA0Ny45NCI+PHBhdGggZD0iTTI2LjI4NSAyLjQ4Nmw1LjQwNyAxMC45NTZjLjM3Ni43NjIgMS4xMDMgMS4yOSAxLjk0NCAxLjQxMmwxMi4wOTEgMS43NTdjMi4xMTguMzA4IDIuOTYzIDIuOTEgMS40MzEgNC40MDNsLTguNzQ5IDguNTI4Yy0uNjA4LjU5My0uODg2IDEuNDQ4LS43NDIgMi4yODVsMi4wNjUgMTIuMDQyYy4zNjIgMi4xMDktMS44NTIgMy43MTctMy43NDYgMi43MjJsLTEwLjgxNC01LjY4NWMtLjc1Mi0uMzk1LTEuNjUxLS4zOTUtMi40MDMgMGwtMTAuODE0IDUuNjg1Yy0xLjg5NC45OTYtNC4xMDgtLjYxMy0zLjc0Ni0yLjcyMmwyLjA2NS0xMi4wNDJjLjE0NC0uODM3LS4xMzQtMS42OTItLjc0Mi0yLjI4NWwtOC43NDktOC41MjhjLTEuNTMyLTEuNDk0LS42ODctNC4wOTYgMS40MzEtNC40MDNsMTIuMDkxLTEuNzU3Yy44NDEtLjEyMiAxLjU2OC0uNjUgMS45NDQtMS40MTJsNS40MDctMTAuOTU2Yy45NDYtMS45MTkgMy42ODItMS45MTkgNC42MjkgMHoiIGZpbGw9IiNmZjAwMDAiLz48L3N2Zz4=) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 필수 값 아이콘 ![기본 테마의 필수 값 아이콘](/assets/imgs/styleguide_header_icon_req1.png \"기본 테마의 필수 값 아이콘\")|커스텀 필수 값 아이콘 ![커스텀 필수 값 아이콘 적용](/assets/imgs/styleguide_header_icon_req2.png \"커스텀 필수 값 아이콘 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#filternsort?customCss=%0A.IBRequired%20%7B%0A%20%20%2F*%20%EB%85%B8%EB%9E%80%EC%83%89%20%EB%B3%84%20%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC%20%EB%B9%A8%EA%B0%84%20%EC%83%89%20%EB%B3%84%20%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A1%9C%20%EA%B5%90%EC%B2%B4%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ny45NCA0Ny45NCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0Ny45NCA0Ny45NCI%2BPHBhdGggZD0iTTI2LjI4NSAyLjQ4Nmw1LjQwNyAxMC45NTZjLjM3Ni43NjIgMS4xMDMgMS4yOSAxLjk0NCAxLjQxMmwxMi4wOTEgMS43NTdjMi4xMTguMzA4IDIuOTYzIDIuOTEgMS40MzEgNC40MDNsLTguNzQ5IDguNTI4Yy0uNjA4LjU5My0uODg2IDEuNDQ4LS43NDIgMi4yODVsMi4wNjUgMTIuMDQyYy4zNjIgMi4xMDktMS44NTIgMy43MTctMy43NDYgMi43MjJsLTEwLjgxNC01LjY4NWMtLjc1Mi0uMzk1LTEuNjUxLS4zOTUtMi40MDMgMGwtMTAuODE0IDUuNjg1Yy0xLjg5NC45OTYtNC4xMDgtLjYxMy0zLjc0Ni0yLjcyMmwyLjA2NS0xMi4wNDJjLjE0NC0uODM3LS4xMzQtMS42OTItLjc0Mi0yLjI4NWwtOC43NDktOC41MjhjLTEuNTMyLTEuNDk0LS42ODctNC4wOTYgMS40MzEtNC40MDNsMTIuMDkxLTEuNzU3Yy44NDEtLjEyMiAxLjU2OC0uNjUgMS45NDQtMS40MTJsNS40MDctMTAuOTU2Yy45NDYtMS45MTkgMy42ODItMS45MTkgNC42MjkgMHoiIGZpbGw9IiNmZjAwMDAiLz48L3N2Zz4%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> * * * ## 정렬 아이콘 ### **.IBSort1Left, .IBSort1Right, .IBSort2Left, .IBSort2Right, .IBSort3Left, .IBSort3Right, .IBSort4Left, .IBSort4Right, .IBSort5Left, .IBSort5Right, .IBSort6Left, .IBSort6Right** 정렬 아이콘은 최대 3순위까지의 오름차순, 내림차순 아이콘을 제공합니다. `.IBSort1Left, .IBSort1Right`는 1순위 오름차순 정렬 아이콘을 관리하는 클래스입니다. `.IBSort2Left, .IBSort2Right`는 2순위 오름차순 정렬 아이콘을 관리하는 클래스입니다. `.IBSort3Left, .IBSort3Right`는 3순위 오름차순 정렬 아이콘을 관리하는 클래스입니다. `.IBSort4Left, .IBSort4Right`는 1순위 내림차순 정렬 아이콘을 관리하는 클래스입니다. `.IBSort5Left, .IBSort5Right`는 2순위 내림차순 정렬 아이콘을 관리하는 클래스입니다. `.IBSort6Left, .IBSort6Right`는 3순위 내림차순 정렬 아이콘을 관리하는 클래스입니다. ```css .IBSort1Left, .IBSort1Right { /* 1순위 오름차순 아이콘 변경 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNODIgOTcuNDAydjEyNS4xOTZNMjcuODc4IDE1MS41MjRsNTQuMTIyLTU0LjEyMiA1NC4xMjIgNTQuMTIyIi8+PC9nPjxnIG9wYWNpdHk9Ii4zIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTIzNy45OTkgMjIyLjU5OHYtMTI1LjE5Nk0yOTIuMTIyIDE2OC40NzZsLTU0LjEyMyA1NC4xMjItNTQuMTIxLTU0LjEyMiIvPjwvZz48L3N2Zz4=) } .IBSort4Left, .IBSort4Right { /* 1순위 내림차순 아이콘 변경 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjM4IDIyMi41OTh2LTEyNS4xOTZNMjkyLjEyMiAxNjguNDc2bC01NC4xMjIgNTQuMTIyLTU0LjEyMi01NC4xMjIiLz48L2c+PGcgb3BhY2l0eT0iLjMiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNODIuMDAxIDk3LjQwMnYxMjUuMTk2TTI3Ljg3OCAxNTEuNTI0bDU0LjEyMy01NC4xMjIgNTQuMTIxIDU0LjEyMiIvPjwvZz48L3N2Zz4=) } ``` |기본 테마|커스텀 적용 | |-----|-----| |기본 테마의 오름차순 아이콘 ![기본 테마의 오름차순 아이콘](/assets/imgs/styleguide_header_icon_sort_asc1.png \"기본 테마의 오름차순 아이콘\")|커스텀 1순위 오름차순 아이콘 ![커스텀 1순위 오름차순 아이콘 적용](/assets/imgs/styleguide_header_icon_sort_asc2.png \"커스텀 1순위 오름차순 아이콘 적용\")| |기본 테마의 내림차순 아이콘 ![기본 테마의 내림차순 아이콘](/assets/imgs/styleguide_header_icon_sort_desc1.png \"기본 테마의 내림차순 아이콘\")|커스텀 1순위 내림차순 아이콘 ![커스텀 1순위 내림차순 아이콘 적용](/assets/imgs/styleguide_header_icon_sort_desc2.png \"커스텀 1순위 내림차순 아이콘 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#filternsort?customCss=%0A.IBSort1Left%2C%20.IBSort1Right%20%7B%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNODIgOTcuNDAydjEyNS4xOTZNMjcuODc4IDE1MS41MjRsNTQuMTIyLTU0LjEyMiA1NC4xMjIgNTQuMTIyIi8%2BPC9nPjxnIG9wYWNpdHk9Ii4zIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSI%2BPHBhdGggZD0iTTIzNy45OTkgMjIyLjU5OHYtMTI1LjE5Nk0yOTIuMTIyIDE2OC40NzZsLTU0LjEyMyA1NC4xMjItNTQuMTIxLTU0LjEyMiIvPjwvZz48L3N2Zz4%3D)%0A%7D%0A.IBSort4Left%2C%20.IBSort4Right%20%7B%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjM4IDIyMi41OTh2LTEyNS4xOTZNMjkyLjEyMiAxNjguNDc2bC01NC4xMjIgNTQuMTIyLTU0LjEyMi01NC4xMjIiLz48L2c%2BPGcgb3BhY2l0eT0iLjMiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNODIuMDAxIDk3LjQwMnYxMjUuMTk2TTI3Ljg3OCAxNTEuNTI0bDU0LjEyMy01NC4xMjIgNTQuMTIxIDU0LjEyMiIvPjwvZz48L3N2Zz4%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ```css .IBSort2Left, .IBSort2Right { /* 2순위 오름차순 아이콘 변경 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZT0iIzlERTRGNCIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNODIgOTcuNDAydjEyNS4xOTZNMjcuODc4IDE1MS41MjRsNTQuMTIyLTU0LjEyMiA1NC4xMjIgNTQuMTIyIi8+PC9nPjxnIG9wYWNpdHk9Ii4zIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTIzNy45OTkgMjIyLjU5OHYtMTI1LjE5Nk0yOTIuMTIyIDE2OC40NzZsLTU0LjEyMyA1NC4xMjItNTQuMTIxLTU0LjEyMiIvPjwvZz48L3N2Zz4=) } .IBSort5Left, .IBSort5Right { /* 2순위 내림차순 아이콘 변경 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZT0iIzlERTRGNCIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjM3IDIyMi41OTh2LTEyNS4xOTZNMjkxLjEyMiAxNjguNDc3bC01NC4xMjIgNTQuMTIxLTU0LjEyMi01NC4xMjEiLz48L2c+PGcgb3BhY2l0eT0iLjMiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNODEuMDAxIDk3LjQwMnYxMjUuMTk2TTI2Ljg3OCAxNTEuNTI0bDU0LjEyMy01NC4xMjIgNTQuMTIxIDU0LjEyMiIvPjwvZz48L3N2Zz4=) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 오름차순 아이콘 ![기본 테마의 오름차순 아이콘](/assets/imgs/styleguide_header_icon_sort_asc1.png \"기본 테마의 오름차순 아이콘\")|커스텀 2순위 오름차순 아이콘 ![커스텀 2순위 오름차순 아이콘 적용](/assets/imgs/styleguide_header_icon_sort_asc3.png \"커스텀 2순위 오름차순 아이콘 적용\")| |기본 테마의 내림차순 아이콘 ![기본 테마의 내림차순 아이콘](/assets/imgs/styleguide_header_icon_sort_desc1.png \"기본 테마의 내림차순 아이콘\")|커스텀 2순위 내림차순 아이콘 ![커스텀 2순위 내림차순 아이콘 적용](/assets/imgs/styleguide_header_icon_sort_desc3.png \"커스텀 2순위 내림차순 아이콘 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#filternsort?customCss=%0A.IBSort2Left%2C%20.IBSort2Right%20%7B%0A%20%20%2F*%202%EC%88%9C%EC%9C%84%20%EC%98%A4%EB%A6%84%EC%B0%A8%EC%88%9C%20%EC%95%84%EC%9D%B4%EC%BD%98%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZT0iIzlERTRGNCIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNODIgOTcuNDAydjEyNS4xOTZNMjcuODc4IDE1MS41MjRsNTQuMTIyLTU0LjEyMiA1NC4xMjIgNTQuMTIyIi8%2BPC9nPjxnIG9wYWNpdHk9Ii4zIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSI%2BPHBhdGggZD0iTTIzNy45OTkgMjIyLjU5OHYtMTI1LjE5Nk0yOTIuMTIyIDE2OC40NzZsLTU0LjEyMyA1NC4xMjItNTQuMTIxLTU0LjEyMiIvPjwvZz48L3N2Zz4%3D)%0A%7D%0A.IBSort5Left%2C%20.IBSort5Right%20%7B%0A%20%20%2F*%202%EC%88%9C%EC%9C%84%20%EB%82%B4%EB%A6%BC%EC%B0%A8%EC%88%9C%20%EC%95%84%EC%9D%B4%EC%BD%98%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZT0iIzlERTRGNCIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjM3IDIyMi41OTh2LTEyNS4xOTZNMjkxLjEyMiAxNjguNDc3bC01NC4xMjIgNTQuMTIxLTU0LjEyMi01NC4xMjEiLz48L2c%2BPGcgb3BhY2l0eT0iLjMiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNODEuMDAxIDk3LjQwMnYxMjUuMTk2TTI2Ljg3OCAxNTEuNTI0bDU0LjEyMy01NC4xMjIgNTQuMTIxIDU0LjEyMiIvPjwvZz48L3N2Zz4%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ```css .IBSort3Left, .IBSort3Right { /* 3순위 오름차순 아이콘 변경 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZS13aWR0aD0iMjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSI+PGcgc3Ryb2tlPSIjRkNBOTkyIj48cGF0aCBkPSJNODIgOTcuNDAydjEyNS4xOTZNMjcuODc4IDE1MS41MjRsNTQuMTIyLTU0LjEyMiA1NC4xMjIgNTQuMTIyIi8+PC9nPjxnIG9wYWNpdHk9Ii4zIiBzdHJva2U9IiNmZmYiPjxwYXRoIGQ9Ik0yMzcuOTk5IDIyMi41OTh2LTEyNS4xOTZNMjkyLjEyMiAxNjguNDc2bC01NC4xMjMgNTQuMTIyLTU0LjEyMS01NC4xMjIiLz48L2c+PC9nPjwvc3ZnPg==) } .IBSort6Left, .IBSort6Right { /* 3순위 내림차순 아이콘 변경 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZS13aWR0aD0iMjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSI+PGcgc3Ryb2tlPSIjRkNBOTkyIj48cGF0aCBkPSJNMjM4IDIyMi41OTh2LTEyNS4xOTZNMjkyLjEyMiAxNjguNDc2bC01NC4xMjIgNTQuMTIyLTU0LjEyMi01NC4xMjIiLz48L2c+PGcgb3BhY2l0eT0iLjMiIHN0cm9rZT0iI2ZmZiI+PHBhdGggZD0iTTgyLjAwMSA5Ny40MDJ2MTI1LjE5Nk0yNy44NzggMTUxLjUyNGw1NC4xMjMtNTQuMTIyIDU0LjEyMSA1NC4xMjIiLz48L2c+PC9nPjwvc3ZnPg==) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 오름차순 아이콘 ![기본 테마의 오름차순 아이콘](/assets/imgs/styleguide_header_icon_sort_asc1.png \"기본 테마의 오름차순 아이콘\")|커스텀 3순위 오름차순 아이콘 ![커스텀 3순위 오름차순 아이콘 적용](/assets/imgs/styleguide_header_icon_sort_asc4.png \"커스텀 3순위 오름차순 아이콘 적용\")| |기본 테마의 내림차순 아이콘 ![기본 테마의 내림차순 아이콘](/assets/imgs/styleguide_header_icon_sort_desc1.png \"기본 테마의 내림차순 아이콘\")|커스텀 3순위 내림차순 아이콘 ![커스텀 3순위 내림차순 아이콘 적용](/assets/imgs/styleguide_header_icon_sort_desc4.png \"커스텀 3순위 내림차순 아이콘 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#filternsort?customCss=%0A.IBSort3Left%2C%20.IBSort3Right%20%7B%0A%20%20%2F*%203%EC%88%9C%EC%9C%84%20%EC%98%A4%EB%A6%84%EC%B0%A8%EC%88%9C%20%EC%95%84%EC%9D%B4%EC%BD%98%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZS13aWR0aD0iMjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSI%2BPGcgc3Ryb2tlPSIjRkNBOTkyIj48cGF0aCBkPSJNODIgOTcuNDAydjEyNS4xOTZNMjcuODc4IDE1MS41MjRsNTQuMTIyLTU0LjEyMiA1NC4xMjIgNTQuMTIyIi8%2BPC9nPjxnIG9wYWNpdHk9Ii4zIiBzdHJva2U9IiNmZmYiPjxwYXRoIGQ9Ik0yMzcuOTk5IDIyMi41OTh2LTEyNS4xOTZNMjkyLjEyMiAxNjguNDc2bC01NC4xMjMgNTQuMTIyLTU0LjEyMS01NC4xMjIiLz48L2c%2BPC9nPjwvc3ZnPg%3D%3D)%0A%7D%0A.IBSort6Left%2C%20.IBSort6Right%20%7B%0A%20%20%2F*%203%EC%88%9C%EC%9C%84%20%EB%82%B4%EB%A6%BC%EC%B0%A8%EC%88%9C%20%EC%95%84%EC%9D%B4%EC%BD%98%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgdmlld0JveD0iMCAwIDMyMCAzMjAiPjxnIHN0cm9rZS13aWR0aD0iMjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSI%2BPGcgc3Ryb2tlPSIjRkNBOTkyIj48cGF0aCBkPSJNMjM4IDIyMi41OTh2LTEyNS4xOTZNMjkyLjEyMiAxNjguNDc2bC01NC4xMjIgNTQuMTIyLTU0LjEyMi01NC4xMjIiLz48L2c%2BPGcgb3BhY2l0eT0iLjMiIHN0cm9rZT0iI2ZmZiI%2BPHBhdGggZD0iTTgyLjAwMSA5Ny40MDJ2MTI1LjE5Nk0yNy44NzggMTUxLjUyNGw1NC4xMjMtNTQuMTIyIDU0LjEyMSA1NC4xMjIiLz48L2c%2BPC9nPjwvc3ZnPg%3D%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> * * * ## 필터 다이얼로그 아이콘 ### **.IBFilterDialog0Right** `.IBFilterDialog0Right`는 필터 다이얼로그가 적용 전 상태의 아이콘을 관리하는 클래스입니다. ### **.IBFilterDialog1Right** `.IBFilterDialog1Right`는 필터 다이얼로그가 적용 된 상태의 아이콘을 관리하는 클래스입니다. ```css .IBFilterDialog0Right { /* 필터 다이얼로그 적용 전 상태 아이콘 변경 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwMDAwIj48ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCI+PC9nPjxnIGlkPSJTVkdSZXBvX3RyYWNlckNhcnJpZXIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9nPjxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTE5IDVINUwxMiAxMy40TDE5IDVaIiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+IDxwYXRoIGQ9Ik0xMiAxMy40TDE5IDVINUwxMiAxMy40Wk0xMiAxMy40VjE5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+IDwvZz48L3N2Zz4=) } .IBFilterDialog1Right{ /* 필터 다이얼로그 적용 된 상태 아이콘 변경 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwMDAwIj48ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCI+PC9nPjxnIGlkPSJTVkdSZXBvX3RyYWNlckNhcnJpZXIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9nPjxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTE5IDVINUwxMiAxMy40TDE5IDVaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGQ9Ik0xMiAxMy40TDE5IDVINUwxMiAxMy40Wk0xMiAxMy40VjE5IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+IDwvZz48L3N2Zz4=) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 필터 다이얼로그 아이콘 ![기본 테마의 필터 다이얼로그 아이콘](/assets/imgs/styleguide_header_icon_filter_dialog_1.png \"기본 테마의 필터 다이얼로그 아이콘\")|커스텀 필터 다이얼로그 아이콘 ![커스텀 필터 다이얼로그 아이콘 적용](/assets/imgs/styleguide_header_icon_filter_dialog_2.png \"커스텀 필터 다이얼로그 아이콘 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#filternsort?customCss=%0A.IBFilterDialog0Right%20%7B%0A%20%20%2F*%20%ED%95%84%ED%84%B0%20%EB%8B%A4%EC%9D%B4%EC%96%BC%EB%A1%9C%EA%B7%B8%20%EC%A0%81%EC%9A%A9%20%EC%A0%84%20%EC%83%81%ED%83%9C%20%EC%95%84%EC%9D%B4%EC%BD%98%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwMDAwIj48ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCI%2BPC9nPjxnIGlkPSJTVkdSZXBvX3RyYWNlckNhcnJpZXIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI%2BPC9nPjxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTE5IDVINUwxMiAxMy40TDE5IDVaIiBmaWxsPSIjZmZmZmZmIj48L3BhdGg%2BIDxwYXRoIGQ9Ik0xMiAxMy40TDE5IDVINUwxMiAxMy40Wk0xMiAxMy40VjE5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg%2BIDwvZz48L3N2Zz4%3D)%0A%7D%0A.IBFilterDialog1Right%7B%0A%20%20%2F*%20%ED%95%84%ED%84%B0%20%EB%8B%A4%EC%9D%B4%EC%96%BC%EB%A1%9C%EA%B7%B8%20%EC%A0%81%EC%9A%A9%20%EB%90%9C%20%EC%83%81%ED%83%9C%20%EC%95%84%EC%9D%B4%EC%BD%98%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwMDAwIj48ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCI%2BPC9nPjxnIGlkPSJTVkdSZXBvX3RyYWNlckNhcnJpZXIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI%2BPC9nPjxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTE5IDVINUwxMiAxMy40TDE5IDVaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg%2BIDxwYXRoIGQ9Ik0xMiAxMy40TDE5IDVINUwxMiAxMy40Wk0xMiAxMy40VjE5IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg%2BIDwvZz48L3N2Zz4%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> * * * ## 문자열 정렬 <mark>IBSheet에서 내에서 문자열 정렬 기능을 사용하실 경우, 별도의 css를 이용하여 정렬하시지 마시고, 정렬 속성 (`Align`, `VAlign`)을 통해 정렬하시기를 권장 드립니다.</mark> 시트 생성 시점에서 헤더 행에서의 정렬 기능을 사용하기 위해서는 string형태로 값을 지정하던 사항을 object형태로 설정하고, 기존의 Text를 Value속성으로 설정하신 후, object 내에서 속성을 설정하셔서 정렬을 사용햐셔야 합니다. 시트가 생성이 완료된 이후에 헤더 행의 정렬 기능을 사용하시기 원하시는 경우에는 [setAttribute func](/docs/funcs/core/set-attribute)를 이용하시면 됩니다. 왼쪽, 가운데, 오른쪽의 가로 정렬은 Align속성 [Align row](/docs/props/row/align), [Align col](/docs/props/col/align), [Align cell](/docs/props/cell/align)을 통해 이루어집니다. 해당 속성을 통해 해당 컬럼에 정렬 class가 적용됩니다. ### **.IBAlignLeft** `.IBAlignLeft`은 왼쪽 정렬 속성이 설정된 영역에 적용되는 클래스입니다. ### **.IBAlignCenter** `.IBAlignCenter`은 가운데 정렬 속성이 설정된 영역에 적용되는 클래스입니다. ### **.IBAlignRight** `.IBAlignRight`은 오른쪽 정렬 속성이 설정된 영역에 적용되는 클래스입니다. ```javascript var OPT = { Def: { Header: { Height: 50 } } Cols: [ {\"Header\": {\"Value\": \"Align Left\", \"Align\": \"Left\"},\"Type\": \"Text\",\"Name\": \"TextData1\",\"Width\": 120,\"CanEdit\": 1}, {\"Header\": {\"Value\": \"Align Center\", \"Align\": \"Center\"},\"Type\": \"Text\",\"Name\": \"TextData2\",\"Width\": 120,\"CanEdit\": 1}, {\"Header\": {\"Value\": \"Align Right\", \"Align\": \"Center\"},\"Type\": \"Text\",\"Name\": \"TextData3\",\"Width\": 120,\"CanEdit\": 1}, ] } ``` 가로 정렬 ![가로 정렬](/assets/imgs/styleguide_header_icon_align.png \"가로 정렬\") 상단, 중단, 단의 세로 정렬은 VAlign속성 [VAlign row](/docs/props/row/v-align), [VAlign col](/docs/props/col/v-align), [VAlign cell](/docs/props/cell/v-align)을 통해 이루어집니다. 해당 속성을 통해 해당 컬럼에 정렬 class가 적용됩니다. ### **.IBVAlignTop** `.IBVAlignTop`은 상단 정렬 속성이 설정된 영역에 적용되는 클래스입니다. ### **.IBVAlignMiddle** `.IBVAlignMiddle`은 중단 정렬 속성이 설정된 영역에 적용되는 클래스입니다. ### **.IBVAlignBottom** `.IBVAlignBottom`은 하단 정렬 속성이 설정된 영역에 적용되는 클래스입니다. ```javascript var OPT = { Def: { Header: { Height: 50 } } Cols: [ {\"Header\": {\"Value\": \"VAlign Top\", \"VAlign\": \"Top\"},\"Type\": \"Text\",\"Name\": \"TextData1\",\"Width\": 120,\"CanEdit\": 1}, {\"Header\": {\"Value\": \"VAlign Middle\", \"VAlign\": \"Middle\"},\"Type\": \"Text\",\"Name\": \"TextData2\",\"Width\": 120,\"CanEdit\": 1}, {\"Header\": {\"Value\": \"VAlign Bottom\", \"VAlign\": \"Bottom\"},\"Type\": \"Text\",\"Name\": \"TextData3\",\"Width\": 120,\"CanEdit\": 1}, ] } ``` 세로 정렬 ![세로 정렬](/assets/imgs/styleguide_header_icon_valign.png \"세로 정렬\")"
        },
        "url": "docs/styleGuide/header-icon.html"
      },
      {
        "cid": 962,
        "sid": "data",
        "name": "data",
        "label": "데이터(본문 영역)",
        "data": {
          "body": "## 짝/홀수 행 배경색 짝수 혹은 홀수 행일 때 강조 배경색은 [Alternate cfg](/docs/props/cfg/alternate)의 설정에 따라 적용됩니다. ### **.IBColorDefault** `.IBColorDefault`는 Alternate 대상이 아닌 일반 데이터행의 배경색을 관리하는 클래스입니다. ### **.IBColorAlternate** `.IBColorAlternate`는 Alternate 대상인 데이터행의 배경색을 관리하는 클래스입니다. <mark>`.IBColorDefault`와 `.IBColorAlternate` 클래스는 시트 생성 시점에 읽어서 적용되기 때문에 생성 이후 css를 변경하더라도 적용되지 않습니다.</mark> [Alternate cfg](/docs/props/cfg/alternate)는 `.IBColorAlternate`외에 [AlternateColor row](/docs/props/row/alternate-color)와 외부 클래스를 이용하는 [AlternateClass row](/docs/props/row/alternate-class)를 통해 배경색을 설정하실 수 있습니다. ```javascript var OPT = { Def: { Row: { AlternateColor: 'skyblue' } } } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 Alternate ![기본 테마의 Alternate](/assets/imgs/styleguide_data_alternate_default.png \"기본 테마의 Alternate\")|커스텀 Alternate ![커스텀 Alternate 적용](/assets/imgs/styleguide_data_alternate_custom.png \"커스텀 Alternate 적용\")| * * * ## 행 높이 설정 행의 높이가 css를 통해 수정되었을 때에는 정상적으로 스크롤 동작이 이뤄지지 않을 수 있습니다. <mark>행 높이 변경이 필요한 경우, css가 아니라 속성을 통해서 설정을 진행해주시기 바랍니다.</mark> 먼저, 행의 최소 높이는 [Size cfg](/docs/props/cfg/size)에 맞춰 설정해주시기 바랍니다. 그 외의 행 높이 설정은 [Height row](/docs/props/row/height)를 통해 설정하셔야 합니다. ```javascript var OPT = { Def: { Row: { Height: 100 } } } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 행의 기본 높이 ![기본 테마의 Alternate](/assets/imgs/styleguide_data_alternate_default.png \"기본 테마의 Alternate\")|행의 높이 100px ![행의 높이 100px 적용](/assets/imgs/styleguide_data_row_height.png \"행의 높이 100px 적용\")| * * * ## 셀 여백 설정 ### **.IBType** `.IBType`은 시트의 여백을 관리하는 클래스입니다. ```css .IBType { /* 좌우 여백 제거 */ padding: 6px 0px 5px 0px; } ``` 기본 테마의 여백 ![기본 테마의 여백](/assets/imgs/styleguide_data_wrap_default.png \"기본 테마의 여백\") 셀의 좌우 여백 제거 ![셀의 좌우 여백 제거 적용](/assets/imgs/styleguide_data_wrap_lr0.png \"셀의 좌우 여백 제거 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBType%20%7B%0A%20%20%2F*%20%EC%A2%8C%EC%9A%B0%20%EC%97%AC%EB%B0%B1%20%EC%A0%9C%EA%B1%B0%20*%2F%0A%20%20padding%3A%206px%200px%205px%200px%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> * * * ## 셀 데이터 정렬 <mark>IBSheet에서 내에서 문자열 정렬 기능을 사용하실 경우, 별도의 css를 이용하여 정렬하시지 마시고, 정렬 속성 (`Align`, `VAlign`)을 통해 정렬하시기를 권장 드립니다.</mark> 왼쪽, 가운데, 오른쪽의 가로 정렬은 Align속성 [Align row](/docs/props/row/align), [Align col](/docs/props/col/align), [Align cell](/docs/props/cell/align)을 통해 이루어집니다. 해당 속성을 통해 해당 컬럼에 정렬 class가 적용됩니다. ### **.IBAlignLeft** `.IBAlignLeft`은 왼쪽 정렬 속성이 설정된 영역에 적용되는 클래스입니다. ### **.IBAlignCenter** `.IBAlignCenter`은 가운데 정렬 속성이 설정된 영역에 적용되는 클래스입니다. ### **.IBAlignRight** `.IBAlignRight`은 오른쪽 정렬 속성이 설정된 영역에 적용되는 클래스입니다. ```javascript var OPT = { Def: { Row: { Height: 50 } } Cols: [ {\"Header\": \"Align Left\",\"Type\": \"Text\",\"Name\": \"TextData1\",\"Width\": 120,\"Align\": \"Left\",\"CanEdit\": 1}, {\"Header\": \"Align Center\",\"Type\": \"Text\",\"Name\": \"TextData2\",\"Width\": 120,\"Align\": \"Center\",\"CanEdit\": 1}, {\"Header\": \"Align Right\",\"Type\": \"Text\",\"Name\": \"TextData3\",\"Width\": 120,\"Align\": \"Right\",\"CanEdit\": 1}, ] } ``` 가로 정렬 ![가로 정렬](/assets/imgs/styleguide_data_align.png \"가로 정렬\") 상단, 중단, 단의 세로 정렬은 VAlign속성 [VAlign row](/docs/props/row/v-align), [VAlign col](/docs/props/col/v-align), [VAlign cell](/docs/props/cell/v-align)을 통해 이루어집니다. 해당 속성을 통해 해당 컬럼에 정렬 class가 적용됩니다. ### **.IBVAlignTop** `.IBVAlignTop`은 상단 정렬 속성이 설정된 영역에 적용되는 클래스입니다. ### **.IBVAlignMiddle** `.IBVAlignMiddle`은 중단 정렬 속성이 설정된 영역에 적용되는 클래스입니다. ### **.IBVAlignBottom** `.IBVAlignBottom`은 하단 정렬 속성이 설정된 영역에 적용되는 클래스입니다. ```javascript var OPT = { Def: { Row: { Height: 50 } } Cols: [ {\"Header\": \"VAlign Top\",\"Type\": \"Text\",\"Name\": \"TextData1\",\"Width\": 120,\"Align\": \"Center\",\"CanEdit\": 1, \"VAlign\": 'Top'}, {\"Header\": \"VAlign Middle\",\"Type\": \"Text\",\"Name\": \"TextData2\",\"Width\": 120,\"Align\": \"Center\",\"CanEdit\": 1, \"VAlign\": 'Middle'}, {\"Header\": \"VAlign Bottom\",\"Type\": \"Text\",\"Name\": \"TextData3\",\"Width\": 120,\"Align\": \"Center\",\"CanEdit\": 1, \"VAlign\": 'Bottom'}, ] } ``` 세로 정렬 ![세로 정렬](/assets/imgs/styleguide_data_valign.png \"세로 정렬\") * * * ## NoData행 (조회된 데이터가 없을 때 사용) [NoDataMessage cfg](/docs/props/cfg/no-data-message) 설정을 통해, **생성 후 혹은 조회 후 데이터가 없을 경우 데이터 영역에 '조회된 데이터가 없습니다.' 문구를 출력**합니다. [NoDataMessage cfg](/docs/props/cfg/no-data-message)가 설정되어 있을 때, [NoDataMiddle cfg](/docs/props/cfg/no-data-middle)를 설정하여 해당 **메시지의 위치를 데이터 영역의 중단 영역으로 위치**하도록 조정할 수 있습니다. ### **.IBNoDataRow** `.IBNoDataRow`는 조회된 데이터가 없는 경우, 데이터가 없음을 표시하는 NoData 행을 관리하는 클래스입니다. ```css .IBNoDataRow { /* NoData행의 배경색을 연한 파랑색으로 */ background-color: #c1edff; /* 출력 되는 문구의 글씨 굵기를 굵게 */ font-weight: bold; } ``` 기본 테마에서 NoDataMessage: 3 적용 ![기본 테마에서 NoDataMessage: 3 적용](/assets/imgs/styleguide_data_nodata_1.png \"기본 테마에서 NoDataMessage: 3 적용\") 기본 테마에서 NoDataMessage: 3, NoDataMiddle: true 적용 ![기본 테마에서 NoDataMessage: 3, NoDataMiddle: true 적용](/assets/imgs/styleguide_data_nodata_2.png \"기본 테마에서 NoDataMessage: 3, NoDataMiddle: true 적용\") 커스텀 배경색 및 글자 굵기 적용 ![커스텀 배경색 및 글자 굵기 적용](/assets/imgs/styleguide_data_nodata_3.png \"커스텀 배경색 및 글자 굵기 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#header?customCss=%0A.IBNoDataRow%20%7B%0A%20%20%2F*%20NoData%ED%96%89%EC%9D%98%20%EB%B0%B0%EA%B2%BD%EC%83%89%EC%9D%84%20%EC%97%B0%ED%95%9C%20%ED%8C%8C%EB%9E%91%EC%83%89%EC%9C%BC%EB%A1%9C%20*%2F%0A%20%20background-color%3A%20%23c1edff%3B%0A%20%20%2F*%20%EC%B6%9C%EB%A0%A5%20%EB%90%98%EB%8A%94%20%EB%AC%B8%EA%B5%AC%EC%9D%98%20%EA%B8%80%EC%94%A8%20%EA%B5%B5%EA%B8%B0%EB%A5%BC%20%EA%B5%B5%EA%B2%8C%20*%2F%0A%20%20font-weight%3A%20bold%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> * * * ## 편집 모드 스타일 ### **.IBEditInput, .IBEditTextarea** `.IBEditInput, .IBEditTextarea`는 별도의 편집 기능을 가지는 Enum, Radio, Bool Type 외에 편집 모드 활성화 시 해당 셀의 데이터를 수정 가능한 Input 혹은 TextArea를 관리하는 클래스입니다. ```css .IBEditInput, .IBEditTextarea { /* 글자색 변경, 기본 css에서 !important;로 관리되고 있어 수정사항 적용 시 동일하게 !important; 적용 필요 */ color: yellow !important; /* 배경색 변경, 기본 css에서 !important;로 관리되고 있어 수정사항 적용 시 동일하게 !important; 적용 필요 */ background-color: green !important; } ``` 기본 테마의 편집 모드 활성화 시 ![기본 테마의 편집 모드 활성화](/assets/imgs/styleguide_data_editmode_default.png \"기본 테마의 편집 모드 활성화\") 커스텀 배경색 및 글자색 적용 ![커스텀 배경색 및 글자색 적용](/assets/imgs/styleguide_data_editmode_custom.png \"커스텀 배경색 및 글자색 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#focus?customCss=%0A.IBEditInput%2C%20.IBEditTExtarea%20%7B%0A%20%20%2F*%20%EA%B8%80%EC%9E%90%EC%83%89%20%EB%B3%80%EA%B2%BD%2C%20%EA%B8%B0%EB%B3%B8%20css%EC%97%90%EC%84%9C%20!important%3B%EB%A1%9C%20%EA%B4%80%EB%A6%AC%EB%90%98%EA%B3%A0%20%EC%9E%88%EC%96%B4%20%EC%88%98%EC%A0%95%EC%82%AC%ED%95%AD%20%EC%A0%81%EC%9A%A9%20%EC%8B%9C%20%EB%8F%99%EC%9D%BC%ED%95%98%EA%B2%8C%20!important%3B%20%EC%A0%81%EC%9A%A9%20%ED%95%84%EC%9A%94%20*%2F%0A%20%20color%3A%20yellow%20!important%3B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%2C%20%EA%B8%B0%EB%B3%B8%20css%EC%97%90%EC%84%9C%20!important%3B%EB%A1%9C%20%EA%B4%80%EB%A6%AC%EB%90%98%EA%B3%A0%20%EC%9E%88%EC%96%B4%20%EC%88%98%EC%A0%95%EC%82%AC%ED%95%AD%20%EC%A0%81%EC%9A%A9%20%EC%8B%9C%20%EB%8F%99%EC%9D%BC%ED%95%98%EA%B2%8C%20!important%3B%20%EC%A0%81%EC%9A%A9%20%ED%95%84%EC%9A%94%20*%2F%0A%20%20background-color%3A%20green%20!important%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBEditCellBorder** `.IBEditCellBorder`는 편집 모드가 활성화 되었을 때, 해당 영역의 border를 관리하는 클래스입니다. ```css .IBEditCellBorder { /* border 색상 변경 */ border-color: red; } ``` 기본 테마의 편집 모드 활성화 시 ![기본 테마의 편집 모드 활성화](/assets/imgs/styleguide_data_editmode_default.png \"기본 테마의 편집 모드 활성화\") 커스텀 Border 색 적용 ![커스텀 Border 색 적용](/assets/imgs/styleguide_data_editmode_border.png \"커스텀 Border 색 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#focus?customCss=%0A.IBEditCellBorder%20%7B%0A%20%20%2F*%20border%20%EC%83%89%EC%83%81%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20border-color%3A%20red%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a>"
        },
        "url": "docs/styleGuide/data.html"
      },
      {
        "cid": 960,
        "sid": "col-type",
        "name": "col-type",
        "label": "컬럼 유형에 따른 class 적용",
        "data": {
          "body": "## Bool/Radio 아이콘 Bool type에서는 [BoolIcon col](/docs/props/col/bool-icon)속성을 통해 **체크/언체크 checkbox 아이콘을 다른 이미지나 Html 객체로 설정**하실 수 있습니다. Radio type에서는 [RadioIcon col](/docs/props/col/radio-icon)속성을 통해 **체크/언체크 radio 아이콘을 다른 이미지나 Html 객체로 설정**하실 수 있습니다. ### **.IBBool0, Bool0RO** `.IBBool0, Bool0RO`은 checkbox형태에서 체크가 되지 않은 상태일 때 사용되는 이미지를 관리하는 클래스입니다. ```css .IBBool0, IBBool0RO { /* 이미지 크기 조정 */ background-size: 18px 18px; /* 이미지 교체 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgZmlsbD0iIzAwMDAwMCI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIEdlbmVyYXRvcjogU1ZHIFJlcG8gTWl4ZXIgVG9vbHMgLS0+IDx0aXRsZT5pY19mbHVlbnRfY2hlY2tib3hfdW5jaGVja2VkXzI0X3JlZ3VsYXI8L3RpdGxlPiA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gPGcgaWQ9IvCflI0tUHJvZHVjdC1JY29ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+IDxnIGlkPSJpY19mbHVlbnRfY2hlY2tib3hfdW5jaGVja2VkXzI0X3JlZ3VsYXIiIGZpbGw9IiNmZjAwMDAiIGZpbGwtcnVsZT0ibm9uemVybyI+IDxwYXRoIGQ9Ik01Ljc1LDMgTDE4LjI1LDMgQzE5Ljc2ODc4MzEsMyAyMSw0LjIzMTIxNjk0IDIxLDUuNzUgTDIxLDE4LjI1IEMyMSwxOS43Njg3ODMxIDE5Ljc2ODc4MzEsMjEgMTguMjUsMjEgTDUuNzUsMjEgQzQuMjMxMjE2OTQsMjEgMywxOS43Njg3ODMxIDMsMTguMjUgTDMsNS43NSBDMyw0LjIzMTIxNjk0IDQuMjMxMjE2OTQsMyA1Ljc1LDMgWiBNNS43NSw0LjUgQzUuMDU5NjQ0MDYsNC41IDQuNSw1LjA1OTY0NDA2IDQuNSw1Ljc1IEw0LjUsMTguMjUgQzQuNSwxOC45NDAzNTU5IDUuMDU5NjQ0MDYsMTkuNSA1Ljc1LDE5LjUgTDE4LjI1LDE5LjUgQzE4Ljk0MDM1NTksMTkuNSAxOS41LDE4Ljk0MDM1NTkgMTkuNSwxOC4yNSBMMTkuNSw1Ljc1IEMxOS41LDUuMDU5NjQ0MDYgMTguOTQwMzU1OSw0LjUgMTguMjUsNC41IEw1Ljc1LDQuNSBaIiBpZD0i8J+OqENvbG9yIj4gPC9wYXRoPiA8L2c+IDwvZz4gPC9nPjwvc3ZnPg==) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 언체크 checkbox ![기본 테마의 언체크 checkbox](/assets/imgs/styleguide_bool0_default.png \"기본 테마의 언체크 checkbox\")|커스텀 언체크 checkbox ![커스텀 언체크 checkbox 적용](/assets/imgs/styleguide_bool0_custom.png \"커스텀 언체크 checkbox 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBBool0%2C%20IBBool0RO%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%ED%81%AC%EA%B8%B0%20%EC%A1%B0%EC%A0%95%20*%2F%0A%20%20background-size%3A%2018px%2018px%3B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EA%B5%90%EC%B2%B4%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgZmlsbD0iIzAwMDAwMCI%2BPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI%2BIDwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIEdlbmVyYXRvcjogU1ZHIFJlcG8gTWl4ZXIgVG9vbHMgLS0%2BIDx0aXRsZT5pY19mbHVlbnRfY2hlY2tib3hfdW5jaGVja2VkXzI0X3JlZ3VsYXI8L3RpdGxlPiA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gPGcgaWQ9IvCflI0tUHJvZHVjdC1JY29ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI%2BIDxnIGlkPSJpY19mbHVlbnRfY2hlY2tib3hfdW5jaGVja2VkXzI0X3JlZ3VsYXIiIGZpbGw9IiNmZjAwMDAiIGZpbGwtcnVsZT0ibm9uemVybyI%2BIDxwYXRoIGQ9Ik01Ljc1LDMgTDE4LjI1LDMgQzE5Ljc2ODc4MzEsMyAyMSw0LjIzMTIxNjk0IDIxLDUuNzUgTDIxLDE4LjI1IEMyMSwxOS43Njg3ODMxIDE5Ljc2ODc4MzEsMjEgMTguMjUsMjEgTDUuNzUsMjEgQzQuMjMxMjE2OTQsMjEgMywxOS43Njg3ODMxIDMsMTguMjUgTDMsNS43NSBDMyw0LjIzMTIxNjk0IDQuMjMxMjE2OTQsMyA1Ljc1LDMgWiBNNS43NSw0LjUgQzUuMDU5NjQ0MDYsNC41IDQuNSw1LjA1OTY0NDA2IDQuNSw1Ljc1IEw0LjUsMTguMjUgQzQuNSwxOC45NDAzNTU5IDUuMDU5NjQ0MDYsMTkuNSA1Ljc1LDE5LjUgTDE4LjI1LDE5LjUgQzE4Ljk0MDM1NTksMTkuNSAxOS41LDE4Ljk0MDM1NTkgMTkuNSwxOC4yNSBMMTkuNSw1Ljc1IEMxOS41LDUuMDU5NjQ0MDYgMTguOTQwMzU1OSw0LjUgMTguMjUsNC41IEw1Ljc1LDQuNSBaIiBpZD0i8J%2BOqENvbG9yIj4gPC9wYXRoPiA8L2c%2BIDwvZz4gPC9nPjwvc3ZnPg%3D%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBBool1, Bool1RO** `.IBBool1, Bool1RO`은 checkbox형태에서 체크가 된 상태일 때 사용되는 형태의 이미지를 관리하는 클래스입니다. ```css .IBBool1, IBBool1RO { /* 이미지 크기 조정 */ background-size: 18px 18px; /* 이미지 교 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjEgMjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzAwMDAwMCI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjZmYwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMykiPiA8cGF0aCBkPSJtMi41LjVoMTBjMS4xMDQ1Njk1IDAgMiAuODk1NDMwNSAyIDJ2MTBjMCAxLjEwNDU2OTUtLjg5NTQzMDUgMi0yIDJoLTEwYy0xLjEwNDU2OTUgMC0yLS44OTU0MzA1LTItMnYtMTBjMC0xLjEwNDU2OTUuODk1NDMwNS0yIDItMnoiPjwvcGF0aD4gPHBhdGggZD0ibTQuNSA3LjUgMiAyIDQtNCI+PC9wYXRoPiA8L2c+IDwvZz48L3N2Zz4=); } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 체크 checkbox ![기본 테마의 체크 checkbox](/assets/imgs/styleguide_bool1_default.png \"기본 테마의 체크 checkbox\")|커스텀 체크 checkbox ![커스텀 체크 checkbox 적용](/assets/imgs/styleguide_bool1_custom.png \"커스텀 체크 checkbox 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBBool1%2C%20IBBool1RO%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%ED%81%AC%EA%B8%B0%20%EC%A1%B0%EC%A0%95%20*%2F%0A%20%20background-size%3A%2018px%2018px%3B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EA%B5%90%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjEgMjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzAwMDAwMCI%2BPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI%2BIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjZmYwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMykiPiA8cGF0aCBkPSJtMi41LjVoMTBjMS4xMDQ1Njk1IDAgMiAuODk1NDMwNSAyIDJ2MTBjMCAxLjEwNDU2OTUtLjg5NTQzMDUgMi0yIDJoLTEwYy0xLjEwNDU2OTUgMC0yLS44OTU0MzA1LTItMnYtMTBjMC0xLjEwNDU2OTUuODk1NDMwNS0yIDItMnoiPjwvcGF0aD4gPHBhdGggZD0ibTQuNSA3LjUgMiAyIDQtNCI%2BPC9wYXRoPiA8L2c%2BIDwvZz48L3N2Zz4%3D)%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBBool2, IBBool2RO** `.IBBool2, Bool2RO`은 radio형태에서 체크가 되지 않은 상태일 때 사용되는 이미지를 관리하는 클래스입니다. ```css .IBBool2, IBBool2RO { /* 이미지 크기 조정 */ background-size: 18px 18px; /* 이미지 교체 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMjJDMTcuNTIyOCAyMiAyMiAxNy41MjI4IDIyIDEyQzIyIDYuNDc3MTUgMTcuNTIyOCAyIDEyIDJDNi40NzcxNSAyIDIgNi40NzcxNSAyIDEyQzIgMTcuNTIyOCA2LjQ3NzE1IDIyIDEyIDIyWk0xMiAyMEMxNi40MTgzIDIwIDIwIDE2LjQxODMgMjAgMTJDMjAgNy41ODE3MiAxNi40MTgzIDQgMTIgNEM3LjU4MTcyIDQgNCA3LjU4MTcyIDQgMTJDNCAxNi40MTgzIDcuNTgxNzIgMjAgMTIgMjBaIiBmaWxsPSIjZmYwMDAwIj48L3BhdGg+IDwvZz48L3N2Zz4=) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 언체크 radio ![기본 테마의 언체크 radio](/assets/imgs/styleguide_bool2_default.png \"기본 테마의 언체크 radio\")|커스텀 언체크 checkbox ![커스텀 언체크 radio 적용](/assets/imgs/styleguide_bool2_custom.png \"커스텀 언체크 radio 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBBool2%2C%20IBBool2RO%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%ED%81%AC%EA%B8%B0%20%EC%A1%B0%EC%A0%95%20*%2F%0A%20%20background-size%3A%2018px%2018px%3B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EA%B5%90%EC%B2%B4%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI%2BPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI%2BIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMjJDMTcuNTIyOCAyMiAyMiAxNy41MjI4IDIyIDEyQzIyIDYuNDc3MTUgMTcuNTIyOCAyIDEyIDJDNi40NzcxNSAyIDIgNi40NzcxNSAyIDEyQzIgMTcuNTIyOCA2LjQ3NzE1IDIyIDEyIDIyWk0xMiAyMEMxNi40MTgzIDIwIDIwIDE2LjQxODMgMjAgMTJDMjAgNy41ODE3MiAxNi40MTgzIDQgMTIgNEM3LjU4MTcyIDQgNCA3LjU4MTcyIDQgMTJDNCAxNi40MTgzIDcuNTgxNzIgMjAgMTIgMjBaIiBmaWxsPSIjZmYwMDAwIj48L3BhdGg%2BIDwvZz48L3N2Zz4%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBBool3, IBBool3RO** `.IBBool3, IBBool3RO`은 radio형태에서 체크가 된 상태일 때 사용되는 이미지를 관리하는 클래스입니다. ```css .IBBool3, IBBool3RO { /* 이미지 크기 조정 */ background-size: 18px 18px; /* 이미지 교체 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiA2LjQ3NzE1IDYuNDc3MTUgMiAxMiAyQzE3LjUyMjggMiAyMiA2LjQ3NzE1IDIyIDEyWk0yMCAxMkMyMCAxNi40MTgzIDE2LjQxODMgMjAgMTIgMjBDNy41ODE3MiAyMCA0IDE2LjQxODMgNCAxMkM0IDcuNTgxNzIgNy41ODE3MiA0IDEyIDRDMTYuNDE4MyA0IDIwIDcuNTgxNzIgMjAgMTJaTTEyIDE2QzE0LjIwOTEgMTYgMTYgMTQuMjA5MSAxNiAxMkMxNiA5Ljc5MDg2IDE0LjIwOTEgOCAxMiA4QzkuNzkwODYgOCA4IDkuNzkwODYgOCAxMkM4IDE0LjIwOTEgOS43OTA4NiAxNiAxMiAxNloiIGZpbGw9IiNmZjAwMDAiPjwvcGF0aD4gPC9nPjwvc3ZnPg==) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 체크 radio ![기본 테마의 체크 radio](/assets/imgs/styleguide_bool3_default.png \"기본 테마의 체크 radio\")|커스텀 체크 checkbox ![커스텀 체크 radio 적용](/assets/imgs/styleguide_bool3_custom.png \"커스텀 체크 radio 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBBool3%2C%20IBBool3RO%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%ED%81%AC%EA%B8%B0%20%EC%A1%B0%EC%A0%95%20*%2F%0A%20%20background-size%3A%2018px%2018px%3B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EA%B5%90%EC%B2%B4%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI%2BPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI%2BIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiA2LjQ3NzE1IDYuNDc3MTUgMiAxMiAyQzE3LjUyMjggMiAyMiA2LjQ3NzE1IDIyIDEyWk0yMCAxMkMyMCAxNi40MTgzIDE2LjQxODMgMjAgMTIgMjBDNy41ODE3MiAyMCA0IDE2LjQxODMgNCAxMkM0IDcuNTgxNzIgNy41ODE3MiA0IDEyIDRDMTYuNDE4MyA0IDIwIDcuNTgxNzIgMjAgMTJaTTEyIDE2QzE0LjIwOTEgMTYgMTYgMTQuMjA5MSAxNiAxMkMxNiA5Ljc5MDg2IDE0LjIwOTEgOCAxMiA4QzkuNzkwODYgOCA4IDkuNzkwODYgOCAxMkM4IDE0LjIwOTEgOS43OTA4NiAxNiAxMiAxNloiIGZpbGw9IiNmZjAwMDAiPjwvcGF0aD4gPC9nPjwvc3ZnPg%3D%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBRadio0Left, .IBRadio0Right** `.IBRadio0Left, .IBRadio0Right`은 하나의 셀 안에 여러 개의 radio형태를 사용할 때, 체크가 되지 않은 상태일 때 사용되는 이미지를 관리하는 클래스입니다. ```css .IBRadio0Left, .IBRadio0Right { /* 이미지 크기 조정 */ background-size: 18px 18px; /* 이미지 교체 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMjJDMTcuNTIyOCAyMiAyMiAxNy41MjI4IDIyIDEyQzIyIDYuNDc3MTUgMTcuNTIyOCAyIDEyIDJDNi40NzcxNSAyIDIgNi40NzcxNSAyIDEyQzIgMTcuNTIyOCA2LjQ3NzE1IDIyIDEyIDIyWk0xMiAyMEMxNi40MTgzIDIwIDIwIDE2LjQxODMgMjAgMTJDMjAgNy41ODE3MiAxNi40MTgzIDQgMTIgNEM3LjU4MTcyIDQgNCA3LjU4MTcyIDQgMTJDNCAxNi40MTgzIDcuNTgxNzIgMjAgMTIgMjBaIiBmaWxsPSIjZmYwMDAwIj48L3BhdGg+IDwvZz48L3N2Zz4=) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 다중 언체크 radio ![기본 테마의 다중 언체크 radio](/assets/imgs/styleguide_radio0_default.png \"기본 테마의 다중 언체크 radio\")|커스텀 다중 언체크 radio ![커스텀 다중 언체크 radio 적용](/assets/imgs/styleguide_radio0_custom.png \"커스텀 다중 언체크 radio 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBRadio0Left%2C%20.IBRadio0Right%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%ED%81%AC%EA%B8%B0%20%EC%A1%B0%EC%A0%95%20*%2F%0A%20%20background-size%3A%2018px%2018px%3B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EA%B5%90%EC%B2%B4%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI%2BPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI%2BIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMjJDMTcuNTIyOCAyMiAyMiAxNy41MjI4IDIyIDEyQzIyIDYuNDc3MTUgMTcuNTIyOCAyIDEyIDJDNi40NzcxNSAyIDIgNi40NzcxNSAyIDEyQzIgMTcuNTIyOCA2LjQ3NzE1IDIyIDEyIDIyWk0xMiAyMEMxNi40MTgzIDIwIDIwIDE2LjQxODMgMjAgMTJDMjAgNy41ODE3MiAxNi40MTgzIDQgMTIgNEM3LjU4MTcyIDQgNCA3LjU4MTcyIDQgMTJDNCAxNi40MTgzIDcuNTgxNzIgMjAgMTIgMjBaIiBmaWxsPSIjZmYwMDAwIj48L3BhdGg%2BIDwvZz48L3N2Zz4%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBRadio1Left, .IBRadio1Right** `.IBRadio1Left, .IBRadio1Right`은 하나의 셀 안에 여러 개의 radio형태를 사용할 때, 체크가 된 상태일 때 사용되는 이미지를 관리하는 클래스입니다. ```css .IBRadio1Left, .IBRadio1Right { /* 이미지 크기 조정 */ background-size: 18px 18px; /* 이미지 교체 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiA2LjQ3NzE1IDYuNDc3MTUgMiAxMiAyQzE3LjUyMjggMiAyMiA2LjQ3NzE1IDIyIDEyWk0yMCAxMkMyMCAxNi40MTgzIDE2LjQxODMgMjAgMTIgMjBDNy41ODE3MiAyMCA0IDE2LjQxODMgNCAxMkM0IDcuNTgxNzIgNy41ODE3MiA0IDEyIDRDMTYuNDE4MyA0IDIwIDcuNTgxNzIgMjAgMTJaTTEyIDE2QzE0LjIwOTEgMTYgMTYgMTQuMjA5MSAxNiAxMkMxNiA5Ljc5MDg2IDE0LjIwOTEgOCAxMiA4QzkuNzkwODYgOCA4IDkuNzkwODYgOCAxMkM4IDE0LjIwOTEgOS43OTA4NiAxNiAxMiAxNloiIGZpbGw9IiNmZjAwMDAiPjwvcGF0aD4gPC9nPjwvc3ZnPg==) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 다중 체크 radio ![기본 테마의 다중 체크 radio](/assets/imgs/styleguide_radio1_default.png \"기본 테마의 다중 체크 radio\")|커스텀 다중 체크 radio ![커스텀 다중 체크 radio 적용](/assets/imgs/styleguide_radio1_custom.png \"커스텀 다중 체크 radio 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBRadio1Left%2C%20.IBRadio1Right%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%ED%81%AC%EA%B8%B0%20%EC%A1%B0%EC%A0%95%20*%2F%0A%20%20background-size%3A%2018px%2018px%3B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EA%B5%90%EC%B2%B4%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI%2BPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI%2BIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiA2LjQ3NzE1IDYuNDc3MTUgMiAxMiAyQzE3LjUyMjggMiAyMiA2LjQ3NzE1IDIyIDEyWk0yMCAxMkMyMCAxNi40MTgzIDE2LjQxODMgMjAgMTIgMjBDNy41ODE3MiAyMCA0IDE2LjQxODMgNCAxMkM0IDcuNTgxNzIgNy41ODE3MiA0IDEyIDRDMTYuNDE4MyA0IDIwIDcuNTgxNzIgMjAgMTJaTTEyIDE2QzE0LjIwOTEgMTYgMTYgMTQuMjA5MSAxNiAxMkMxNiA5Ljc5MDg2IDE0LjIwOTEgOCAxMiA4QzkuNzkwODYgOCA4IDkuNzkwODYgOCAxMkM4IDE0LjIwOTEgOS43OTA4NiAxNiAxMiAxNloiIGZpbGw9IiNmZjAwMDAiPjwvcGF0aD4gPC9nPjwvc3ZnPg%3D%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBRadio2Left, .IBRadio2Right** `.IBRadio0Left, .IBRadio0Right`은 하나의 셀 안에 여러 개의 checkbox형태를 사용할 때, 체크가 되지 않은 상태일 때 사용되는 이미지를 관리하는 클래스입니다. ```css .IBRadio2Left, .IBRadio2Right { /* 이미지 크기 조정 */ background-size: 18px 18px; /* 이미지 교체 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgZmlsbD0iIzAwMDAwMCI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIEdlbmVyYXRvcjogU1ZHIFJlcG8gTWl4ZXIgVG9vbHMgLS0+IDx0aXRsZT5pY19mbHVlbnRfY2hlY2tib3hfdW5jaGVja2VkXzI0X3JlZ3VsYXI8L3RpdGxlPiA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gPGcgaWQ9IvCflI0tUHJvZHVjdC1JY29ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+IDxnIGlkPSJpY19mbHVlbnRfY2hlY2tib3hfdW5jaGVja2VkXzI0X3JlZ3VsYXIiIGZpbGw9IiNmZjAwMDAiIGZpbGwtcnVsZT0ibm9uemVybyI+IDxwYXRoIGQ9Ik01Ljc1LDMgTDE4LjI1LDMgQzE5Ljc2ODc4MzEsMyAyMSw0LjIzMTIxNjk0IDIxLDUuNzUgTDIxLDE4LjI1IEMyMSwxOS43Njg3ODMxIDE5Ljc2ODc4MzEsMjEgMTguMjUsMjEgTDUuNzUsMjEgQzQuMjMxMjE2OTQsMjEgMywxOS43Njg3ODMxIDMsMTguMjUgTDMsNS43NSBDMyw0LjIzMTIxNjk0IDQuMjMxMjE2OTQsMyA1Ljc1LDMgWiBNNS43NSw0LjUgQzUuMDU5NjQ0MDYsNC41IDQuNSw1LjA1OTY0NDA2IDQuNSw1Ljc1IEw0LjUsMTguMjUgQzQuNSwxOC45NDAzNTU5IDUuMDU5NjQ0MDYsMTkuNSA1Ljc1LDE5LjUgTDE4LjI1LDE5LjUgQzE4Ljk0MDM1NTksMTkuNSAxOS41LDE4Ljk0MDM1NTkgMTkuNSwxOC4yNSBMMTkuNSw1Ljc1IEMxOS41LDUuMDU5NjQ0MDYgMTguOTQwMzU1OSw0LjUgMTguMjUsNC41IEw1Ljc1LDQuNSBaIiBpZD0i8J+OqENvbG9yIj4gPC9wYXRoPiA8L2c+IDwvZz4gPC9nPjwvc3ZnPg==) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 다중 언체크 checkbox ![기본 테마의 다중 언체크 checkbox](/assets/imgs/styleguide_radio2_default.png \"기본 테마의 다중 언체크 checkbox\")|커스텀 다중 언체크 checkbox ![커스텀 다중 언체크 checkbox 적용](/assets/imgs/styleguide_radio2_custom.png \"커스텀 다중 언체크 checkbox 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBRadio2Left%2C%20.IBRadio2Right%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%ED%81%AC%EA%B8%B0%20%EC%A1%B0%EC%A0%95%20*%2F%0A%20%20background-size%3A%2018px%2018px%3B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EA%B5%90%EC%B2%B4%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgZmlsbD0iIzAwMDAwMCI%2BPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI%2BIDwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIEdlbmVyYXRvcjogU1ZHIFJlcG8gTWl4ZXIgVG9vbHMgLS0%2BIDx0aXRsZT5pY19mbHVlbnRfY2hlY2tib3hfdW5jaGVja2VkXzI0X3JlZ3VsYXI8L3RpdGxlPiA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gPGcgaWQ9IvCflI0tUHJvZHVjdC1JY29ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI%2BIDxnIGlkPSJpY19mbHVlbnRfY2hlY2tib3hfdW5jaGVja2VkXzI0X3JlZ3VsYXIiIGZpbGw9IiNmZjAwMDAiIGZpbGwtcnVsZT0ibm9uemVybyI%2BIDxwYXRoIGQ9Ik01Ljc1LDMgTDE4LjI1LDMgQzE5Ljc2ODc4MzEsMyAyMSw0LjIzMTIxNjk0IDIxLDUuNzUgTDIxLDE4LjI1IEMyMSwxOS43Njg3ODMxIDE5Ljc2ODc4MzEsMjEgMTguMjUsMjEgTDUuNzUsMjEgQzQuMjMxMjE2OTQsMjEgMywxOS43Njg3ODMxIDMsMTguMjUgTDMsNS43NSBDMyw0LjIzMTIxNjk0IDQuMjMxMjE2OTQsMyA1Ljc1LDMgWiBNNS43NSw0LjUgQzUuMDU5NjQ0MDYsNC41IDQuNSw1LjA1OTY0NDA2IDQuNSw1Ljc1IEw0LjUsMTguMjUgQzQuNSwxOC45NDAzNTU5IDUuMDU5NjQ0MDYsMTkuNSA1Ljc1LDE5LjUgTDE4LjI1LDE5LjUgQzE4Ljk0MDM1NTksMTkuNSAxOS41LDE4Ljk0MDM1NTkgMTkuNSwxOC4yNSBMMTkuNSw1Ljc1IEMxOS41LDUuMDU5NjQ0MDYgMTguOTQwMzU1OSw0LjUgMTguMjUsNC41IEw1Ljc1LDQuNSBaIiBpZD0i8J%2BOqENvbG9yIj4gPC9wYXRoPiA8L2c%2BIDwvZz4gPC9nPjwvc3ZnPg%3D%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBRadio3Left, .IBRadio3Right** `.IBRadio1Left, .IBRadio1Right`은 하나의 셀 안에 여러 개의 checkbox형태를 사용할 때, 체크가 된 상태일 때 사용되는 이미지를 관리하는 클래스입니다. ```css .IBRadio3Left, .IBRadio3Right { /* 이미지 크기 조정 */ background-size: 18px 18px; /* 이미지 교 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjEgMjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzAwMDAwMCI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjZmYwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMykiPiA8cGF0aCBkPSJtMi41LjVoMTBjMS4xMDQ1Njk1IDAgMiAuODk1NDMwNSAyIDJ2MTBjMCAxLjEwNDU2OTUtLjg5NTQzMDUgMi0yIDJoLTEwYy0xLjEwNDU2OTUgMC0yLS44OTU0MzA1LTItMnYtMTBjMC0xLjEwNDU2OTUuODk1NDMwNS0yIDItMnoiPjwvcGF0aD4gPHBhdGggZD0ibTQuNSA3LjUgMiAyIDQtNCI+PC9wYXRoPiA8L2c+IDwvZz48L3N2Zz4=); } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 다중 체크 checkbox ![기본 테마의 다중 체크 checkbox](/assets/imgs/styleguide_radio3_default.png \"기본 테마의 다중 체크 checkbox\")|커스텀 다중 체크 checkbox ![커스텀 다중 체크 checkbox 적용](/assets/imgs/styleguide_radio3_custom.png \"커스텀 다중 체크 checkbox 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBRadio3Left%2C%20.IBRadio3Right%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%ED%81%AC%EA%B8%B0%20%EC%A1%B0%EC%A0%95%20*%2F%0A%20%20background-size%3A%2018px%2018px%3B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EA%B5%90%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjEgMjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzAwMDAwMCI%2BPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI%2BIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjZmYwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMykiPiA8cGF0aCBkPSJtMi41LjVoMTBjMS4xMDQ1Njk1IDAgMiAuODk1NDMwNSAyIDJ2MTBjMCAxLjEwNDU2OTUtLjg5NTQzMDUgMi0yIDJoLTEwYy0xLjEwNDU2OTUgMC0yLS44OTU0MzA1LTItMnYtMTBjMC0xLjEwNDU2OTUuODk1NDMwNS0yIDItMnoiPjwvcGF0aD4gPHBhdGggZD0ibTQuNSA3LjUgMiAyIDQtNCI%2BPC9wYXRoPiA8L2c%2BIDwvZz48L3N2Zz4%3D)%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBRadioChecked** `.IBRadioChecked`은 하나의 셀 안에 여러 개의 radio나 checkbox형태를 사용할 때, 선택된 대상의 Text를 관리하는 클래스입니다. ```css .IBRadioChecked { /* 글자색 변경 */ color: red; /* 폰트 굵기 변경 */ font-weight: bold; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 다중 체크 중 체크 대상의 Text ![기본 테마의 다중 체크 중 체크 대상의 Text](/assets/imgs/styleguide_radio1_default.png \"기본 테마의 다중 체크 checkbox\")|커스텀 다중 체크 중 체크 대상의 Text ![커스텀 다중 체크 중 체크 대상의 Text 적용](/assets/imgs/styleguide_radiochecked.png \"커스텀 다중 체크 중 체크 대상의 Text 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBRadioChecked%20%7B%0A%20%20%2F*%20%EA%B8%80%EC%9E%90%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20color%3A%20red%3B%0A%20%20%2F*%20%ED%8F%B0%ED%8A%B8%20%EA%B5%B5%EA%B8%B0%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20font-weight%3A%20bold%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ## Enum(DropDown) 아이콘 ### **.IBEnumLeft, .IBEnumRight, .IBEnumTop, .IBEnumBottom** `.IBEnumLeft, .IBEnumRight, .IBEnumTop, .IBEnumBottom`은 DropDown에서 접힘 상태일 때 사용되는 이미지를 관리하는 클래스입니다. ```css .IBEnumLeft, .IBEnumRight, .IBEnumTop, .IBEnumBottom { /* 이미지 교체 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQo8cGF0aCBmaWxsPSIjZmYwMDAwIiBkPSJNMTEuMzcsNy43NzZsLTMuMDYzLDMuMDYzYy0wLjA4MiwwLjA4Mi0wLjE5MSwwLjEzLTAuMzA4LDAuMTNzLTAuMjI2LTAuMDQ4LTAuMzA4LTAuMTNMNC42Myw3Ljc3Ng0KCUM0LjU0OCw3LjY5NCw0LjUsNy41ODUsNC41LDcuNDY5YzAtMC4yMzksMC4xOTgtMC40MzgsMC40MzgtMC40MzhoNi4xMjVjMC4yMzksMCwwLjQzOCwwLjE5OCwwLjQzOCwwLjQzOA0KCUMxMS41LDcuNTg1LDExLjQ1Miw3LjY5NCwxMS4zNyw3Ljc3NnoiLz4NCjwvc3ZnPg==); } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 DropDown 접힙 상태 ![기본 테마의 DropDown 접힙 상태](/assets/imgs/styleguide_dropdown_fold_default.png \"기본 테마의 DropDown 접힙 상태\")|커스텀 DropDown 접힙 상태![커스텀 DropDown 접힙 상태 적용](/assets/imgs/styleguide_dropdown_fold_custom.png \"커스텀 DropDown 접힙 상태 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBEnumLeft%2C%20.IBEnumRight%2C%20.IBEnumTop%2C%20.IBEnumBottom%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EA%B5%90%EC%B2%B4%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI%2BDQo8cGF0aCBmaWxsPSIjZmYwMDAwIiBkPSJNMTEuMzcsNy43NzZsLTMuMDYzLDMuMDYzYy0wLjA4MiwwLjA4Mi0wLjE5MSwwLjEzLTAuMzA4LDAuMTNzLTAuMjI2LTAuMDQ4LTAuMzA4LTAuMTNMNC42Myw3Ljc3Ng0KCUM0LjU0OCw3LjY5NCw0LjUsNy41ODUsNC41LDcuNDY5YzAtMC4yMzksMC4xOTgtMC40MzgsMC40MzgtMC40MzhoNi4xMjVjMC4yMzksMCwwLjQzOCwwLjE5OCwwLjQzOCwwLjQzOA0KCUMxMS41LDcuNTg1LDExLjQ1Miw3LjY5NCwxMS4zNyw3Ljc3NnoiLz4NCjwvc3ZnPg%3D%3D)%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBEnumLeft, .IBEnumRight, .IBEnumTop, .IBEnumBottom** `.IBEnumHeaderLeft,.IBEnumHeaderRight`은 DropDown에서 펼침 상태일 때 사용되는 이미지를 관리하는 클래스입니다. ```css .IBEnumHeaderLeft,.IBEnumHeaderRight { /* 이미지 교체 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQo8cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSgxODAgOCA4KSIgZmlsbD0iI2ZmMDAwMCIgZD0iTTExLjM3LDcuNzc2bC0zLjA2MywzLjA2M2MtMC4wODIsMC4wODItMC4xOTEsMC4xMy0wLjMwOCwwLjEzcy0wLjIyNi0wLjA0OC0wLjMwOC0wLjEzTDQuNjMsNy43NzYNCglDNC41NDgsNy42OTQsNC41LDcuNTg1LDQuNSw3LjQ2OWMwLTAuMjM5LDAuMTk4LTAuNDM4LDAuNDM4LTAuNDM4aDYuMTI1YzAuMjM5LDAsMC40MzgsMC4xOTgsMC40MzgsMC40MzgNCglDMTEuNSw3LjU4NSwxMS40NTIsNy42OTQsMTEuMzcsNy43NzZ6Ii8+DQo8L3N2Zz4=); } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 DropDown 펼침 상태 ![기본 테마의 DropDown 펼침 상태](/assets/imgs/styleguide_dropdown_unfold_default.png \"기본 테마의 DropDown 펼침 상태\")|커스텀 DropDown 펼침 상태 ![커스텀 DropDown 펼침 상태 적용](/assets/imgs/styleguide_dropdown_unfold_custom.png \"커스텀 DropDown 펼침 상태 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBEnumHeaderLeft%2C.IBEnumHeaderRight%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EA%B5%90%EC%B2%B4%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI%2BDQo8cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSgxODAgOCA4KSIgZmlsbD0iI2ZmMDAwMCIgZD0iTTExLjM3LDcuNzc2bC0zLjA2MywzLjA2M2MtMC4wODIsMC4wODItMC4xOTEsMC4xMy0wLjMwOCwwLjEzcy0wLjIyNi0wLjA0OC0wLjMwOC0wLjEzTDQuNjMsNy43NzYNCglDNC41NDgsNy42OTQsNC41LDcuNTg1LDQuNSw3LjQ2OWMwLTAuMjM5LDAuMTk4LTAuNDM4LDAuNDM4LTAuNDM4aDYuMTI1YzAuMjM5LDAsMC40MzgsMC4xOTgsMC40MzgsMC40MzgNCglDMTEuNSw3LjU4NSwxMS40NTIsNy42OTQsMTEuMzcsNy43NzZ6Ii8%2BDQo8L3N2Zz4%3D)%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBMenuFocus** `.IBMenuFocus`은 DropDown이 펼침 상태에서 값 선택 영역에서 선택 된 값이 있는 영역에 적용되는 클래스입니다. ```css .IBMenuFocus { /* 배경색 변경 */ background: #87f344; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 DropDown 펼침 상태의 Focus ![기본 테마의 DropDown 펼침 상태의 Focus](/assets/imgs/styleguide_dropdown_focus_default.png \"기본 테마의 DropDown 펼침 상태의 Focus\")|커스텀 DropDown 펼침 상태의 Focus ![커스텀 DropDown 펼침 상태의 Focus 적용](/assets/imgs/styleguide_dropdown_focus_custom.png \"커스텀 DropDown 펼침 상태의 Focus 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBMenuFocus%20%7B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background%3A%20%2387f344%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBMenuHover** `.IBMenuHover`은 DropDown이 펼침 상태에서 값 선택 영역에서 마우스가 Hover된 영역에 적용되는 클래스입니다. ```css .IBMenuHover { /* 배경색 변경 */ background: #ddff1d; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 DropDown 펼침 상태의 Hover ![기본 테마의 DropDown 펼침 상태의 Hover](/assets/imgs/styleguide_dropdown_hover_default.png \"기본 테마의 DropDown 펼침 상태의 Hover\")|커스텀 DropDown 펼침 상태의 Hover ![커스텀 DropDown 펼침 상태의 Hover 적용](/assets/imgs/styleguide_dropdown_hover_custom.png \"커스텀 DropDown 펼침 상태의 Hover 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBMenuHover%20%7B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background%3A%20%23ddff1d%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBMenuFocus.IBMenuHover** `.IBMenuFocus.IBMenuHover`은 DropDown이 펼침에서 값 선택 영역에서 선택된 값이 있는 영역에 마우스가 Hover되었을 때 해당 영역에 적용되는 클래스입니다. ```css .IBMenuFocus.IBMenuHover { /* 배경색 변경 */ background: #b46eff; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 DropDown 펼침 상태의 FocusHover ![기본 테마의 DropDown 펼침 상태의 FocusHover](/assets/imgs/styleguide_dropdown_focushover_default.png \"기본 테마의 DropDown 펼침 상태의 FocusHover\")|커스텀 DropDown 펼침 상태의 FocusHover ![커스텀 DropDown 펼침 상태의 FocusHover 적용](/assets/imgs/styleguide_dropdown_focushover_custom.png \"커스텀 DropDown 펼침 상태의 FocusHover 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBMenuFocus.IBMenuHover%20%7B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background%3A%20%23b46eff%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> * * * ## File 아이콘 ### **.IBClearLeft, .IBClearRight, .IBClearTop, .IBClearBottom** `.IBClearLeft, .IBClearRight, .IBClearTop, .IBClearBottom`은 File정보가 존재할 경우, 출력 되는 파일 정보 제거 아이콘을 관리하는 클래스입니다. ```css .IBClearLeft, .IBClearRight, .IBClearTop, .IBClearBottom { background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmYwMDAwIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgZGF0YS1uYW1lPSJMYXllciAxIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNmZjAwMDAiPjxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIj48L2c+PGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L2c+PGcgaWQ9IlNWR1JlcG9faWNvbkNhcnJpZXIiPjx0aXRsZT48L3RpdGxlPjxwYXRoIGQ9Ik0xMTQsMTAwbDQ5LTQ5YTkuOSw5LjksMCwwLDAtMTQtMTRMMTAwLDg2LDUxLDM3QTkuOSw5LjksMCwwLDAsMzcsNTFsNDksNDlMMzcsMTQ5YTkuOSw5LjksMCwwLDAsMTQsMTRsNDktNDksNDksNDlhOS45LDkuOSwwLDAsMCwxNC0xNFoiPjwvcGF0aD48L2c+PC9zdmc+) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 파일 정보 제거 아이콘 ![기본 테마의 파일 정보 제거 아이콘](/assets/imgs/styleguide_file_empty_default.png \"기본 테마의 파일 정보 제거 아이콘\")|커스텀 파일 정보 제거 아이콘 ![커스텀 파일 정보 제거 아이콘 적용](/assets/imgs/styleguide_file_empty_custom.png \"커스텀 파일 정보 제거 아이콘 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type2?customCss=%0A.IBClearLeft%2C%20.IBClearRight%2C%20.IBClearTop%2C%20.IBClearBottom%20%7B%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyBmaWxsPSIjZmYwMDAwIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgZGF0YS1uYW1lPSJMYXllciAxIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNmZjAwMDAiPjxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIj48L2c%2BPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L2c%2BPGcgaWQ9IlNWR1JlcG9faWNvbkNhcnJpZXIiPjx0aXRsZT48L3RpdGxlPjxwYXRoIGQ9Ik0xMTQsMTAwbDQ5LTQ5YTkuOSw5LjksMCwwLDAtMTQtMTRMMTAwLDg2LDUxLDM3QTkuOSw5LjksMCwwLDAsMzcsNTFsNDksNDlMMzcsMTQ5YTkuOSw5LjksMCwwLDAsMTQsMTRsNDktNDksNDksNDlhOS45LDkuOSwwLDAsMCwxNC0xNFoiPjwvcGF0aD48L2c%2BPC9zdmc%2B)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBFileLeft, .IBFileRight, .IBFileTop, .IBFileBottom** `.IBFileLeft, .IBFileRight, .IBFileTop, .IBFileBottom`은 File type에서 파일 업로드 아이콘을 관리하는 클래스입니다. ```css .IBFileLeft, .IBFileRight, .IBFileTop, .IBFileBottom { background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDg1IDQ4NSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxnPiA8cG9seWdvbiBwb2ludHM9IjE2My4wNywyNjguNjI2IDMyMS45MywyNjguNjI2IDMyMS45MywxNTMuMDU2IDM4MC45MjYsMTUzLjA1NiAyNDIuNSwxLjM3NCAxMDQuMDc0LDE1My4wNTYgMTYzLjA3LDE1My4wNTYgIj48L3BvbHlnb24+IDxwYXRoIGQ9Ik0wLDMwOC42MjZ2MTc1aDQ4NXYtMTc1SDB6IE0zMzAsNDExLjEyNmMtOC4yODQsMC0xNS02LjcxNi0xNS0xNXM2LjcxNi0xNSwxNS0xNWM4LjI4NCwwLDE1LDYuNzE2LDE1LDE1IFMzMzguMjg0LDQxMS4xMjYsMzMwLDQxMS4xMjZ6IE00MDAsNDExLjEyNmMtOC4yODQsMC0xNS02LjcxNi0xNS0xNXM2LjcxNi0xNSwxNS0xNWM4LjI4NCwwLDE1LDYuNzE2LDE1LDE1IFM0MDguMjg0LDQxMS4xMjYsNDAwLDQxMS4xMjZ6Ij48L3BhdGg+IDwvZz4gPC9nPjwvc3ZnPg==) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 파일 업로드 아이콘 ![기본 테마의 파일 업로드 아이콘](/assets/imgs/styleguide_file_upload_default.png \"기본 테마의 파일 업로드 아이콘\")|커스텀 파일 업로드 아이콘 ![커스텀 파일 업로드 아이콘 적용](/assets/imgs/styleguide_file_upload_custom.png \"커스텀 파일 업로드 아이콘 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type2?customCss=%0A.IBFileLeft%2C%20.IBFileRight%2C%20.IBFileTop%2C%20.IBFileBottom%20%7B%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDg1IDQ4NSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI%2BIDxnPiA8cG9seWdvbiBwb2ludHM9IjE2My4wNywyNjguNjI2IDMyMS45MywyNjguNjI2IDMyMS45MywxNTMuMDU2IDM4MC45MjYsMTUzLjA1NiAyNDIuNSwxLjM3NCAxMDQuMDc0LDE1My4wNTYgMTYzLjA3LDE1My4wNTYgIj48L3BvbHlnb24%2BIDxwYXRoIGQ9Ik0wLDMwOC42MjZ2MTc1aDQ4NXYtMTc1SDB6IE0zMzAsNDExLjEyNmMtOC4yODQsMC0xNS02LjcxNi0xNS0xNXM2LjcxNi0xNSwxNS0xNWM4LjI4NCwwLDE1LDYuNzE2LDE1LDE1IFMzMzguMjg0LDQxMS4xMjYsMzMwLDQxMS4xMjZ6IE00MDAsNDExLjEyNmMtOC4yODQsMC0xNS02LjcxNi0xNS0xNXM2LjcxNi0xNSwxNS0xNWM4LjI4NCwwLDE1LDYuNzE2LDE1LDE1IFM0MDguMjg0LDQxMS4xMjYsNDAwLDQxMS4xMjZ6Ij48L3BhdGg%2BIDwvZz4gPC9nPjwvc3ZnPg%3D%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> * * * ## Date/TimePicker등 ### **.IBMain .IBDateLeft, .IBMain .IBDatesLeft, .IBMain .IBDateRight, .IBMain .IBDatesRight, .IBMain .IBDateTop, .IBMain .IBDatesTop, .IBMain .IBDateBottom, .IBMain .IBDatesBottom** `.IBMain .IBDateLeft, .IBMain .IBDatesLeft, .IBMain .IBDateRight, .IBMain .IBDatesRight, .IBMain .IBDateTop, .IBMain .IBDatesTop, .IBMain .IBDateBottom, .IBMain .IBDatesBottom`은 DatePicker의 아이콘을 관리하는 클래스입니다. ```css .IBMain .IBDateLeft, .IBMain .IBDatesLeft, .IBMain .IBDateRight, .IBMain .IBDatesRight, .IBMain .IBDateTop, .IBMain .IBDatesTop, .IBMain .IBDateBottom, .IBMain .IBDatesBottom { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGQ9Ik03IDExQzcgMTAuNDQ3NyA3LjQ0NzcyIDEwIDggMTBDOC41NTIyOCAxMCA5IDEwLjQ0NzcgOSAxMUM5IDExLjU1MjMgOC41NTIyOCAxMiA4IDEyQzcuNDQ3NzIgMTIgNyAxMS41NTIzIDcgMTFaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGQ9Ik03IDE2QzcgMTUuNDQ3NyA3LjQ0NzcyIDE1IDggMTVDOC41NTIyOCAxNSA5IDE1LjQ0NzcgOSAxNkM5IDE2LjU1MjMgOC41NTIyOCAxNyA4IDE3QzcuNDQ3NzIgMTcgNyAxNi41NTIzIDcgMTZaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGQ9Ik0xMSAxMUMxMSAxMC40NDc3IDExLjQ0NzcgMTAgMTIgMTBDMTIuNTUyMyAxMCAxMyAxMC40NDc3IDEzIDExQzEzIDExLjU1MjMgMTIuNTUyMyAxMiAxMiAxMkMxMS40NDc3IDEyIDExIDExLjU1MjMgMTEgMTFaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGQ9Ik0xMSAxNkMxMSAxNS40NDc3IDExLjQ0NzcgMTUgMTIgMTVDMTIuNTUyMyAxNSAxMyAxNS40NDc3IDEzIDE2QzEzIDE2LjU1MjMgMTIuNTUyMyAxNyAxMiAxN0MxMS40NDc3IDE3IDExIDE2LjU1MjMgMTEgMTZaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGQ9Ik0xNSAxMUMxNSAxMC40NDc3IDE1LjQ0NzcgMTAgMTYgMTBDMTYuNTUyMyAxMCAxNyAxMC40NDc3IDE3IDExQzE3IDExLjU1MjMgMTYuNTUyMyAxMiAxNiAxMkMxNS40NDc3IDEyIDE1IDExLjU1MjMgMTUgMTFaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGQ9Ik0xNSAxNkMxNSAxNS40NDc3IDE1LjQ0NzcgMTUgMTYgMTVDMTYuNTUyMyAxNSAxNyAxNS40NDc3IDE3IDE2QzE3IDE2LjU1MjMgMTYuNTUyMyAxNyAxNiAxN0MxNS40NDc3IDE3IDE1IDE2LjU1MjMgMTUgMTZaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOCAyQzguNTUyMjggMiA5IDIuNDQ3NzIgOSAzVjRIMTVWM0MxNSAyLjQ0NzcyIDE1LjQ0NzcgMiAxNiAyQzE2LjU1MjMgMiAxNyAyLjQ0NzcyIDE3IDNWNEMxOS43NjE0IDQgMjIgNi4yMzg1OCAyMiA5VjE3QzIyIDE5Ljc2MTQgMTkuNzYxNCAyMiAxNyAyMkg3QzQuMjM4NTggMjIgMiAxOS43NjE0IDIgMTdWOUMyIDYuMjM4NTggNC4yMzg1OCA0IDcgNFYzQzcgMi40NDc3MiA3LjQ0NzcyIDIgOCAyWk03IDZDNS4zNDMxNSA2IDQgNy4zNDMxNSA0IDlWMTdDNCAxOC42NTY5IDUuMzQzMTUgMjAgNyAyMEgxN0MxOC42NTY5IDIwIDIwIDE4LjY1NjkgMjAgMTdWOUMyMCA3LjM0MzE1IDE4LjY1NjkgNiAxNyA2QzE3IDYuNTUyMjkgMTYuNTUyMyA3IDE2IDdDMTUuNDQ3NyA3IDE1IDYuNTUyMjkgMTUgNkg5QzkgNi41NTIyOSA4LjU1MjI4IDcgOCA3QzcuNDQ3NzIgNyA3IDYuNTUyMjkgNyA2WiIgZmlsbD0iIzAwMDAwMCI+PC9wYXRoPiA8L2c+PC9zdmc+) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 DatePicker 아이콘 ![기본 테마의 DatePicker 아이콘](/assets/imgs/styleguide_datepicker_default.png \"기본 테마의 DatePicker 아이콘\")|커스텀 DatePicker 아이콘 ![커스텀 DatePicker 아이콘](/assets/imgs/styleguide_datepicker_custom.png \"커스텀 DatePicker 아이콘\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBMain%20.IBDateLeft%2C%20.IBMain%20.IBDatesLeft%2C%20.IBMain%20.IBDateRight%2C%20.IBMain%20.IBDatesRight%2C%20.IBMain%20.IBDateTop%2C%20.IBMain%20.IBDatesTop%2C%20.IBMain%20.IBDateBottom%2C%20.IBMain%20.IBDatesBottom%20%7B%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI%2BPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI%2BIDxwYXRoIGQ9Ik03IDExQzcgMTAuNDQ3NyA3LjQ0NzcyIDEwIDggMTBDOC41NTIyOCAxMCA5IDEwLjQ0NzcgOSAxMUM5IDExLjU1MjMgOC41NTIyOCAxMiA4IDEyQzcuNDQ3NzIgMTIgNyAxMS41NTIzIDcgMTFaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg%2BIDxwYXRoIGQ9Ik03IDE2QzcgMTUuNDQ3NyA3LjQ0NzcyIDE1IDggMTVDOC41NTIyOCAxNSA5IDE1LjQ0NzcgOSAxNkM5IDE2LjU1MjMgOC41NTIyOCAxNyA4IDE3QzcuNDQ3NzIgMTcgNyAxNi41NTIzIDcgMTZaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg%2BIDxwYXRoIGQ9Ik0xMSAxMUMxMSAxMC40NDc3IDExLjQ0NzcgMTAgMTIgMTBDMTIuNTUyMyAxMCAxMyAxMC40NDc3IDEzIDExQzEzIDExLjU1MjMgMTIuNTUyMyAxMiAxMiAxMkMxMS40NDc3IDEyIDExIDExLjU1MjMgMTEgMTFaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg%2BIDxwYXRoIGQ9Ik0xMSAxNkMxMSAxNS40NDc3IDExLjQ0NzcgMTUgMTIgMTVDMTIuNTUyMyAxNSAxMyAxNS40NDc3IDEzIDE2QzEzIDE2LjU1MjMgMTIuNTUyMyAxNyAxMiAxN0MxMS40NDc3IDE3IDExIDE2LjU1MjMgMTEgMTZaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg%2BIDxwYXRoIGQ9Ik0xNSAxMUMxNSAxMC40NDc3IDE1LjQ0NzcgMTAgMTYgMTBDMTYuNTUyMyAxMCAxNyAxMC40NDc3IDE3IDExQzE3IDExLjU1MjMgMTYuNTUyMyAxMiAxNiAxMkMxNS40NDc3IDEyIDE1IDExLjU1MjMgMTUgMTFaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg%2BIDxwYXRoIGQ9Ik0xNSAxNkMxNSAxNS40NDc3IDE1LjQ0NzcgMTUgMTYgMTVDMTYuNTUyMyAxNSAxNyAxNS40NDc3IDE3IDE2QzE3IDE2LjU1MjMgMTYuNTUyMyAxNyAxNiAxN0MxNS40NDc3IDE3IDE1IDE2LjU1MjMgMTUgMTZaIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg%2BIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOCAyQzguNTUyMjggMiA5IDIuNDQ3NzIgOSAzVjRIMTVWM0MxNSAyLjQ0NzcyIDE1LjQ0NzcgMiAxNiAyQzE2LjU1MjMgMiAxNyAyLjQ0NzcyIDE3IDNWNEMxOS43NjE0IDQgMjIgNi4yMzg1OCAyMiA5VjE3QzIyIDE5Ljc2MTQgMTkuNzYxNCAyMiAxNyAyMkg3QzQuMjM4NTggMjIgMiAxOS43NjE0IDIgMTdWOUMyIDYuMjM4NTggNC4yMzg1OCA0IDcgNFYzQzcgMi40NDc3MiA3LjQ0NzcyIDIgOCAyWk03IDZDNS4zNDMxNSA2IDQgNy4zNDMxNSA0IDlWMTdDNCAxOC42NTY5IDUuMzQzMTUgMjAgNyAyMEgxN0MxOC42NTY5IDIwIDIwIDE4LjY1NjkgMjAgMTdWOUMyMCA3LjM0MzE1IDE4LjY1NjkgNiAxNyA2QzE3IDYuNTUyMjkgMTYuNTUyMyA3IDE2IDdDMTUuNDQ3NyA3IDE1IDYuNTUyMjkgMTUgNkg5QzkgNi41NTIyOSA4LjU1MjI4IDcgOCA3QzcuNDQ3NzIgNyA3IDYuNTUyMjkgNyA2WiIgZmlsbD0iIzAwMDAwMCI%2BPC9wYXRoPiA8L2c%2BPC9zdmc%2B)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBMain .IBTimePickerLeft, .IBMain .IBDatesLeft, .IBMain .IBTimePickerRight, .IBMain .IBDatesRight, .IBMain .IBDateTop, .IBMain .IBDatesTop, .IBMain .IBDateBottom, .IBMain .IBDatesBottom** `.IBMain .IBTimePickerLeft, .IBMain .IBDatesLeft, .IBMain .IBTimePickerRight, .IBMain .IBDatesRight, .IBMain .IBDateTop, .IBMain .IBDatesTop, .IBMain .IBDateBottom, .IBMain .IBDatesBottom`은 TimePicker의 아이콘을 관리하는 클래스입니다. ```css .IBMain .IBTimePickerLeft, .IBMain .IBDatesLeft, .IBMain .IBTimePickerRight, .IBMain .IBDatesRight, .IBMain .IBDateTop, .IBMain .IBDatesTop, .IBMain .IBDateBottom, .IBMain .IBDatesBottom { background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGQ9Ik0yNTYsMEMxMTQuNiwwLDAsMTE0LjYsMCwyNTZzMTE0LjYsMjU2LDI1NiwyNTZzMjU2LTExNC42LDI1Ni0yNTZTMzk3LjQsMCwyNTYsMHogTTI1Niw0NjkuMyBjLTExNy44LDAtMjEzLjMtOTUuNS0yMTMuMy0yMTMuM2MwLTExNy44LDk1LjUtMjEzLjMsMjEzLjMtMjEzLjNjMTE3LjgsMCwyMTMuMyw5NS41LDIxMy4zLDIxMy4zIEM0NjkuMywzNzMuOCwzNzMuOCw0NjkuMywyNTYsNDY5LjN6IE0yNzcuMyw4NS4zaC00Mi43djE5MkgzODR2LTQyLjdIMjc3LjNWODUuM3oiPjwvcGF0aD4gPC9nPjwvc3ZnPg==) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 TimePicker 아이콘 ![기본 테마의 TimePicker 아이콘](/assets/imgs/styleguide_timepicker_default.png \"기본 테마의 TimePicker 아이콘\")|커스텀 TimePicker 아이콘 ![커스텀 TimePicker 아이콘](/assets/imgs/styleguide_timepicker_custom.png \"커스텀 TimePicker 아이콘\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type2?customCss=%0A.IBMain%20.IBTimePickerLeft%2C%20.IBMain%20.IBDatesLeft%2C%20.IBMain%20.IBTimePickerRight%2C%20.IBMain%20.IBDatesRight%2C%20.IBMain%20.IBDateTop%2C%20.IBMain%20.IBDatesTop%2C%20.IBMain%20.IBDateBottom%2C%20.IBMain%20.IBDatesBottom%20%7B%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI%2BIDxwYXRoIGQ9Ik0yNTYsMEMxMTQuNiwwLDAsMTE0LjYsMCwyNTZzMTE0LjYsMjU2LDI1NiwyNTZzMjU2LTExNC42LDI1Ni0yNTZTMzk3LjQsMCwyNTYsMHogTTI1Niw0NjkuMyBjLTExNy44LDAtMjEzLjMtOTUuNS0yMTMuMy0yMTMuM2MwLTExNy44LDk1LjUtMjEzLjMsMjEzLjMtMjEzLjNjMTE3LjgsMCwyMTMuMyw5NS41LDIxMy4zLDIxMy4zIEM0NjkuMywzNzMuOCwzNzMuOCw0NjkuMywyNTYsNDY5LjN6IE0yNzcuMyw4NS4zaC00Mi43djE5MkgzODR2LTQyLjdIMjc3LjNWODUuM3oiPjwvcGF0aD4gPC9nPjwvc3ZnPg%3D%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a>"
        },
        "url": "docs/styleGuide/col-type.html"
      },
      {
        "cid": 968,
        "sid": "row-type",
        "name": "row-type",
        "label": "행의 유형에 따른 class 적용",
        "data": {
          "body": "## 소계, 합계 행 합계 행은 `options.Def.FormulaRow`를 통해 제어가 가능합니다. ```javascript var OPT = { Def: { FormulaRow: { ... } } } ``` ### <strong>.IBFormulaRow, .IBFormulaRow *</strong> `.IBFormulaRow, .IBFormulaRow *`은 Formula 행을 관리하는 클래스입니다. css보다 `options.Def.Formula`의 설정이 우선적으로 적용됩니다. ```css .IBFormulaRow, .IBFormulaRow * { /* 배경색 적용 */ background-color: #d8f2dd; /* 글자색 적용 */ color: tomato; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 FormulaRow (합계행) ![기본 테마의 FormulaRow](/assets/imgs/styleguide_formularow_default.png \"기본 테마의 FormulaRow\")|커스텀 FormulaRow ![커스텀 FormulaRow 적용](/assets/imgs/styleguide_formularow_custom.png \"커스텀 FormulaRow 적용\")| <mark>소계와 누계 행은 css를 통해 관리되는 것이 아니라, 시트의 기능을 통해 관리됩니다.</mark> 소계와 누계행은 `Def.SubSum`을 통해 제어가 가능하며, [makeSubTotal func](/docs/funcs/core/make-sub-total)에서 `color`속성을 통해 **소계행의 배경색**을, `cumulateColor`속성을 통해 **누계행의 배경색**을 설정하여 사용하실 수 있습니다. ```javascript var OPT = { Def: { SubSum: { ... } } } ``` ```javascript sheet.makeSubTotal([ { stdCol: 'sPolicy', sumCols: 'A|B|C|D', color: '#dbe2eb', // 소계행 배경색 cumulateColor: '#b2c4d9', // 누계행 배경색 captionCol: [ { col: 'sPolicy', val: '%s: %col', cumVal: '%s: %col', span: 3 } ], showCumulate: 1, position: 'bottom' } ]); ``` 기본 테마의 소계/누계 행 ![기본 테마의 소계/누계 행](/assets/imgs/styleguide_subtotal_default.png \"기본 테마의 소계/누계 행\") 커스텀 소계/누계 행 ![커스텀 소계/누계 행 적용](/assets/imgs/styleguide_subtotal_custom.png \"커스텀 소계/누계 행 적용\") * * * ## 그룹 행 <mark>그룹 행은 css를 통해 관리되는 것이 아니라, 시트의 기능을 통해 관리됩니다.</mark> 그룹 행은 `options.Def.Group`을 통해 제어가 가능합니다. ```javascript var OPT = { Def: { Group: { ... } } } ``` * * * ## 필터행 <mark>필터 행은 css를 통해 관리되는 것이 아니라, 시트의 기능을 통해 관리됩니다.</mark> 필터 행은 `options.Filter`를 통해 제어가 가능합니다. ```javascript var OPT = { Filter: { ... } } ```"
        },
        "url": "docs/styleGuide/row-type.html"
      },
      {
        "cid": 969,
        "sid": "selection",
        "name": "selection",
        "label": "Focus, Hover, Select에 따른 스타일 적용",
        "data": {
          "body": "## 포커스 영역 시트에서 Focus 시, Focus 된 셀은 FocusCell로, 해당 행에서 그 외의 영역은 FocusRow로 나뉘어집니다. ### **.IBFocusCellBorder** `.IBFocusCellBorder`은 Focus 된 Cell의 Border를 관리하는 클래스입니다. ```css .IBFocusCellBorder { /* border 색상 변경 */ border: 2px solid #ec5151; } ``` 기본 테마의 Focus 행 ![기본 테마의 Focus 행](/assets/imgs/styleguide_focusrow_default.png \"기본 테마의 Focus 행\") 커스텀 Focus Cell Border ![커스텀 Focus Cell Border 적용](/assets/imgs/styleguide_forcusrow_cell_custom.png \"커스텀 Focus Cell Border 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#focus?customCss=%0A.IBFocusCellBorder%20%7B%0A%20%20%2F*%20border%20%EC%83%89%EC%83%81%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20border%3A%202px%20solid%20%23ec5151%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBFocusRowBackground** `.IBFocusRowBackground`은 Focus 된 행에 배경색을 관리하는 클래스입니다. ```css .IBFocusRowBackground { /* 포커스 행 배경색 변경 */ background-color: #ba37e333; } ``` 기본 테마의 Focus 행 ![기본 테마의 Focus 행](/assets/imgs/styleguide_focusrow_default.png \"기본 테마의 Focus 행\") 커스텀 Focus Row Background ![커스텀 Focus Row Background 적용](/assets/imgs/styleguide_forcusrow_background_custom.png \"커스텀 Focus Row Background 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#focus?customCss=%0A.IBFocusRowBackground%20%7B%0A%20%20%2F*%20%ED%8F%AC%EC%BB%A4%EC%8A%A4%20%ED%96%89%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-color%3A%20%23ba37e333%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBFocusRowBorder** `.IBFocusRowBorder`은 Focus 된 행에 출력 되는 Border를 관리하는 클래스입니다. ```css .IBFocusRowBorder { /* border 두께 색상 변경 */ border: 2px solid #ff8500; } ``` 기본 테마의 Focus 행 ![기본 테마의 Focus 행](/assets/imgs/styleguide_focusrow_default.png \"기본 테마의 Focus 행\") 커스텀 Focus Row Border ![커스텀 Focus Row Border 적용](/assets/imgs/styleguide_forcusrow_border_custom.png \"커스텀 Focus Row Border 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#focus?customCss=%0A.IBFocusRowBorder%20%7B%0A%20%20%2F*%20border%20%EC%84%A0%20%EB%91%90%EA%BB%98%20%EB%B3%80%EA%B2%BD%20%EB%B0%8F%20%EC%83%89%EC%83%81%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20border%3A%202px%20solid%20%23ff8500%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> * * * ## Hover 행, 셀 시트에서 Hover 시, Hover 된 셀은 HoverCell로, 해당 행에서 그 외의 영역은 HoverRow로 나뉘어집니다. ### **.IBColorHoveredCell** `.IBColorHoveredCell`은 Hover 된 셀의 배경색을 관리하는 클래스입니다. 시트 생성 시점에 해당 클래스의 정보를 읽어 Hover 된 셀의 배경색에 적용됩니다. 시트 생성 이후에 해당 클래스를 변경하여도 색상이 바로 적용되지는 않습니다. 예제에서는 확인을 위해 해당 셀에 해당 클래스를 추가하였습니다. ```css .IBColorHoveredCell { /* 배경색 변경 */ background-color: #ffaffb !important; } ``` 기본 테마의 Hover 행 ![기본 테마의 Hover 행](/assets/imgs/styleguide_hover_default.png \"기본 테마의 Hover 행\") 커스텀 Hover Cell Background ![커스텀 Hover Cell Background 적용](/assets/imgs/styleguide_hover_cell_custom.png \"커스텀 Hover Cell Background 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#focus?customCss=%0A.IBColorHoveredCell%20%7B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-color%3A%20%23ffaffb%20!important%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBHoverCellBorder** `.IBHoverCellBorder`은 Hover 된 셀의 Border를 관리하는 클래스입니다. ```css .IBHoverCellBorder { /* border 두께 및 색상 변경 */ border: 2px solid #f81313; } ``` 기본 테마의 Hover 행 ![기본 테마의 Hover 행](/assets/imgs/styleguide_hover_default.png \"기본 테마의 Hover 행\") 커스텀 Hover Cell Border ![커스텀 Hover Cell Border 적용](/assets/imgs/styleguide_hover_cell_boder_custom.png \"커스텀 Hover Cell Border 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#focus?customCss=%0A.IBHoverCellBorder%20%7B%0A%20%20%2F*%20border%20%EB%91%90%EA%BB%98%20%EB%B0%8F%20%EC%83%89%EC%83%81%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20border%3A%202px%20solid%20%23f81313%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBHoverRowBackground** `.IBHoverRowBackground`은 Hover 된 행의 배경색을 관리하는 클래스입니다. ```css .IBHoverRowBackground { /* 배경색 변경 */ background: #5a19ff1a; } ``` 기본 테마의 Hover 행 ![기본 테마의 Hover 행](/assets/imgs/styleguide_hover_default.png \"기본 테마의 Hover 행\") 커스텀 Hover Row Background ![커스텀 Hover Row Background 적용](/assets/imgs/styleguide_hover_row_background_custom.png \"커스텀 Hover Row Background 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#focus?customCss=%0A.IBHoverRowBackground%20%7B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background%3A%20%235a19ff1a%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBHoverRowBorder** `.IBHoverRowBorder`은 Hover 된 행에 출력 되는 Border를 관리하는 클래스입니다. ```css .IBHoverRowBorder { /* border 두께 및 색상 변경 */ border: 2px solid #ae59ff; } ``` 기본 테마의 Hover 행 ![기본 테마의 Hover 행](/assets/imgs/styleguide_hover_default.png \"기본 테마의 Hover 행\") 커스텀 Hover Row Border ![커스텀 Hover Row Border 적용](/assets/imgs/styleguide_hover_row_border_custom.png \"커스텀 Hover Border Background 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#focus?customCss=%0A.IBHoverRowBorder%20%7B%0A%20%20%2F*%20border%20%EB%91%90%EA%BB%98%20%EB%B0%8F%20%EC%83%89%EC%83%81%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20border%3A%202px%20solid%20%23ae59ff%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> * * * ## 선택(Select) 영역 ### **.IBColorSelected,.IBColorSelectedCell** `.IBColorSelected,.IBColorSelectedCell`은 시트 생성 시점에 해당 클래스의 정보를 읽어 선택(Selct)된 영역에 해당하는 셀에 배경색을 적용됩니다. <mark>시트 생성 이후에 해당 클래스를 변경하여도 색상이 바로 적용되지는 않습니다.</mark> 예제에서는 확인을 위해 해당 셀에 해당 클래스를 추가하였습니다. ```css .IBColorSelected,.IBColorSelectedCell { /* 배경색 변경 */ background-color: #dcbdff; } ``` 기본 테마의 Selected ![기본 테마의 Selected](/assets/imgs/styleguide_select_default.png \"기본 테마의 Selected\") 커스텀 Selected ![커스텀 Selected 적용](/assets/imgs/styleguide_select_custom.png \"커스텀 Selected 적용\") <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#focus?customCss=%0A.IBColorSelected%2C.IBColorSelectedCell%20%7B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-color%3A%20%23dcbdff%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a>"
        },
        "url": "docs/styleGuide/selection.html"
      },
      {
        "cid": 963,
        "sid": "etc",
        "name": "etc",
        "label": "기타 스타일 적용",
        "data": {
          "body": "## CSS가 아니라 제품 기능으로 적용되는 스타일 [ColorState cfg](/docs/props/cfg/color-state) 설정에 따라, 추가/수정/삭제 된 행에 배경색과, 추가/삭제 된 열에 대한 배경색, 수정된 셀에 대한 배경색, 수정 불가([CanEdit cell](/docs/props/cell/can-edit))의 속성이 `false`인 셀에 대한 배경색, Focus 불가([CanFocus cell](/docs/props/cell/can-focus))의 속성이 `false`인 셀에 글자색 그리고 오류가 있는 셀에 대한 배경색이 적용될 수 있습니다. 위의 색상들은 <mark>시트 생성 시점에 읽어서 적용되기 때문에 생성 이후 css를 변경하더라도 적용되지 않습니다.</mark> ### **.IBColorAdded** `.IBColorAdded`는 추가된 행과 열에 적용되는 배경색을 관리하는 클래스입니다. ![행 추가](/assets/imgs/styleguide_etc_func_added.png \"행 추가\") ### **.IBColorChanged** `.IBColorChanged`는 수정된 행에 적용되는 배경색을 관리하는 클래스입니다. ![행 수정](/assets/imgs/styleguide_etc_func_changed.png \"행 수정\") ### **.IBColorDeleted** `.IBColorDeleted`는 삭제된 행과 열에 적용되는 배경색을 관리하는 클래스입니다. ![행 삭제](/assets/imgs/styleguide_etc_func_deleted.png \"행 삭제\") ### **.IBColorChangedCell** `.IBColorChangedCell`는 수정된 셀에 적용되는 배경색을 관리하는 클래스입니다. ![셀 수정](/assets/imgs/styleguide_etc_func_changedcell.png \"셀 수정\") ### **.IBColorReadOnly** `.IBColorReadOnly`는 수정 불가인 셀에 적용되는 배경색을 관리하는 클래스입니다. ![수정 불가](/assets/imgs/styleguide_etc_func_readonly.png \"수정 불가\") ### **.IBColorNoFocus** `.IBColorNoFocus`는 Focus가 적용 불가인 셀에 적용되는 글자색을 관리하는 클래스입니다. ![Focus 불가](/assets/imgs/styleguide_etc_func_nofocus.png \"Focus 불가\") ### **.IBColorError** `.IBColorError`는 에러가 발생한 셀에 적용되는 글자색을 관리하는 클래스입니다. ![셀 에러](/assets/imgs/styleguide_etc_func_error.png \"셀 에러\")"
        },
        "url": "docs/styleGuide/etc.html"
      },
      {
        "cid": 959,
        "sid": "calendar",
        "name": "calendar",
        "label": "달력",
        "data": {
          "body": "## 달력 ### **.IBPickMY** `.IBPickMY`은 이전 달, 다음 달 그리고 년/월의 문자열 및 년/월, 월/일의 달력 변환 기능이 있는 영역을 관리하는 클래스입니다. ```css .IBPickMY{ /* 배경색 변경 */ background: #000000; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 달력 상단 영역 ![커스텀 달력 상단 영역 적용](/assets/imgs/styleguide_date_md_my_custom.png \"커스텀 달력 상단 영역 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickMY%7B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background%3A%20%23000000%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickBL** `.IBPickBL`은 이전 달로 이동하는 버튼의 이미지를 관리하는 클래스입니다. ```css .IBPickBL { /* 이미지 및 크기 변경 */ background: no-repeat center 5px/20px url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNzA3MSAxNC43MDcxQzEyLjMxNjYgMTUuMDk3NiAxMS42ODM0IDE1LjA5NzYgMTEuMjkyOSAxNC43MDcxTDYuMjkyODkgOS43MDcxMUM1LjkwMjM3IDkuMzE2NTggNS45MDIzNyA4LjY4MzQyIDYuMjkyODkgOC4yOTI4OUM2LjY4MzQyIDcuOTAyMzcgNy4zMTY1OCA3LjkwMjM3IDcuNzA3MTEgOC4yOTI4OUwxMiAxMi41ODU4TDE2LjI5MjkgOC4yOTI4OUMxNi42ODM0IDcuOTAyMzcgMTcuMzE2NiA3LjkwMjM3IDE3LjcwNzEgOC4yOTI4OUMxOC4wOTc2IDguNjgzNDIgMTguMDk3NiA5LjMxNjU4IDE3LjcwNzEgOS43MDcxMUwxMi43MDcxIDE0LjcwNzFaIiBmaWxsPSIjMDAwMDAwIi8+DQo8L3N2Zz4=) #FFFFFF; transform: rotate(90deg) translate(5px, -5px); width: 25px; height: 25px; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 이전달 버튼 ![커스텀 이전달 버튼 적용](/assets/imgs/styleguide_date_md_bl_custom.png \"커스텀 이전달 버튼 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickBL%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EB%B0%8F%20%ED%81%AC%EA%B8%B0%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background%3A%20no-repeat%20center%205px%2F20px%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNzA3MSAxNC43MDcxQzEyLjMxNjYgMTUuMDk3NiAxMS42ODM0IDE1LjA5NzYgMTEuMjkyOSAxNC43MDcxTDYuMjkyODkgOS43MDcxMUM1LjkwMjM3IDkuMzE2NTggNS45MDIzNyA4LjY4MzQyIDYuMjkyODkgOC4yOTI4OUM2LjY4MzQyIDcuOTAyMzcgNy4zMTY1OCA3LjkwMjM3IDcuNzA3MTEgOC4yOTI4OUwxMiAxMi41ODU4TDE2LjI5MjkgOC4yOTI4OUMxNi42ODM0IDcuOTAyMzcgMTcuMzE2NiA3LjkwMjM3IDE3LjcwNzEgOC4yOTI4OUMxOC4wOTc2IDguNjgzNDIgMTguMDk3NiA5LjMxNjU4IDE3LjcwNzEgOS43MDcxMUwxMi43MDcxIDE0LjcwNzFaIiBmaWxsPSIjMDAwMDAwIi8%2BDQo8L3N2Zz4%3D)%20%23FFFFFF%3B%0A%20%20transform%3A%20rotate(90deg)%20translate(5px%2C%20-5px)%3B%0A%20%20width%3A%2025px%3B%0A%20%20height%3A%2025px%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickBR** `.IBPickBR`은 다음 달로 이동하는 버튼의 이미지를 관리하는 클래스입니다. ```css .IBPickBR { /* 이미지 및 크기 변경 */ background: no-repeat center 5px/20px url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNzA3MSAxNC43MDcxQzEyLjMxNjYgMTUuMDk3NiAxMS42ODM0IDE1LjA5NzYgMTEuMjkyOSAxNC43MDcxTDYuMjkyODkgOS43MDcxMUM1LjkwMjM3IDkuMzE2NTggNS45MDIzNyA4LjY4MzQyIDYuMjkyODkgOC4yOTI4OUM2LjY4MzQyIDcuOTAyMzcgNy4zMTY1OCA3LjkwMjM3IDcuNzA3MTEgOC4yOTI4OUwxMiAxMi41ODU4TDE2LjI5MjkgOC4yOTI4OUMxNi42ODM0IDcuOTAyMzcgMTcuMzE2NiA3LjkwMjM3IDE3LjcwNzEgOC4yOTI4OUMxOC4wOTc2IDguNjgzNDIgMTguMDk3NiA5LjMxNjU4IDE3LjcwNzEgOS43MDcxMUwxMi43MDcxIDE0LjcwNzFaIiBmaWxsPSIjMDAwMDAwIi8+DQo8L3N2Zz4=) #FFFFFF; transform: rotate(-90deg) translate(-5px, -5px); width: 25px; height: 25px; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 다음달 버튼 ![커스텀 다음달 버튼 적용](/assets/imgs/styleguide_date_md_br_custom.png \"커스텀 다음달 버튼 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickBR%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EB%B0%8F%20%ED%81%AC%EA%B8%B0%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background%3A%20no-repeat%20center%205px%2F20px%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNzA3MSAxNC43MDcxQzEyLjMxNjYgMTUuMDk3NiAxMS42ODM0IDE1LjA5NzYgMTEuMjkyOSAxNC43MDcxTDYuMjkyODkgOS43MDcxMUM1LjkwMjM3IDkuMzE2NTggNS45MDIzNyA4LjY4MzQyIDYuMjkyODkgOC4yOTI4OUM2LjY4MzQyIDcuOTAyMzcgNy4zMTY1OCA3LjkwMjM3IDcuNzA3MTEgOC4yOTI4OUwxMiAxMi41ODU4TDE2LjI5MjkgOC4yOTI4OUMxNi42ODM0IDcuOTAyMzcgMTcuMzE2NiA3LjkwMjM3IDE3LjcwNzEgOC4yOTI4OUMxOC4wOTc2IDguNjgzNDIgMTguMDk3NiA5LjMxNjU4IDE3LjcwNzEgOS43MDcxMUwxMi43MDcxIDE0LjcwNzFaIiBmaWxsPSIjMDAwMDAwIi8%2BDQo8L3N2Zz4%3D)%20%23FFFFFF%3B%0A%20%20transform%3A%20rotate(-90deg)%20translate(-5px%2C%20-5px)%3B%0A%20%20width%3A%2025px%3B%0A%20%20height%3A%2025px%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickMYDown** `.IBPickMYDown`은 년/월 달력으로 변경하는 버튼의 이미지를 관리하는 클래스입니다. ```css .IBPickMYDown { /* 이미지 변경 */ background: no-repeat right/20px url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNzA3MSAxNC43MDcxQzEyLjMxNjYgMTUuMDk3NiAxMS42ODM0IDE1LjA5NzYgMTEuMjkyOSAxNC43MDcxTDYuMjkyODkgOS43MDcxMUM1LjkwMjM3IDkuMzE2NTggNS45MDIzNyA4LjY4MzQyIDYuMjkyODkgOC4yOTI4OUM2LjY4MzQyIDcuOTAyMzcgNy4zMTY1OCA3LjkwMjM3IDcuNzA3MTEgOC4yOTI4OUwxMiAxMi41ODU4TDE2LjI5MjkgOC4yOTI4OUMxNi42ODM0IDcuOTAyMzcgMTcuMzE2NiA3LjkwMjM3IDE3LjcwNzEgOC4yOTI4OUMxOC4wOTc2IDguNjgzNDIgMTguMDk3NiA5LjMxNjU4IDE3LjcwNzEgOS43MDcxMUwxMi43MDcxIDE0LjcwNzFaIiBmaWxsPSIjMDAwMDAwIi8+DQo8L3N2Zz4=); } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 년/월 달력으로 변경 버튼 ![커스텀 년/월 달력으로 변경 버튼 적용](/assets/imgs/styleguide_date_md_down_custom.png \"커스텀 년/월 달력으로 변경 버튼 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickMYDown%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EB%B3%80%EA%B2%BD%20*%2F%20%0A%20%20background%3A%20no-repeat%20right%2F20px%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNzA3MSAxNC43MDcxQzEyLjMxNjYgMTUuMDk3NiAxMS42ODM0IDE1LjA5NzYgMTEuMjkyOSAxNC43MDcxTDYuMjkyODkgOS43MDcxMUM1LjkwMjM3IDkuMzE2NTggNS45MDIzNyA4LjY4MzQyIDYuMjkyODkgOC4yOTI4OUM2LjY4MzQyIDcuOTAyMzcgNy4zMTY1OCA3LjkwMjM3IDcuNzA3MTEgOC4yOTI4OUwxMiAxMi41ODU4TDE2LjI5MjkgOC4yOTI4OUMxNi42ODM0IDcuOTAyMzcgMTcuMzE2NiA3LjkwMjM3IDE3LjcwNzEgOC4yOTI4OUMxOC4wOTc2IDguNjgzNDIgMTguMDk3NiA5LjMxNjU4IDE3LjcwNzEgOS43MDcxMUwxMi43MDcxIDE0LjcwNzFaIiBmaWxsPSIjMDAwMDAwIi8%2BDQo8L3N2Zz4%3D)%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBMain span** `.IBMain span`은 달력에서 년/월의 문자열이 출력 되는 영역을 관리하는 클래스입니다. ```css .IBMain span { /* 글자색 변경 */ color: #ffffff; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 년/월의 문자열 ![커스텀 년/월의 문자열 적용](/assets/imgs/styleguide_date_md_span_custom.png \"커스텀 년/월의 문자열 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBMain%20span%20%7B%0A%20%20%2F*%20%EA%B8%80%EC%9E%90%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20color%3A%20%23ffffff%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickRowW** `.IBPickRowW`은 요일이 출력 되는 영역을 관리하는 클래스입니다. ```css .IBPickRowW { /* 배경색 변경 */ background: #affffc; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 요일 영역 ![커스텀 요일 영역 적용](/assets/imgs/styleguide_date_md_week_row_custom.png \"커스텀 요일 영역 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickRowW%20%7B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background%3A%20%23affffc%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickWDN.IBPickSu** `.IBPickWDN.IBPickSu`은 월/일 달력에서 요일이 출력 되는 영역에서 일요일을 관리하는 클래스입니다. ```css .IBPickWDN.IBPickSu { /* 글자색 변경 */ color: #0043ff; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 요일 영역 중 일요일 ![커스텀 요일 영역 적용 중 일요일](/assets/imgs/styleguide_date_md_week_row_sun_custom.png \"커스텀 요일 영역 적용 중 일요일\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickWDN.IBPickSu%20%7B%0A%20%20%2F*%20%EA%B8%80%EC%9E%90%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20color%3A%20%230043ff%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickWDN.IBPickSa** `.IBPickWDN.IBPickSa`은 월/일 달력에서 요잉이 출력 되는 영역에서 토요일을 관리하는 클래스입니다. ```css .IBPickWDN.IBPickSa { /* 글자색 변경 */ color: #ec264b; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 요일 영역중 토요일 ![커스텀 요일 영역중 토요일 적용](/assets/imgs/styleguide_date_md_week_row_sat_custom.png \"커스텀 요일 영역중 토요일 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickWDN.IBPickSa%20%7B%0A%20%20%2F*%20%EA%B8%80%EC%9E%90%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20color%3A%20%23ec264b%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickSu, .IBPickSu button** `IBPickSu, .IBPickSu button`은 월/일 달력에서 날짜가 출력 되는 영역에서 일요일을 관리하는 클래스입니다. ```css .IBPickSu, .IBPickSu button { /* 글자색 변경 */ color: #0043ff; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 날짜 영역중 일요일 ![커스텀 날짜 영역중 일요일 적용](/assets/imgs/styleguide_date_md_date_row_sun_custom.png \"커스텀 날짜 영역중 일요일 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickSu%2C%20.IBPickSu%20button%20%7B%0A%20%20%2F*%20%EA%B8%80%EC%9E%90%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20color%3A%20%230043ff%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickSa, .IBPickSa button** `.IBPickSa, .IBPickSa button`은 월/일 달력에서 날짜가 출력 되는 영역에서 토요일을 관리하는 클래스입니다. ```css .IBPickSa, .IBPickSa button { /* 글자색 변경 */ color: #ec264b; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 날짜 영역중 토요일 ![커스텀 날짜 영역중 토요일 적용](/assets/imgs/styleguide_date_md_data_row_sat_custom.png \"커스텀 날짜 영역중 토요일 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickSa%2C%20.IBPickSa%20button%20%7B%0A%20%20%2F*%20%EA%B8%80%EC%9E%90%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20color%3A%20%23ec264b%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickOM, .IBPickOMNE, .IBPickOM button** `.IBPickOM, .IBPickOMNE, .IBPickOM button`은 월/일 달력에서 날짜가 출력 되는 영역에서 이번 달이 아닌 날짜를 관리하는 클래스입니다. ```css .IBPickOM, .IBPickOMNE, .IBPickOM button { /* 글자색 변경 */ color: #44baba } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 이번 달이 아닌 날짜 ![커스텀 이번 달이 아닌 날짜 적용](/assets/imgs/styleguide_date_non_thisMonth_custom.png \"커스텀 이번 달이 아닌 날짜 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickOM%2C%20.IBPickOMNE%2C%20.IBPickOM%20button%20%7B%0A%20%20%2F*%20%EA%B8%80%EC%9E%90%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20color%3A%20%2344baba%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickOM.IBPickSu, .IBPickOM.IBPickSu button** `.IBPickOM.IBPickSu, .IBPickOM.IBPickSu button`은 월/일 달력에서 날짜가 출력 되는 영역에서 이번 달이 아닌 날짜 중 일요일를 관리하는 클래스입니다. ```css .IBPickOM.IBPickSu, .IBPickOM.IBPickSu button { /* 글자색 변경 */ color: green; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 이번 달이 아닌 날짜 중 일요일 ![커스텀 이번 달이 아닌 날짜 중 일요일 적용](/assets/imgs/styleguide_date_non_thisMonth_sun_custom.png \"커스텀 이번 달이 아닌 날짜 중 일요일 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickOM.IBPickSu%2C%20.IBPickOM.IBPickSu%20button%20%7B%0A%20%20%2F*%20%EA%B8%80%EC%9E%90%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0Acolor%3A%20green%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickOM.IBPickSa, .IBPickOM.IBPickSa button** `.IBPickOM.IBPickSa, .IBPickOM.IBPickSa button`은 월/일 달력에서 날짜가 출력 되는 영역에서 이번 달이 아닌 날짜 중 토요일를 관리하는 클래스입니다. ```css .IBPickOM.IBPickSa, .IBPickOM.IBPickSa button { /* 글자색 변경 */ color: #6decd6; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 이번 달이 아닌 날짜 중 토요일 ![커스텀 이번 달이 아닌 날짜 중 토요일 적용](/assets/imgs/styleguide_date_non_thisMonth_sat_custom.png \"커스텀 이번 달이 아닌 날짜 중 토요일 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickOM.IBPickSa%2C%20.IBPickOM.IBPickSa%20button%20%7B%0A%20%20%2F*%20%EA%B8%80%EC%9E%90%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20color%3A%20%236decd6%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickSel, .IBPick2MSel, .IBPick2YSel** `.IBPickSel, .IBPick2MSel, .IBPick2YSel`은 선택된 날짜에 적용되는 클래스입니다. ```css .IBPickSel, .IBPick2MSel, .IBPick2YSel { /* 배경색 변경 */ background-color: #3ed736; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 날짜 선택 ![커스텀 날짜 선택 적용](/assets/imgs/styleguide_date_md_pick_custom.png \"커스텀 날짜 선택 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickSel%2C%20.IBPick2MSel%2C%20.IBPick2YSel%20%7B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-color%3A%20%233ed736%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickHover, .IBPick2MHover, .IBPick2YHover** `.IBPickHover, .IBPick2MHover, .IBPick2YHover`은 Hover된 날짜에 적용되는 클래스입니다. ```css .IBPickHover, .IBPick2MHover, .IBPick2YHover { /* 배경색 변경 */ background-color: #faaaaa; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 날짜 Hover ![커스텀 날짜 Hover 적용](/assets/imgs/styleguide_date_md_hover_custom.png \"커스텀 날짜 Hover 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickHover%2C%20.IBPick2MHover%2C%20.IBPick2YHover%20%7B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-color%3A%20%23faaaaa%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickNow** `.IBPickNow`은 월/일 달력에서 해당 일이 오늘인 경우 적용되는 클래스입니다. ```css .IBPickNow { /* 배경색 변경 */ background-color: #b1a5fd; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 달력 ![기본 테마의 달력](/assets/imgs/styleguide_date_md_default.png \"기본 테마의 달력\")|커스텀 오늘 날짜 ![커스텀 오늘 날짜 적용](/assets/imgs/styleguide_date_md_today_custom.png \"커스텀 오늘 날짜 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickNow%20%7B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-color%3A%20%23b1a5fd%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickMYUp** `.IBPickMYUp`은 월/일 달력으로 변경하는 버튼의 이미지를 관리하는 클래스입니다. ```css .IBPickMYUp { /* 이미지 변경 */ background: no-repeat right/20px url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNzA3MSAxNC43MDcxQzEyLjMxNjYgMTUuMDk3NiAxMS42ODM0IDE1LjA5NzYgMTEuMjkyOSAxNC43MDcxTDYuMjkyODkgOS43MDcxMUM1LjkwMjM3IDkuMzE2NTggNS45MDIzNyA4LjY4MzQyIDYuMjkyODkgOC4yOTI4OUM2LjY4MzQyIDcuOTAyMzcgNy4zMTY1OCA3LjkwMjM3IDcuNzA3MTEgOC4yOTI4OUwxMiAxMi41ODU4TDE2LjI5MjkgOC4yOTI4OUMxNi42ODM0IDcuOTAyMzcgMTcuMzE2NiA3LjkwMjM3IDE3LjcwNzEgOC4yOTI4OUMxOC4wOTc2IDguNjgzNDIgMTguMDk3NiA5LjMxNjU4IDE3LjcwNzEgOS43MDcxMUwxMi43MDcxIDE0LjcwNzFaIiBmaWxsPSIjMDAwMDAwIi8+DQo8L3N2Zz4=); } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 년월 달력 ![기본 테마의 년월 달력](/assets/imgs/styleguide_date_ym_default.png \"기본 테마의 년월 달력\")|커스텀 월/일 달력으로 변경 버튼 ![커스텀 월/일 달력으로 변경 적용](/assets/imgs/styleguide_date_ym_up_custom.png \"커스텀 월/일 달력으로 변경 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickMYUp%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background%3A%20no-repeat%20right%2F20px%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNzA3MSAxNC43MDcxQzEyLjMxNjYgMTUuMDk3NiAxMS42ODM0IDE1LjA5NzYgMTEuMjkyOSAxNC43MDcxTDYuMjkyODkgOS43MDcxMUM1LjkwMjM3IDkuMzE2NTggNS45MDIzNyA4LjY4MzQyIDYuMjkyODkgOC4yOTI4OUM2LjY4MzQyIDcuOTAyMzcgNy4zMTY1OCA3LjkwMjM3IDcuNzA3MTEgOC4yOTI4OUwxMiAxMi41ODU4TDE2LjI5MjkgOC4yOTI4OUMxNi42ODM0IDcuOTAyMzcgMTcuMzE2NiA3LjkwMjM3IDE3LjcwNzEgOC4yOTI4OUMxOC4wOTc2IDguNjgzNDIgMTguMDk3NiA5LjMxNjU4IDE3LjcwNzEgOS43MDcxMUwxMi43MDcxIDE0LjcwNzFaIiBmaWxsPSIjMDAwMDAwIi8%2BDQo8L3N2Zz4%3D)%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPick2BL** `.IBPick2BL`은 년/월 달력에서 이전 년도로 이동하는 버튼의 이미지에 적용되는 클래스입니다. ```css .IBPick2BL { /* 이미지 변경 */ background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+PHBhdGggZD0iTTEuMjkzLDEyLjcwN2ExLDEsMCwwLDEsMC0xLjQxNGw1LTVBMSwxLDAsMCwxLDcuNzA3LDcuNzA3TDQuNDE0LDExSDIyYTEsMSwwLDAsMSwwLDJINC40MTRsMy4yOTMsMy4yOTNhMSwxLDAsMSwxLTEuNDE0LDEuNDE0WiI+PC9wYXRoPjwvZz48L3N2Zz4=) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 년월 달력 ![기본 테마의 년월 달력](/assets/imgs/styleguide_date_ym_default.png \"기본 테마의 년월 달력\")|커스텀 이전 년도 버튼 ![커스텀 이전 년도 버튼 적용](/assets/imgs/styleguide_date_ym_2bl.png \"커스텀 이전 년도 버튼 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPick2BL%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI%2BPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI%2BPHBhdGggZD0iTTEuMjkzLDEyLjcwN2ExLDEsMCwwLDEsMC0xLjQxNGw1LTVBMSwxLDAsMCwxLDcuNzA3LDcuNzA3TDQuNDE0LDExSDIyYTEsMSwwLDAsMSwwLDJINC40MTRsMy4yOTMsMy4yOTNhMSwxLDAsMSwxLTEuNDE0LDEuNDE0WiI%2BPC9wYXRoPjwvZz48L3N2Zz4%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPick2BR** `.IBPick2BR`은 년/월 달력에서 다음 년도로 이동하는 버튼의 이미지에 적용되는 클래스입니다. ```css .IBPick2BR { /* 이미지 변경 */ background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+PHBhdGggZD0iTTE2LjcwNywxOC43MDdhMSwxLDAsMCwxLTEuNDE0LTEuNDE0TDE5LjU4NiwxM0gyYTEsMSwwLDAsMSwwLTJIMTkuNTg2TDE1LjI5Myw2LjcwN2ExLDEsMCwwLDEsMS40MTQtMS40MTRsNiw2YTEsMSwwLDAsMSwwLDEuNDE0WiI+PC9wYXRoPjwvZz48L3N2Zz4=) } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 년월 달력 ![기본 테마의 년월 달력](/assets/imgs/styleguide_date_ym_default.png \"기본 테마의 년월 달력\")|커스텀 다음 년도 버튼 ![커스텀 다음 년도 버튼 적용](/assets/imgs/styleguide_date_ym_2br.png \"커스텀 다음 년도 버튼 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPick2BR%20%7B%0A%20%20%2F*%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background-image%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI%2BPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI%2BPHBhdGggZD0iTTE2LjcwNywxOC43MDdhMSwxLDAsMCwxLTEuNDE0LTEuNDE0TDE5LjU4NiwxM0gyYTEsMSwwLDAsMSwwLTJIMTkuNTg2TDE1LjI5Myw2LjcwN2ExLDEsMCwwLDEsMS40MTQtMS40MTRsNiw2YTEsMSwwLDAsMSwwLDEuNDE0WiI%2BPC9wYXRoPjwvZz48L3N2Zz4%3D)%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPick2Footer** `.IBPick2Footer`은 달력의 하단 영역을 관리하는 클래스입니다. ```css .IBPick2Footer { /* 배경색 변경 */ background: #abff17; /* 여백 변경 */ padding: 10px 0px 10px 0px; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 년월 달력 ![기본 테마의 년월 달력](/assets/imgs/styleguide_date_ym_default.png \"기본 테마의 년월 달력\")|커스텀 달력 하단 영역> ![커스텀 달력 하단 영역 적용](/assets/imgs/styleguide_date_ym_footer_custom.png \"커스텀 달력 하단 영역 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPick2Footer%20%7B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background%3A%20%23abff17%3B%0A%20%20%2F*%20%EC%97%AC%EB%B0%B1%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20padding%3A%2010px%200px%2010px%200px%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a> ### **.IBPickButton** `.IBPickButton`은 달력의 하단 영역에 있는 버튼을 관리하는 클래스입니다. ```css .IBPickButton{ /* 배경색 변경 */ background: orange; } ``` |기본 테마|커스텀 적용| |-----|-----| |기본 테마의 년월 달력 ![기본 테마의 년월 달력](/assets/imgs/styleguide_date_ym_default.png \"기본 테마의 년월 달력\")|커스텀 달력 하단 영역 버튼 ![커스텀 달력 하단 영역 버튼 적용](/assets/imgs/styleguide_date_ym_footer_button_custom.png \"커스텀 달력 하단 영역 버튼 적용\")| <a target=\"_blank\" href=\"https://www.ibsheet.com/v8/cssguide/index.html#type?customCss=%0A.IBPickButton%7B%0A%20%20%2F*%20%EB%B0%B0%EA%B2%BD%EC%83%89%20%EB%B3%80%EA%B2%BD%20*%2F%0A%20%20background%3A%20orange%3B%0A%7D%0A\"><b>![확인하기](/assets/imgs/approval.png)확인하기</b></a>"
        },
        "url": "docs/styleGuide/calendar.html"
      },
      {
        "cid": 966,
        "sid": "icon-3",
        "name": "icon",
        "label": "기타 아이콘",
        "data": {
          "body": "## 필터링 아이콘 |이미지|클래스|설명| |-----|-----|-----| |![기본 테마의 필터 사용 안함](/assets/imgs/Filter0.png \"기본 테마의 필터 사용 안함\")|**.IBFilter0Left, .IBFilter0Right, .IBFilter0Menu**|필터링 기능을 `사용 안함`의 이미지를 관리하는 클래스입니다. 모든 type에서 공통적으로 사용됩니다.| |![기본 테마의 필터 같음](/assets/imgs/Filter1.png \"기본 테마의 필터 같음\")|**.IBFilter1Left, .IBFilter1Right, .IBFilter1Menu**|필터링 기능 중 `같음`의 이미지를 관리하는 클래스입니다. 모든 type에서 공통적으로 사용됩니다.| |![기본 테마의 필터 같지 않음](/assets/imgs/Filter2.png \"기본 테마의 필터 같지 않음\")|**.IBFilter2Left, .IBFilter2Right, .IBFilter2Menu**|필터링 기능 중 `같지 않음`의 이미지를 관리하는 클래스입니다. 모든 type에서 공통적으로 사용됩니다.| |![기본 테마의 필터 작다](/assets/imgs/Filter3.png \"기본 테마의 필터 작다\")|**.IBFilter3Left, .IBFilter3Right, .IBFilter3Menu**|필터링 기능 중 `작다`의 이미지를 관리하는 클래스입니다. 숫자와 날짜형의 type에서 사용됩니다.| |![기본 테마의 필터 작거나 같다](/assets/imgs/Filter4.png \"기본 테마의 필터 작거나 같다\")|**.IBFilter4Left, .IBFilter4Right, .IBFilter4Menu**|필터링 기능 중 `작거나 같다`의 이미지를 관리하는 클래스입니다. 숫자와 날짜형의 type에서 사용됩니다.| |![기본 테마의 필터 크다](/assets/imgs/Filter5.png \"기본 테마의 필터 크다\")|**.IBFilter5Left, .IBFilter5Right, .IBFilter5Menu**|필터링 기능 중 `크다`의 이미지를 관리하는 클래스입니다. 숫자와 날짜형의 type에서 사용됩니다.| |![기본 테마의 필터 크거나 같다](/assets/imgs/Filter6.png \"기본 테마의 필터 크거나 같다\")|**.IBFilter6Left, .IBFilter6Right, .IBFilter6Menu**|필터링 기능 중 `크거나 같다`의 이미지를 관리하는 클래스입니다. 숫자와 날짜형의 type에서 사용됩니다.| |![기본 테마의 필터 앞글자 일치](/assets/imgs/Filter7.png \"기본 테마의 앞글자 일치\")|**.IBFilter7Left, .IBFilter7Right, .IBFilter7Menu**|필터링 기능 중 `앞글자 일치`의 이미지를 관리하는 클래스입니다. 문자형의 type에서 사용됩니다.| |![기본 테마의 필터 앞글자가 일치하지 않음](/assets/imgs/Filter8.png \"기본 테마의 앞글자가 일치하지 않음\")|**.IBFilter8Left, .IBFilter8Right, .IBFilter8Menu**|필터링 기능 중 `앞글자가 일치하지 않음`의 이미지를 관리하는 클래스입니다. 문자형의 type에서 사용됩니다.| |![기본 테마의 필터 뒷글자 일치](/assets/imgs/Filter9.png \"기본 테마의 뒷글자 일치\")|**.IBFilter9Left, .IBFilter9Right, .IBFilter9Menu**|필터링 기능 중 `뒷글자 일치`의 이미지를 관리하는 클래스입니다. 문자형의 type에서 사용됩니다.| |![기본 테마의 필터 뒷글자 일지하지 않음](/assets/imgs/Filter10.png \"기본 테마의 뒷글자 일지하지 않음\")|**.IBFilter10Left, .IBFilter10Right, .IBFilter10Menu**|필터링 기능 중 `뒷글자 일지하지 않음`의 이미지를 관리하는 클래스입니다. 문자형의 type에서 사용됩니다.| |![기본 테마의 필터 해당 글자 포함](/assets/imgs/Filter11.png \"기본 테마의 해당 글자 포함\")|**.IBFilter11Left, .IBFilter11Right, .IBFilter11Menu**|필터링 기능 중 `해당 글자 포함`의 이미지를 관리하는 클래스입니다. 문자형의 type에서 사용됩니다.| |![기본 테마의 필터 해당 글자 포함하지 않음](/assets/imgs/Filter12.png \"기본 테마의 해당 글자 포함하지 않음\")|**.IBFilter12Left, .IBFilter12Right, .IBFilter12Menu**|필터링 기능 중 `해당 글자 포함하지 않음`의 이미지를 관리하는 클래스입니다. 문자형의 type에서 사용됩니다.| |![기본 테마의 필터 상위 10](/assets/imgs/Filter13.png \"기본 테마의 상위 10\")|**.IBFilter13Left, .IBFilter13Right, .IBFilter13Menu**|필터링 기능 중 `상위 10`의 이미지를 관리하는 클래스입니다. 숫자형의 type에서 사용됩니다.| |![기본 테마의 필터 값 있음](/assets/imgs/Filter14.png \"기본 테마의 값 있음\")|**.IBFilter14Left, .IBFilter14Right, .IBFilter14Menu**|필터링 기능 중 `값 있음`의 이미지를 관리하는 클래스입니다. 모든 type에서 공통적으로 사용됩니다.| |![기본 테마의 필터 값 없음](/assets/imgs/Filter15.png \"기본 테마의 값 없음\")|**.IBFilter15Left, .IBFilter15Right, .IBFilter15Menu**|필터링 기능 중 `값 없음`의 이미지를 관리하는 클래스입니다. 모든 type에서 공통적으로 사용됩니다.| * * * ## Drag & Drop 아이콘 |이미지|클래스|설명| |-----|-----|-----| |![.IBDragColInsideTop아이콘](/assets/imgs/styleguide_etc_icon_DropColAbove.png \".IBDragColInsideTop아이콘\")|**.IBDragColInsideTop**|[CanColMove cfg](/docs/props/cfg/can-col-move)`를 1혹은 2로 설정 시, 컬럼 이동 시 같은 Section 내에서 이동 가능한 위치에 출력되는 아이콘 (Header행 상단)을 관리하는 클래스입니다.| |![.IBDragColInsideBottom 아이콘](/assets/imgs/styleguide_etc_icon_DropColBelow.png \".IBDragColInsideBottom 아이콘\")|**.IBDragColInsideBottom**|[CanColMove cfg](/docs/props/cfg/can-col-move)`를 1혹은 2로 설정 시, 컬럼 이동 시 같은 Section 내에서 이동 가능한 위치에 출력되는 아이콘 (Header행 하단)을 관리하는 클래스입니다.| |![.IBDragColOutsideTop 아이콘](/assets/imgs/styleguide_etc_icon_DropColOutAbove.png \".IBDragColOutsideTop 아이콘\")|**.IBDragColOutsideTop**|[CanColMove cfg](/docs/props/cfg/can-col-move)`를 1혹은 2로 설정 시, 컬럼 이동 시 다른 Section 으로 이동 시, 이동 가능한 위치에 출력되는 아이콘 (Header행 상단)을 관리하는 클래스입니다.| |![.IBDragColOutsideBottom 아이콘](/assets/imgs/styleguide_etc_icon_DropColOutBelow.png \".IBDragColOutsideBottom 아이콘\")|**.IBDragColOutsideBottom**|[CanColMove cfg](/docs/props/cfg/can-col-move)`를 1혹은 2로 설정 시, 컬럼 이동 시 다른 Section 으로 이동 시, 이동 가능한 위치에 출력되는 아이콘 (Header행 하단)을 관리하는 클래스입니다.| * * * ## Tree, Group 아이콘 |이미지|클래스|설명| |-----|-----|-----| |![.IBD0, .IBD0L 아이콘](/assets/imgs/styleguide_etc_icon_TreeDropNone.png \".IBD0, .IBD0L 아이콘\")|**.IBD0, .IBD0L**|트리 구조에서 [CanDrag cfg](/docs/props/cfg/can-drag)`를 설정 시, 드래그 앤 드롭 불가 아이콘을 관리하는 클래스입니다.| |![.IBD1, .IBD1L 아이콘](/assets/imgs/styleguide_etc_icon_TreeDropAbove.png \".IBD1, .IBD1L 아이콘\")|**.IBD1, .IBD1L**|트리 구조에서 [CanDrag cfg](/docs/props/cfg/can-drag)`를 설정 시, 드래그 앤 드롭 대상 행의 상단 행으로 추가/이동 아이콘을 관리하는 클래스입니다.| |![.IBD2, .IBD2L 아이콘](/assets/imgs/styleguide_etc_icon_TreeDropInto.png \".IBD2, .IBD2L 아이콘\")|**.IBD2, .IBD2L**|트리 구조에서 [CanDrag cfg](/docs/props/cfg/can-drag)`를 설정 시, 드래그 앤 드롭 대상 행의 하위 레벨로 추가/이동 아이콘을 관리하는 클래스입니다.| |![.IBD3, .IBD3L 아이콘](/assets/imgs/styleguide_etc_icon_TreeDropBelow.png \".IBD3, .IBD3L 아이콘\")|**.IBD3, .IBD3L**|트리 구조에서 [CanDrag cfg](/docs/props/cfg/can-drag)`를 설정 시, 드래그 앤 드롭 대상 행의 하단 행으로 추가/이동 아이콘을 관리하는 클래스입니다.| |![.IBC, IBCL, IB1C, 1B0C, IB1CL, IB0CL 아이콘](/assets/imgs/styleguide_etc_icon_TreeCollapse.png \".IBC, IBCL, IB1C, 1B0C, IB1CL, IB0CL 아이콘\")|**.IBC, IBCL, IB1C, 1B0C, IB1CL, IB0CL**|`.IBC, IBCL, IB1C, 1B0C, IB1CL, IB0CL`은 `트리`, `그룹` 기능 사용 시, 펼침 아이콘을 관리하는 클래스입니다.| |![.IBE, IBEL, IB1E, 1B0E, IB1EL, IB0EL 아이콘](/assets/imgs/styleguide_etc_icon_TreeExpand.png \".IBE, IBEL, IB1E, 1B0E, IB1EL, IB0EL 아이콘\")|**.IBE, IBEL, IB1E, 1B0E, IB1EL, IB0EL**|`트리`, `그룹` 기능 사용 시, 접힘 아이콘을 관리하는 클래스입니다.| |![.IBNC, IBNCR 아이콘](/assets/imgs/styleguide_etc_icon_TreeCollapseN.png \".IBNC, IBNCR 아이콘\")|**.IBNC, IBNCR**|`트리` 기능 사용 시, [NoTreeLines cfg](/docs/props/cfg/no-tree-lines) 설정 시 펼침 아이콘을 관리하는 클래스입니다.| |![.IBNE, IBNER 아이콘](/assets/imgs/styleguide_etc_icon_TreeExpandN.png \".IBNE, IBNER 아이콘\")|**.IBNE, IBNER**|`트리` 기능 사용 시, [NoTreeLines cfg](/docs/props/cfg/no-tree-lines) 설정 시 접힘 아이콘을 관리하는 클래스입니다.| * * * ## Group Header 아이콘 |이미지|클래스|설명| |-----|-----|-----| |![.IBGroupCancel 아이콘](/assets/imgs/styleguide_etc_icon_GroupCancel.png \".IBGroupCancel 아이콘\")|**.IBGroupCancel**|[Group cfg](/docs/props/cfg/group) 기능 사용 시, 그룹 헤더 행에서 그룹 상태인 컬럼의 그룹 해제 아이콘을 관리하는 클래스입니다.| * * * ## Paging 아이콘 |이미지|클래스|설명| |-----|-----|-----| |![.IBToolPagerFirst, IBToolPagerFirst1 아이콘](/assets/imgs/styleguide_etc_icon_PagerFirst.png \".IBToolPagerFirst, IBToolPagerFirst1 아이콘\")|**.IBToolPagerFirst, IBToolPagerFirst1**|`페이징` 기능 사용 시, `InfoRowConfig.Layout`중 `Paging`이나 `Paging2` 사용 시 페이지 네비게이션의 아이콘(첫 페이지로 이동)을 관리하는 클래스입니다.| |![.IBToolPagerPrev, .IBToolPagerPrev1 아이콘](/assets/imgs/styleguide_etc_icon_PagerPrev.png \".IBToolPagerPrev, .IBToolPagerPrev1 아이콘\")|**.IBToolPagerPrev, .IBToolPagerPrev1**|`페이징` 기능 사용 시, `InfoRowConfig.Layout`중 `Paging`이나 `Paging2` 사용 시 페이지 네비게이션의 아이콘(이전 페이지로 이동)을 관리하는 클래스입니다.| |![.IBToolPagerNext, .IBToolPagerNext1 아이콘](/assets/imgs/styleguide_etc_icon_PagerNext.png \".IBToolPagerNext, .IBToolPagerNext1 아이콘\")|**.IBToolPagerNext, .IBToolPagerNext1**|`페이징` 기능 사용 시, `InfoRowConfig.Layout`중 `Paging`이나 `Paging2` 사용 시 페이지 네비게이션의 아이콘(다음 페이지로 이동)을 관리하는 클래스입니다.| |![.IBToolPagerLast, .IBToolPagerLast1 아이콘](/assets/imgs/styleguide_etc_icon_PagerLast.png \".IBToolPagerLast, .IBToolPagerLast1 아이콘\")|**.IBToolPagerLast, .IBToolPagerLast1**|`페이징` 기능 사용 시, `InfoRowConfig.Layout`중 `Paging`이나 `Paging2` 사용 시 페이지 네비게이션의 아이콘(마지막 페이지로 이동)을 관리하는 클래스입니다.|"
        },
        "url": "docs/styleGuide/icon.html"
      }
    ]
  }
];
