바인딩되지 않은 트리 그리드(TreeGrid)

바인딩 해제 모드로 작업하는 경우에도, 코드로 행과 열을 추가하여 트리를 빌드 할 수 있습니다.

배열의 데이터 소스로 시작하세요. FlexGrid를 초기화하되 배열에 바인딩하지 마세요.

import * as wjGrid from '@grapecity/wijmo.grid';

	// workers tree data (heterogeneous collection)
  var workers = [{
    name: 'Jack Smith',
    checks: [{
      name: 'check1',
      earnings: [
      	{ name: 'hourly', hours: 30.0, rate: 15.0 },
        { name: 'overtime', hours: 10.0, rate: 20.0 },
        { name: 'bonus', hours: 5.0, rate: 30.0}
      ]
    }, {
      name: 'check2',
      earnings: [
      	{ name: 'hourly', hours: 20.0, rate: 18.0 },
        { name: 'overtime', hours: 20.0, rate: 24.0 }
      ]
    }]
  }];

  // unbound workers tree
  var uwt = new wjGrid.FlexGrid('#workersGrid', {
  	headersVisibility: 'Column',
    selectionMode: 'Row',
    beginningEdit: function(s, e) {
    	var value = e.panel.getCellData(e.row, e.col);
      if (value == null) {
      	e.cancel = true; // can't edit!
      }
    }
  });  

열을 추가하고 속성을 정의합니다.

// unbound workers tree
var uwt = new wjGrid.FlexGrid('#workersGrid', {
  headersVisibility: 'Column',
  selectionMode: 'Row',
  beginningEdit: function(s, e) {
  	var value = e.panel.getCellData(e.row, e.col);
    if (value == null) {
    	e.cancel = true; // can't edit!
    }
  }
});

배열을 반복하고 그룹 행과 셀을 추가합니다.

  // add rows
for (var w = 0; w < workers.length; w++) {
  // add worker
  var worker = workers[w];
  var row = new wjGrid.GroupRow(worker);
  row.isReadOnly = false;
  row.level = 0;
  uwt.rows.push(row);
  uwt.setCellData(row.index, 0, worker.name);
  for (var c = 0; c < worker.checks.length; c++) {
      // add check
      var check = worker.checks[c];
      row = new wjGrid.GroupRow(check);
          row.isReadOnly = false;
      row.level = 1;
      uwt.rows.push(row);
      uwt.setCellData(row.index, 0, check.name);
      for (var e = 0; e < check.earnings.length; e++) {
          // add earning
          var earning = check.earnings[e];
          row = new wjGrid.GroupRow(earning);
              row.isReadOnly = false;
          row.level = 2;
          uwt.rows.push(row);
          uwt.setCellData(row.index, 0, earning.name);
          uwt.setCellData(row.index, 1, earning.hours);
          uwt.setCellData(row.index, 2, earning.rate);
      }
  }
}