hinzufügen Erstellen und Bearbeiten von Symbolen vor jedem Knoten auf schweben

Question

ich eine Fähigkeit, meine jstree Instanz hinzufügen will also, dass vor jedem Knoten Anzeigesymbole mit benutzerdefinierten Aktionen wie Multi Knoten erstellen, löschen, bearbeiten und usw. auf Maus Knoten, wie dieses Bild schwebt:

Dies ist mein Codes:

$(document).ready(function() { 
 
    $treeview = $('#jstree_demo_div'); 
 

 
    $treeview.on("loaded.jstree", function (event, data) { 
 
     $(this).jstree("open_all"); 
 
    }); 
 

 
    $treeview.jstree({ 
 
     
 
     "core": { 
 
      "check_callback": true 
 
     }, 
 
     "checkbox": { 
 
      "keep_selected_style": false 
 
     }, 
 
     "plugins": ["checkbox", "dnd" , "contextmenu"] 
 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> 
 

 
<div id="jstree_demo_div" style="direction: rtl"> 
 
     <ul> 
 
      <li>sport 
 
       <ul> 
 
        <li><a href="#">football</a></li> 
 
        <li><a href="#">basketbal</a></li> 
 
       </ul> 
 
      </li> 
 
      <li>learning 
 
       <ul> 
 
        <li><a href="#">web</a></li> 
 
        <li><a href="#">html</a></li> 
 
        <li><a href="#">css</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 

 
    </div>

Gibt es eine Möglichkeit, diese Funktion hinzuzufügen?

Answer 1

Da Sie keinen Code geschrieben haben, werde ich Ihnen die Idee geben. Ich nehme an, Sie haben eine Liste mit all diesen Knoten. Ich schlage vor, in diesen Knoten <li>leaf node x-y</li> weitere Elemente mit Anzeige hinzufügen: keine.

Nach binden ein Ereignis auf MouseEnter- für diejenigen <li> und entfernen Sie die display: none für die Anzeige müssen Sie möglicherweise (display: block d.h)

Hier lasse ich Ihnen eine einfache jsfiddle, die als Idee funktioniert. Sie müssen es wenig ändern und Ihre Bilder verwenden usw.

https://jsfiddle.net/5yduexox/