将 qTip2 工具提示添加到 jsTree 的每个节点

Question

我正在以 recursive 的方式使用 thymeleaf 创建一个树结构来生成 html ul 和 li 元素。之后，我使用 jsTree 将此列表转换为树。在那之前，一切都很好。之后，我想向树的每个元素添加一个包含 html 内容的工具提示。我正在用 qTip2 尝试它，但出于某种原因，它只在根节点（platform.projectname 和 platform.projectname2）上显示一个空的工具提示，而在子节点上什么也没有显示。

以前有人做过吗？任何建议将不胜感激。

HTML/Thymeleaf 树的容器：

<div id="jstree_demo_div">
    <div th:fragment="submenu" th:remove="tag">
        <ul>
            <li th:each="node : ${nodelist}">
                <span th:text="${node.path}" class="treeelement">Town hall</span>
                <div class="tooltip">
                    Logging configuration:
                    <br/><br/>
                    <select>
                        <option value="trace">Trace</option>
                        <option value="debug">Debug</option>
                        <option value="info">Info</option>
                        <option value="warn">Warn</option>
                        <option value="error">Error</option>
                    </select>
                </div>
                <div th:with="nodelist = ${node.children}" th:include="this::submenu" th:remove="tag"></div>
            </li>
        </ul>
    </div>
</div>

JavaScript:

// jsTree
$(function () {

    // 6 create an instance when the DOM is ready
    $('#jstree_demo_div').jstree();

    // 7 bind to events triggered on the tree
    $('#jstree_demo_div').on("changed.jstree", function (e, data) {
        console.log(data.selected);
    });

    // 8 interact with the tree - either way is OK
    $('button').on('click', function () {
        $('#jstree_demo_div').jstree(true).select_node('child_node_1');
        $('#jstree_demo_div').jstree('select_node', 'child_node_1');
        $.jstree.reference('#jstree_demo_div').select_node('child_node_1');
    });
});

// qTip2
$(function(){
    $('.treeelement').each(function(){
        $(this).qtip({
            content: {
                text: $(this).next('.tooltip')
            },
            show: 'click',
            hide: {
                fixed: true,
                delay: 2000
            }
        });
    });
});

Answer 1

我想我成功了，检查一下：JS Fiddle.

尝试：

将您的 qtip 绑定移动到 loaded jsTree 事件中，以确保在您开始绑定 qtip 之前加载它；
绑定到 jstree-ancor class jsTree 节点有
您不需要使用 each

你的工具提示没有文本的原因是在构建树时 jsTree 重建你的 <li> 元素而遗漏了你的 .tooltip div。

Answer 2

我找到了一种更适合我需要的方法，here is a JSFiddle example。

首先，我注册了选择节点时要执行的方法 nodeSelected，然后我创建并显示了工具提示。这允许我为 <select>.

分配一个特定的 ID

$('#jstree_demo_div').on("changed.jstree", function (e, data) {
    nodeSelected(data);
})
...

function nodeSelected(data){
    console.log(data.selected);

    // Using getElementById since JQuery does not work well with dots in identifiers
    $(document.getElementById(data.selected + '_anchor')).qtip({
        content: {
            text: 'Logging configuration:<br/><br/><select><option value="TRACE">Trace</option><option value="DEBUG">Debug</option><option value="INFO">Info</option></select></div>
        },
        show: 'click',
        hide: {
            fixed: true,
            delay: 1000
        }
     });
    $(document.getElementById(data.selected + '_anchor')).qtip("show");
}

将 qTip2 工具提示添加到 jsTree 的每个节点

Adding qTip2 tooltips to each node of a jsTree

jstree

thymeleaf

qtip2