【问题标题】:How to follow table certain column data to show the tooltip?如何按照表格某些列数据显示工具提示?
【发布时间】:2020-04-14 03:40:08
【问题描述】:

我创建了 js 树来显示文件夹路径名。我的问题是如何按照数据库表的某些列数据显示工具提示。

下面是我的编码,这个编码<div id="folder_jstree" title="JTM"></div>我只是硬编码写了标题“JTM”来显示工具提示:


  <?php 
   $folderData = mysqli_query($mysql_con,"SELECT * FROM folders");

   $folders_arr = array();
   while($row = mysqli_fetch_assoc($folderData)){
      $parentid = $row['parentid'];
      if($parentid == '0') $parentid = "#";

      $selected = false;$opened = false;
      if($row['id'] == 2){
         $selected = true;$opened = true;
      }
      $folders_arr[] = array(
         "id" => $row['id'],
         "parent" => $parentid,
         "text" => $row['name'],
         "state" => array("selected" => $selected,"opened"=>$opened) 
      );
   }

   ?>

   <!-- Initialize jsTree -->
   <div id="folder_jstree" title="JTM"></div>
   <!-- Store folder list in JSON format -->
   <textarea style="display:none;" id='txt_folderjsondata'><?= json_encode($folders_arr) ?></textarea>


<script>
$(document).ready(function(){
   var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());

   $('#folder_jstree').jstree({ 'core' : {
      'data' : folder_jsondata,
      'multiple': false
   } });

});

  $( function() {
    $( document ).tooltip();
  } );

</script>

下面是我的数据库表名folders,我需要按照表name在工具提示中显示表category。例如,如果我在 JS 树中鼠标指针 MPK 400 Pengurusan Kewangan,那么工具提示将显示 categroy 名称是“JKP”。我在表中显示了三种类型 folders ,有 JKP,JTM 和 'JTM (Berhubung Kod 100-1/1/2)':

[Table name is folders]1

以下是我的输出: [Output]2

希望有人可以指导我或向我展示解决此问题的示例。谢谢。

【问题讨论】:

    标签: jquery sql jstree


    【解决方案1】:

    您可以在 jstree 悬停事件上应用工具提示。您必须将工具提示文本保留在节点的数据中。

    在 php 代码中,您可以在数组中包含 category

     $folders_arr[] = array(
        "id" => $row['id'],
        "parent" => $parentid,
        "text" => $row['name'],
        "category" => $row['category'],
        "state" => array("selected" => $selected,"opened"=>$opened) 
     );
    

    在 jsTree 初始化后的 javascript 代码中,您可以设置事件处理程序。

    $('#folder_jstree').bind('hover_node.jstree', function (e, data) {
        $("#" + data.node.id).attr("title", data.node.original.category);
    });
    

    【讨论】:

    • 再次感谢您的回答。我认为您在 JS 树方面更专业。我已经在 js fiddle 中尝试过你的代码可以工作jsfiddle.net/ason5861_cs/Lr5ow30e/11。但是,如果我恢复正常,将您的一面放在我的编码中,就无法工作。我不知道我遇到了什么问题。
    • 我不太确定,它确实适用于小提琴链接。我对其进行了一些更新,以将事件处理程序保留在 $(document).ready 函数中。这是新 jsFiddle 的 link
    • 再次感谢。你拯救了我的一天。你有whatapps联系方式吗?如果下次我有类似的问题,我会在 stackoverflow 中告诉你
    • 不客气。我认为在 SO 上共享联系人不是一个好主意。
    • 我在这里有类似的问题stackoverflow.com/questions/61344869/…。但不是node.js,需要在表格中显示不同的颜色,如果你有空可以看到我的问题。谢谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-10-04
    • 1970-01-01
    • 2010-09-17
    • 2014-07-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多