트리 메뉴 ----jsTree 기본 사용 방법

트리 메뉴 - jsTree 기본 사용 방법

홈페이지:https://www.jstree.com/

작성 및 새로 고침

1. 원격 데이터

var id =111111;
$("#tree").jstree({
    "plugins" : [ "wholerow", "checkbox" ],
    "core" : {
        "data":{
            "url":url,
            'data' : function (node) {
                return { 'id' : id };
            }
        },
        "themes":{
            "icons":false
        }
    },
    "checkbox" : {
        "keep_selected_style" : false
    }
}); 

다중 선택 상자가 있는 트리입니다. 다중 선택 상자가 필요하지 않으면 체크박스를 제거하면 됩니다.
2. 데이터 갱신

$("#tree").jstree("refresh"); 

3. 정적 데이터

$("#tree").jstree({
    "plugins" : [ "wholerow", "checkbox" ],
    "core" : {
        "data":[
            'Simple root node',
            {
                'id' : 'node_2',
                'text' : 'Root node with options',
                'state' : { 'opened' : true, 'selected' : true },
                'children' : [ { 'text' : 'Child 1' }, 'Child 2']
            }
        ],
        "themes":{
            "icons":false
        }
    },
    "checkbox" : {
        "keep_selected_style" : false
    }
}); 

정적 데이터 갱신 먼저$("#tree").jstree("destroy");그리고 새로 만듭니다.
4. 원격 데이터 사전 처리 만약에 원격 데이터가 트리에 필요한 형식이 아니라면 원래는 aax를 통해 먼저 얻은 다음에 데이터를 처리하고 정적 리셋 방법으로 했는데 나중에 데이터 Filter 속성을 사용할 수 있다는 것을 발견했다. 비록 공식 문서에 쓰여 있지 않지만 직접 측정은 유효하다.

var id =111111;
$("#tree").jstree({
    "plugins" : [ "wholerow", "checkbox" ],
    "core" : {
        "data":{
            "url":url,
            'data' : function (node) {
                return { 'id' : id };
            },
            dataFilter:function(data){
                var json = JSON.parse(data)
                return JSON.stringify(json.treeData);
            }
        },
        "themes":{
            "icons":false
        }
    },
    "checkbox" : {
        "keep_selected_style" : false
    }
}); 

조작하다

1. 선택 항목 가져오기

$("#tree").jstree("get_checked");

2. 미확정 항목 가져오기

$("#tree").jstree("get_undetermined");

3. 모든 노드 확장

$("#tree").jstree("open_all");

이벤트

1. 완료 이벤트 로드

$("#tree").on("loaded.jstree", function (event, data) {
    // 
});