[javascript] SlickGrid의 편집 기능

01 Dec 2023

javascript

SlickGrid은 웹 애플리케이션에서 데이터를 표시하고 편집할 수 있는 강력한 그리드 컴포넌트입니다. 이번 포스트에서는 SlickGrid의 편집 기능에 대해 알아보겠습니다.

1. 행 편집

SlickGrid은 편집 가능한 행을 제공하여 사용자가 데이터를 직접 수정할 수 있도록 합니다. 편집 가능한 행을 생성하려면 다음 단계를 따르면 됩니다.

var grid;
var data = [{ id: 1, name: "John", age: 25 }, { id: 2, name: "Jane", age: 30 }];

var columns = [
  { id: "id", name: "ID", field: "id", editor: Slick.Editors.Text },
  { id: "name", name: "Name", field: "name", editor: Slick.Editors.Text },
  { id: "age", name: "Age", field: "age", editor: Slick.Editors.Text }
];

var options = {
  editable: true,
  enableAddRow: true,
  enableCellNavigation: true
};

$(function () {
  grid = new Slick.Grid("#myGrid", data, columns, options);
});

위 코드에서 editable 옵션을 true로 설정하면 편집 가능한 행으로 초기화됩니다. enableAddRow 옵션을 true로 설정하면 사용자가 신규 행을 추가할 수 있습니다. enableCellNavigation 옵션은 키보드로 셀을 탐색하고 편집할 수 있는 기능을 활성화합니다.

2. 셀 편집

SlickGrid는 사용자가 특정 셀만 편집할 수 있도록 지원합니다. 이를 위해 각 컬럼에 editor 속성을 설정해야 합니다. 기본 텍스트 편집기(Slick.Editors.Text) 외에도 다양한 편집기를 사용할 수 있습니다.

var columns = [
  { id: "id", name: "ID", field: "id", editor: Slick.Editors.Text },
  { id: "name", name: "Name", field: "name", editor: Slick.Editors.Text },
  { id: "age", name: "Age", field: "age", editor: Slick.Editors.Integer }
];

위 예제에서 id와 name 컬럼은 텍스트 편집기를 사용하고, age 컬럼은 정수 편집기를 사용합니다.

3. 사용자 지정 편집기

SlickGrid은 텍스트 편집기 외에도 사용자가 직접 커스텀 편집기를 만들어 사용할 수 있습니다. 커스텀 편집기를 만들려면 Slick.Editors의 기본 클래스를 상속하고 loadValue, serializeValue, applyValue 메소드를 구현해야 합니다.

function CustomEditor(args) {
  var $input;
  var defaultValue;
  var scope = this;

  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.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();
}

위 코드는 사용자 지정 편집기의 예시입니다. 이를 사용하려면 컬럼 설정에서 editor: CustomEditor로 지정하면 됩니다.

마무리

SlickGrid의 편집 기능을 사용하면 웹 애플리케이션에서 간단하게 데이터를 편집할 수 있습니다. 행 편집과 셀 편집을 활용하여 사용자 지정 편집기를 만들어 다양한 요구사항을 충족할 수 있습니다.

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

References:

SlickGrid Editing