Программно добавляя дочерние узлы в jstree
Я пытаюсь написать код, который динамически добавляет узлы в jstree. Я следил за документом http://www.jstree.com/documentation/crrm, но не может получить простой пример для работы - добавляется дочерний элемент node но он добавляется к node "root.id", а не к "child1.id", как указано... Любые советы будут высоко оценены. Код следует за
<html>
<head>
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.jstree.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function () {
$("#tree").jstree({
"json_data" : {
"data" : [
{
"data" : "parent",
"attr" : { "id" : "root.id" },
"children" : [ { "data" : "child1",
"attr" : { "id" : "child1.id" },
"children" : [ ] }
]
},
]
},
"plugins" : [ "themes", "json_data", "crrm" ]
});
});
$("#add").click(function() {
$("#tree").jstree("create", $("#child1.id"), "inside", { "data" : "child2" },
function() { alert("added"); }, true);
});
});
</script>
</head>
<body>
<div id="tree" name="tree"></div>
<input type="button" id="add" value="add" />
</body>
</html>
Ответы
Ответ 1
При использовании периодов в ID вам необходимо их избежать:
$("#tree").jstree("create", $("#child1\\.id"), "inside", { "data" : "child2" },
function() { alert("added"); }, true);
Это связано с тем, как он использует селектора jQuery. Он упоминается в jsTree FAQ, который находится здесь:
http://www.jstree.com/faq/
Ответ 2
сначала инициализируйте jstree (в моем случае я использую ajax), поставьте check_callback в core obj и вызовите плагин после core obj следующим образом:
jQuery('#jstree_demo_div').jstree({
'core' : {
'data' : {
'url' : 'data/mapas.php',
},
"check_callback" : function(e,data){
console.log(data)
}
},
"plugins" : [ "contextmenu" ] })
второй используйте эту строку и поместите $('# j1_1') в качестве родителя, данные в json, "last" в качестве позиции или "first", обратный вызов функции (в моем случае это функция tales()), внутренняя аргумент установлен в true
jQuery("#jstree_demo_div").jstree(true).create_node( $('#j1_1'), {text: "New node", id: true} , "last",tales(), true );