ztree 학습 노트 1 - ztree 제로 구축 (초보 기초 튜 토리 얼)

zTree – jQuery 트 리 플러그 인
ztree 는 jQuery 에 의 해 이 루어 진 다기 능 '트 리 플러그 인' 입 니 다.우수한 성능, 유연 한 배치, 다양한 기능 의 조합 은 ztree 의 가장 큰 장점 입 니 다.
다음 과 같은 효 과 를 낼 수 있다.
사용 전 준비 작업
1 JQuery 플러그 인 다운로드http://www.jq22.com/jquery-info122 (1.4 버 전 이상 필요) 2 ztree 플러그 인 홈 페이지 주소 다운로드:http://www.treejs.cn/v3/main.php#_zTreeInfo
개발 도구
제 가 사용 하 는 것 은 IDEA 가 먼저 WEB 프로젝트 를 만 들 고 jQuery 와 ztree 를 도입 하 는 것 입 니 다.
html 에서 자원 파일 가 져 오기

4. ztree 용기 만 들 기

5. ztree 초기 화

    
    

        

    


    
    

        var setting = {	};

        var zNodes =[
            { name:"   1 -   ", open:true,
                children: [
                    { name:"   11 -   ",
                        children: [
                            { name:"    111"},
                            { name:"    112"},
                            { name:"    113"},
                            { name:"    114"}
                        ]},
                    { name:"   12 -   ",
                        children: [
                            { name:"    121"},
                            { name:"    122"},
                            { name:"    123"},
                            { name:"    124"}
                        ]},
                    { name:"   13 -      ", isParent:true}
                ]},
            { name:"   2 -   ",
                children: [
                    { name:"   21 -   ", open:true,
                        children: [
                            { name:"    211"},
                            { name:"    212"},
                            { name:"    213"},
                            { name:"    214"}
                        ]},
                    { name:"   22 -   ",
                        children: [
                            { name:"    221"},
                            { name:"    222"},
                            { name:"    223"},
                            { name:"    224"}
                        ]},
                    { name:"   23 -   ",
                        children: [
                            { name:"    231"},
                            { name:"    232"},
                            { name:"    233"},
                            { name:"    234"}
                        ]}
                ]},
            { name:"   3 -      ", isParent:true}

        ];

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
    //      zTree DOM  ，    zTree        api,    zTree     
    x
    

* 설정 설정
setting 트 리 구조 설정

보통 사용 하고 설정 해 야 할 인자 가 없습니다

디 스 플레이 와 관련 된 내용 은 API 문서 의 setting. view 내 설정 정보

를 참고 하 십시오.

name, children, title 등 속성 정의 변경 사항 은 API 문서 의 setting. data. key 내 설정 정보

를 참고 하 십시오.