[javascript] SlickGrid의 상태 저장 및 복원

01 Dec 2023

javascript

SlickGrid은 선택, 정렬, 필터링 등 다양한 상태를 저장하고 복원할 수있는 강력한 JavaScript 데이터 그리드 라이브러리입니다. 이 기능을 사용하면 페이지를 새로고침하거나 브라우저를 닫은 후에도 그리드의 상태를 유지할 수 있습니다. 이 글에서는 SlickGrid의 상태를 저장하고 복원하는 방법에 대해 알아보겠습니다.

상태 저장

SlickGrid의 상태를 저장하기 위해서는 Grid 객체의 getColumns() 및 getSortColumns() 메서드를 사용하여 열 및 정렬 상태를 가져와야합니다. 이 정보를 JavaScript 객체로 변환하여 로컬 스토리지에 저장할 수 있습니다. 다음은 상태를 저장하는 코드의 예입니다.

function saveGridState(grid) {
  var columns = grid.getColumns();
  var sortColumns = grid.getSortColumns();

  var state = {
    columns: columns,
    sortColumns: sortColumns
  };

  localStorage.setItem('gridState', JSON.stringify(state));
}

로컬 스토리지에 gridState라는 키로 상태를 저장합니다. 이 코드는 현재 열과 정렬 상태를 객체로 만들고, JSON.stringify()를 사용하여 문자열로 직렬화합니다. 그런 다음 localStorage.setItem() 메서드를 사용하여 상태를 로컬 스토리지에 저장합니다.

상태 복원

상태를 복원하기 위해서는 페이지가 로드될 때 로컬 스토리지에서 상태를 가져와야합니다. 이 상태를 JSON 문자열로부터 다시 JavaScript 객체로 변환하고, setColumns() 및 setSortColumns() 메서드를 사용하여 그리드의 열 및 정렬 상태를 복원합니다. 다음은 상태를 복원하는 코드의 예입니다.

function restoreGridState(grid) {
  var stateString = localStorage.getItem('gridState');
  
  if (stateString) {
    var state = JSON.parse(stateString);
    grid.setColumns(state.columns);
    grid.setSortColumns(state.sortColumns);
  }
}

로컬 스토리지에서 gridState 키를 사용하여 상태를 가져옵니다. 가져온 상태가 있으면 JSON.parse()를 사용하여 문자열을 JavaScript 객체로 변환합니다. 그렇지 않으면 무시하고 기본 상태로 그리드가 초기화됩니다.

예제 코드

아래는 SlickGrid 상태 저장 및 복원을 위한 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SlickGrid State Save/Restore Example</title>
  <link rel="stylesheet" href="slickgrid/slick.grid.css">
  <link rel="stylesheet" href="slickgrid/slick-default-theme.css">
</head>
<body>
  <div id="myGrid" style="width: 100%; height: 500px;"></div>

  <script src="jquery/jquery.min.js"></script>
  <script src="slickgrid/slick.core.js"></script>
  <script src="slickgrid/slick.grid.js"></script>
  
  <script>
    // 그리드 초기화 및 상태 복원
    $(function () {
      var grid;
      
      var columns = [
        {id: "title", name: "Title", field: "title"},
        {id: "duration", name: "Duration", field: "duration"},
        {id: "percentComplete", name: "% Complete", field: "percentComplete"}
      ];
  
      var options = {
        enableColumnReorder: false,
        enableSorting: true
      };
  
      grid = new Slick.Grid("#myGrid", [], columns, options);
  
      // 그리드 상태 복원
      restoreGridState(grid);
  
      // 그리드 상태 저장
      grid.onColumnsResized.subscribe(function () {
        saveGridState(grid);
      });
  
      grid.onSort.subscribe(function () {
        saveGridState(grid);
      });
      
      // 그리드 데이터
      var data = [
        {id: 1, title: "Task 1", duration: "5 days", percentComplete: 40},
        {id: 2, title: "Task 2", duration: "2 days", percentComplete: 80},
        {id: 3, title: "Task 3", duration: "1 day", percentComplete: 10}
      ];
  
      grid.setData(data);
      grid.render();
    });
  
    // 상태 저장 함수
    function saveGridState(grid) {
      var columns = grid.getColumns();
      var sortColumns = grid.getSortColumns();
  
      var state = {
        columns: columns,
        sortColumns: sortColumns
      };
  
      localStorage.setItem('gridState', JSON.stringify(state));
    }
  
    // 상태 복원 함수
    function restoreGridState(grid) {
      var stateString = localStorage.getItem('gridState');
  
      if (stateString) {
        var state = JSON.parse(stateString);
        grid.setColumns(state.columns);
        grid.setSortColumns(state.sortColumns);
      }
    }
  </script>
</body>
</html>

이 예제 코드를 사용하여 SlickGrid의 상태를 저장하고 복원할 수 있습니다. 그리드의 열 크기를 조정하거나 열의 정렬 상태를 변경하면 상태가 자동으로 저장되고 복원됩니다.

결론

SlickGrid의 상태 저장 및 복원 기능을 사용하면 사용자 정의 열 구성이나 정렬 상태 등 다양한 그리드 상태를 유지할 수 있습니다. 이를 통해 사용자 경험을 향상시킬 수 있고, 재사용 가능한 그리드 구성을 구현 할 수 있습니다.

더 많은 정보를 원한다면 SlickGrid 공식 문서를 참조하십시오.