중요 업데이트 알림사용해보기제품구매도움영상문의
RealGrid2v2.6.2

  • 튜토리얼
      • 인디케이터
      • 상태바
      • 체크바
      • 체크바와 데이터 필드의 연동
      • 컨텍스트 메뉴
      • 토스트 메시지 창
      • 커서
      • 열 고정하기
      • 행 고정하기
      • 선택
      • 다중 선택
      • 같은 값의 셀 생략하기
      • 셀 버튼
      • 팝업 메뉴 버튼
      • 셀 병합
      • Lookup 컬럼
      • Lookup 트리
      • 툴팁
      • 그룹헤더 툴팁
      • 화면 표시값 변경하기
      • Place Holder
      • 컬럼 만들기
      • 컬럼 속성 동적 변경하기(visible, editable)
      • 컬럼 너비 자동 조정
      • 데이터 정렬
      • 컬럼 이동
      • 자동 필터링
      • 데이터 필터링
      • 컬럼 레이아웃(컬럼 그룹)
      • 컬럼 레이아웃(컬럼 그룹) 속성 동적 변경하기
      • 컬럼 너비 조절
      • 그룹컬럼 접기
      • 셀 가로병합
      • 레이아웃(추가, 삭제)
      • 라인 편집기
      • 멀티라인 편집기
      • 숫자 편집기
      • 드롭다운 편집기
      • 날짜 편집기
      • 마스크 편집기
      • 입력제한 편집기
      • 행 추가/삽입
      • 행 삭제
      • 행 데이터 수정
      • 행/셀 데이터 가져오기
      • 셀 데이터 수정
      • 헤더 높이
      • 헤더 체크박스 사용
      • 컬럼 푸터
      • 컬럼 푸터 병합
      • 상단 요약 표시
      • 컬럼 헤더 HTML Template
      • 컬럼 레이아웃(그룹 컬럼) 헤더 HTML Template
      • 행 높이
      • 행 그룹핑
      • 그룹핑 API
      • 행 병합 그룹핑
      • 아이템 모델
      • 그리드 동적 높이
      • JSON 데이터 가져오기
      • XML 데이터 가져오기
      • 그리드 Lazy Loading 구현
      • 마스터 디테일 예
      • provider 공유하기
      • 데이터 타입
      • 불린 타입 필드
      • 날짜 타입 필드
      • Object 타입 필드
      • Subtypes
      • 롤백
      • 검색
      • 계산 필드
      • 그리드에서 페이징 처리 1
      • 그리드에서 페이징 처리 2
      • 행 Drag & Drop
      • Grid To Grid
      • 텍스트 렌더러
      • 체크 렌더러
      • 바 렌더러
      • 이미지 렌더러
      • 아이콘 렌더러
      • 도형 렌더러
      • 시그널 렌더러
      • 링크 렌더러
      • HTML 렌더러
      • 바코드 렌더러
      • 커스텀 렌더러 - 이미지버튼
      • 구글차트 연동
      • 하이차트 연동
      • 시리즈 컬럼
      • 스파크 컬럼
      • 행 상태
      • Undo / Redo
      • 복사하기/붙여넣기
      • 병합 일괄 수정
      • RealGrid2 스타일
      • 사용자 스타일 - 개요
      • 바디 영역 스타일
      • 헤더, 풋터, 상태바 스타일
      • 셀, 데이터 영역 스타일
      • 편집 영역 스타일
      • styleName 속성 및 콜백
      • 컬럼 동적 스타일
      • 행 동적 스타일
      • 셀 동적 스타일
      • RealGrid2 테마
      • 포커스 스타일
      • 엑셀 내보내기
      • 행 그룹된 그리드 내보내기
      • 여러 레이아웃으로 구성된 그리드 내보내기
      • 다중 그리드 Excel 내보내기
      • Excel문서에 제목 추가하기
      • 엑셀 스타일
      • 이미지 엑셀 내보내기
      • 사용자 지정 문자 출력
      • 엑셀 시트 보호
      • Mobile FormView
      • 대량 데이터 불러오기
      • 트리뷰
      • 트리 구현 - Array데이터
      • 트리 구현 - Object데이터
      • 트리 구현 - Xml데이터
      • 트리 노드 조작하기
      • 트리 아이콘 1
      • 트리 아이콘 2
      • 트리 이벤트
      • 트리 Lazy Loading
      • 트리 노드 정보
      • 사용자 지정 컬럼 유효성 검사
      • 사용자 지정 행 유효성 검사
      • 전체 유효성 검사
      • 유효성 검사 통과
      • 이벤트 발생 순서
      • 클릭 이벤트
      • 렌더링 완료 이벤트
      • 하이차트 연동 컬럼 선택
      • 하이차트 연동 컬럼 필터링
      • 하이차트 연동 행 선택
      • amchart 연동 체크 선택
      • amchart 연동 행 선택
      • 추천 설정
      • 필드와 컬럼 일괄 생성
      • SPAN(컬럼그룹)
      • 행 상태에 따른 특정 컬럼 편집 제어
      • CheckBar에서 자식 노드 연동하여 체크하기
      • Excel Import
      • Group Footer 표시여부 조작하기
      • 체크바와 관계된 팁
      • 상태바와 관계된 팁
      • 동적 에디터 변경
      • text타입 날짜 편집기
      • ColorPicker 연결
      • 파일 Drag and Drop
      • 셀 병합에서 텍스트를 상단으로 이동
      • 병합된 셀의 합계 계산
      • HEADER와 FOOTER에 여러줄로 표시하기
      • 행 삭제와 관계된 팁

