개발자's Life

[JavaScript] 대용량 데이터 처리 유용한 Slick Grid 사용하여 Tree Grid 만들기 본문

Developer Daily

[JavaScript] 대용량 데이터 처리 유용한 Slick Grid 사용하여 Tree Grid 만들기

Rowen Jobs 2023. 2. 27. 19:28
728x90
반응형

회사 업무에 속도 빠른 Grid 를 찾다가 Slick Grid 가 있는걸 알게 됬습니다. 

 

UI 가 조금 딱딱한 느낌이 있는 느낌이지만 몇십만건 테스트 결과 정말 아주 빨랐습니다. 

 

Table 형태로 그리지 않고 div 태그로 하나씩 다 그려줘서 그런지 진짜 속도 부분에서는 Top 인듯합니다.. 

 

GitHub : SlickGridGitHubLink

 

 

https://mleibman.github.io/SlickGrid/examples/example5-collapsing.html

 

SlickGrid example 5: Collapsing

 

mleibman.github.io

참고하셔서 사용하시면 됩니다. 

Demo 제공하여 어떠한 기능이고 Github 링크로 들어가서 셋팅 진행하시면 됩니다. 

 

Setting 

소스 다운 받아 해당 경로로 이동 시킨 후 경로 지정해주었습니다.

<head>
	<!-- CSS 셋팅 -->
    <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
    <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
    <link rel="stylesheet" href="examples.css" type="text/css"/>
</head>
<body>

	<!-- 필요 코드 작성-->
    
    <!-- 스크립트 셋팅 -->
    <script src="../lib/jquery-1.7.min.js"></script>
    <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
    <script src="../lib/jquery.event.drag-2.2.js"></script>

    <script src="../slick.core.js"></script>
    <script src="../slick.formatters.js"></script>
    <script src="../slick.editors.js"></script>
    <script src="../slick.grid.js"></script>
    <script src="../slick.dataview.js"></script>
</body>

이렇게 셋팅하게 되면 Tree Grid 데모처럼 사용할 수 있는 환경이 되었습니다. 

 

// 접고 - 펼치는 셋팅 포멧 함수
var TaskNameFormatter = function (row, cell, value, columnDef, dataContext) {
  value = value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
  var spacer = "<span style='display:inline-block;height:1px;width:" + (15 * dataContext["indent"]) + "px'></span>";
  var idx = dataView.getIdxById(dataContext.id);
  if (data[idx + 1] && data[idx + 1].indent > data[idx].indent) {
    if (dataContext._collapsed) {
      return spacer + " <span class='toggle expand'></span>&nbsp;" + value;
    } else {
      return spacer + " <span class='toggle collapse'></span>&nbsp;" + value;
    }
  } else {
    return spacer + " <span class='toggle'></span>&nbsp;" + value;
  }
};

// 필요 변수 선언 
var dataView;
var grid;
var data = [];

