8

我正在尝试在我的 jsTree 容器中动态添加一个新节点。它根本不起作用。我不知道我错过了什么。

jsfiddle 示例

$("#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>
4

6 回答 6

38

set 'check_callback' : true，否则所有操作如创建、重命名都会被阻止。像这样：

        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"]
                });
于 2014-04-02T21:39:10.397 回答
2

除了将 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 但无法工作；相反，我检查了演示中的代码并发现了这一点。

于 2014-11-04T16:51:03.357 回答
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>
于 2012-07-04T11:59:09.500 回答
1

我不知道是什么原因造成的，但是在创建节点时添加 setTimeout 可以解决问题

setTimeout(function() {
    $("#tree").jstree("create_node", $("node_1"), "after", { "data": "Hello World" });
}, 1000);
于 2012-07-04T12:17:16.070 回答
1

我遇到了同样的问题。新节点存储在我的数据库中，但不更新节点名称或节点文本。我运行 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;
于 2017-05-22T15:31:52.320 回答
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

于 2015-02-12T09:59:09.000 回答