Проблемы, исправляющие данные соответствующим образом в Jquery Orgchart с использованием переполнения стека
Я размышлял над тем, как соответствующим образом вписать данные из базы данных в организационную диаграмму jquery таким образом, чтобы пользователь мог видеть тех, кто зарегистрировался по своей реферальной ссылке, и людей, которых зарегистрировали рефералы, а также в виде организационного дерева. Пользователь узнает тех, кто под ним / ней.
У меня уже есть это OrgChart
Но я хочу, чтобы это выглядело как Orgchart с цветовой кодировкой
Любая помощь будет оценена, пожалуйста
PHP-код
function getConnection() {
$dbhost="127.0.0.1";
$dbuser="root";
$dbpass="";
$dbname="tree";
$dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbh;
}
$sql = "select id as memberId, parent as parentId, user as otherInfo from users";
try {
$db = getConnection();
$stmt = $db->query($sql);
$wines = $stmt->fetchAll(PDO::FETCH_OBJ);
$db = null;
echo json_encode($wines);
} catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='jquery.js'></script>
<link rel="stylesheet" href="demo.css"/>
<link rel="stylesheet" href="jquery.orgchart.css"/>
<script src="jquery.orgchart.js"></script>
<script type='text/javascript'>
$(function(){
var members;
$.ajax({
url:'load.php',
async:false,
success:function(data){
members=$.parseJSON(data)
}
})
//memberId,parentId,otherInfo
for(var i = 0; i < members.length; i++){
var member = members[i];
if(i==0){
$("#mainContainer").append("<li id="+member.memberId+">"+member.otherInfo+"</li>")
}else{
if($('#pr_'+member.parentId).length<=0){
$('#'+member.parentId).append("<ul id='pr_"+member.parentId+"'><li id="+member.memberId+">"+member.otherInfo+"</li></ul>")
}
else{
$('#pr_'+member.parentId).append("<li id="+member.memberId+">"+member.otherInfo+"</li>")
}
}
}
$("#mainContainer").orgChart({container: $("#main"),interactive: true, fade: true, speed: 'slow'});
});
</script>
</head>
<body>
<div style="display: none">
<ul id="mainContainer" class="clearfix"></ul>
</div>
<div id="main">
</div>
</body>
</html>
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …