generating dynamic jstree-jstree仅在数据库名称为硬编码时显示

kognpnkq  于 2021-06-23  发布在  Mysql
关注(0)|答案(1)|浏览(277)

在我的网站上,我有一个下拉选择选项,列出了mysql中可用的数据库。在每个数据库中,我都有一个名为tree的表。每当select选项被更改为一个新的数据库,或者页面重新加载时,我都会将数据库名称发布到一个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>

发布数据库名称的代码如下:
索引.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 消息登录到控制台,树被生成,完整的ulli参数以及数据被打印到控制台。但是,无法看到实际的树结构。

在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);
});
xqkwcwgp

xqkwcwgp1#

根据您的描述,逻辑原因应该是$\u post['folder']为空,即wd为空。
您成功连接到数据库,因为您的主机、用户和密码正确,但数据库为空,因此未选择任何数据库。
我希望这段代码不是在生产中,但即使在实践中,也不应该在循环中查询数据库。
jstree可以由节点和父节点的列表构建。

相关问题