jstree selezionare nodo

Question

Saluti, sto usando jsTree ai generatate miei dati gerarchici. JsTree è generato come segue:

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

funziona trovare e il JsonResult è qualcosa di simile:

[{"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 id del nodo selezionato in qualche campo nascosto? Faccio qualcosa di simile a questo:

<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?

EDIT: ho cambiato l'istanza jstree come segue:

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

e ottengo alertt vuoto

Answer 1

O semplicemente collegare 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 il nodo. Mi è stato effettivamente usando REF_NODE per ottenere

Answer 2

provare il callback citato qui: http://www.jstree.com/documentation

Si dovrebbe funzionare qualcosa di simile:

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

Answer 3

Ora che hai modificato il codice per utilizzare 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, io uso onchange invece di onselect, ma sono sicuro che avrebbe funzionato neanche. Potresti anche considerare l'utilizzo delle funzioni jquery's data() per memorizzare i valori insieme a un elemento sulla pagina invece di un campo nascosto, a meno che tu non voglia inviare un modulo con il valore.

Ma se è necessario salvarlo in un campo nascosto, provare qualcosa di simile:

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

Answer 4

sono gli identificatori di essere assegnati a uno qualsiasi degli oggetti HTML in questo momento?

Nella mia soluzione ho impostato l'id sull'attributo dell'elemento, non nei dati, che imposta gli ID su ogni <li>. In questo modo:

[{"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 che ha l'effetto di rendere questo HTML (Sono anche utilizzando il plugin casella 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

come Matt, ho anche messo l'id in un attributi degli oggetti, 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"} 
    } 
] 
} 

Poi, nella mia funzione onselect, in primo luogo ho avvolgere il nodo di li in jQuery (parametro funzione non è avvolto), quindi ottenere è id.

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

Answer 6

Si può usare nella funzione bind() in questo modo:

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

Answer 7

Non ho controllato tutte le risposte, ma visto che voi non ha ancora selezionare qualsiasi modo ha deciso di inviare 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 si vuole l'id e il titolo del nodo. spero che questo aiuti

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

In questo modo otterrete i dettagli del nodo selezionato.

Here is a series of article da seguire se si utilizza jsTree.