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> 

JS：

$(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/