CODEWITHSUNDEEP
jqueryjstree
Bill Software Engineer
Bill Software Engineer

Reputation: 7792

How do you format "li" and "a" DOM elements in jsTree by setting their class?

Basically, I have a jsTree, and I need to format it's li and a DOM elements by adding custom class to each type. The documentation is not clear on how to do this and as far as I can tell, there is no way to add custom class, any formating will have to be by overriding jquery theme or by editng the jsTree source-code. I am ok with either doing it in the JSON data, or more effectively, when declaring the "types" as shown in the example here:

            $("#container").jstree({
                "plugins" : ["themes", "json_data", "ui", "themeroller", "types"],
                "json_data" : {"data": my_json_data},
                "core" : { 
                    "initially_select" : [ init_id] 
                },
                "types" : {
                    "valid_children" : [ "test_type" ],
                     "types" : {
                        "test_type" : {
                            "valid_children" : [ "default", "test_type" ],
                            "icon" : { "image" : "/includes/icon.gif"}
                        }
                    }
                },
                "themes" : {
                    "dots" : true,
                    "icons" : true
                }
            });

Upvotes: 4

Views: 2916

Answers (1)

Zheileman
Zheileman

Reputation: 2559

If you want to do it in the JSON response, this works for me:

{ 
  "attr": { "class": "some-class1", "id": "node_1" },
  "data": { 
    "attr": { "class": "some-class2", "href": "", "title": "node title" }
  }
}

The first attr refers to the <li> tag, and the second attr (inside data) refers to the <a> tag.

Upvotes: 3

Related Questions