在悬停时在每个节点前添加创建和编辑图标

Question

我想为我的 jstree 实例添加一个功能，以便在每个节点前面显示带有自定义操作的图标，例如 create multi node , delete , edit 等在鼠标悬停的节点上，如下图所示：

这是我的代码：

$(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>

有什么办法可以添加这个功能吗？

Answer 1

既然你没有post任何代码，我会给你想法。我猜你有一个包含所有这些节点的列表。我建议在这些节点中添加 <li>leaf node x-y</li> 更多项目 display:none.

在为那些 <li> 的 mouseenter 绑定事件并删除 display:none 后，您可能需要显示（显示：块即）

在这里我给你一个简单的 jsfiddle 作为想法。你将不得不稍微改变它并使用你的图像等。

https://jsfiddle.net/5yduexox/

在悬停时在每个节点前添加创建和编辑图标

add create and edit icons in front of each node on hover

jquery

jstree