Question

我正在使用jquery jstree组件，但问题是内置主题对具有子节点和叶节点的节点使用相同的图标是不理想的。

我如何修改css以仅为叶节点指定自定义图标？

干杯。

Answer 1

The types enables node types - each node can have a type, and you can define
rules on how that type should behave - maximum children count, maximum depth,
valid children types, selectable or not, etc.

Answer 2

您可以使用css为叶节点指定自定义图标。

例如， html：：

中树的结构

<li class="jstree-open">
<ins class="jstree-icon"> </ins>
<a>root</a> 
<ul>
    <li class='jstree-leaf' id='1'>
        <ins class="jstree-icon"> </ins>
        <a class='books' href='#'><ins class="jstree-icon"> </ins>books</a>
    </li>
    <li class='jstree-leaf' id='2'>
        <ins class="jstree-icon"> </ins>
        <a class='musics' href='#'><ins class="jstree-icon"> </ins>musics</a>
    </li>  
    <li class='jstree-leaf' id='3'>
        <ins class="jstree-icon"> </ins>
        <a class='videos' href='#'><ins class="jstree-icon"> </ins>videos</a>
    </li> 
</ul>

CSS：

li.jstree-open > ul > li.jstree-leaf > a.books > ins.jstree-icon { background: url("XXX1.png") 0px 0px no-repeat !important;}

li.jstree-closed＆gt; ul＆gt; li.jstree-leaf＆gt; a.books＆gt; ins.jstree-icon {background：url（“XXX2.png”）0px 0px no-repeat！important;}

也许这可以帮到你。

Answer 3

我需要同样的东西，并且在阅读了项目的bug跟踪器之后，我发现了这一点：

https://github.com/vakata/jstree/issues/1125

将图标添加到要传递给jstree的数据中（可以为每个需要使用不同图标的节点使用"icon" : "jstree-file"。

为什么这不是默认设置，所以击败了我...但是，我认为这应该可以满足您的要求。

叶节点的jstree不同图标

3 个答案: