childItemsPath을 사용한 트리 그리드(TreeGrid)

데이터 항목에 하위 항목 집합이 포함된 경우 FlexGrid의 childItemsPath를 사용하여 데이터를 트리로 표시할 수 있습니다.

예를 들어, 'children' 속성이 있는 'person' 객체 목록을 가정해 보십시오. 'children' 속성은 더 많은 person 객체의 배열을 포함합니다. 이러한 경우를 동일 유형의 계층 구조라고 합니다.

아래 그리드는 상위 수준의 persons 목록에 그리드를 바인딩하고 childItemsPath 속성을 'children'으로 설정하여 작성되었습니다:

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

// family tree data (homogeneous collection)
var family = [
    { name: 'Albert', children: [
        { name: 'Anton' },
        { name: 'Annette' },
    ]},
    { name: 'Benjamin', children: [
        { name: 'Bridget', children: [
        { name: 'Billy' },
        { name: 'Bernard' },
    ]},
        { name: 'Bella' },
        { name: 'Bob' },
    ]},
    { name: 'Charlie', children: [
        { name: 'Chris' },
        { name: 'Connie' },
        { name: 'Carrie' },
    ]},
    { name: 'Douglas', children: [
        { name: 'Dinah' },
        { name: 'Donald' }
    ]}
];
  
// family tree
var familyGrid = new wjGrid.FlexGrid('#familyGrid', {
    headersVisibility: 'None',
    childItemsPath: 'children',
    itemsSource: family
});

또한 '이질적인' 계층 구조도 있는데, 여기서 서로 다른 수준의 아이템은 서로 다른 유형과 서로 다른 하위 아이템 속성을 가집니다.

예를 들어, 아래 그리드는 'earnings'을 나열하는 'checks'를 수신하는 'worker' 객체 컬렉션에 바인딩되어 있습니다.

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 }
      ]
    }]
  }, {
    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 }
      ]
    }]
  }, {
    name: 'Jane 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 }
      ]
    }]
  }];

// workers tree
var workersGrid = new wjGrid.FlexGrid('#workersGrid', {
    headersVisibility: 'Column',
    childItemsPath: ['checks','earnings'],
    autoGenerateColumns: false,
    columns: [
        { binding: 'name' },
        { binding: 'hours', dataType: 'Number' },
        { binding: 'rate', dataType: 'Number' }
    ],
    itemsSource: workers
});