트리 그리드 출력을 할 때 최초에 트리 하위 데이터 전체를 출력하지 않고, 트리의 열기/닫기 아이콘을 눌렀을 때 그 행에 맞는 하위 데이터를 요청하는 형태의 트리 그리드입니다.
즉, 최초에 그리드에 삽입한 데이터는 다음과 같습니다.
// 최초 그리드 데이터 var gridData = [{ "id": "T0", "name": "Program-1" },{ "id": "T1", "name": "Program-2" },{ "id": "T2", "name": "Program-3", "children" : [] // children 에 빈배열을 삽입하면, Leaf 로 인식하여 lazyLoading 하지 않게 함. }];
여기서 트리 아이콘 클릭 시 실시간으로 그에 맞는 하위 데이터를 Ajax 요청하여 그 결과를 하위 레벨에(즉, 자식으로) 적용한 모습입니다.
이를 트리 그리드 lazyLoading 이라하며, 이 기능을 사용하기 위해서는 treeLazyMode 속성을 true 설정하십시오.
모든 데모는 각각 독립적인 단일 HTML 페이지입니다. 마우스 우클릭 후 "소스 보기" (또는 크롬 기준 단축키 Ctrl + U)로 어떻게 작성되었는지 쉽게 확인 할 수 있습니다.
Copyright © AUISoft Co., Ltd.