[JsTree] ajax 비동기 DB에서 데이터 가져와서 jsTree 구성하는 방법

이번글은 ajax 비동기 통신으로 서버를 통해 DB에서 데이터를 조회해 온 다음, 해당 데이터를 가지고 jsTree를 구성하여 메뉴 트리를 만드는 방법에 대해 기록한다.

ajax 비동기 DB에서 데이터 가져와서 jsTree 구성하는 방법

1. 먼저, jsTree를 사용하기 위해서는 jstree js파일과 css 파일이 필요하다. 그래서, 아래와 같이, 파일을 다운로드해서 경로에 저장하던지, 아니면 script 태그 내에 선언하여 세팅한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. ajax 비동기 통신을 하여 db에 있는 데이터를 조회한다.

, setTreeView : function() {
	let param = {
		'MENUID' : 'TEST'
	};
        	
	let json = netUtil.sendJsonData("/test/json//treeMenu.data", param);

	console.log("tree data : ", json);
	
    // jsTree 적용
	$('#menuTree').jstree({
		'core': {
			'data': this.processLocationData(json.data)
		}
    });
}

html

<html>
<body>
<div id='menuTree' name='menuTree'></div>
</body>
</html>

3. 서버에서 가져온 데이터를 가지고, 각 트리 노드에 id와 text를 받은 데이터로 매핑시키고 parent를 트리 구조에 맞게 매핑 시킨다.

, processLocationData: function(rawData) {
        var treeData = []; // 트리메뉴
        var nodeMap = {}; // 중복 체크

        rawData.forEach(function(item) {
            var divisionId = 'division_' + item.DIVISION;
            var areaId = 'area_' + item.AREAKY;

            // DIVISION
            if (!nodeMap[divisionId]) {
                nodeMap[divisionId] = {
                    id: divisionId,
                    text: item.DIVISION,
                    parent: '#',
                    type: 'DIVISION'
                };
                treeData.push(nodeMap[divisionId]);
            }

            // AREAKY
            if (!nodeMap[areaId]) {
                nodeMap[areaId] = {
                    id: areaId,
                    text: item.AREAKY,
                    parent: divisionId,
                    type: 'AREAKY'
                };
                treeData.push(nodeMap[areaId]);
            }
        });

        return treeData;
    }
}

그렇게 하고 나서, 해당 treeData를 return 시키면 된다.

여기서, treeData의 경우에는 아래와 같이, json 형식과 같은 데이터 구조로 만들면 된다.

물론, html 형식으로도 사용하기는 하는데, ajax로 서버에서 데이터를 가져오기 때문에 json 형식으로 사용했다.

var treeData = [
	{ "id": "Test", "parent": "#", "text": "Test"}
];

위의 방식대로 진행하면 아래와 같이 jsTree가 완성된다.

저작자표시

'IT > 기타' 카테고리의 다른 글

윈도우 11(Windows 11)에서 명령 프롬프트창(CMD)으로 와이파이 비밀번호 찾는 방법 (0)	2025.02.17
[VritualBox] 가상머신(VirtualBox) 전체화면 해제 단축키 및 설정하는 방법 (1)	2025.02.10
윈도우 11(Windows 11)에서 가상머신(VirtualBox) 설치하기 (0)	2025.02.03
명령 프롬프트창(CMD창)에서 D드라이브 이동하는 방법 (0)	2025.01.13
바로빌 전자 세금 계산서 API 연동 및 사용하는 방법 (1)	2024.08.26
FlexSim 솔루션 트레이닝 센터 아카데미 교육 후기 (0)	2024.07.05
Windows 10에서 OAK-D Pro W 설치 및 연동하는 방법(Depthai Viewer) (0)	2024.06.27
Windows10에서 스테레오랩스(stereolabs) ZED2i SDK 및 Python API 설치하는 방법 (0)	2024.06.26