Cómo rellenar los datos sobre cómo hacer clic en JSMEE Último nodo a través de la llamada AJAX -- javascript campo con jquery campo con node.js camp Relacionados El problema

How to populate data on click on jstree last node via ajax call


1
vote

problema

Español

Quiero hacer jstree como se muestra a continuación

ingrese la descripción de la imagen aquí

Quiero obtener los últimos datos de nodos con ajax Llamada, que es File 1 y File 2

Nota: Soy hardcoding Último nodo Datos a continuación para simular ajax Llama

jsfiddle: https://jsfiddle.net/vym16Okw/11/ < / a>

   var s = [];             s.push(                 { "id" : "ajson5", "parent" : "ajson2", "text" : "File 1", "date":"12", },                 { "id" : "ajson6", "parent" : "ajson2", "text" : "File 2", "date":"12" }             );   

aquí es lo que he intentado:

  $('#using_json_2').jstree({ 'core' : {      'data' : [         { "id" : "ajson1", "parent" : "#", "text" : "Simple root node", "date":"2018"},         { "id" : "ajson2", "parent" : "#", "text" : "Root node 2", "date":"2018"},         { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1", "date":"12" },         { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2", "date":"12" },      ]  } });       $('#using_json_2').on("select_node.jstree", function (e, data){        console.log("node_id: " , data,'original',data.node.original);          var id = data.node.original.id;        var date = data.node.original.date;        $.ajax({            url:'https://jsonplaceholder.typicode.com/users/'+id+'?date='+date,            type:'GET',            success:function(data){              var s = [];              s.push(                  { "id" : "ajson5", "parent" : "ajson2", "text" : "File 1", "date":"12","children": true },                  { "id" : "ajson6", "parent" : "ajson2", "text" : "File 2", "date":"12","children": true }              );            }        });   });  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>      <div id="using_json_2"></div>   

¡Por favor, ayúdame gracias de antemano !!!!!!!!!

Original en ingles

i want to make jstree as shown below

enter image description here

i want to get last node data with ajax call which is File 1 and File 2

Note: i'm hardcoding last node data below to simulate ajax call

Jsfiddle: https://jsfiddle.net/vym16okw/11/

 var s = [];             s.push(                 { "id" : "ajson5", "parent" : "ajson2", "text" : "File 1", "date":"12", },                 { "id" : "ajson6", "parent" : "ajson2", "text" : "File 2", "date":"12" }             ); 

here is what i have tried:

$('#using_json_2').jstree({ 'core' : {      'data' : [         { "id" : "ajson1", "parent" : "#", "text" : "Simple root node", "date":"2018"},         { "id" : "ajson2", "parent" : "#", "text" : "Root node 2", "date":"2018"},         { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1", "date":"12" },         { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2", "date":"12" },      ]  } });       $('#using_json_2').on("select_node.jstree", function (e, data){        console.log("node_id: " , data,'original',data.node.original);          var id = data.node.original.id;        var date = data.node.original.date;        $.ajax({            url:'https://jsonplaceholder.typicode.com/users/'+id+'?date='+date,            type:'GET',            success:function(data){              var s = [];              s.push(                  { "id" : "ajson5", "parent" : "ajson2", "text" : "File 1", "date":"12","children": true },                  { "id" : "ajson6", "parent" : "ajson2", "text" : "File 2", "date":"12","children": true }              );            }        });   });
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>      <div id="using_json_2"></div>

Please help me thanks in advance!!!!!!!!!

        
     
     

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Se requiere:

  "check_callback": true,   

Mientras creas el Jstree a nivel central.

de doc : < / p>

Determina lo que sucede cuando un usuario intenta modificar la estructura del árbol

Si se deja como falso todas las operaciones, como crear, Cambiar nombre, eliminar, mover o copiar se evitan.

Puede configurar esto en fiel para permitir todas las interacciones o usar una función para tener un mejor control.

Para cada nodo recién no necesita el atributo principal:

  { "id" : "ajson5", "parent" : "ajson2", "text" : "File 1", "date":"12","children": true }   