// 필요 컬럼 셋팅 - formatter 로 해당 컬럼의 데이터 원하는 형태로 개발 가능
// 에디터를 이용하여 어떠한 형태로 입력을 받을 지 셋팅 가능
var columns = [
  {id: "title", name: "Title", field: "title", width: 220, cssClass: "cell-title", formatter: TaskNameFormatter, editor: Slick.Editors.Text},
  {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text},
  {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
  {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date},
  {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date},
];

// 옵션 값에 따라 기능 사용 가능
var options = {
  editable: true,
  enableAddRow: true,
  enableCellNavigation: true,
  asyncEditorLoading: false
};

var percentCompleteThreshold = 0;
var searchString = "";

// 퍼센테이지 관리, 타이틀 관리 두 부분은 필요 없어 지울려다가 collapse 기능이 필요하여 사용중입니다. 
// 아래 dataview.setFilter 에서 사용이 됩니다.
function myFilter(item) {
  if (item["percentComplete"] < percentCompleteThreshold) {
    return false;
  }

  if (searchString != "" && item["title"].indexOf(searchString) == -1) {
    return false;
  }

  if (item.parent != null) {
    var parent = data[item.parent];

    while (parent) {
      if (parent._collapsed || (parent["percentComplete"] < percentCompleteThreshold) || (searchString != "" && parent["title"].indexOf(searchString) == -1)) {
        return false;
      }

      parent = data[parent.parent];
    }
  }

  return true;
}

function percentCompleteSort(a, b) {
  return a["percentComplete"] - b["percentComplete"];
}

// 실제로 Grid 실행되는 함수. 
// 저는 함수명을 지정하여 특정 이벤트 발생하였을때 Grid 를 그려주는 형태로 진행
$(function () {
  var indent = 0;
  var parents = [];

  // prepare the data
  for (var i = 0; i < 1000; i++) {
    var d = (data[i] = {});
    var parent;

    if (Math.random() > 0.8 && i > 0) {
      indent++;
      parents.push(i - 1);
    } else if (Math.random() < 0.3 && indent > 0) {
      indent--;
      parents.pop();
    } 
	
    if (parents.length > 0) {
      parent = parents[parents.length - 1];
    } else {
      parent = null;
    }

    d["id"] = "id_" + i;
    d["indent"] = indent; // 해당 부분에서 TaskFormatter 되어 있는 컬럼의 앞 공간을 주어 그려줍니다.
    d["parent"] = parent;
    d["title"] = "Task " + i;
    d["duration"] = "5 days";
    d["percentComplete"] = Math.round(Math.random() * 100);
    d["start"] = "01/01/2009";
    d["finish"] = "01/05/2009";
    d["effortDriven"] = (i % 5 == 0);
  }


  // initialize the model
  dataView = new Slick.Data.DataView({ inlineFilters: true });
  dataView.beginUpdate();
  dataView.setItems(data);
  dataView.setFilter(myFilter);
  dataView.endUpdate();


  // initialize the grid
  grid = new Slick.Grid("#myGrid", dataView, columns, options);

  grid.onCellChange.subscribe(function (e, args) {
    dataView.updateItem(args.item.id, args.item);
  });

  grid.onAddNewRow.subscribe(function (e, args) {
    var item = {
      "id": "new_" + (Math.round(Math.random() * 10000)),
      "indent": 0,
      "title": "New task",
      "duration": "1 day",
      "percentComplete": 0,
      "start": "01/01/2009",
      "finish": "01/01/2009",
      "effortDriven": false};
    $.extend(item, args.item);
    dataView.addItem(item);
  });

  grid.onClick.subscribe(function (e, args) {
    if ($(e.target).hasClass("toggle")) {
      var item = dataView.getItem(args.row);
      if (item) {
        if (!item._collapsed) {
          item._collapsed = true;
        } else {
          item._collapsed = false;
        }

        dataView.updateItem(item.id, item);
      }
      e.stopImmediatePropagation();
    }
  });


  // wire up model events to drive the grid
  dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
  });

  dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
  });


  var h_runfilters = null;

  // wire up the slider to apply the filter to the model
  $("#pcSlider").slider({
    "range": "min",
    "slide": function (event, ui) {
      Slick.GlobalEditorLock.cancelCurrentEdit();

      if (percentCompleteThreshold != ui.value) {
        window.clearTimeout(h_runfilters);
        h_runfilters = window.setTimeout(dataView.refresh, 10);
        percentCompleteThreshold = ui.value;
      }
    }
  });


  // wire up the search textbox to apply the filter to the model
  $("#txtSearch").keyup(function (e) {
    Slick.GlobalEditorLock.cancelCurrentEdit();

    // clear on Esc
    if (e.which == 27) {
      this.value = "";
    }

    searchString = this.value;
    dataView.refresh();
  })
})

제 코드는 회사에서 사용되고 있는 코드라 보여드리기 힘들어 

기존 제공 되어있는 코드 공유드립니다. 

 

 

틀린 부분이 있다면 댓글 부탁드립니다. 

728x90

'Developer Daily' 카테고리의 다른 글

대학교 중퇴 및 비전공자인 개발자 업무 및 상황 일기  (0) 2023.05.29
[JavaScript] List([]) 배열 안 Object({}) 에 있는 키, 벨류 값으로 인덱스 찾기  (0) 2023.03.15
AWS(Amazon Web Service) 에 대한 공부  (0) 2023.02.05
2023-01-28 패스트캠퍼스 초격차 패키지 공부  (0) 2023.01.28
일단 우선 친절한 SQL 로 SQLP 자격증 준비하기!(2023 SQLP 일정 및 응시자격)  (0) 2023.01.15
'Developer Daily' Related Articles more
Comments