个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 02:47:14 25 4
gpt4 key购买 nike

我正在尝试使用 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/

25 4 0
文章推荐： ios - (Xcode) 解析。如何在不使用 PFQueryTableViewController 的情况下删除表中的行
文章推荐： ios - 切换 CALayer 时如何设置动画
文章推荐： ios - RubyMotion Parse.com 错误
文章推荐： elasticsearch - 从 Elasticsearch 中的数组中选择匹配的对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com