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

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

在我的网站上,我有一个下拉选择选项,列出了mysql中可用的数据库。在每个数据库中,我都有一个名为tree的表。每当select选项被更改为一个新的数据库,或者页面重新加载时,我都会将数据库名称发布到一个php文件中。
我在页面上使用以下脚本:

  1. <!-- Color CSS Styles -->
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  4. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  5. <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
  6. <script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>*/
  7. <!-- Latest compiled and minified CSS -->
  8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  9. <!-- Optional theme -->
  10. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  11. <!-- Latest compiled and minified JavaScript -->
  12. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  13. <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
  14. <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
  15. <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
  16. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
  17. <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
  18. <script src="https://use.fontawesome.com/f87c84f770.js"></script>
  19. <link rel="stylesheet" href="lightslider.css"/>
  20. <script src="lightslider.js"></script>
  21. <script src="jtree.js"></script>

发布数据库名称的代码如下:
索引.php

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

自动刷新树.php

  1. session_start();
  2. include('connect.php');
  3. $database = $_POST['folder'];
  4. //$database="IPL2010";
  5. $connect = mysqli_connect($hostname, $username, $password,$database );
  6. if ($connect->connect_error) {
  7. die("Connection failed: " . $connect->connect_error);
  8. } else {
  9. echo "Connection successful";
  10. }
  11. category_tree(0);
  12. function category_tree($catid){
  13. global $connect;
  14. $sql = "select * from `tree` where `parentid` ='$catid'";
  15. $result = $connect->query($sql);
  16. while($row = mysqli_fetch_object($result)):
  17. $i = 0;
  18. if ($i == 0) echo '<ul>';
  19. echo '<li>' . $row->nodename;
  20. category_tree($row->tree_id);
  21. echo '</li>';
  22. $i++;
  23. if ($i > 0) echo '</ul>';
  24. endwhile;
  25. }
  26. mysqli_close($connect);

当我运行代码时,我得到 Connection Successful 消息登录到控制台,树被生成,完整的ulli参数以及数据被打印到控制台。但是,无法看到实际的树结构。

在autorefreshtree.php中进行以下更改时:

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

硬编码数据库名称,显示树和控制台输出。

显示逻辑如下:

  1. $(document).ready(function() {
  2. var wd = localStorage.getItem('wd');
  3. $.post('autorefreshtree.php', {'folder':wd}, function(data) {
  4. console.log(data);
  5. });
  6. })
  7. //Function to autorefresh tree
  8. var requestUrl = 'autorefreshtree.php';
  9. $(document).ready(function(){
  10. $("#annotateDirectories").jstree({
  11. 'core' : {
  12. 'data' : {
  13. 'url' : requestUrl,
  14. }
  15. },
  16. "checkbox": {
  17. "keep_selected_style" : true,
  18. 'tie_selection' : false,
  19. 'two_state' : true
  20. },
  21. 'plugins': ['wholerow','search','contextmenu','checkbox','state','sort']
  22. });
  23. });
  24. (function(){
  25. $.ajax({
  26. type:'get',
  27. url:requestUrl,
  28. datatype:"html",
  29. success:function(data) {
  30. $('#annotateDirectories').jstree(true).settings.core.data = data;
  31. $('#annotateDirectories').jstree(true).load_data('#');
  32. }
  33. });
  34. });
  35. //Function to retain the checked status of tree
  36. var selectedBox = sessionStorage.getItem("annotateDirectories");
  37. $('#annotateDirectories').val(selectedBox);
  38. $('#annotateDirectories').change(function() {
  39. var dropval = $(this).val();
  40. sessionStorage.setItem("annotateDirectories", dropval);
  41. });
xqkwcwgp

xqkwcwgp1#

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

相关问题