在jstree中包装叶子文本答案

【问题标题】：wrapping leaf text in jstree在jstree中包装叶子文本
【发布时间】：2013-02-25 15:51:26
【问题描述】：

我正在使用 jstree 插件根据 xml 文件填充我的树。一些节点文本大于容器 div。有什么方法可以对 jstree 节点文本进行文本换行吗？

$(document).ready(function(){
     $("#tree").jstree({  
         "xml_data" : {  

             "ajax" : {  

                 "url" : "jstree.xml" 

             },  

             "xsl" : "nest"


         },  
         "themes" : {  

             "theme" : "classic",  

            "dots" : true,  

             "icons" : true 

         },  

        "search" : {  

                 "case_insensitive" : true,  

                 "ajax" : {  

                     "url" : "jstree.xml" 

                 }  

             },  
              "plugins" : ["themes", "xml_data", "ui","types", "search"] 


    }).bind("select_node.jstree", function (event, data) {

        $("#tree").jstree("toggle_node", data.rslt.obj);

【问题讨论】：

标签： jstree

【解决方案1】：

这适用于 3.0.8

.jstree-anchor {
    /*enable wrapping*/
    white-space : normal !important;
    /*ensure lower nodes move down*/
    height : auto !important;
    /*offset icon width*/
    padding-right : 24px;
}

对于那些使用wholerow 插件的人；

//make sure the highlight is the same height as the node text
$('#tree').bind('hover_node.jstree', function() {
    var bar = $(this).find('.jstree-wholerow-hovered');
    bar.css('height',
        bar.parent().children('a.jstree-anchor').height() + 'px');
});

对于 3.1.1，以及它也可以与 select_node.jstree 一起使用，请改用此函数：

function(e, data) {
    var element = $('#' + data.node.id);
    element
        .children('.jstree-wholerow')
        .css('height', element.children('a').height() + 'px')
    ;
}

【讨论】：

wholerow 插件提示正是我想要的。
很好的答案！这对我有用，但对于具有预选数据的树，它没有。我使用了以下内容：
$(#tree').bind 'open_node.jstree', ->
bar = $(this).find('.jstree-wholerow-clicked')
bar.css 'height', bar.parent().children('a.jstree-anchor').height() + 'px'

【解决方案2】：

尝试将以下样式添加到 jsTree div 的子锚点：

#jstree_div_id a {
    white-space: normal !important;
    height: auto;
    padding: 1px 2px;
}

我的 jsTree div 样式也有一个最大宽度：

#jstree_div_id
{
    max-width: 200px;
}

【讨论】：

【解决方案3】：

#tree_id {
  .jstree-anchor {
    white-space: normal;
    height: auto;
  }
  .jstree-default .jstree-anchor {
    height: auto;
  }
}

【讨论】：

【解决方案4】：

将来自 Hashbrown 和 TwiceB 的答案放在一起，使其与 Wholerow 插件和预选数据一起使用。

启用文本换行

.jstree-anchor {
    /*enable wrapping*/
    white-space : normal !important;
    /*ensure lower nodes move down*/
    height : auto !important;
    /*offset icon width*/
    padding-right : 24px;
}

在悬停和选择时启用环绕文本的突出显示

$('#tree').bind('open_node.jstree', function () {
    let bar = $(this).find('.jstree-wholerow-clicked');
    bar.css('height',
        bar.parent().children('a.jstree-anchor').height() + 'px');
});
$('#tree').bind('hover_node.jstree', function () {
    var bar = $(this).find('.jstree-wholerow-hovered');
    bar.css('height',
        bar.parent().children('a.jstree-anchor').height() + 'px');
});

【讨论】：

【解决方案5】：

我通过巧合找到了答案，它对我有用，但是，我有另一个 css 规则阻止代码正常运行

我在“我的代码”中删除了 css 规则 (min-height:200px)，以下答案对我有用。

#tree_div_id a {
white-space: normal;
height: auto;
padding: 0.5ex 1ex;
margint-top:1ex;
}

【讨论】：

【解决方案6】：

这个问题在下面得到解决。

https://www.npmjs.com/package/treeview-sample

根据此示例，文件夹 DOM 将输出以下内容。

<a class="jstree-anchor jstree-anchor-formatted" href="#" tabindex="-1" role="treeitem" aria-selected="false" aria-level="3" id="grandchild2_anchor" title="Human">
  <i class="jstree-icon jstree-themeicon" role="presentation"></i>
  <span class="jstree-anchor-text">Human</span>
</a>

【讨论】：