[JSON] easyUI checkbox tree 만들기
tree.zip<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>Easy UI</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery-1.7.2.js">
</script>
<script type="text/javascript" src="jquery.easyui.min.js">
</script>
<style>
.layer_polygon {
background: url('images/layer_polygon.png') no-repeat;
}
.test {
background: url('themes/icons/blank.gif') no-repeat;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
url: "THEMA2.json",
dataType: "json",
contentType: "charset=UTF-8",
success: function(jsonData){
fnTreeMaker(jsonData, $("#tt"));
}
});
});
/**********************************************************************
설명 : 왼쪽메뉴 - EasyUI checkbox tree 생성
파라메터 : 서버에서 받은 Layer 목록 json, tree id
리턴값 :
***********************************************************************/
var root = [];
var depth = {};
depth[0] = root;
function fnTreeMaker(jsonData, target){
jsonLength = jsonData.layerList.length;
fnMakeLayerTree(root, jsonData.layerList, 0, jsonLength - 1);
target.tree({
data: root
});
}
/**********************************************************************
설명 : 재귀 호출을 통해 서버에서 받은 jsonData 를 EasyUI tree 용 json 으로 변환
파라메터 : StringBuffer, layerList, currentIndex, size
리턴값 : json 형식의 문자열
***********************************************************************/
function fnMakeLayerTree(targetNode, layerList, currentIndex, maxIndex){
currentTree = layerList[currentIndex];
currentNode = {
"id": currentTree.layerTreePk,
"text": currentTree.korName,
"state": (currentTree.opened == 0) ? "closed" : "open",
"attributes": {
"layerName": currentTree.layerName,
"symbolizer": currentTree.symbolizer
}
};
targetNode.push(currentNode);
depth[currentTree.treeDepth] = currentNode;
if (currentIndex < maxIndex) {
curretTreeDepth = currentTree.treeDepth;
nextTreeDepth = layerList[currentIndex + 1].treeDepth;
if (curretTreeDepth == nextTreeDepth) {
} else if (curretTreeDepth < nextTreeDepth) {
currentNode.children = [];
targetNode = currentNode.children;
} else if (curretTreeDepth > nextTreeDepth) {
if (nextTreeDepth == 1) {
targetNode = root
} else {
targetNode = depth[nextTreeDepth - 1].children;
}
}
fnMakeLayerTree(targetNode, layerList, currentIndex + 1, maxIndex);
}
}
</script>
</head>
<body>
<h2>Easy UI</h2>
<table border=1>
<tr>
<td valign="top">
<ul id="tt" class="easyui-tree" checkbox="true">
</td>
</tr>
</table>
<div id="test">
</div>
</body>
</html>