我正在尝试使用 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- 是二进制结构中的位置，Left 或 Right
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。
尽我所能，我似乎无法让它们正确显示。
我希望有人能帮助解决这个问题。
最佳答案
首先，要使插件正常工作，您的树必须完整/完整。从您的结果中，您可以看到脚本从左到右绘制了一棵无间隙树的开头，但随后在用完新元素时停止。
当前代码不允许有间隙，但看起来可以调整插件脚本源代码以不绘制缺失的框(和线)，但您仍然需要添加一个(标记或空的) ) <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 看起来可能有效)。
关于javascript - 尝试创建二叉树，但我的下线顺序不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40418025/