2016-11-04 17 views
2

我試圖創建一個使用PHP,MySQL的二進制樹和jQuery plugin by Frank-Mich試圖建立一個二叉樹,但我的下線不是以正確的順序

這是我迄今爲止...

數據庫結構

CREATE TABLE IF NOT EXISTS `members` (
    `id` int(11) NOT NULL AUTO_INCREMENT, 
    `regDate` date NOT NULL, 
    `memberID` varchar(20) NOT NULL, 
    `sponsor` int(10) NOT NULL, 
    `position` varchar(5) NOT NULL, 
    `firstname` varchar(50) NOT NULL, 
    `lastname` varchar(50) NOT NULL, 
    PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=latin1 ; 

INSERT INTO `members` (`id`, `regDate`, `memberID`, `sponsor`, `position`, `firstname`, `lastname`) VALUES 
(1, '2016-10-01', 'S0000000', 0, '', 'Fred', NULL), 
(2, '2016-10-02', 'S5483002', 1, '', 'John', NULL), 
(3, '2016-10-03', 'S6182013', 2, 'Lt', 'Innorlito', NULL), 
(4, '2016-10-03', 'S6325681', 18, 'Lt', 'Sarah', NULL), 
(5, '2016-10-04', 'S6329592', 3, 'Lt', 'Imelda', NULL), 
(6, '2016-10-06', 'S6345140', 5, 'Rt', 'Diane', NULL), 
(7, '2016-10-05', 'S6325799', 4, 'Lt', 'John III', NULL), 
(8, '2016-10-05', 'S6356038', 4, 'Rt', 'Myda', NULL), 
(9, '2016-10-07', 'S6358217', 7, 'Lt', 'Rondale', NULL), 
(10, '2016-10-07', 'S6506318', 7, 'Rt', 'Rosana', NULL), 
(11, '2016-10-08', 'S6356151', 8, 'Lt', 'Wiljames', NULL), 
(12, '2016-10-08', 'S6456156', 8, 'Rt', 'Mark', NULL), 
(13, '2016-10-09', 'S6379249', 16, 'Rt', 'Maria Fe', NULL), 
(14, '2016-10-09', 'S6345177', 6, 'Lt', 'Penafrancia', NULL), 
(15, '2016-10-10', 'S6345204', 6, 'Rt', 'Ruth', NULL), 
(16, '2016-10-04', 'S6345083', 5, 'Lt', 'Maricel', NULL), 
(17, '2016-10-11', 'S6345905', 16, 'Lt', 'Elena', NULL), 
(18, '2016-10-18', 'S6320374', 2, 'Rt', 'Myrna', NULL), 
(19, '2016-10-19', 'S6383350', 3, 'Rt', 'Reynaldo', NULL), 
(20, '2016-10-17', 'S6383593', 19, 'Lt', 'Narcisa', NULL), 
(21, '2016-10-17', 'S6510270', 19, 'Rt', 'Juanita', NULL), 
(22, '2016-11-02', 'S6384918', 20, 'Lt', 'Arsenia', NULL), 
(23, '2016-11-02', 'S6385105', 20, 'Rt', 'Zusara', NULL), 
(24, '2016-11-04', 'S6511807', 21, 'Lt', 'Vivian', NULL); 
  • memberID - 是字母數字,只用於
  • 顯示
  • sponsor - 是爲孩子記錄
  • position 「父ID」 - 是在二元結構中的位置,左或右

PHP

if(!isset($_SESSION['MM_id']) || $_SESSION['MM_id'] == '') { 
    $id=2; 
} else { 
    $id = $_SESSION['MM_id']; 
} 

// pull the "head" record... "top" of the binary 
$sql = "SELECT * FROM members WHERE `id`=:id"; 
$query = $conn->prepare($sql); 
$query->bindValue(':id', $id, PDO::PARAM_INT); 
$query->execute(); 
$result = $query->fetch(PDO::FETCH_ASSOC); 
$totalRows = $query->rowCount(); 

// pull all records (children) of the top record and group them into their parent-child relationships 
$sql = "SELECT * FROM members WHERE `id` > :id ORDER BY `sponsor` ASC, `id` ASC"; 
$query_rsMembers = $conn->prepare($sql); 
$query_rsMembers->bindValue(':id', $id, PDO::PARAM_INT); 
$query_rsMembers->execute(); 
$result_rsMembers = $query_rsMembers->fetch(PDO::FETCH_ASSOC); 
$totalRows_rsMembers = $query_rsMembers->rowCount(); 

$tree = ''; // create an empty tree variable 
$used = ''; // create an empty used variable 
//echo 'This is the order that the records were pulled<br>'; 
do { 
    $sid = $result_rsMembers['sponsor']; 
    $sql = "SELECT * FROM members WHERE `sponsor` = :sid AND `id` != :used ORDER BY `position`"; 
    $query_rsTree = $conn->prepare($sql); 
    $query_rsTree->bindValue(':sid', $sid, PDO::PARAM_STR); 
    $query_rsTree->bindValue(':used', $used, PDO::PARAM_INT); 
    $query_rsTree->execute(); 
    $result_rsTree = $query_rsTree->fetch(PDO::FETCH_ASSOC); 
    $totalRows_rsTree = $query_rsTree->rowCount(); 
    $used = $result_rsTree['id']; 
    $tree .= '<div align="center" style="border-style: inset; margin:0 0 10px 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px;"><span>'.$result_rsTree['firstname'].'<br>'.$result_rsTree['memberID'].'<br>'.$result_rsTree['regDate'].'</span></div>'; 
    //echo $result_rsTree['firstname'].'<br>'; 
} while ($result_rsMembers = $query_rsMembers->fetch(PDO::FETCH_ASSOC)); 

$timenow = time() + 28800; 

HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Binary Tree</title> 
<script type="text/javascript" src="inc/wz_jsgraphics.js?v=<?php echo $timenow ?>"></script> 
<script type="text/javascript" src="../js/jquery/jquery-1.12.4.js?v=<?php echo $timenow ?>"></script> 
<script type="text/javascript" src="inc/jquery.btree.js?v=<?php echo $timenow ?>"></script> 
<script type="text/javascript"> 
var myTree; 
$(document).ready(function(){ 
    myTree = $("#treeDiv").btree()[0]; 
}); 

function mich(){ 
    $("#box1").css("left", ""); 
    alert($("#box1").css("left") + " - " + $("#box1").css("right")); 
} 
</script> 
</head> 

<body> 
<div id="treeDiv" style="vertical-align:text-top; overflow:hidden; min-height:400px; min-width:1000px; border-style:solid; border-width: 3px; border-color: #000000;"> 
    <?php echo $tree ?> 
    <div align="center" style="border-style: inset; margin:0 0 10px 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px;" id="box1"> 
     <span><?php echo $result['firstname'].'<br>'.$result['memberID'].'<br>'.$result['regDate'] ?></span> 
    </div> 
</div> 
</body> 
</html> 

我遇到的問題是按照親子(左)和親子權利的順序創建樹。

此圖像顯示該樹的創建方式...

這是應該的樣子......

這似乎成爲拉動記錄按照正確的順序排列並將它們分組在正確的父母子女關係中;然而,當它開始構建樹時,它只是從左到右創建左浮動div。

盡我所能,我似乎無法讓他們正確顯示。

我希望有人可以幫助。

回答

1

首先,爲了插件的工作,你的樹必須是完整的/完整的。從結果中你可以看到腳本從左到右繪製了一個無縫樹的開始,但是當它用完新元素後停止。

當前的代碼不允許空白,但它看起來好像可以調整插件腳本源代碼以便不繪製缺少的框(和線),但您仍然需要添加(標記或空)<div>他們,所以你需要知道你是否有空隙(包括元素可能有的所有子元素的空元素)。

第二個問題是您沒有從您的數據中獲得所需的訂單。對於您的示例數據,您需要訂購:1. Elena, 2. Maricel 3. Maria Fe 4.Imelda, 5.Penafranica 6. Diane 7. Ruth, ...,這並不容易。默認的數據結構是threaded binary tree,你可以在檢索完整個二叉樹之後,在php中轉換你的二叉樹,如果你在數組中做了這些,你也可以自動獲得你的差距;或者您可以將該結構(和所需的更新代碼)添加到當前樹中。

但是,您應該只是尋找一種更適合您需求的不同代碼或插件。谷歌搜索ancestor tree htmlfamily tree html應該給你一些替代品。 (沒有測試或評估,第一個結果CSS3 Family Tree看起來可能會工作)。

+0

謝謝...... CSS3家譜具有很大的潛力。 – Kuya

+0

感謝您提供CSS3系列樹建議。創建查詢會花費我很長時間才能按正確的順序(按照CSS3家族樹的要求)進行查詢,但我最終得到了它,並且所有工作都非常好。顯示器在眼睛上也很好看。謝謝! – Kuya