jstree seleccione nodo

Question

Saludos, Estoy usando jsTree para generar mis datos jerárquicos. JsTree se genera de la siguiente manera:

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

funciona Encuentra y el JsonResult es algo así como:

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

mi pregunta es: ¿Cómo puedo guardar id del nodo seleccionado en algún campo oculto? Hago algo como esto:

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

    }); 

pero no funciona. Me aparece en mi ventana de alerta "indefinido". ¿Puede alguien ayudarme?

EDIT: He cambiado la instancia jstree de la siguiente manera:

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

y me sale alertt vacío

Answer 1

O simplemente enlazar el nodo de selección:

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

intente buscar en la variable a la identificación, o nodo. En realidad estaba usando REF_NODE para obtener

Answer 2

probar los servicios repetidos mencionado aquí: http://www.jstree.com/documentation

debería funcionar algo como esto:

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

Answer 3

Ahora que ha cambiado su código para usar la devolución de llamada onselect, ¿todavía tiene problemas? No puedo decir si tu edición significa que has resuelto el problema o no. Si tiene, debe marcar esta pregunta como respondida.

Personalmente, utilizo onchange en lugar de onselect, pero estoy seguro de que cualquiera funcionaría. También podría considerar usar las características jquery's data() para almacenar valores junto con un elemento en la página en lugar de un campo oculto, a menos que desee enviar un formulario con el valor.

Pero si es necesario guardarlo en un campo oculto, intentar algo como esto:

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

Answer 4

son los IDs de tener uno u otro de los objetos HTML en este momento?

En mi solución establezco el id en el atributo del artículo, no en los datos, que establece los identificadores en cada <li>. De este 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"}} 
        ]}] 

y que tiene el efecto de hacer este código HTML (También estoy usando el plugin casilla 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

como Matt, también puse el ID de objeto Un atributos, por lo que se adjunta al nodo li (ejemplo copiado de Matt).

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

Entonces, en mi función onselect, primero envuelva el nodo de Li en jQuery (el parámetro de función no está envuelto), a continuación, obtener su ID.

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

Answer 6

Se puede utilizar en su función bind() así:

.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 mismo con la acción desmarque.

Answer 7

Yo no comprobar todas las respuestas, pero vi que que aún no ha seleccionado ninguna manera decidió publicar un método que trabajó para mí

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

esto es que si quieres el ello y el título del nodo. Espero que esto ayude

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

Esto le dará los detalles del nodo seleccionado.

Here is a series of article debe seguir si está utilizando jsTree.