트리 그리드(TreeGrid)
FlexGrid를 사용하여 JavaScript에서 강력한 TreeGrid를 구축하십시오. 데이터 항목에 하위 항목 모음이 포함된 경우 FlexGrid의 childItemsPath를 사용하여 데이터를 TreeGrid로 표시할 수 있습니다. 예를 들어, 'children' 속성이 있는 'person' 개체 목록을 생각해 보십시오. 'children' 속성에는 더 많은 person 객체의 배열이 포함되어 있습니다. 이를 동종 계층 구조라고도 합니다. 아래의 TreeGrid는 표식을 최상위 사람 목록에 바인딩하고 childItemsPath 속성을 'children'으로 설정하여 빌드되었습니다.
app.js
index.html
styles.css
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjGrid from '@mescius/wijmo.grid';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// 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',
autoGenerateColumns: false,
columns: [
{ binding: 'name', header: 'Name', width: '*' }
],
itemsSource: family
});
//
// toggle family tree
document.getElementById('asTree').addEventListener('click', function (e) {
familyGrid.childItemsPath = e.target.checked ? 'children' : '';
});
//
// 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: 'Bill 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', allowSorting: false },
{ binding: 'rate', dataType: 'Number', allowSorting: false }
],
itemsSource: workers
});
}