Question

我的节点似乎覆盖了另一个区域，但似乎无法正确包含它。如果您有关于如何执行此操作的想法，那么我也将接受该解决方案。看到许多节点字符串可能很长，向节点添加工具提示可能是个好主意...

my script...
<script type="text/javascript">
$(document).ready(function(){
$('#jstree').jstree({

    plugins: ["themes","html_data", "state"],
    'core' : {
         'themes' : {
        'theme' : "apple",
        'dots' : true,
        'icons' : false
    },
        'data' : jsonTreeData
    }
    }).bind("select_node.jstree", function (e, data) {
     var href = data.node.a_attr.href;
     var parentId = data.node.a_attr.parent_id;
     if(href == '#')
     return '';

     window.open(href);

});
$('#jstree').slimScroll({
    height: '400px'
});

<div class="col-xl-3" style="background-color:#eeeeee; 
border-right:thin solid rgba(0,0,0,0.2);">


<div class="row" 
style="width: auto;margin: 0px;padding-left:5px;
padding-right: 5px;padding-top: 10px;">

<div id="jstree" class="treeview"></div>

</div>
</div>

Answer 1

要向节点添加工具提示，可以通过添加title在准备数据时使用a_attr属性。您也可以在相同的属性中使用超链接。

您可以如下使用json数据：

var jsondata = [
    { "id": "ajson1", "parent": "#", "text": "Simple root node", "a_attr": {href:'http://example1.com', title:'Simple root node tooltips'} },
    { "id": "ajson2", "parent": "#", "text": "Root node 2", "a_attr": {href:'http://example2.com', title:'Root node 2 tooltips'} },
    { "id": "ajson3", "parent": "ajson2", "text": "Child 1",  "a_attr": {href:'http://example3.com', title:'Child 1 tooltips'} },
    { "id": "ajson4", "parent": "ajson2", "text": "Child 2",  "a_attr": {href:'http://example4.com', title:'Child 2 tooltips'} }
];

它将完成其余的工作。您可以在下面的jsTree-tooltips-example-with-linked-node中查看简单而完整的工作示例。

如何将工具提示添加到特定的jsTree节点

1 个答案: