[javascript] SlickGrid의 셀 에디터 설정

01 Dec 2023

javascript

SlickGrid은 강력하고 유연한 JavaScript 라이브러리로, 대용량의 데이터를 표시하고 편집하기에 용이합니다. 이번 포스트에서는 SlickGrid의 셀 에디터를 설정하는 방법에 대해 살펴보겠습니다.

SlickGrid에서의 셀 에디터는 사용자가 표시된 데이터를 직접 편집할 수 있게 해줍니다. 다양한 유형의 셀 에디터를 사용할 수 있으며, 각 셀에 대해 필요한 에디터를 선택할 수 있습니다.

셀 에디터 생성

SlickGrid에서는 각 셀의 에디터를 생성하기 위해 slick.editors 객체를 사용합니다. 다음 예제는 간단한 텍스트 셀 에디터를 생성하는 방법을 보여줍니다:

var textEditor = function(args) {
  var $input;
  var defaultValue;

  this.init = function() {
    $input = $("<input type='text' class='editor-text' />")
      .appendTo(args.container)
      .on("keydown.nav", function(e) {
        if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
          e.stopImmediatePropagation();
        }
      })
      .focus()
      .select();
  };

  this.destroy = function() {
    $input.remove();
  };

  this.focus = function() {
    $input.focus();
  };

  this.getValue = function() {
    return $input.val();
  };

  this.setValue = function(val) {
    $input.val(val);
  };

  this.loadValue = function(item) {
    defaultValue = item[args.column.field] || "";
    $input.val(defaultValue);
    $input[0].defaultValue = defaultValue;
    $input.select();
  };

  this.serializeValue = function() {
    return $input.val();
  };

  this.applyValue = function(item, state) {
    item[args.column.field] = state;
  };

  this.isValueChanged = function() {
    return !($input.val() === "" && defaultValue === null) && ($input.val() !== defaultValue);
  };

  this.validate = function() {
    if (args.column.validator) {
      var validationResults = args.column.validator($input.val(), args);
      if (!validationResults.valid) {
        return validationResults;
      }
    }

    return {
      valid: true,
      msg: null
    };
  };

  this.init();
}

위의 예제에서 textEditor는 SlickGrid에서 사용할 텍스트 셀 에디터입니다. 각 메서드의 역할은 다음과 같습니다:

init(): 에디터를 초기화합니다. 에디터 DOM 요소를 생성하고 컨테이너에 추가합니다.
destroy(): 에디터를 제거합니다.
focus(): 에디터에 포커스를 줍니다.
getValue(): 에디터의 값을 가져옵니다.
setValue(val): 에디터에 값을 설정합니다.
loadValue(item): 에디터에 이전 값을 로드합니다.
serializeValue(): 에디터의 값을 직렬화합니다.
applyValue(item, state): 변경된 값을 적용합니다.
isValueChanged(): 값이 변경되었는지 확인합니다.
validate(): 값의 유효성을 검사합니다.

에디터 설정하기

SlickGrid의 각 열에 에디터를 설정하려면 columns 배열에서 editor 속성을 설정해야 합니다. 다음은 간단한 텍스트 에디터를 사용하는 열 설정 예제입니다:

var columns = [
  { id: "column1", name: "열 1", editor: textEditor },
  { id: "column2", name: "열 2", editor: textEditor }
];

위의 예제에서 textEditor는 앞서 정의한 텍스트 셀 에디터입니다. editor 속성에 해당 에디터를 설정하면 해당 열의 셀에 해당 에디터가 자동으로 적용됩니다.

셀 에디터 이벤트 처리

SlickGrid에서는 셀 에디터에서 발생하는 이벤트를 처리할 수 있습니다. 에디터에서 발생하는 이벤트를 처리하려면 slickgrid.onCellChange 이벤트 핸들러를 사용하면 됩니다. 아래 예제는 셀 에디터의 값을 변경할 때마다 로그에 값을 출력하는 예제입니다:

grid.onCellChange.subscribe(function(e, args) {
  var item = args.item;
  var column = args.grid.getColumns()[args.cell];

  console.log("변경된 값: " + item[column.field]);
});

결론

이번 포스트에서는 SlickGrid의 셀 에디터를 설정하는 방법에 대해 알아보았습니다. 셀 에디터를 사용하면 사용자가 데이터를 직접 편집할 수 있으므로 데이터 편집에 유용한 기능을 추가할 수 있습니다.

더 자세한 내용은 SlickGrid의 공식 문서를 참조하시기 바랍니다.

참고 자료:

SlickGrid 공식 문서