전자공시시스템 감사보고서 JavaScript JsTree 콘솔 테스트

먼저 html 에서 jquery 와 jstree 가 실행되는지를 확인해본다. (html 에서 scripts 로 사용하는지 확인.)

그 다음에 html 에서 jstree 로 id 내용을 확인한다.

 

그리고 var tree = $j('#listTree').jstree(true) ; 의 내용을 크롬 개발자 도구 에서 콘솔에 입력한다. 그리고 모든 노드를 열고, 닫으려면 tree.open_all() ; , tree.close_all() ; 를 입력하면 된다.

 

tree.select_node("1") ;  이렇게 입력하면 감사보고서의 화면이 이동되는것을 볼 수가 있다.  (id 가 1, 2, 3 형식으로 되어 있다.)

 

tree.get_node("3") ; 로 하면 해당 값을 불러올 수 있다. 그리고 node3 = tree.get_node("3") ; 와 같이 정리하면 node3 의 내용을 json 형식으로 볼 수 있고, 여기에 node3.children 을 하면 해당 아래 자식 노드들도 볼 수 있다.

 

즉, tree 객체의 함수 호출을 위해서는 위와 같이 $j(트리아이디).jstree(함수명, 인자) 이런식으로도 할 수 있다고 함. 

 

아래와 같은 함수를 만들어두고 이를 아래와 같이 변수를 입력, 이후에 다음과 같이 나오면 자식 노드들도 함께 볼 수 있다. 

var top_node = tree.get_node('3_anchor');

leaf_node_list = jstreeIterateNodes(tree, tree.get_node('3_anchor'), fnIsLeafNode, true);

 

참고

https://yogyui.tistory.com/entry/%EC%9B%B9%ED%81%AC%EB%A1%A4%EB%A7%81-DART-%EA%B8%B0%EC%97%85%EA%B0%9C%ED%99%A9-%EC%97%85%EC%A2%85%EB%B3%84-%EA%B8%B0%EC%97%85-%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0-1

 

function jstreeIterateNodes(treeObj, node, fnCondition, bRecursive, arrCollector) {
    var children_id_arr = node.children;    // 노드의 자식 노드들의 id 문자열이 담긴 어레이를 가져온다
    var arrCollector = (arrCollector) ? arrCollector : [];
    var bCheckCondition = (typeof fnCondition === "function") ? true : false;

    for (var i = 0; i < children_id_arr.length; ++i) {
        var nodeChild = treeObj.get_node(children_id_arr[i]);    // 트리의 노드 객체를 가져온다
        if (bCheckCondition) {
            if (fnCondition(nodeChild, node)) {
                // 조건함수가 주어질 경우, 조건함수가 참일 경우에만 결과 어레이에 노드와 부모노드 정보를 첨가한다
                arrCollector.push({node: nodeChild, parent: node});
            }
        } else {
            // 조건함수가 주어지지 않을 경우, 결과 어레이에 노드와 부모노드 정보를 첨가한다
            arrCollector.push({node: nodeChild, parent: node});
        }

        if (bRecursive) {
            // 참인 경우, 자식 노드의 자식들에 대해서도 재귀호출
            arrCollector = jstreeIterateNodes(treeObj, nodeChild, fnCondition, bRecursive, arrCollector);
        }
    }

    return arrCollector;
}