question de jstree

Question

J'utilise XML comme source de données pour mon arbre JSTree, mais je ne trouve pas d'exemples où vous pouvez définir un nœud dans votre XML comme un hyperlien, ou quelque part pour définir vos propres types de nœuds avec leur propre icône, etc. Quelqu'un l'a-t-il fait et a-t-il des exemples ?

Answer 1

Je pense que vous cherchez le Documentation du plugin jsTree Types .

Answer 2

La documentation de jsTree indique :

Tous les attributs que vous définissez sur le nœud de l'élément seront transférés à l'élément résultant. li nœud. Tous les attributs que vous avez définis sur le nœud de nom seront transférés au nœud de nom résultant. a nœud.

Par défaut, jsTree ajoute une adresse href de la page actuelle à la balise d'ancrage générée à partir de la balise nom dans le balisage XML (plat ou imbriqué). Vous pouvez remplacer le href par votre propre adresse. Voici un exemple :

<item id="link__1" parent_id="0">
  <content>
    <name title="Click here to go to website" href="http://google.com">Google</name>
  </content>
</item>

Une autre option consiste à utiliser jQuery pour capturer l'événement de clic sur l'objet a et rediriger sur la base du noeud texte ou quelque chose comme ça. Dans ce cas, utilisez un délégué sur un conteneur (diagMenu dans l'exemple suivant) pour le jsTree afin de surveiller les clics.

$("#diagMenu").delegate('a', 'click', function(e) {
                         //code to redirect based on event object
                       });

Je réponds un peu tard, mais j'espère que cela vous aidera ou aidera d'autres personnes qui tomberont sur cette réponse.

Answer 3

Les nœuds de jstree s'affichent comme des hyperliens (balises "a" ou "anchor"), à condition d'être correctement configurés. Vous pouvez lier du javascript à l'événement de sélection du nœud comme ceci :

jQuery(".foldertree").bind("select_node.jstree", function (e, data) {
    // use this to debug: alert("data.rslt.name=" + data.rslt.name + " data.rslt.obj.attr('rel')=" + data.rslt.obj.attr("rel"));

    // to get selected node Id and type
    var nodeId = data.rslt.obj.attr("id");
    var nodeType = data.rslt.obj.attr("rel");

    // to get node's immediate parent node
    parentId = data.rslt.obj[0].parentNode.parentNode.id;

    // use this info to call a method or go to another page
    window.location = "somepage.aspx?" + nodeId;
}

Voici comment je configure différents types de nœuds avec des icônes différentes. Mon arbre représente des documents dans des dossiers, j'ai donc des types "par défaut" (Dossiers), et "formulaire" (Documents) :

jQuery(".foldertree")

.jstree({

.
. (divers trucs de configuration)
.

"types": {
    // -2 means don't check (faster)
    "max_depth": -2,
    "max_children": -2,
    // This will prevent moving or creating any other type as a root node
    "valid_children": ["default"],
    "types": {

        // Folders
        "default": {
            // can have files and other folders inside of it
            "valid_children": ["default", "form"],
            "icon": {
                    "image": "css/jstree/folder.png"
            }
        },

        // Documents (saved forms). 
        "form": {
            // No children (so only leaf nodes)
            "valid_children": "none",
            // override theme icon
            "icon": {
                    "image": "css/jstree/file.png"
            }
        },

    } // end types (within types)
}, // end types (outer)

"themes": 

.
. (etc)
.