Question

我正在以recursive方式使用百里香叶创建一个树结构来生成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节点具有的jstree-ancor类
您无需使用each

您的工具提示没有文字的原因是，在构建树时，jsTree会重建您的<li>元素而忽略您的.tooltip div。

Answer 2

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

首先，我注册选择节点时要执行的方法nodeSelected，然后创建并显示工具提示。这允许我将特定ID分配给<select>。

$('#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的每个节点

2 个答案: