javascript 根据类型更改jstree节点文本颜色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11860705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 14:35:04  来源:igfitidea点击:

Change jstree node text colour based on type

javascriptjqueryjstree

提问by user1358918

I have been searching the interent for an age and couldnt find an answer. I was trying to change node text colour dependant on the type of the particular node. So in this example i wanted to change the text colour of every node that is a "Role" type defined in data.

我一直在互联网上搜索了一个时代,找不到答案。我试图根据特定节点的类型更改节点文本颜色。因此,在此示例中,我想更改数据中定义的“角色”类型的每个节点的文本颜色。

    $("#roleTree").jstree({
        json_data: {
            data: roleTreeData
        },
        "themes": {
            "theme": "default",
            "dots": true,
            "icons": false
        },
        "ui": {
            "select_limit": 1,
            "select_multiple_modifier": "none"
        },
        "types": {
            "types": {
                "AM": {
                    "hover_node": false,
                    "select_node": false
                },
                "AF": {
                    "hover_node": false,
                    "select_node": false
                },
                "Role": {
// i dont know if possible to be done here? add class?
             //   this.css("color", "red")
                    //{ font-weight:bold}
                }
            }
        },

        plugins: ["themes", "json_data", "ui", "Select", "types", "crrm"]

    }).bind("loaded.jstree", function (event, data)
    {
        $("#roleTree").jstree("open_all");
         data.inst.select_node('ul > li:first');

    }).bind("select_node.jstree", function (event, data)
    {
        selectedRoleId = data.rslt.obj.attr("id");
        window.selectedRole = GetRole(selectedRoleId);              
    });
}

Or any other method to highlight or tell users that only the role is selectable.

或者任何其他方法来突出显示或告诉用户只有角色是可选的。

回答by Bojin Li

This can be done using the following CSS, assuming you are using the default classic theme.

这可以使用以下 CSS 完成,假设您使用的是默认经典主题。

.jstree-classic li[rel="Role"] > a { color:red; }

Get jstree-classicclass, where child lihas relattribute of Role, get the first child aof that liand assign color to red.

获取jstree-classic类,其中儿童li具有rel的属性Role,得到了第一个孩子a的那个li,并指定颜色为红色。