web-dev-qa-db-fra.com

jstree select node

Greetings, 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/"
            }
        }
    });
});

cela fonctionne trouver et 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 la suivante: comment enregistrer l'identifiant du nœud sélectionné dans un champ caché? Je fais quelque chose comme ça:

<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 ça ne marche pas. J'arrive dans ma fenêtre d'alerte "non définie". 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

jqueryjstree
13
niao

Ou simplement lier le noeud 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. J'utilisais en fait REF_NODE pour obtenir 

17
jlrolin

Je n'ai pas vérifié toutes les réponses, mais j'ai constaté que vous n'en sélectionniez aucune.

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

c'est si vous voulez l'id et le titre du noeud. J'espère que cela t'aides

7
Sue

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 décocher l'action.

1
ignas

Maintenant que vous avez modifié votre code pour utiliser le rappel onselect, 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 devriez marquer cette question comme réponse.

Personnellement, j'utilise onchange au lieu de onselect, mais je suis sûr que cela fonctionnerait. Vous pouvez également envisager d'utiliser data () features de jquery pour stocker des valeurs avec un élément de la page plutôt qu'un champ masqué, sauf si vous souhaitez soumettre un formulaire avec la valeur.

Mais si vous avez besoin de le sauvegarder dans un champ caché, essayez quelque chose comme ceci:

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

Les identifiants sont-ils assignés à l'un des objets HTML en ce moment?

Dans ma solution, je règle l'identifiant sur l'attribut de l'élément, pas dans les données, ce qui définit l'identifiant sur chaque <li>. Ainsi:

[{"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 cela a pour effet de rendre ce code HTML (j'utilise aussi le plugin jsTree checkbox):

<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>
0
Matt Frear

Comme Matt, j'ai également placé l'identifiant dans un objet d'attributs afin qu'il soit attaché au nœud li (exemple copié à partir de Matt).


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

Ensuite, dans ma fonction onselect, j’enveloppe d’abord le noeud li dans jQuery (le paramètre de fonction n’est pas encapsulé), puis j’obtiens son id.


    treeObject.callback = {
        onselect: function(liNode, oTree) {
            var id = $(liNode).attr('id');
            var script = ComParentSet.getScript(id);
            script.doXYZ();
        }
    }
0
Stan
$('#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);
});

Cela vous donnera les détails du nœud sélectionné.

Voici une série d'articles que vous devriez suivre si vous utilisez jsTree.

0
Tapan kumar

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

Cela devrait fonctionner quelque chose comme ceci:

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