Porque es el primer parámetro para Create_Node:

  $('#using_json_2').jstree().create_node(lastNode,  ele, "last");   

  $('#using_json_2').jstree({     'core': {         "check_callback": true,         "data": [             {"id": "ajson1", "parent": "#", "text": "Simple root node", "date": "2018"},             {"id": "ajson2", "parent": "#", "text": "Root node 2", "date": "2018"},             {"id": "ajson3", "parent": "ajson2", "text": "Child 1", "date": "12"},             {"id": "ajson4", "parent": "ajson2", "text": "Child 2", "date": "12"},         ]     } }); $('#using_json_2').on("select_node.jstree", function (e, data) {     // get last node....     var model = $(this).jstree(true)._model.data;     var result = [];     for (var i in model) {         if (model.hasOwnProperty(i) && !model[i].children.length) {             result.push(i);         }     }     // ...the last node     var lastNode = result.pop();     var id = data.node.original.id;     // if current node is not the last....     if (id != lastNode) {         return;     }     // set loading ....     $('#' + lastNode).addClass("jstree-loading").attr('aria-busy',true);     $.ajax({         url: 'https://jsonplaceholder.typicode.com/users/',         type: 'GET',         success: function (data) {             var s = [];             s.push(                     {                         "id": "ajson5",                         "text": "File 1",                         "date": "12",                         "children": false,                         "icon": "jstree-file"                     }, {                         "id": "ajson6",                         "text": "File 2",                         "date": "12",                         "children": false,                         "icon": "jstree-file"                     }             );             s.forEach(function (ele) {                 $('#using_json_2').jstree().create_node(lastNode, ele, "last");             });             // open node             $('#using_json_2').jstree().open_node(lastNode);             // unset loading ....             $('#' + lastNode).removeClass("jstree-loading").attr('aria-busy',false);         }     }); });  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>   <div id="using_json_2"></div>  

 

It's required:

"check_callback": true, 

while creating the jstree at core level.

From doc:

determines what happens when a user tries to modify the structure of the tree

If left as false all operations like create, rename, delete, move or copy are prevented.

You can set this to true to allow all interactions or use a function to have better control.

For each newly node you don't need the parent attribute:

{ "id" : "ajson5", "parent" : "ajson2", "text" : "File 1", "date":"12","children": true } 

because it is the first parameter for create_node:

$('#using_json_2').jstree().create_node(lastNode,  ele, "last"); 

$('#using_json_2').jstree({     'core': {         "check_callback": true,         "data": [             {"id": "ajson1", "parent": "#", "text": "Simple root node", "date": "2018"},             {"id": "ajson2", "parent": "#", "text": "Root node 2", "date": "2018"},             {"id": "ajson3", "parent": "ajson2", "text": "Child 1", "date": "12"},             {"id": "ajson4", "parent": "ajson2", "text": "Child 2", "date": "12"},         ]     } }); $('#using_json_2').on("select_node.jstree", function (e, data) {     // get last node....     var model = $(this).jstree(true)._model.data;     var result = [];     for (var i in model) {         if (model.hasOwnProperty(i) && !model[i].children.length) {             result.push(i);         }     }     // ...the last node     var lastNode = result.pop();     var id = data.node.original.id;     // if current node is not the last....     if (id != lastNode) {         return;     }     // set loading ....     $('#' + lastNode).addClass("jstree-loading").attr('aria-busy',true);     $.ajax({         url: 'https://jsonplaceholder.typicode.com/users/',         type: 'GET',         success: function (data) {             var s = [];             s.push(                     {                         "id": "ajson5",                         "text": "File 1",                         "date": "12",                         "children": false,                         "icon": "jstree-file"                     }, {                         "id": "ajson6",                         "text": "File 2",                         "date": "12",                         "children": false,                         "icon": "jstree-file"                     }             );             s.forEach(function (ele) {                 $('#using_json_2').jstree().create_node(lastNode, ele, "last");             });             // open node             $('#using_json_2').jstree().open_node(lastNode);             // unset loading ....             $('#' + lastNode).removeClass("jstree-loading").attr('aria-busy',false);         }     }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>   <div id="using_json_2"></div>
 
 
   
   

Relacionados problema

2  Nede.js Web Sockets Server: ¿Es mi idea para la gestión de datos estable / escalable?  ( Node js web sockets server is my idea for data management stable scalable ) 
Estoy desarrollando un RPG multijugador de HTML5 Browser con NODE.JS que se ejecuta en el backend con un complemento de sockets web para la transferencia de d...

0  ¿Qué está mal con mi promesa, la función ASYNC / AWAIT está devolviendo las matrices vacías?  ( Whats wrong with my promise async await function both are returning empty arrays ) 
Tengo una variedad de objetos en mi código que se muestra a continuación [ { name: 'JMCP', priority: 1 }, { name: 'OTC', priority: 2 }, { name: 'CMT', ...

498  Nodo / Express: Eadrinuse, dirección ya en uso - Matar al servidor  ( Node express eaddrinuse address already in use kill server ) 
Tengo un servidor simple que se ejecuta en NOde.js usando Conectar: ​​ var server = require('connect').createServer(); //actions... server.listen(3000); ...

14  Heroku Server se bloquea con "JavaScript Monthip Out of Memory" al desplegar la aplicación 'react-admin'  ( Heroku server crashes with javascript heap out of memory when deploying react ) 
Actualmente estoy desarrollando un panel de administración usando 'react-admin' que funciona bien en mi local, pero tan pronto como subo la aplicación a Herok...

0  ¿Generar HTML o cargarlo en el mundo nodejs?  ( Generate html or load it in nodejs world ) 
Soy nuevo en el mundo de los Nodos, una pregunta noob para usted: usamos HAML, EJS, ... para generar archivos HTML. ¿Podemos cargar nuestro propio archivo HTM...

0  Async.achseries me da una gama: la pila de llamadas máxima excedida  ( Async eachseries gives me an rangeerror maximum call stack exceeded ) 
Quiero iterar más de 4435 productos en una colección. Para cada producto quiero descargar la imagen y subirlo a un cubo de Amazon S3. Para la última parte he ...

122  NODEJS - Redireccionar URL  ( Nodejs redirect url ) 
¿Cómo obtengo un servidor node.js para redirigir a los usuarios a una página 404.html cuando ingresan una URL no válida? Hice algunas buscando, y parece que...

6  Nodejs y nodo-mongodb-nativo  ( Nodejs and node mongodb native ) 
Acabando de comenzar con nodo, y tratar de obtener el controlador Mongo trabajar. Tengo mi conexión configurada, y extrañamente puedo insertar cosas. Sólo bie...

0  Cómo convertir la fecha de ISI a ISO en JS  ( How to convert isi date to iso in js ) 
Estoy recibiendo la fecha como data.created = "Wed May 03 2017 15:41:49 GMT 0530(IST)" quiero convertirlo a Formato de ISI regular como 2017-03...

2  Cargando datos de búfer de la base de datos como PDF  ( Loading buffer data from database as pdf ) 
He estado desarrollando una aplicación web donde el usuario puede cargar un archivo PDF y luego lo recupere y lo vea. Lo que he estado haciendo para lograrlo ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos