본문 바로가기

Blog/나의 작업물

Filterable Tree Example

텍스트 박스에 검색어를 입력하면 Tree의 label문자열을 대상으로 필터링하여 보여주는 기능을 구현한 것입니다.

 

원래 XMLListCollection 클래스의 filterFunction속성으로 구현하려 했지만 필터링한 후 목록이 갱신될 때 스크롤바는 갱신되지 않아 삽질좀 했습니다. 결국 매번 필터링 할때마다 dataProvider를 통째로 갱신하는 걸로 때웠습니다.

ListCollection계열 클래스만으로 구현할 때 최상위 노드에 대한 필터링이 제대로 이루어지지 않아(아마 Tree컴포넌트의 Display로직과 무슨 일이 있긴 있나봅니다.) 최상위 노드 필터링과 하위노드 필터링을 분리했습니다. 하위노드 필터링은 filterFunction이 적용된 Tree.dataDescriptor를 활용했습다.

필터링 메서드만 바꾸면 내용에 대해서도 검색이 가능할 것 같습니다. 코드 부분부분 삽질에 흔적이 있으니 필요할 때 샘플코드로 참고하시면 유용할 듯 싶습니다.

            

참고

Using a Data Manager and Filtering Data In A Flex Tree (even the nodes!)

How to filter all nodes of a Flex Tree component

Filtering a Flex Tree using an ArrayCollection