为什么填充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>

问题：我想达到与上述类似的结果（代码 sn-p）。

保留“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>