Jquery 如何使用每次加载1级的AJAX创建树表？
我仍然无法达到我的期望。 我的数据来自mysql数据库，具有8级层次结构和数千条记录 我按照发帖的答案回答了这个问题： 并使用我数据库中的数据 它工作得很好，但是：Jquery 如何使用每次加载1级的AJAX创建树表？,jquery,ajax,treetable,Jquery,Ajax,Treetable,我仍然无法达到我的期望。 我的数据来自mysql数据库，具有8级层次结构和数千条记录 我按照发帖的答案回答了这个问题： 并使用我数据库中的数据 它工作得很好，但是： 开始加载表需要很长时间，因为我的AJAX在开始时仍然循环数据库中的所有数据（我不知道这方面的知识，只知道复制和试用） 我可以使用style=“display:none；”在第一时间使树闭合，但当我从第一级单击任何节点时，它会扩展该节点下的所有级别（第二级到第八级），而不是仅扩展第二级 我仍然不知道如何为上述两个问题编写AJAX脚本，
<html>
<head>
<style type="text/css">
.name { color: #000000; }
.folderclose { height: 16px;
width: 16px;
display: inline-block; }
.area .last { background-image: url(02_files/01_images/paper_small.png); }
.folderclose { background-image: url(02_files/01_images/folder_green.png); }
.expand .tog { background-image: url(02_files/01_images/folder_green_open.png); }
</style>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
</head>
<body>
<form>
<table>
<tr><th>No</th>
<th>Area & Plant</th>
<th>Location</th>
<th>Main Group</th>
<th>Sub Group</th>
<th>Function Group</th>
<th>Functional Location</th>
<th>Equipment</th>
</tr>
<? mysql_connect("localhost","root","");
mysql_select_db("sfer");
$areaid = 1;
$sql = mysql_query("SELECT DISTINCT(Business_Area) FROM b01_functional_location");
while($data=mysql_fetch_array($sql)){?>
<tr id="area">
<td align='center' class="id"><?=$areaid?></td>
<td align='left' width='400'> <a class="folderclose"></a>
<a title='<?=$areaid.'. '.$data['Business_Area']?>' href="javascript:void(0)" class="name"><?=$data['Business_Area']?></a></td></tr>
<tr id="plant<?=$areaid?>"></tr><?
$areaid++; }
if (!empty($_POST['area'])){
$plantid = 1;
$sql = mysql_query("SELECT DISTINCT(Plant) FROM b01_functional_location WHERE Business_Area='$_POST[area]'");
while($data=mysql_fetch_array($sql)){?>
<tr id="plant">
<td align='center' class="id"><?=$plantid?></td>
<td align='left' width='400'> <a class="folderclose"></a>
<a title='<?=$plantid.'. '.$data['Plant']?>' href="javascript:void(0)" class="name"><?=$data['Plant']?></a></td></tr>
<tr id="location<?=$plantid?>"></tr><?
$plantid++; }}?>
</table>
</form>
</body>
<script type="text/javascript">
$('document').ready(function(){
$('#area .name').click(function() {
var area = $(this).text();
var areaid = $(this).parent().parent().find('.id').text();
$('#plant'+areaid).html('<img src="02_files/01_images/loading.gif">');
$.ajax({
type: 'POST',
url: 'Action.php',
data: 'area='+area+'&areaid='+areaid,
success: function(data){
$('#plant'+areaid).html(data).toggle();
}
});
});
$('#plant .name').click(function() {
var plant = $(this).text();
var plantid = $(this).parent().parent().find('.id').text();
$('#location'+plantid).html('<img src="02_files/01_images/loading.gif">');
$.ajax({
type: 'POST',
url: 'Action.php',
data: 'plant='+plant+'&plantid='+plantid,
success: function(data){
$('#location'+plantid).html(data);
}
});
});
});
</script>
.name{color:#000000；}
.folderclose{高度：16px；
宽度：16px；
显示：内联块；}
.area.last{background image:url（02_files/01_images/paper_small.png）；}
.folderclose{背景图像：url（02_files/01_images/folder_green.png）；}
.expand.tog{背景图像：url（02_files/01_images/folder_green_open.png）；}
不
区域和工厂
位置
主要群体
分组
功能组
功能定位
装备
我建议你问两个问题。对于您的第一个问题，有几个选项。花费这么长时间的原因之一是您正在循环中调用数据库。这是低效的。请看使用存储过程进行数据库调用，并返回包含层次结构信息的数据集，然后在单个循环中使用该数据集。另一个选项是仅加载第一层，并使用ajax按需填充其余部分。@JonP:Question editted。需要您进一步解释关于数据库调用的存储过程。我也不了解AJAX，是否只能使用html/css/js？非常感谢。ajax中的J是用于javascript的，这就是异步处理部分加载表的方式（ajax中的第一个A）。因此，如果没有完整的页面回帖，这是部分加载表的唯一方法。需要Ajax方面的帮助，无论是否使用Jquery。
<?php
mysql_connect("localhost","root","");
mysql_select_db("sfer");
if (!empty($_POST['area'])){
$plantid = 1;
$sql = mysql_query("select DISTINCT(Plant), Plant_Description from b01_functional_location where Business_Area='$_POST[area]'");
while($data=mysql_fetch_array($sql)){?>
<tr id="plant">
<td align='center' class="id"><?=$plantid?></td>
<td align='left' width='400'> <a class="folderclose"></a>
<a title='<?=$plantid.'. '.$data['Plant']?>' href="javascript:void(0)" class="name"><?=$data['Plant']?></a></td>
<td align='left'><?=$data['Plant_Description']?></td>
</tr><? $plantid++;} }
if (!empty($_POST['plant'])){
$locationid = 1;
$sql = mysql_query("select DISTINCT(Location), Location_Desc from b01_functional_location where Plant='$_POST[plant]'");
while($data=mysql_fetch_array($sql)){?>
<tr id='location'>
<td align='center' class="id"><?=$locationid?></td>
<td align='left' width='400'> <a class="folderclose"></a>
<a title='<?=$locationid.'. '.$data['Location']?>' href="javascript:void(0)" class="name"><?=$data['Location']?></td>
<td align='left'><?=$data['Location_Desc']?></td>
</tr><? $locationid++;} }