jstree select node

Question

Salutations, J'utilise jsTree pour générer mes données hiérarchiques. JsTree est généré comme suit:

$(function() { 
$("#industries").tree({ 
     data: { 
      type: "json", 
      opts: { 
       url: "/Admin/GetIndustries/" 
      } 
     } 
    }); 
}); 

il fonctionne et trouver le JsonResult est quelque chose comme:

[{"attributes":[],"data":{"title":"Adwokaci, Notariusze","id":"1a051101-c3fa-48f2-b2e1-c60d1b67ea22"},"children":[{"attributes":[],"data":{"title":"Kancelarie adwokackie","id":"26d6cff1-3c7f-4a2f-bf5a-422e08127b43" 

ma question est: comment puis-je enregistrer id du nœud sélectionné dans un champ caché? Je fais quelque chose comme ceci:

<script type="text/javascript"> 
    $("#industries").click(function() { 
     var tree = $.tree.reference("industries"); 
     var t = $.tree.focused(); if (t.selected) t.selected; else alert("Select a node first"); 
     alert(t.id); 

    }); 

mais cela ne fonctionne pas. Je reçois dans ma fenêtre d'alerte "indéfini". Quelqu'un peut-il m'aider s'il vous plaît?

EDIT: J'ai changé l'instance jstree comme suit:

$(function() { 
$("#industries").tree({ 
     callback: { 
      onselect: function(NODE, TREE_OBJ) { 
        alert(NODE.id); 
       } 
      }, 
     data: { 
      type: "json", 
      opts: { 
       url: "/Admin/GetIndustries/" 
      } 
     } 
    }); 
}); 

et je reçois Alertt vide

Answer 1

Ou tout simplement lier le nœud de sélection:

$("#industries").tree({ 
     callback: { 
      onselect: function(NODE, TREE_OBJ) { 
        alert(NODE.id); 
       } 
      }, 
     data: { 
      type: "json", 
      opts: { 
       url: "/Admin/GetIndustries/" 
      } 
     } 
    }) 
.bind("select_node.jstree", function (NODE, REF_NODE) { 
      var a = $.jstree._focused().get_selected(); 
     } 
    }); 

Essayez de regarder la variable a pour l'ID ou NODE. Je suis en fait en utilisant REF_NODE pour obtenir

Answer 2

Essayez les callbacks mentionné ici: http://www.jstree.com/documentation

Il devrait fonctionner quelque chose comme ceci:

$("#industries").tree({ 
    //..... your other stuff ..... 
    callback: { 
     onselect: function(NODE, TREE_OBJ) { 
         node_id = NODE.id; 
        } 
    } 
}); 

Answer 3

Maintenant que vous avez modifié votre code pour utiliser le rappel sur appel, avez-vous toujours des problèmes? Je ne peux pas dire si votre modification signifie que vous avez résolu le problème ou non. Si vous avez, vous devez marquer cette question comme une réponse.

Personnellement, j'utilise onchange au lieu de onselect, mais je suis sûr que l'un ou l'autre fonctionnerait. Vous pouvez également utiliser les fonctionnalités jquery's data() pour stocker des valeurs avec un élément sur la page au lieu d'un champ masqué, à moins que vous ne souhaitiez soumettre un formulaire avec la valeur.

Mais si vous avez besoin de l'enregistrer dans un champ caché, essayer quelque chose comme ceci:

$("#industries").tree({ 
    //..... your other stuff ..... 
    callback: { 
     onchange: function(NODE, TREE_OBJ) { 
      $("#hidden_field").val(NODE.id); 
     } 
    } 
}); 

Answer 4

sont-ids étant affecté à l'un des objets HTML au moment?

Dans ma solution, je définis l'ID sur l'attribut de l'élément, pas dans les données, qui définit les ID sur <li>. Comme si:

[{"data":"Origination","attributes":{"id":"10"}",children":[ 
        {"data":"New Connection","attributes":{"id":"11"}}, 
        {"data":"Disconnection","attributes":{"id":"12"}}, 
        {"data":"Load Change","attributes":{"id":"13"}}, 
        {"data":"Corporate","attributes":{"id":"14"}} 
        ]}] 

et qui a pour effet de rendre ce code HTML (je suis également en utilisant le plugin case jsTree):

<UL class=ltr sizcache="2" sizset="4"> 
    <LI id=10 class=" open" selected="false"><A class=undetermined href=""><INS>&nbsp;</INS>Origination</A> 
    <UL sizcache="2" sizset="0"> 
    <LI id=11 class=leaf selected="false"><A href=""><INS>&nbsp;</INS>New Connection</A></LI> 
    <LI id=12 class=leaf selected="true"><A class=checked href=""><INS>&nbsp;</INS>Disconnection</A></LI> 
    <LI id=13 class=leaf selected="false"><A href=""><INS>&nbsp;</INS>Load Change</A></LI> 
    <LI style="MARGIN-TOP: 0px" id=14 class="last leaf" selected="true"><A class=checked href=""><INS>&nbsp;</INS>Corporate</A></LI> 

Answer 5

Comme Matt, je mets également l'identifiant dans un objet d'attributs, il est donc attaché au nœud li (exemple copié de Matt).

{"data":"Origination", 
"attributes":{"id":"10"}, 
"children":[ 
    { "data":"New Connection", 
    "attributes":{"id":"11"} 
    }, 
    { "data":"Disconnection", 
    "attributes":{"id":"12"} 
    } 
] 
} 

Puis, dans ma fonction onselect, je première enveloppe le nœud li jQuery (le paramètre de fonction n'est pas enveloppé), puis l'obtenir est id.

    treeObject.callback = { 
     onselect: function(liNode, oTree) { 
      var id = $(liNode).attr('id'); 
      var script = ComParentSet.getScript(id); 
      script.doXYZ(); 
     } 
    } 

Answer 6

Vous pouvez l'utiliser dans votre fonction bind() comme ceci:

.bind("check_node.jstree", function(e, data) { 
    //console.log(data.rslt.obj.attr(\'id\')); 

    if (data.rslt.obj !== undefined && data.rslt.obj.attr(\'id\') !== undefined) { 
     jQuery.ajax({ 
      async: false, 
      type: "POST", 
      dataType: "json", 
      url: "' . Yii::app()->createUrl('adsmanager/adsfields/ajaxappendcategory') . '", 
      data: { 
       "id" : data.rslt.obj.attr(\'id\'), 
       "itemId" : "' . Yii::app()->getRequest()->getParam('id') . '", 
      }, 
      success: function(r) { 
       if(r === undefined || r.status === undefined || !r.status) { 
        data.rslt.obj.removeClass(\'jstree-checked\'); 
        data.rslt.obj.addClass(\'jstree-unchecked\'); 
       } else { 
        niceBox(\'ok, checked\'); 
       } 
      } 
     }); 
    } 

    return true; 
}); 

La même chose avec l'action décocher.

Answer 7

Je n'ai pas vérifié toutes les réponses, mais vu que tu na pas sélectionner tout ainsi décidé de publier une méthode qui a fonctionné pour moi

$(function() { 
     $("#demo1") 
     .bind("select_node.jstree", function (event, data) { 
          var selectedObj = data.rslt.obj; 
      alert(selectedObj.attr("id") + selectedObj.attr("data")); 
      }) 

cela si vous voulez l'identifiant et le titre du noeud. espérons que cela aide

Answer 8

$('#jstree-api').on('changed.jstree', function (e, data) { 
    var objNode = data.instance.get_node(data.selected); 
    var note; 
    note = 'Selected Node Data(Id: <strong>' + objNode.id + '</strong>, Name: <strong>' + objNode.text + '</strong>)'; e = 'Selected Category(Id: <strong>' + objNode.id + '</strong>, Name: <strong id="api-data" data-parent="' + objNode.parent + '" data-id="' + objNode.id + '">' + objNode.text + '</strong>)'; 

    $('#footer-api').html(note); 
}); 

Ceci vous permettra d'obtenir les détails du nœud sélectionné.

Here is a series of article vous devriez suivre si vous utilisez jsTree.