Excel Import

Excel Import는 SheetJS 기능을 이용하여 처리할 수 있습니다. 엑셀 다운로드 후 해당 엑셀파일을 편집하여 Import 해보세요.

SheetJS에 대한 내용은 아래 링크를 참조하세요.https://github.com/SheetJS/js-xlsx

예제 1

Provider의 필드명과 엑셀의 컬럼명을 일치하여 사용하는 방법

Tip

  1. 엑셀 export시 리얼그리드의 footer는 제외하고 export하세요.(엑셀 import시 footer부분까지 가져오기 때문에 footer영역을 제외하는 코드가 필요해짐)
  2. 엑셀 import시 엑셀의 헤더명이 json 객체의 속성명이 되기 때문에 리얼그리드의 필드명을 한글로 맞춰주시는게 좋습니다.
<input type="file" name="excelFile" id="xlf"/>
$("#xlf").bind("change", handleXlsFile);

function excelExport() {
  gridView.exportGrid({
    type: "excel",
    target: "local",
    fileName: "gridExportSample.xlsx",
    footer: "hidden", 
    done: function () {  //내보내기 완료 후 실행되는 함수
        alert("done excel export")
    }
  });
}

function fixdata(data) {
  var o = "", l = 0, w = 10240;
  for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
  o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
  return o;
}

function handleXlsFile(e) {
  var files = e.target.files;
  var i, f;
  for (i = 0, f = files[i]; i != files.length; ++i) {
      var reader = new FileReader();
      var name = f.name;
      reader.onload = function (e) {
          var data = e.target.result;

          //var workbook = XLSX.read(data, { type: 'binary' });
          var arr = fixdata(data);
          workbook = XLSX.read(btoa(arr), { type: "base64", cellText: true, cellDates: true });

          process_wb(workbook);
          /* DO SOMETHING WITH workbook HERE */
      };
      //reader.readAsBinaryString(f);
      reader.readAsArrayBuffer(f);

  }
}

function process_wb(wb) {
  var output = "";

  output = to_json(wb);

  var sheetNames = Object.keys(output);

  if (sheetNames.length > 0) {
      var colsObj = output[sheetNames][0];

      if (colsObj) {
          dataProvider.fillJsonData(output, { rows: sheetNames[0] })
      }
  }
}

