CODEWITHSUNDEEP
javascriptjquerytreejstree
Berry Style
Berry Style

Reputation: 61

Jstree : Create node with custom div

I use the plugin Jstree to manage my menu dynamically.

I have custom my tree with some div to display icons and links : 

<li rel="menu">
  <a class="js_menu_titre">
          <p class="jsmenu_titre_taille">Menu_Principal</p>
          <div class="jsmenu_lien">Link</div>
          <p class="jsmenu_icone">Actif : icon</p>
          <p class="jsmenu_action">Actions : icon_action</p>
  </a>

my problem is that when I want to use the function create node, I don't have my divs anymore. My customs divs are inside the link ()

You can see the result and the problem here : http://i71.servimg.com/u/f71/11/07/15/68/arbo10.jpg

I use this function :

$("#jsmenu").bind("create.jstree", function (e, data) {
$.post(
    "/static/v.1.0pre/_demo/server.php", 
    { 
        "operation" : "create_node", 
        "id" : data.rslt.parent.attr("id").replace("node_",""), 
        "position" : data.rslt.position,
        "title" : data.rslt.name,
        "type" : data.rslt.obj.attr("rel")
    }, 
    function (r) {
        if(r.status) {
            $(data.rslt.obj).attr("id", "node_" + r.id);
        }
        else {
            $.jstree.rollback(data.rlbk);
        }
    }
);

})

and for my add button

function Ajouter() {
    $('#jsmenu').jstree("create", null, "last",{ "attr" : { "rel" : "folder" } });
}

Upvotes: 5

Views: 7031

Answers (2)

Lucidity
Lucidity

Reputation: 1369

You can access the anchor directly by id:

$("#jsmenu").on("create_node.jstree", function (e, data) { $("#"+data.node.id+"_anchor").append(html); });

Upvotes: 1

narcolepticvolcano
narcolepticvolcano

Reputation: 1046

Try something like this:

$("#jsmenu").on("create_node.jstree", function (e, data) {
    $("li#"+data.node.id).find("a").append(html);
});

html is a var containing your icons code.

Upvotes: 5

Related Questions