Chargement paresseux avec jsTree

Je suis en train de charger dynamiquement les nœuds d'un jtree quand ils sont développés. Le peu de documentation que j'ai trouvé est à la fin de cette page.

J'ai trouvé quelques solutions que de créer les nœuds un par un avec une boucle comme cette une. Je ne l'ai pas essayé, mais en regardant la page de documentation j'ai le sentiment que jstree doit prendre soin de vélo à travers les nœuds.

J'ai trouvé beaucoup de solutions qui utilisent plugins: ["json_data"]mais le plugins page de documentation ne parle pas de ce plugin. C'est qu'un vieux plugin qui n'est plus requis?

Mon actuel de la mise en œuvre utilise ce code pour charger l'ensemble de l'arbre d'un seul coup:

$.ajax({
    var pn = $('#project_number').val();
    url : "bomtree?part=" + pn,
    success : function(tree_content) {
        var data = $.parseJSON(tree_content);
        var config = {
            'core' : {
                'data' : data
            }
        };
        $('#bom_tree').jstree(config);
    }
});

J'ai modifié le code sur la page de documentation comme ceci:

$(function() {
    var pn = $('#project_number').val();
    $('#tree').jstree({
        'core' : {
            'data' : {
                'url' : function(node) {
                    return '/doc/test2';
                },
                'data' : function(node) {
                    return {
                        'part' : node.id === '#' ? pn : node.id
                    };
                }
            }
        }
    });
});

La même json texte fonctionne avec le premier code, maintenant avec le deuxième. La documentation dit The format remains the same as the abovedonc je n'ai pas le modifier.

J'ai essayé également de retour les mêmes données que dans l'exemple, ceci:

[
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]

Mais le résultat est le même: jquery jette un Grésillement.erreur à la ligne suivante:

Sizzle.error = function( msg ) {
    throw new Error( "Syntax error, unrecognized expression: " + msg );
};

Où le contenu de msg est les données json renvoyé par le serveur.

Quel est le problème?

source d'informationauteur stenci | 2014-06-10

10

"Lors de l'utilisation d'AJAX ensemble des enfants pour les valeurs booléennes true et jsTree rendra le nœud fermé, et de faire une demande additionnelle pour le nœud lorsque l'utilisateur ouvre."c'est à partir de jstree document et qu'il pouvait atteindre votre condition.
7

Je vais vous donner que de la documentation et des exemples est assez rude. Je vais aussi ajouter que la source de votre confusion vient d'une mise à jour majeure - la ancienne version n'ont pas beaucoup en commun avec la nouvelle version et, malheureusement, la plupart des exemples ont été écrits à l'encontre de cette ancienne version.

La bonne nouvelle, c'est que le chargement paresseux est pris en charge hors de la boîte, il n'est pas évident. La clé, c'est qu'il n'appelez votre data: config que chaque nœud est élargi. Mais pour que cela fonctionne, l'URL de la fonction doit renvoyer une URL différente pour le nœud donné. Dans le code ci-dessous, note la condition de revenir une URL si le nœud est la racine (#), et de l'autre que s'il ne l'est pas.
```
$('#TreeDiv')
  .jstree({
    core: {
      data: {
        url: function (node) {
          return node.id === '#' ? '/UserAccount/AccountGroupPermissions' 
                                 : '/UserAccount/AccountPermissions/' + node.id;
        },
        type: 'POST'
      }
   },
   plugins : ["checkbox"]
});
```

Extension de Territoire de réponse avec un (très minimaliste) exemple:
la Démo de l'arbre avec un chargement différé.

JS:

$('#the_tree').jstree({
    'core' : {
        'data' : {
            'url' : "tree/ajax.php", 
              'data' : function (node) {
                  return { 'id' : node.id };
              }
        }
    },

});

PHP:

header('Content-Type: application/json');

if ( $_GET["id"] === "#" ) { 
    $data = array(
            array( "id" => "ajson1", "parent" => "#", "text" => "Simple root node"  ),
            array( "id" => "ajson2", "parent" => "#", "text" => "Root node 2", "children" => true ),

    );
}

else if ( $_GET["id"] === "ajson2" ) {
    $data = array(
        array( "id" => "ajson3", "parent" => "ajson2", "text" => "Child 1" ),
        array( "id" => "ajson4", "parent" => "ajson2", "text" => "Child 2" )
    );
}

echo json_encode( $data);

seuls les Nœuds qui ont "children" : truegénère une demande pour les enfants lors de l'ouverture, les autres nœuds sont traités comme des feuilles.

Pour faire un chargement paresseux, vous avez besoin d'un backend qui renvoie un objet JSON avec les nœuds de l'arborescence qui a des enfants domaine de la propriété. Les enfants de la propriété doit contenir les enfants des éléments ou boolean true (tableau ou booléen). Avec un langage fortement typé sur votre backend, ça va être moche, donc de son mieux pour traiter avec elle sur le frontend. Exemple d'AJAX succès de rappel:

$('#tree').jstree({
    'core' : {
        'data' : {
            'url' : function(node) {
                return '/doc/test2';
            },
            'data' : function(node) {
                return {
                    'part' : node.id === '#' ? pn : node.id
                };
            },
            'success' : function(nodes) {

                var validateChildrenArray = function(node) {

                    if (!node.children || node.children.length === 0) {
                        node.children = true;
                    }
                    else {
                        for (var i = 0; i < node.children.length; i++) {
                            validateChildrenArray(node.children[i]);
                        }
                    }
                };

                for (var i = 0; i < nodes.length; i++) {
                    validateChildrenArray(nodes[i]);
                }
            }
        }
    }
});

En faisant cela, vous allez être en mesure de lazy load votre arbre.

0

J'ai fait mon personnalisés chargement différé par la combinaison de "select_node.jstree" et "create_node" la méthode. Sur la sélection de chaque nœud, le gestionnaire d'événements vérifie si il y a des enfants et ajoute de la réponse du serveur à une sélection de nœud, nœud par nœud.
Ma réponse du serveur n'était pas similaire ou des exigences de la jstree et cette stratégie m'a sauvé beaucoup de temps et d'efforts.
Espérons que cela aide quelqu'un.

Vous devez vous connecter pour publier un commentaire.