Excel Import

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

SheetJS에 대한 내용은 아래 링크를 참조하세요. https://github.com/SheetJS/js-xlsx (opens in a new tab)

예제 1

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

Tip

엑셀 export시 리얼그리드의 footer는 제외하고 export하세요.(엑셀 import시 footer부분까지 가져오기 때문에 footer영역을 제외하는 코드가 필요해짐)
엑셀 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

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;
}

CheckBar에서 자식 노드 연동하여 체크하기 Group Footer 표시여부 조작하기