추천인 정보로 TREE 구조 출력할려는데 도움 부탁합니다.
본문
<!doctype html>
<html>
<head>
<?php include_once("_common.php"); ?>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>jsPlumbTree: Tree View With Visual Connections Example</title>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<style type="text/css">
body { background-color: #f7f7f7; font-family: 'Roboto'; }
.container { margin: 150px auto; max-width: 960px; }
.window {
font-weight: bold;
cursor: pointer;
border:1px solid #346789;
box-shadow: 2px 2px 10px #aaa;
-o-box-shadow: 2px 2px 10px #aaa;
-webkit-box-shadow: 2px 2px 10px #aaa;
-moz-box-shadow: 2px 2px 10px #aaa;
-moz-border-radius:0.5em;
border-radius:0.5em;
/*
opacity:0.8;
filter:alpha(opacity=80);
*/
width: 10em; height: auto;
padding: 0.5em 0em;
text-align:center;
z-index:20; position:absolute;
background-color:#eeeeef;
color:black;
font-family:helvetica;
font-size:0.9em;
word-wrap:break-word;
}
.window:hover {
box-shadow: 2px 2px 10px #444;
-o-box-shadow: 2px 2px 10px #444;
-webkit-box-shadow: 2px 2px 10px #444;
-moz-box-shadow: 2px 2px 10px #444;
/*
opacity:0.6;
filter:alpha(opacity=60);
*/
}
/*
.window > div {
margin-top: 19%;
margin-bottom: 19%;
}
*/
.hidden {
display: none;
}
.collapser {
cursor: pointer;
border:1px dotted gray;
z-index:21;
}
.errorWindow {
border: 2px solid red;
}
#treemain {
height: 500px;
width: 100%;
position: relative;
overflow: auto;
}
</style>
</head>
<body><div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="https://www.jqueryscript.net/chart-graph/tree-view-visual-connections.html">Download This Plugin</a></li>
<li><a href="https://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul><div id="carbon-block"></div>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<div class="container">
<h1>jsPlumbTree: Tree View With Visual Connections Example</h1>
<p>A jsPlumb-based tree chart implementation in jQuery.</p>
</p>
<?php
// 접근회원수
$sql = " select count(*) as cnt from g5_member where mb_recommend = '{$member['mb_id']}' ";
$cnt_row = sql_fetch($sql);
echo $cnt_row['cnt'];
echo $member['mb_id'] ;
?>
<div id="treemain">
<div id="node_0" class="window hidden"
data-id="0"
data-parent=""
data-first-child="1"
data-next-sibling="">
<?php echo "성명 : " . $member['mb_name'] ; ?>
<br>
<?php echo "ID : " . $member['mb_id'] ; ?>
<br>
<?php echo "추천인 : " . $member['mb_recommend'] ; ?>
<br>
<?php echo "추천인 수 : " . $cnt_row['cnt'] ; ?>
</div>
<div id="node_1" class="window hidden"
data-id="1"
data-parent="0"
data-first-child="4"
data-next-sibling="2">
Node 1
</div>
<div id="node_2" class="window hidden"
data-id="2"
data-parent="0"
data-first-child="6"
data-next-sibling="3">
Node 2
</div>
<div id="node_3" class="window hidden"
data-id="3"
data-parent="0"
data-first-child=""
data-next-sibling="">
Node 3
</div>
<div id="node_4" class="window hidden"
data-id="4"
data-parent="1"
data-first-child=""
data-next-sibling="5">
Node 1-1
</div>
<div id="node_5" class="window hidden"
data-id="5"
data-parent="1"
data-first-child=""
data-next-sibling="">
Node 1-2
</div>
<div id="node_6" class="window hidden"
data-id="6"
data-parent="2"
data-first-child=""
data-next-sibling="7">
Node 2-1
</div>
<div id="node_7" class="window hidden"
data-id="7"
data-parent="2"
data-first-child=""
data-next-sibling="8">
Node 2-2
</div>
<div id="node_8" class="window hidden"
data-id="8"
data-parent="2"
data-first-child=""
data-next-sibling="9">
Node 2-3
</div>
<div id="node_9" class="window hidden"
data-id="9"
data-parent="2"
data-first-child=""
data-next-sibling="">
Node 2-4
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.7.10/jsPlumb.min.js" integrity="sha512-A1gTsaWUck7mkEu6D8/938PKlkVS79TkgqAloQbGU4bhOPUBS9JVknN5x++J3eRNO8g6D/T3kqhHBd4KkqRNxg==" crossorigin="anonymous"></script>
<script type="text/javascript" src="../jsplumb-tree.js"></script>
<script type="text/javascript">
// -- init -- //
jsPlumb.ready(function() {
// connection lines style
var connectorPaintStyle = {
lineWidth:3,
strokeStyle:"#4F81BE",
joinstyle:"round"
};
var pdef = {
// disable dragging
DragOptions: null,
// the tree container
Container : "treemain"
};
var plumb = jsPlumb.getInstance(pdef);
// all sizes are in pixels
var opts = {
prefix: 'node_',
// left margin of the root node
baseLeft: 24,
// top margin of the root node
baseTop: 24,
// node width
nodeWidth: 100,
// horizontal margin between nodes
hSpace: 36,
// vertical margin between nodes
vSpace: 10,
imgPlus: 'tree_expand.png',
imgMinus: 'tree_collapse.png',
// queste non sono tutte in pixel
sourceAnchor: [ 1, 0.5, 1, 0, 10, 0 ],
targetAnchor: "LeftMiddle",
sourceEndpoint: {
endpoint:["Image", {url: "tree_collapse.png"}],
cssClass:"collapser",
isSource:true,
connector:[ "Flowchart", { stub:[40, 60], gap:[10, 0], cornerRadius:5, alwaysRespectStubs:false } ],
connectorStyle:connectorPaintStyle,
enabled: false,
maxConnections:-1,
dragOptions:null
},
targetEndpoint: {
endpoint:"Blank",
maxConnections:-1,
dropOptions:null,
enabled: false,
isTarget:true
},
connectFunc: function(tree, node) {
var cid = node.data('id');
console.log('Connecting node ' + cid);
}
};
var tree = jQuery.jsPlumbTree(plumb, opts);
tree.init();
window.treemain = tree;
});
function positioningBlockBug() {
var oldNode = window.treemain.nodeById(2);
//var newNode = $('#node_2_new');
var newNode = $(' <div id="node_2" class="window hidden"\n' +
' data-id="2"\n' +
' data-parent="0"\n' +
' data-first-child="6"\n' +
' data-next-sibling="3">\n' +
' Node 2 NEW\n' +
' </div>\n');
if (oldNode) {
// butta il nodo nel container
oldNode.replaceWith(newNode);
// rimostra il nodo
newNode.id = 'node_2';
newNode.show();
// aggiorna l'albero
window.treemain.update();
}
}
</script>
<script>
try {
fetch(new Request("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", { method: 'HEAD', mode: 'no-cors' })).then(function(response) {
return true;
}).catch(function(e) {
var carbonScript = document.createElement("script");
carbonScript.src = "//cdn.carbonads.com/carbon.js?serve=CK7DKKQU&placement=wwwjqueryscriptnet";
carbonScript.id = "_carbonads_js";
document.getElementById("carbon-block").appendChild(carbonScript);
});
} catch (error) {
console.log(error);
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
현재 인터넷에서 다운 받은 소스입니다.
추천인 정보를 가지고 TREE 구조 출력을 할려는데 초보다 보니 감을 잡을수가 없네요.
실력 좋으신 선배님들 도움부탁드립니다.
테스트 주소는 http://odod.io/theme/rb.basic/reg_chart2/demo/chart.php 입니다.
답변 5
일종의 다단계(?)구조를 출력하고싶으신건가요?
네.
맞습니다.
node1~3은 mb_recommend 에 admin이 들어가 있는 사람을 구해서 출력하고
그 뒤는 동일하게 mb_recommend 에 node1이 들어가 있는 사람들 구하면서 계속 트리를 구해야겠죠
해당을 소스를 다 해주실분이 있을지는 모르겠네요.
총숫자는 해당을 다 더 해서 나오게 수정을 하셔야 할 거 같습니다.
네.
전체 모든 소스는 아니더라도 큰 틀에서 방향을 잡으면 조금씩 해볼수 있을것 같은데
초보다 보니 감이 잡히질 않네요.
공부하고 싶다면
다차원 배열부터 접근해보시는게 좋습니다.
$adp_202403081230_tree = [
'A' => ['B', 'C'],
'B' => ['D', 'E'],
'C' => ['F'],
'D' => [],
'E' => ['G', 'H'],
'F' => [],
'G' => [],
'H' => []
];
이런식으로요
공부하실 시간이 없으시면 의뢰로 가시면됩니다.
다단계 구조를 구현하신다면,
일단 회원 필드에 별도의 칼럼을 생성하셔서 하시는 게 좋을 듯 싶습니다.
간략하게 예를 들면 mb_class 라는 필드 생성 후
본인 1
본인 하위 1/2
1/3
본인 하위 1/2 의 하위 1/2/4
본인 하위 1/3의 하위 1/3/5
이런 식의 계층형 구조를 먼저 설계하신 후 구현하는 게 좋습니다.
무작정 코드를 짜는 것 보다. db 설계를 먼저 하신 후 진행하세요.
네. 감사합니다.
답변 주신분들 감사합니다.
chatGPT 도움 받아 해결했습니다.
답변을 작성하시기 전에 로그인 해주세요.
