Question

我是jsTree的新手。如何为jsTree div id应用自定义css，如背景颜色，节点字体样式等，任何示例示例都会有所帮助

<div id="sampleTree"></div>

加载jstree方法

$('#sampleTree').jstree({
         'core' : {
          'data' : {
            'url' : 'ajaxurl',
            'data' : function (node) {
                var test = ["jquery", "js", "css"];
                return test;
            }
          }
        }
    });

Answer 1

由于jstree是一个完全由javascript生成的代码，因此添加自己的类是不可取的，因为在渲染时通过jstree引擎添加它会使系统更复杂。您可以做的是，跟踪 themes / default / style.css

中的类

并在课程中进行更改。其中一些是 .jstree悬停，点击等等。

Answer 2

如果要将CSS放入单个条目，请使用html_data插件。您可以直接将它放在带有嵌入式CSS的HTML字符串中：

<div id="myTree">   
  <ul>
   <li rel="root">
     <a href="#">Parent 1</a>
     <ul>
       <li><a style="font-weight:bold" href="#">Child 1</a></li>
       <li><a style="color: red" href="#">Child 2</a></li>
     </ul>
   ...

Answer 3

是的，你可以根据你改变主题css文件。

如果你想要更多的自定义，例如在打开时更改图标，在关闭时等，那么你可以在jquery中进行

$('#jstree-api').jstree({
    'core': {
        'data': jsonData
    },
    "types": {
        "child": {
            "icon": "glyphicon glyphicon-leaf"
        },
        "root": {
            "icon": "glyphicon glyphicon-folder-close"
        },
        "default": {
            "icon": "glyphicon glyphicon-folder-close"
        }
    },
    "search": {

        "case_insensitive": true,
        "show_only_matches": true


    },

    "plugins": ["search", "themes", "types"]
});

$('#jstree-api').on('open_node.jstree', function (e, data) {
    data.instance.set_icon(data.node, "glyphicon glyphicon-folder-open");
}).on('close_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-folder-close"); });

Here is a series of articles on jsTree you can follow if you want.

自定义jsTree css样式

3 个答案: