为什么在填充 jstree 时不显示我的自定义 html

Question

我想要 jstree 和我的自定义 html 数据

我想得到与下面显示的结果类似的 jstree

 ul.ascii li{position: relative;}

<div class="container">

    <ul class="ascii">
        <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
        <li><a href="#">item 4</a></li>
        <li><a href="#">item 5</a></li>
        <li>
            <ul>
    
                <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item sub 1</a></li>
                <li><a href="#">item sub 2</a><div style="position: absolute; left: 257px; top: 0;">Hello world 1</div></li>
                <li><a href="#">item sub 3</a> </li>
                <li>
                    <ul>
            
                        <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item sub sub 1</a></li>
                        <li><a href="#">item sub sub 2</a></li>
                        <li><a href="#">item sub sub 3</a> <div style="position: absolute; left: 257px; top: 0;">Hello world 1</div></li>
                        <li>
                            <ul>
                                <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item sub sub sub 1</a></li>
                                <li><a href="#">item sub sub sub 2</a></li>
                                <li style="position:relative;"><a href="#">item sub sub sub 3</a> <div style="position: absolute; left: 257px; top: 0;">Hello world 3</div></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

问题： 我想获得与上面类似的结果（代码片段）。

保留 ,"hello world 1" .. "hello world 3"

我面临的问题：当 jstree 被渲染时，"hello world 1" 到 "hello world 3" 被删除.

下面是我的jstree代码：

$("#jstree").jstree({ 
     "plugins" : [ "themes", "html_data" ]
});

 ul.ascii li{position: relative;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div class="container" id="jstree">

    <ul class="ascii"> 
        <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
        <li><a href="#">item 4</a></li>
        <li><a href="#">item 5</a></li>
        <li>
            <ul>
    
                <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item sub 1</a></li>
                <li><a href="#">item sub 2</a><div style="position: absolute; left: 257px; top: 0;">Hello world 1</div></li>
                <li><a href="#">item sub 3</a> </li>
                <li>
                    <ul>
            
                        <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item sub sub 1</a></li>
                        <li><a href="#">item sub sub 2</a></li>
                        <li><a href="#">item sub sub 3</a> <div style="position: absolute; left: 257px; top: 0;">Hello world 1</div></li>
                        <li>
                            <ul>
                                <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item sub sub sub 1</a></li>
                                <li><a href="#">item sub sub sub 2</a></li>
                                <li style="position:relative;"><a href="#">item sub sub sub 3</a> <div style="position: absolute; left: 257px; top: 0;">Hello world</div></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

编辑 1：

输入不可点击

$("#jstree").jstree({ 
     "plugins" : [ "themes", "html_data" ]
});

ul.ascii li{position: relative;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div class="container" id="jstree">

    <ul class="ascii"> 
        <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
        <li><a href="#">item 4</a></li>
        <li><a href="#">item 5</a></li>
        <li>
            <ul>
    
                <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item sub 1</a></li>
                <li><a href="#">item sub 2 <span style="position: absolute; left: 257px;"><input type="input"/></span></a></li>
                <li><a href="#">item sub 3</a> </li>
                <li>
                    <ul>
            
                        <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item sub sub 1</a></li>
                        <li><a href="#">item sub sub 2</a></li>
                        <li><a href="#">item sub sub 3 <span style="position: absolute; left: 257px; "><input type="input"/></span></a> </li>
                        <li>
                            <ul>
                                <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item sub sub sub 1</a></li>
                                <li><a href="#">item sub sub sub 2</a></li>
                                <li style="position:relative;"><a href="#">item sub sub sub 3 <span style="position: absolute; left: 257px;"><input type="input"/></span></a> </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

请帮助我提前谢谢！！

Answer 1

一个解决方案是将您的自定义 HTML 放入 li 的标签中。

$(function(){
$("#jstree").jstree({ 
     "plugins" : [ "themes", "html_data" ]
});

});
$(document).on('click','#jstree a input',function(e){
 event.preventDefault(e);
 $(this).focus();
});

ul.ascii li{position: relative;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div class="container" id="jstree">

    <ul class="ascii"> 
        <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
        <li><a href="#">item 4</a></li>
        <li><a href="#">item 5</a></li>
        <li>
            <ul>
    
                <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item sub 1</a></li>
                <li><a href="#">item sub 2 <span style="position: absolute; left: 257px;"><input type="input"/></span></a></li>
                <li><a href="#">item sub 3</a> </li>
                <li>
                    <ul>
            
                        <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item sub sub 1</a></li>
                        <li><a href="#">item sub sub 2</a></li>
                        <li><a href="#">item sub sub 3 <span style="position: absolute; left: 257px; "><input type="input"/></span></a> </li>
                        <li>
                            <ul>
                                <li><i class="fa fa-caret-right show-tree-children"></i><a href="#">item sub sub sub 1</a></li>
                                <li><a href="#">item sub sub sub 2</a></li>
                                <li style="position:relative;"><a href="#">item sub sub sub 3 <span style="position: absolute; left: 257px;"><input type="input"/></span></a> </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

为什么在填充 jstree 时不显示我的自定义 html

Why my custom html is not displayed when jstree is populated

javascript

jquery

node.js

jstree