我正在尝试在jsTree容器中动态添加新节点。它根本不起作用。我不知道我错过了什么。
$("#tree").jstree({
core: {
"animation": 0
},
"html_data": {},
"themes": {
"icons": false
},
"search": {
"case_insensitive": true,
"show_only_matches": true
},
"plugins": ["themes", "html_data", "search"]
});
$("#tree").jstree("create_node", $("node_1"), "after", { "data": "Hello World" });
HTML:
<div id="tree">
<ul>
<li id="node1"><a>Hello</a></li>
</ul>
</div>
答案 0 :(得分:31)
set'check_callback':true,否则将阻止所有操作,如create,rename。像这样:
this.treeDiv.jstree(
{
'core' : {
'check_callback': true,
'data' : {
'url' : function (node) {
return 'ajax_roots.json';
},
'data' : function (node) {}
}
},
"search" : {
"fuzzy" : false,
"show_only_matches": true,
"close_opened_onclear" : true
},
"plugins" : ["search", "sort", "json_data"]
});
答案 1 :(得分:1)
演示 简单您需要的内容 http://jsfiddle.net/gwxTa/2/ 或 http://jsfiddle.net/gwxTa/ 或动态 - (点击添加按钮)http://jsfiddle.net/VBSJ8/ 或 http://jsfiddle.net/ak4Ed/
请参阅我的旧帖子:jsTree not working
来自动态添加按钮功能的代码:
$(function() {
$("#tree").jstree({
"json_data": {
"data": [
{
"data": "Hello",
"attr": {
"id": "root.id"
},
"children": [{
"data": "Hello World",
"attr": {
"id": "node_1"
},
"children": []}
]},
]
},
"plugins": ["themes", "json_data", "crrm"]
});
});
$("#tree").jstree("create", $("#node_1"), "inside", {
"data": "child2"
}, function() {
alert("added");
}, true);
希望你包括脚本:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<script type='text/javascript' src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
答案 2 :(得分:1)
我不知道造成这种情况的原因,但在创建节点时添加setTimeout可以解决问题
setTimeout(function() {
$("#tree").jstree("create_node", $("node_1"), "after", { "data": "Hello World" });
}, 1000);
答案 3 :(得分:1)
除了将core.check_callback设置为true之外,值得一提的是创建一个简单的并不需要这么多参数。 您可以通过执行以下操作来实现:
$('#tree').jstree(true).select_node('nodeid');
var tr = $('#tree').jstree(true),
selected = tr.get_selected();
selected = tr.create_node(selected, {"type":"file(or any other type you need)"});
希望这可以帮助某人。我遇到了问题并尝试遵循API但无法工作;相反,我检查了演示中的代码并发现了。
答案 4 :(得分:1)
我遇到了同样的问题。新节点WAS存储在我的数据库中,但不更新节点名称或节点文本。我运行了Firebug.php,发现新创建的节点id(mysqli_insert_id)没有传递给rename_node。
我使用会话变量解决了它 - 设置一个变量来指示从create_node访问重命名函数并设置'last_id'会话变量。
'CRN'只是一个特定于我的数据库和应用程序的变量,你可以忽略它。
因此,使用提供的response.php示例,我将其修改如下:
case 'create_node':
FB::info($_GET, "New Node attributes ");
$node = isset($_GET['id']) && $_GET['id'] !== '#' ? (int)$_GET['id'] : 0;
$nodeText = isset($_GET['text']) && $_GET['text'] !== '' ? $_GET['text'] : '';
$CRN=$_SESSION['CRN'];
$sql ="INSERT INTO CourseLookup (name, text, parent_id, CRN) VALUES('$nodeText','$nodeText','$node','$CRN')";
FB::info($sql, "new node query ");
mysqli_query($conn, $sql);
$last_id = mysqli_insert_id($conn);
$_SESSION['create']=true;//passed to rename_node so it knows to use the $last_id for the node
$_SESSION['lastid']=$last_id;//used as the node in rename_node
$result = array('id' => $last_id);
print_r($result);die;
break;
case 'rename_node':
if($_SESSION['create']){//if a new node was just created
$node=$_SESSION['lastid'];//use the last insert id
}
else{
$node = isset($_GET['id']) && $_GET['id'] !== '#' ? (int)$_GET['id'] : 0;//otherwise use the last menu item clicked
}
FB::info($_SESSION['create'],"create status");//debugging
FB::info($_SESSION['lastid'],"last id");//debuggig
//print_R($_GET);
$nodeText = isset($_GET['text']) && $_GET['text'] !== '' ? $_GET['text'] : '';
FB::info($nodeText, "node name ");
$sql ="UPDATE CourseLookup SET name='$nodeText', text='$nodeText' WHERE id=$node";
FB::info($sql, "rename node query ");
mysqli_query($conn, $sql);
$_SESSION['create']=false;
break;
答案 5 :(得分:0)
添加新节点
$("#categories_jstree").jstree('create_node', '#', {'id' : '1944', 'text' : 'nosde1'}, 'last');
其中#是父节点id(empty_now)
为node1添加嵌套节点
$("#categories_jstree").jstree('create_node', '#1944', {'id' : '1945', 'text' : 'subnode1_1'});
#1944 - 父节点id