I have the following code below and need to add a file.png icon to the jstree file structure when clicking on the add_file ($("#treeFile").jstree("create"));

  $("#treeFile").jstree({
                "plugins" : ["themes","html_data","ui","crrm","types"],
                "types" : {
                        "max_depth" : -2,
                        "max_children" : -2,
                        "valid_children" : [ "drive" ],
                        "types" : {
                                "default" : {
                                        "valid_children" : "none",
                                        "icon" : { "image" : "/tree/_demo/file.png"}
                                                         }
                              }
                      }   
                })
                    .bind("select_node.jstree", function (event, data) {

    });

$("#treeMenu li").click(function()
{
    if($(this).text() == "add_file")
    {
        $("#treeFile").jstree("create");

    }else if($(this).text() == "add_folder")
    {
        $("#treeFile").jstree("create");

    }else if($(this).text() == "rename")
    {
        $("#treeFile").jstree("rename");

            }else if($(this).text() == "remove")
    {
        $("#rootNode").jstree("remove");
    }else
    {}

I have the following code below and need to add a file.png icon to the jstree file structure when clicking on the add_file ($("#treeFile").jstree("create"));

  $("#treeFile").jstree({
                "plugins" : ["themes","html_data","ui","crrm","types"],
                "types" : {
                        "max_depth" : -2,
                        "max_children" : -2,
                        "valid_children" : [ "drive" ],
                        "types" : {
                                "default" : {
                                        "valid_children" : "none",
                                        "icon" : { "image" : "/tree/_demo/file.png"}
                                                         }
                              }
                      }   
                })
                    .bind("select_node.jstree", function (event, data) {

    });

$("#treeMenu li").click(function()
{
    if($(this).text() == "add_file")
    {
        $("#treeFile").jstree("create");

    }else if($(this).text() == "add_folder")
    {
        $("#treeFile").jstree("create");

    }else if($(this).text() == "rename")
    {
        $("#treeFile").jstree("rename");

            }else if($(this).text() == "remove")
    {
        $("#rootNode").jstree("remove");
    }else
    {}

• javascript
• jquery
• jstree

• And? Could you provide working jsfiddle? – Radek Commented Oct 23, 2012 at 4:26

2 Answers 2

add 'icon': 'jstree-file' property to node

The syntax to the jstree method add the type attribute to display a file icon is this:

$("#treeFile").jstree("create", null, "inside", { attr : { "rel" : "file"}});

And the problem code change "default" to "file"