jstree: создать новый дочерний узел

Question

Перед публикацией этого вопроса я проверил другие вопросы в stackoverflow. один заключается в следующем:

creating a new node in jstree

Но почему-то я не смог заставить его работать.

Я извлекаю детали дочернего узла через ajax. Когда вы нажимаете на узел, он вызывает запрос ajax и получает детали дочернего узла. Я хочу привязать эти данные к родительскому (щелкнутому) узлу в jstree.

Вот jsfiddle демо (без AJAX): https://jsfiddle.net/8wyqd9om/

Можете ли вы помочь мне с этим?

HTML:

<div id='cat_tree'> 
<ul> 
<li id="1">First 
    <ul> 

     <li id="2">First</li> 
     <li id="3">First</li> 
    </ul> 
</li> 
<li id="4">First</li> 
<li id="5">First</li>  
<li id="6">First</li> 
</ul> 
</div> 

ЯШ:

$(function() { 
    $('#cat_tree').jstree({"core": { 
     "themes":{ 
     "icons":false 
     } 
    }}); 

    var data = [ 
     { "id" : "7", "parent" : "#4", "text" : "second" }, 
     { "id" : "8", "parent" : "#4", "text" : "second" }, 
    ]; 

    $('#click').click(function() { 
     $('#cat_tree').jstree().create_node($('#4'), data, 'last', function(){ 
     alert("done"); 
     }, true); 
    }); 
}); 

Answer 1

Пожалуйста, проверьте код ниже

$(function() { 

    var data = [{ 
    "id": "p1", 
    "parent": "#", 
    "text": "Parent-1" 
    }, { 
    "id": "p2", 
    "parent": "#", 
    "text": "Parent-2" 
    }, { 
    "id": "c1", 
    "parent": "p2", 
    "text": "Child 1" 
    }, { 
    "id": "c2", 
    "parent": "p2", 
    "text": "Child 2" 
    }, ]; 


    $("#jstree").jstree({ 
    "core": { 
     "check_callback": true, 
     "data": data 
    } 
    }).on('create_node.jstree', function(e, data) { 
    console.log('saved'); 
    }); 

    $('#btnCreate').click(function() { 

    $('#jstree').jstree().create_node('#', { 
     "id": "p3", 
     "text": "Parent-3" 
    }, "last", function() { 
     alert("Parent created"); 
    }); 

    $('#jstree').jstree().create_node('p2', { 
     "id": "c3", 
     "text": "Child 3" 
    }, "last", function() { 
     alert("Child created"); 
    }); 

    }); 

}); 

Демо: https://jsfiddle.net/m24fvh39/1/