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/