生成动态 JSTree - JStree 仅在数据库名称被硬编码时显示

Question

在我的网站中，我有一个下拉选择选项，其中列出了 MySQL 中可用的数据库。在每个数据库中，我都有一个名为 tree 的表。只要选择选项更改为新数据库，或者页面重新加载发生，我就会向PHP文件进行数据库名称。

我在我的页面上使用以下脚本：

<!-- Color CSS Styles  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>*/
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>    

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script src="https://use.fontawesome.com/f87c84f770.js"></script>
    <link rel="stylesheet"  href="lightslider.css"/>
    <script src="lightslider.js"></script> 
    <script src="jtree.js"></script>

发布数据库名称的代码如下：

index.php

$.post('autorefreshtree.php', {'folder':wd}, function(data) {
    console.log(data);
  });

自动刷新树.php

session_start();
include('connect.php');
$database = $_POST['folder'];
//$database="IPL2010";
$connect = mysqli_connect($hostname, $username, $password,$database );
if ($connect->connect_error) {
  die("Connection failed: " . $connect->connect_error);
} else {
    echo "Connection successful";
}

category_tree(0);
function category_tree($catid){
    global $connect;
    $sql = "select * from `tree` where `parentid` ='$catid'";
    $result = $connect->query($sql);
    while($row = mysqli_fetch_object($result)):
        $i = 0;
        if ($i == 0) echo '<ul>';
            echo '<li>' . $row->nodename;
            category_tree($row->tree_id);
            echo '</li>';
        $i++;
        if ($i > 0) echo '</ul>';
    endwhile;
    }

mysqli_close($connect);

当我运行代码时，Connection Successful 消息登录到控制台，树正在生成，完整的 ul li 参数和数据一起打印到控制台。但是看不到实际的树形结构。

当我在我的 autorefreshtree.php 中进行以下更改时：

//$database = $_POST['folder'];
$database="IPL2010";   

硬编码数据库名称，既可以显示树，也可以看到控制台输出。

以下是显示逻辑：

$(document).ready(function() {
  var wd = localStorage.getItem('wd');
  $.post('autorefreshtree.php', {'folder':wd}, function(data) {
    console.log(data);
  });
})



//Function to autorefresh tree
 var requestUrl = 'autorefreshtree.php';
    $(document).ready(function(){
        $("#annotateDirectories").jstree({
           'core' : {
                'data' : {
                  'url' : requestUrl,
                }
            },
            "checkbox": {   
                "keep_selected_style" : true,
                'tie_selection' : false,        
                'two_state' : true
            },
            'plugins': ['wholerow','search','contextmenu','checkbox','state','sort']
        });
    });

    (function(){ 
        $.ajax({
          type:'get',
          url:requestUrl,
          datatype:"html",
          success:function(data) {
              $('#annotateDirectories').jstree(true).settings.core.data = data;
              $('#annotateDirectories').jstree(true).load_data('#');
          }
        });
    });


//Function to retain the checked status of tree
var selectedBox = sessionStorage.getItem("annotateDirectories");  
  $('#annotateDirectories').val(selectedBox);
  $('#annotateDirectories').change(function() { 
      var dropval = $(this).val();
      sessionStorage.setItem("annotateDirectories", dropval);
});  

Answer 1

根据您的描述，逻辑原因应该是 $_POST['folder'] 为空，即 wd 为空。

您连接数据库成功，因为您的主机、用户和密码正确，但数据库为空，因此未选择任何数据库。

我希望这段代码不在生产环境中，但即使在实践中，也不应该循环查询数据库。

jstree 可以由 node 和 parent_node 的列表构建。