尝试创建二叉树，但我的下线顺序不正确答案

【问题标题】：Trying to create a binary tree but my downline is not in the correct order尝试创建二叉树，但我的下线顺序不正确
【发布时间】：2016-11-04 08:19:11
【问题描述】：

我正在尝试使用 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 - 是该子记录的“父 ID”
position - 是二进制结构中的位置，左或右

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。

尽我所能，我似乎无法正确显示它们。

我希望有人可以帮助解决这个问题。

【问题讨论】：

标签： javascript php jquery mysql pdo

【解决方案1】：

首先，要使插件正常工作，您的树必须完整/完整。从您的结果中，您可以看到脚本从左到右绘制了一棵无间隙树的开头，但是当它用完新元素时停止了。

当前代码不允许有间隙，但看起来可以调整插件脚本源代码以不绘制缺失的框（和线条），但您仍然需要添加一个（标记或空) <div> 给他们，所以你需要知道你是否在某处有间隙（包括该元素可能具有的所有子元素的空元素）。

第二个问题是您没有从数据中获得所需的顺序。对于您的示例数据，您需要订购：1. Elena, 2. Maricel 3. Maria Fe 4.Imelda, 5.Penafranica 6. Diane 7. Ruth, ...，这并不容易获得。它的默认数据结构是threaded binary tree，例如，您可以检索整个二叉树后在 php 中转换二叉树，如果您在数组中执行此操作，您也可以自动获取间隙；或者您可以将该结构（以及所需的更新代码）添加到您当前的树中。

但您可能应该只寻找更符合您要求的不同代码或插件。谷歌搜索ancestor tree html 或family tree html 应该会给你一些选择。（没有测试或评估，第一个结果CSS3 Family Tree 看起来可能有效）。

【讨论】：

谢谢... CSS3 Family Tree 潜力巨大。
感谢您对 CSS3 家谱的建议。创建查询以使我的血统以正确的顺序（根据 CSS3 家谱的要求）创建查询需要相当长的时间，但我最终得到了它，并且一切都运行得非常好。显示器对眼睛也很好。谢谢！

【解决方案2】：

如果您正在寻找 MLM 风格的表示形式，请查看此链接，它可能会有所帮助 How to generate a tree for MLM ( Multi-Level Marketing ) in JavaScript for either JSON / XML data

【讨论】：

感谢您的建议，但至少可以说，已接受答案的可见展示还有很多不足之处。如果您有任何其他建议，我愿意接受。