jquery - 叶节点的jstree不同图标

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

我需要同样的东西，在阅读了项目的错误跟踪器后，我发现了这个：

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

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

为什么这不是默认设置，打败了我......但是，我认为这应该做你想要的。

Answer 3

您可以使用 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 > ul > li.jstree-leaf > a.books > ins.jstree-icon { background: url("XXX2.png") 0px 0px no-repeat !important;}

也许这可以帮助你。