WEBFX XTree 학습 노트

관련 글:
 

레일 스 로 무한 동적 트 리 구조 구현!

Dojo 와 JSON 을 이용 하여 무한 AJAX 동적 로드 기능 모듈 트 리 만 들 기

E3. Tree 오픈 소스, 1.0 버 전 발표.

추천 범위: GT-Grid
추천

1. XTREE 소개:
XTREE 는 AJAX 기반 트 리 메뉴 입 니 다.그 원 리 는 매번 현재 노드 아래 의 모든 노드 만 불 러 오 는 것 이 고 개발 자 에 게 는 일정한 형식 에 따라 XML 코드 를 만 드 는 것 이다.XTree 는 각 노드 의 ICON 과 링크 를 스스로 맞 출 수 있다.XTREE 는 대상 을 기반 으로 하 는 것 입 니 다. XTREE 를 통 해 더 이상 HTML 코드 를 만 들 필요 가 없고 해당 하 는 JS 대상 을 만 들 면 됩 니 다.
2. 공식 사이트:
http://webfx.eae.net/dhtml/xtree/index.html 이곳 에서 XTree 의 최신 버 전 을 다운로드 할 수 있 고 XTree 가 시연 한 DEMO 도 있다.
3. XTREE API:
    XTree 의 API 는 매우 간단 하 다. 바로 추상 류 WebFXTreeAbstractNode 와 이 추상 류 의 두 가지 키 류 인 WebFXTree 와 WebFXTree Item 이다.이 세 가지 유형의 속성 과 구조 함수, 그리고 방법 은 상세 하 게 볼 수 있다. http://webfx.eae.net/dhtml/xtree/api.html 위 에 명확 하 게 쓰 여 있다.
4. XTREE 학습 노트    각 노드 마다 하나의 상 태 를 OPEN 이 라 고 합 니 다.노드 가 OPEN 이면 EXPAND 가 가능 합 니 다.ITEM 결점 에 있어 서 영원히 FALSE 로 돌아 갑 니 다.    toggle () 은 전환 입 니 다. 펼 치 려 면 접 습 니 다.접 으 려 면 펼 치기;    XTree 는 정적 트 리 를 생 성 합 니 다. XML 에서 트 리 를 생 성 할 수 없고 간단 한 정적 트 리 만 생 성 할 수 있 습 니 다. 구조 함수 의 인 자 를 보면 [text] [action] 을 알 수 있 습 니 다.    --------------------------------------------------------------    WebFXTreeAbstractNode:        속성:    id: 유일한 표식    text: label    action: 링크    open: 표지 위치, boolean 형, 열 지 여부    아이콘: 아이콘    openIcon: 열 린 아이콘    parentNode: 부모 노드 의 Reference    childNodes: 하위 노드 의 Reference 집합        방법:    indent (): 들 여 쓰기    토글 (): 전환    callapse (): 접 기    expand ():    callapse All (): 모두 접 기    expandAll (): 모두 펼 치기    expandChildren (): 전개 자 결점    callapse Children (): 클 램프 노드    getNextSibling (): 다음 형제 결점 을 얻 는 Reference    getPrevious Sibling (): 이전 형제의 결점 을 얻 은 Reference    toString (): HTML 코드 생 성        ------------------------------------------------------------------    WebFXTree:        구조 함수: new WebFXTree ([text], [action], [behavior], [icon], [openIcon]);        인자:    text:    action:    behavior:    icon:    openIcon:        속성:    rendered 플래그 비트, boolean 형식 은 이 트 리 가 생 성 되 고 표시 되 었 는 지 표시 하 는 데 사 용 됩 니 다.    WebFXTreeAbstractNode 의 모든 속성        방법:    getSelected (): 선택 한 대상 의 Reference 를 되 돌려 줍 니 다.    setBehavior(sBehavior): classic,explorer;    getBehavior():    WebFXTreeAbstractNode 의 모든 방법    -------------------------------------------------------------------    WebFXTreeItem:    구조 함수:    new WebFXTreeItem([text],[action],[parent],[icon],[openIcon]);        속성:    WebFXTreeAbstractNode 의 모든 속성        방법:    getFirst (): 첫 번 째 키 노드 의 Reference 를 되 돌려 줍 니 다.    getLast (): 입 을 되 돌려 준 후 키 노드 의 Reference    __________________________________________________________________________________________    5. XLoadTree 학습 노트:    XLoadTree 와 XTree 의 차 이 는 XTree 는 정적 트 리 만 생 성 할 수 있 고 XLoadTree 는 XML 에 따라 동적 트 리 를 생 성 할 수 있다 는 점 이다.    XLoadTree 는 Xtree 에서 온 것 으로 주로 두 가지 종류 가 있 습 니 다. WebFXLoadTree 와 WebFXLoadTree Item 입 니 다. 그 중에서 WebFXLoadTree 는 WebFXTree, WebFXLoadTree Item 은 WebFXLoadTree Item 에서 물 려 받 았 습 니 다.    ---------------------------------------------------------------------    WebFXLoadTree:        구조 함수:    new WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon)         인자:    sXmlSrc: 펼 칠 때 필요 한 XML 파일    나머지 매개 변 수 는 WebFXTree 와 같 습 니 다.        속성:    src: XML 원본 파일    loading: 플래그 비트, boolean 형식, XML 파일 을 불 러 오고 있 음 을 표시 합 니 다.    loaded: 플래그 비트, boolean 형식, XML 파일 이 불 러 올 것 임 을 표시 합 니 다.    errorText: 오류 설명    WebFXTree 의 모든 속성        방법:    reload (): XML 파일 다시 불 러 오기    WebFXTree 의 모든 방법    -----------------------------------------------------------------------    WebFXLoadTreeItem:        구조 함수:    new WebFXLoadTreeItem(sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon)    인자:    eParent: 선택 할 수 있 습 니 다. 이 노드 에 가입 할 노드 의 Reference        속성:    src: XML 원본 파일    loading: 플래그 비트, boolean 형식, XML 파일 을 불 러 오고 있 음 을 표시 합 니 다.    loaded: 플래그 비트, boolean 형식, XML 파일 이 불 러 올 것 임 을 표시 합 니 다.    errorText: 오류 설명    WebFXTree 의 모든 속성        방법:    reload (): XML 파일 다시 불 러 오기    WebFXTreeItem 의 모든 방법        XML 파일 형식:

<!ELEMENT tree (tree*)>   
  <!ATTLIST tree    
            text      CDATA   #REQUIRED    
            src       CDATA   #IMPLIED    
            action    CDATA   #IMPLIED    
            icon      CDATA   #IMPLIED    
            openIcon  CDATA   #IMPLIED>   

 
XML 파일 의 예:

<tree>   
   <tree text="Loaded Item 1" action="href://webfx.eae.net" />   
   <tree text="Loaded Item 2">   
    <tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />   
   </tree>   
   <tree text="Load "tree1.xml"" src="tree1.xml" />   
</tree>