Domanda jstree select node


Saluti, Sto usando jsTree per generare i miei dati gerarchici. JsTree viene generato come segue:

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

funziona trova e il jsonresult è qualcosa come:

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

la mia domanda è: come posso salvare l'id del nodo selezionato in qualche campo nascosto? Faccio qualcosa del genere:

<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);

    });

ma non funziona. Ottengo nella mia finestra di avviso "indefinito". Qualcuno può aiutarmi?     

MODIFICARE: Ho modificato l'istanza di jstree come segue:

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

e ricevo allarme vuoto


13
2018-04-20 12:00


origine


risposte:


O semplicemente legare il nodo di selezione:

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

Prova a guardare la variabile a per l'ID o NODE. In realtà stavo usando REF_NODE per ottenere


17
2018-04-26 15:59



Non ho controllato tutte le risposte ma ho visto che non hai selezionato nessuno, quindi ho deciso di pubblicare un metodo che ha funzionato per me

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

questo è se vuoi l'id e il titolo del nodo. spero che questo ti aiuti


7
2017-08-25 19:26



Puoi usarlo nel tuo bind() funzione come questa:

.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;
});

Lo stesso con l'azione deselezionata.


1
2017-11-09 10:44



Prova i callback qui menzionati: http://www.jstree.com/documentation

Dovrebbe funzionare in questo modo:

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

0
2018-04-20 13:22



Ora che hai cambiato il tuo codice per usare il callback onselect, hai ancora problemi? Non so se la tua modifica significa che hai risolto il problema o no. Se lo hai, dovresti contrassegnare questa domanda come risposta.

Personalmente, uso onchange anziché onselect, ma sono sicuro che funzionerebbe. Potresti anche prendere in considerazione l'utilizzo dati di jquery () funzioni per memorizzare valori insieme a un elemento nella pagina anziché in un campo nascosto, a meno che non si desideri inviare un modulo con il valore.

Ma se hai bisogno di salvarlo in un campo nascosto, prova qualcosa del genere:

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

0
2018-05-04 16:38



Al momento gli ID vengono assegnati a uno qualsiasi degli oggetti HTML?

Nella mia soluzione ho impostato l'id sull'attributo dell'elemento, non nei dati, che imposta gli id ​​su ogni <li>. Così:

[{"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"}}
                     ]}]

e questo ha l'effetto di rendere questo HTML (sto anche usando il 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
2018-05-19 04:54



Come Matt, ho anche inserito l'id in un oggetto attributi, quindi viene collegato al nodo li (esempio copiato da Matt).


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

Quindi, nella mia funzione onselect, ho prima avvolto il nodo li in jQuery (il parametro della funzione non è stato spostato), quindi ottengo il suo id.


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

0
2018-05-21 03:08



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

Questo ti mostrerà i dettagli del nodo selezionato.

Ecco una serie di articoli dovresti seguire se stai usando jsTree.


0
2017-07-20 18:25