Este paquete es obsoleto puesto que su contenido se movió al TreeBrowserBundle.
No hay ninguna configuración para este paquete.
- Expandiendo/colapsando nodos.
- Cargando subárboles relajadamente vía respuestas JSON para llamadas AJAX.
- Función retrollamada al conmutar un nodo.
- Incluye archivos CSS y JS en tu plantilla.
- Llama a $("#tree").jstree({/* parámetros */}) — suponiendo que aquí #tree es el selector de tu lista.
- Proporciona el valor url que apunta a alguna cosa de lado del servidor regresando listas de nodos hijo para cualquier ID de nodo dado.
El servidor tiene que responder en formato JSON, este es un ejemplo:
[
{"data":"root","attr":{"id":"root","rel":"folder"},"state":"closed","children":
[
{"data":"content","attr":{"id":"child1","rel":"folder"},"state":"closed"},
{"data":"menu","attr":{"id":"child2","rel":"folder"},"state":"closed"},
{"data":"routes","attr":{"id":"child3","rel":"folder"},"state":"closed"}
]
}
]
Disponemos de más información sobre la configuración en el sitio web de jsTree.
<html>
<head>
<title>CMF Sandbox - Treeview test</title>
<link href="/bundles/symfonycmftree/css/jquery.treeview.css" media="screen" type="text/css" rel="stylesheet" />
<script src="/bundles/sonatajquery/jquery-1.7.1.js" type="text/javascript"></script>
<script src="{{ asset('bundles/symfonycmftree/js/jstree/jquery.jstree.js') }}" type="text/javascript"></script>
<script type="text/javascript">
function initTrees() {
jQuery("#tree").jstree({
"plugins" : [ "themes", "types", "ui", "json_data" ],
"json_data": {
"ajax": {
url: "subtree.php",
data: function (node) {
return { 'root' : jQuery(node).attr('id') };
}
}
},
"types": {
"max_depth": -2,
"max_children": -2,
"valid_children": [ "folder" ],
"types": {
"default": {
"valid_children": "none",
"icon": {
"image": "/images/document.png"
}
},
"folder": {
"valid_children": [ "default", "folder" ],
"icon": {
"image": "/images/folder.png"
}
}
}
}
})
.bind("select_node.jstree", function (event, data) {
window.location = "edit.php?id=" + data.rslt.obj.attr("id");
})
.delegate("a", "click", function (event, data) { event.preventDefault(); });
}
$(document).ready(function(){
initTrees();
});
</script>
</head>
<body>
<ul id="tree">
</ul>
<table border="1" id="properties"></table>
<hr/>
{% block content %}
Hello {{ name }}!
{% endblock %}
</body>
</html>
