jsTree - 无法创建新节点 - 所有其他功能都可以正常工作

时间:2014-02-19 10:15:25

标签: jstree

取消选择并悬停功能fina工作,但创建/删除/重命名则不行。

做错了什么?

info.json包含5个标记为1到5的节点。

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="jstree\dist\themes\default\style.min.css" />
<script src="jstree\dist\jstree.js"></script>
<script>
$(function() {

$('#test_tree').jstree({
'core' : {
  'data' : {
    'url' : 'info.json',
    'data' : function (node) {
      return { 'id' : node.id };
    }
  }
  }
});
}); 
</script>

</head>
<body>

<div id="container" >

  <div id="nav_bar">
    <button id="create" onclick = "demo_create()">Create</button>
  </div> 
  <div id="test_tree"></div
</div>  

<script>
            function demo_create() {
$.jstree.reference('#test_tree').hover_node('ajson5');
$.jstree.reference('#test_tree').deselect_node('ajson1');
$.jstree.reference('#test_tree').create_node();
            };

</script>

</body>

我在官方网站上使用了同样的例子,但它不起作用 谢谢你的帮助。

6 个答案:

答案 0 :(得分:11)

首先,为了对树进行更改,核心配置中的checkcallback需要设置为true。

$('#test_tree').jstree({
    'core' : {
        'data' : {
        'url' : 'info.json',
        'data' : function (node) {
            return { 'id' : node.id };
        },
        check_callback : true
    }
}

您至少需要将parent.id传递给create_node函数。

$.jstree.reference('#test_tree').create_node('ajson1');

您可以在the jstree website检查API以获取完整参数列表。

答案 1 :(得分:2)

您必须设置新创建的节点的类型,如下所示:

$('#tree').jstree().create_node('#', {'id': 'blah', 'text': 'new node', 'type': 'folder'}, 'last', function() {
    console.log('done');
});

应该改进jstree文档。

答案 2 :(得分:1)

您必须发送所选元素。 使用以下内容(这基本上是演示页面http://www.jstree.com/demo/中的创建按钮的代码):

var tree = $("#test_tree").jstree(true);
var sel = tree.get_selected();
if (!sel.length) 
{
    return false;
}
sel = sel[0];
sel = tree.create_node(sel);
if (sel) 
{
  tree.edit(sel);
}

答案 3 :(得分:1)

演示jsTreeView 3.2.1版本

 $("#treeView").jstree({ 'core': {
                'check_callback': true,
                'themes': {
                    "variant": "large"
                },
                'data':
               [{"id":"1","parent":"#","text":"Parent Node"}]
                }
            });

你错过了check_callback的单引号,在使用它之后它会起作用。例如'check_callback': true

创建新节点的代码

var ref_treeview = $("#treeView").jstree(true);
sel = ref_treeview.get_selected();
if (!sel.length) {
    return false;
}
sel = sel[0];
sel = ref_treeview.create_node(sel, "childNode", "last", CreateNode,true);

这里CreateNode是我的回调函数名称

答案 4 :(得分:0)

使用其他答案的代码,我能够完成以下工作:
请注意,这确实有效。我正在使用它为外部ajax API创建菜单。

function makeNode(menunode, menuname){
    var inst = $.jstree.reference("#treemenu"); //get menu instance
    var obj = inst.get_node(menunode);
    inst.create_node(obj, menuname); //creates nodes. use "#" to make root nodes
    inst.open_node(obj); // open the node (unfold)
});

用法:

//create menu instance and allow tree changes
$('#treemenu').jstree({'core' : {'check_callback': true}});

makeNode("#", "main menu"); //makes root node
makeNode("#j1_1", "submenu in main menu"); //makes sub node

这假设你有一个id="treemenu"的div

<div id="treemenu"></div>

答案 5 :(得分:0)

在创建jstree实例时,您只需要配置 “核心”设置如下所示:

$(function () {
    $('#jstree').jstree({
        'core':{check_callback : true}
    });