jstree select node

Salutations,
Je suis à l'aide de jsTree à generatate mes données hiérarchiques. JsTree est générée comme suit:

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

il fonctionne, et les 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 l'id du nœud sélectionné dans certaines champ caché? - Je faire 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 il ne fonctionne pas. Je reçois dans ma fenêtre d'alerte "undefined". Quelqu'un peut-il m'aider?

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

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

et je me vide alertt

source d'informationauteur Piotr Ptak

  1. 17

    Ou simplement lier l'sélectionnez le nœud:

    $("#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();
        }
    });

    Essayer de regarder les variables pour l'ID, ou un NŒUD. En fait j'ai été en utilisant REF_NODE pour obtenir

  2. 7

    Je n'ai pas vérifié toutes les réponses, mais vu que vous n'avez pas sélectionner tout donc décidé de poster 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"));
             })

    c'est si vous voulez que l'id et le titre du nœud. espérons que cela aide

  3. 1

    Vous pouvez l'utiliser dans votre bind() fonction 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écochez l'action.

  4. 0

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

    Il doit travailler à quelque chose comme ceci:

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

    Maintenant que vous avez changé votre code pour utiliser la onselect rappel, êtes-vous encore avoir des problèmes? Je ne peux pas dire si votre modification signifie que vous avez résolu le problème ou pas. Si vous avez, vous devez marquer cette question qu'a répondu.

    Personnellement, je utiliser onchange au lieu de onselect, mais je suis sûr que l'un et l'autre travail. Vous pourriez aussi envisager d'utiliser de jquery de données() caractéristiques de stocker des valeurs avec un élément sur la page, au lieu d'un champ caché, sauf si vous êtes désireux de soumettre un formulaire avec la valeur.

    Mais si vous avez besoin de l'enregistrer 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);
        }
    }
});
  6. 0

    Sont les numéros assignés à l'un des objets HTML à l'heure actuelle?

    Dans ma solution, j'ai mis l'id de l'attribut de l'élément, et pas dans les données, qui définit l'id de chaque <li>. Comme:

    [{"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 aussi à l'aide de la jsTree case plugin):

    <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>
  7. 0

    Comme Matt, j'ai aussi mis le code dans un des attributs de l'objet, de sorte qu'il devient attaché le noeud li (exemple copié à partir de Matt).

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

    Alors, dans mon onselect fonction, j'ai d'abord envelopper le noeud li en jQuery (le paramètre de la fonction n'est pas enroulé), puis obtenez de l'id.

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

    Ainsi, vous obtenez le nœud sélectionné détails.

    Voici une série d'article vous devez suivre si vous utilisez jsTree.