Handsontable #

익숙한 스프레드시트 환경을 웹에서 사용할 수 있는 플러그인이다. 최초에는 일부 유료기능이 존재하는 형태였으나 최근에는 비상업적 용도로 사용할 경우 모든 기능을 사용할 수 있다.

var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  filters: true,
  dropdownMenu: true
});

data는 배열이나 키값 객체 형태로 넣어 표현한다.

SheetJS #

서버나 웹에서 모든 엑셀 형식 파일을 읽고 쓸 수 있는 플러그인이다. PRO 버전에서는 셀 스타일과 수식까지도 사용할 수 있다. 본 글에서는 소개하는 이유는 SheetJS에서 엑셀 파일 데이터를 읽어와 Handsontable에 데이터를 Import 할 수 있기 때문이다. 엑셀의 데이터를 클라이언트 단에서 JSON 형식으로 반환할 수 있다. 다만 웹 브라우저 호환성 이슈가 있어 다음의 코드처럼 분기하여 데이터를 읽어온다.

if(rABS){
    workbook = XLSX.read(data, {type: 'binary', cellDate: true, cellNF: false, cellText: false});
}else{
    workbook = XLSX.read(btoa(fixdata(data)), {type:'base64', cellDates: true, cellNF: false, cellText: false})
}

rABS 변수를 통해 브라우저별 read 함수를 달리 처리한다.

workbook.SheetNames.forEach(function(item, index, array) {
   var json = XLSX.utils.sheet_to_json(workbook.Sheets[item], {defval:"",dateNF : "YYYY-MM-DD HH:mm", raw: false});
})

JSON 타입으로 읽어온 엑셀 데이터를 이용하여 Handsontable 에서 로드가 가능하다.

Handsontable Validation #

플러그인 자체적으로도 기본 유효성 검사 항목들을 제공한다. 정규식을 이용하거나 custom function을 만들어 복잡한 유효성 검사 항목을 만들 수도 있다.

/** Handsontable Validation Error Messages**/
var emptyError = "필수 항목입니다.";
var collectionIdEmptyError = "자원제작 목록에 없는 시료번호입니다.";
var collectionIdError = "모든 자원이 제작이 되었습니다.";

/** Handsontable Validation Regular Expression**/
var destPositionReg = /(^[A-H]{1}[0]{1}[1-9]{1}$|^[A-H]{1}[1]{1}[0-2]{1}$)/;

/** Handsontable Validation **/
// 시료번호
var sourceReqValidator = function (value, callback) {
    //생략…
}

// Register an alias
Handsontable.validators.registerValidator('my.custom', sourceReqValidator);

var hot = new Handsontable(document.getElementById('container'), {
  data: someData,
  columns: [
    {
      validator: 'my.custom'
    }
  ]
});

참고 출처 #

• Handsontable
• SheetJS