function to_json(workbook) {
  var result = {};
  workbook.SheetNames.forEach(function (sheetName) {
      var roa = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName], {rawNumbers: true});

      if (roa.length > 0) {
          result[sheetName] = roa;
      }
  });
  return result;
}

예제 2

Provider의 필드명은 영문으로 유지하고 엑셀의 컬럼명은 한글일때 사용하는 방법

Tip

  1. SheetJS를 사용하여 엑셀파일을 JSON데이터로 변환한 후 JSON데이터의 키를 Provider의 필드에 맞게 변경하는 방법. 예제에서는 ES6에서 제공되는 map 함수를 사용하였습니다.
<input type="file" name="excelFile" id="xlf"/>
$("#xlf").bind("change", handleXlsFile);

function excelExport() {
  gridView.exportGrid({
    type: "excel",
    target: "local",
    fileName: "gridExportSample.xlsx",
    footer: "hidden", 
    done: function () {  //내보내기 완료 후 실행되는 함수
        alert("done excel export")
    }
  });
}

function fixdata(data) {
  var o = "", l = 0, w = 10240;
  for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
  o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
  return o;
}

function handleXlsFile(e) {
  var files = e.target.files;
  var i, f;
  for (i = 0, f = files[i]; i != files.length; ++i) {
      var reader = new FileReader();
      var name = f.name;
      reader.onload = function (e) {
          var data = e.target.result;

          //var workbook = XLSX.read(data, { type: 'binary' });
          var arr = fixdata(data);
          workbook = XLSX.read(btoa(arr), { type: "base64", cellText: true, cellDates: true });

          process_wb(workbook);
          /* DO SOMETHING WITH workbook HERE */
      };
      //reader.readAsBinaryString(f);
      reader.readAsArrayBuffer(f);

  }
}

function process_wb(wb) {
  var output = "";
  output = to_json(wb);
  var sheetNames = Object.keys(output);

  if (sheetNames.length > 0) {
      var colsObj = output[sheetNames][0];

      if (colsObj) {
          var data = output[sheetNames];

          var mappedData = data.map(item => {
            return {
              KorName: item.이름,
              Gender: item.성별,
              Age: item.나이,
              Phone: item.전화번호,
              ProductId: item.제품번호,
              KorCountry: item.투자국가,
              OrderDate: item.주문일자,
              CardNumber: item.카드번호,
              Monetary: item.통화,
              StartDate: item.최초납입일,
              EndDate: item.종료일,
              ToMonth: item['납입 횟수'],
              Month: item['남은 횟수'],
              InterestRate: item.이율,
              SaveCost: item.납입금,
              SaveMaturity: item.만기금액
            };
          });

          //map 함수를 사용하지 않고 javascript for문으로 설정
          /*
          var mappedData = [];

          for(var i = 0; i < data.length; i++){
            mappedData.push({
              KorName: data[i].이름,
              Gender: data[i].성별,
              Age: data[i].나이,
              Phone: data[i].전화번호,
              ProductId: data[i].제품번호,
              KorCountry: data[i].투자국가,
              OrderDate: data[i].주문일자,
              CardNumber: data[i].카드번호,
              Monetary: data[i].통화,
              StartDate: data[i].최초납입일,
              EndDate: data[i].종료일,
              ToMonth: data[i]['납입 횟수'],
              Month: data[i]['남은 횟수'],
              InterestRate: data[i].이율,
              SaveCost: data[i].납입금,
              SaveMaturity: data[i].만기금액
            })
          }
          */


          dataProvider.fillJsonData(mappedData, {  })
      }
  }
}

function to_json(workbook) {
  var result = {};
  workbook.SheetNames.forEach(function (sheetName) {
      var roa = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName], {rawNumbers: true});

      if (roa.length > 0) {
          result[sheetName] = roa;
      }
  });
  return result;
}