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

1 个答案: