Javascript JSTree-自动刷新时变为普通ul li_Javascript_Php_Jquery

Javascript JSTree-自动刷新时变为普通ul li

javascript php jquery

Javascript JSTree-自动刷新时变为普通ul li,javascript,php,jquery,Javascript,Php,Jquery,我使用PHP从MySQL表生成JSTree。我有三份档案 index.php-我有div加载JStree的页面 autorefreshtree.php-连接到mysql、获取数据并回显ul和li的页面 jtree.js-此页面包含jquery函数，用于将ul和li转换为带有复选框的树 Index.php <div class="rhsbar2">  <div class="tab-content">

我使用PHP从MySQL表生成JSTree。我有三份档案

index.php-我有div加载JStree的页面

autorefreshtree.php-连接到mysql、获取数据并回显ul和li的页面

jtree.js-此页面包含jquery函数，用于将ul和li转换为带有复选框的树

Index.php

<div class="rhsbar2"> <!-- JSTree begins -->       
   <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="annotateDirectories">

    </div> 
   </div>
</div> <!-- JSTree ends -->

<script>
function autoload() {
  xmlhttp =new XMLHttpRequest();
  xmlhttp.open("GET", "autorefreshtree.php", false);
  xmlhttp.send(null);
  document.getElementById('annotateDirectories').innerHTML=xmlhttp.responseText;
}

autoload();

//load every two seconds
setInterval(function(){
  autoload();
},2000);
</script>

<?php
    require 'connect.php';
    if ($connect->connect_error) {
      die("Connection failed: " . $connect->connect_error);
    }
    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->node_name;
                category_tree($row->tree_id);
                echo '</li>';
            $i++;
            if ($i > 0) echo '</ul>';
        endwhile;
        }
    mysqli_close($connect);
?>

我面临的问题是，当页面加载时，树被正确呈现。然而，当两秒钟后重新加载时，我只显示ul和li，而不是树

我已经让它为我自己工作了。我将把我的代码粘贴到这里。您可以像下面这样创建index.php和autorefreshtree.php，并在您的机器上进行测试。如果一切正常，试着对代码进行必要的修改，使其正常工作

index.php


var requestUrl='/autorefreshtree.php'；
$（文档）.ready（函数（）{
$（“#注释目录”）.jstree({
“核心”：{
“数据”：{
“url”：请求url，
}
},
“复选框”：{
“tie_selection”：false，
“两种状态”：正确
},
'插件'：['wholerow'，'search'，'checkbox'，'sort']
});
});
setInterval（函数（）{
$.ajax({
类型：'get'，
url:requestUrl，
数据类型：“html”，
成功：功能（数据）{
$（'#annotateDirectories'）.jstree（true）.settings.core.data=data；
$（'#annotated directories'）.jstree（true.refresh（）；
}
});
}, 2000);

autorefreshtree.php



A.1标题













B.1标题

我希望这能有所帮助。

试试这个

setInterval（function（）{autoload（）；$（'#annotateDirectories'）.jstree（true）.refresh（）；}，2000）

@ksoni谢谢你…仍然只在2秒后返回ul li。请尝试此

$（“#注释目录”）.jstree（“刷新”）这与刷新有关。@ksoni再次感谢您……但这一个也不起作用……事实上，我已经尝试了许多版本的刷新和重画。好的，：-（您可以尝试更改这个文档。getElementById（'annotateDirectories'）。innerHTML=xmlhttp.responseText；
到$（'#annotateDirectories'）。jstree（true）.settings.core.data=xmlhttp.responseText
或$（“#注释目录”）.jstree（true）.settings.core.data=“autorefreshtree.php”
并仍然添加刷新行$（“#注释目录”）.jstree（true）.refresh（）
设置好数据后。非常好……谢谢你……这是我为之奋斗了一周的事情……非常感谢……我会将它集成到我的代码中。我已经将它集成到我的代码中……它正在工作……再次非常感谢。@Apricot欢迎你！刷新逻辑很复杂，但我很高兴它现在对你起作用：-）很抱歉成为一个害虫…刷新时是否可以保留选中状态…我尝试使用保持选中状态\u style=true和其他JS选项在刷新时保持复选框处于选中状态…但不起作用我自己还没有这样做，但我相信可能有两种方法可以探索。首先，在使用ajax刷新树之前，可以尝试获取选定的值，然后在刷新之后使用以前选定的值更新树。当新项目开始出现时，当项目在树中更改时，此选项可能会出现问题。另一个健壮的选项可能是，每当选择一个项目时，将其发送到您的数据库以临时存储它，并且每当您检索ul/li时，尝试自动选择这些项目。
$(document).ready(function(){
    $("#annotateDirectories").jstree({
        "checkbox": {   
        'tie_selection' : false,        
        'two_state' : true 
    },
    'plugins': ['wholerow','search','checkbox', 'sort']
    });
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
    <script type="text/javascript">
    var requestUrl = '/autorefreshtree.php';
    $(document).ready(function(){
        $("#annotateDirectories").jstree({
           'core' : {
                'data' : {
                  'url' : requestUrl,
                }
            },
            "checkbox": {   
                'tie_selection' : false,        
                'two_state' : true 
            },
            'plugins': ['wholerow','search','checkbox', 'sort']
        });
    });
    setInterval( function(){ 
        $.ajax({
          type:'get',
          url:requestUrl,
          datatype:"html",
          success:function(data) {
              $('#annotateDirectories').jstree(true).settings.core.data = data;
              $('#annotateDirectories').jstree(true).refresh();
          }
        });
    }, 2000);
    </script>
</head>
<body>
    <div role="tabpanel" class="tab-pane active" id="annotateDirectories">
    </div> 
</body>
</html>

<ul>
    <li>
       A.1 Heading
       <ul> 
           <li><a href="">A.1.1 Heading</a></li>
           <li><a href="">A.1.2 Heading</a>
                <ul>
                   <li><a href="">A.1.2.1 Heading</a></li>
                   <li><a href="">A.1.2.2 Heading</a></li>
                   <li><a href="">A.1.2.3 Heading</a></li>
                   <li><a href="">A.1.2.4 Heading</a></li>
                </ul>
           </li>
       </ul>
    </li>
    <li>
       B.1 Heading
       <ul> 
           <li><a href="">B.1.1 Heading</a></li>
           <li><a href="">B.1.2 Heading</a>
                <ul>
                   <li><a href="">B.1.2.1 Heading</a></li>
                   <li><a href="">B.1.2.2 Heading</a></li>
                   <li><a href="">B.1.2.3 Heading</a></li>
                   <li><a href="">B.1.2.4 Heading</a></li>
                </ul>
           </li>
       </ul>
    </li>
</ul>