18

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);
4

6 に答える 6

18

これは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')
    ;
}
于 2014-12-01T06:04:24.777 に答える
11

jsTree div の子アンカーに次のスタイルを追加してみてください。

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

また、jsTree div スタイリングに最大幅があります。

#jstree_div_id
{
    max-width: 200px;
}
于 2013-12-10T20:51:34.820 に答える
1 
#tree_id {
  .jstree-anchor {
    white-space: normal;
    height: auto;
  }
  .jstree-default .jstree-anchor {
    height: auto;
  }
}
于 2014-07-02T16:33:08.020 に答える
0

たまたま答えを見つけてうまくいきましたが、コードがうまく機能しない別のCSSルールがありました

css ルール (min-height:200px) を「コード内」で削除したところ、次の回答が期待どおりに機能しました。

#tree_div_id a {
white-space: normal;
height: auto;
padding: 0.5ex 1ex;
margint-top:1ex;
}
于 2015-05-19T11:05:24.757 に答える
0

この問題は以下で解決されます。

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>
于 2021-11-18T03:53:38.677 に答える