2012-07-04 4 views
5

Я пытаюсь динамически добавлять новый узел в контейнер jsTree. Он вообще не работает. Я не знаю, чего не хватает.jsTree "create_node" действительно не работает

jsfiddle example

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

проверить, если это какой-либо использования - http://stackoverflow.com/questions/9821006/creating-a- new-node-in-jstree – Ashwin

ответ

1

Demoпросто то, что вам нужноhttp://jsfiddle.net/gwxTa/2/илиhttp://jsfiddle.net/gwxTa/или Dynamic - (нажмите кнопку Добавить) 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> 
1

I не знаю, что вызывает это, но добавляет setTimeout, когда creati нг узел устраняет проблему

setTimeout(function() { 
    $("#tree").jstree("create_node", $("node_1"), "after", { "data": "Hello World" }); 
}, 1000); 
+1

Приветствую вас на fuuuuuutuuuure! Попробуйте дождаться события «ready.jstree»: http://www.jstree.com/api/ – Pancakeo

+0

Ahhhh! я хотел бы знать это в то время :) – Catalin

+0

@Pancakeo, можете ли вы привести пример ожидания «ready.jstree»? не совсем уверен, как реализовать это ожидание ... – barrypicker

28

набор «check_callback»: истинно, в противном случае все операции, такие как создание, переименование предотвращены. как так:

 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"] 
       }); 
+0

Спасибо, человек !!! –

+1

+100 (если бы я мог) этот меня тоже поймал ... он должен действительно указать это в документации API-интерфейса 'create_node' в качестве примечания. – James

+0

Спасибо большое! вы спасли мне часы работы! Я согласен с Джеймсом, что документация довольно бедная .... но ее бесплатно, поэтому ... – mikewasmike

1

Помимо создания core.check_callback истинно, то стоит отметить, что создание простой, не требует так много аргументов. Вы могли бы просто достичь его, выполнив:

$('#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, но не смог работать, вместо этого я просмотрел коды из демонстраций и нашел это.

0

добавить новый узел

$("#categories_jstree").jstree('create_node', '#', {'id' : '1944', 'text' : 'nosde1'}, 'last'); 

где # родительский узел идентификатор (empty_now)

добавить вложенный узел для node1

$("#categories_jstree").jstree('create_node', '#1944', {'id' : '1945', 'text' : 'subnode1_1'}); 

# 1944 - родительский идентификатор узла

1

Я столкнулся с той же проблемой. Новый узел хранится в моей базе данных, но НЕ обновляет имя узла или текст узла. Я запустил Firebug.php и увидел, что новый созданный идентификатор узла (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;