[javascript] SlickGrid의 데이터 편집 및 저장

01 Dec 2023

javascript

SlickGrid은 웹 기반 데이터 그리드로, 데이터의 편집 및 저장 기능을 제공합니다. 이 글에서는 SlickGrid을 사용하여 데이터를 효율적으로 편집하고 저장하는 방법을 알아보겠습니다.

단일 셀 편집

SlickGrid은 기본적으로 셀마다 편집 기능을 제공합니다. 사용자가 셀을 클릭하면 해당 셀이 편집 모드로 전환되며, 사용자는 값을 수정할 수 있습니다. 편집이 완료되면 사용자가 Enter 키를 누르거나 포커스를 다른 곳으로 이동하면 변경된 값이 저장됩니다.

var grid;
var data = [];
var columns = [
  {
    id: "title",
    name: "Title",
    field: "title",
    editor: Slick.Editors.Text // 텍스트 편집기 사용
  },
  {
    id: "duration",
    name: "Duration",
    field: "duration",
    editor: Slick.Editors.Integer // 정수 편집기 사용
  },
  // 추가적인 컬럼 정의
];

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

$(function() {
  for (var i = 0; i < 100; i++) {
    data[i] = {
      id: i,
      title: "Task " + i,
      duration: Math.round(Math.random() * 100)
    };
  }

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

위 코드에서는 SlickGrid 인스턴스를 생성하고, 데이터와 컬럼을 지정하였습니다. editable 옵션을 true로 설정하여 셀 편집을 가능하게 하였습니다. editor 속성을 이용하여 각 컬럼의 데이터 타입에 맞는 편집기를 설정하였습니다.

전체 행 편집

SlickGrid은 단일 셀 뿐만 아니라 전체 행을 편집하는 기능도 제공합니다. 사용자가 전체 행을 클릭하면 해당 행의 모든 셀이 편집 모드로 전환되며, 사용자는 여러 셀의 값을 한번에 수정할 수 있습니다. 편집이 완료되면 사용자가 Enter 키를 누르거나 포커스를 다른 곳으로 이동하면 변경된 값이 저장됩니다.

var grid;
var data = [];
var columns = [
  {
    id: "title",
    name: "Title",
    field: "title",
    editor: Slick.Editors.Text // 텍스트 편집기 사용
  },
  {
    id: "duration",
    name: "Duration",
    field: "duration",
    editor: Slick.Editors.Integer // 정수 편집기 사용
  },
  // 추가적인 컬럼 정의
];

var options = {
  enableCellNavigation: true,
  editable: true,
  autoEdit: true // 전체 행 편집 활성화
};

$(function() {
  for (var i = 0; i < 100; i++) {
    data[i] = {
      id: i,
      title: "Task " + i,
      duration: Math.round(Math.random() * 100)
    };
  }

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

위 코드에서는 autoEdit 옵션을 true로 설정하여 전체 행 편집 기능을 활성화하였습니다. 이제 사용자가 행을 클릭하면 해당 행의 모든 셀이 편집 모드로 전환되어 수정할 수 있습니다.

SlickGrid의 데이터 편집 및 저장에 대한 내용을 알아보았습니다. SlickGrid은 이외에도 다양한 기능을 제공하므로 필요한 경우 공식 문서를 참고하시기 바랍니다.

참고 문서: SlickGrid 공식 문서