Las propiedades children
y parent
son imcompatibles. Si usas children
, no hay que usar parent
, y si se usa parent
no hay que usar children
.
El árbol de parent
necesita al menos estas 3 propiedades:
{
id : "string" // required
parent : "string" // required
text : "string" // node text
}
Hago una reconstrucción del árbol. El parent
depende del id
:
1 2 3 4 5 6 7 8 9 Nivel id parent
| | | | | | | | |
+ FCB | | | | | | | 1 23456789
+ Members | | | | | 2 1 |
| + Lionel| | | | | 3 2 |
| + Pique | | | | | 4 2 |
+ Sports| | | | | | 5 1 |
+ Football | | | | 6 5 |
| + Members | | | 7 6 |
| | + Pique | | | 8 7 |
| + Categories| | | 9 6 |
| | + UEFA 14 | | 10 9 |
| | | + Teams | | 11 10 |
| | | | + Team 1| 12 11 |
| | | | | + Members 13 12|
| | | | | | + Puyol 14 13
| | | | | | + Iniesta 15 13
| | | | + Team 2 16 11
| | + UEFA 15 17 9
| | + Members 18 17
| | + Xavi 19 18
+ Basketball 20 5
+ Members 21 20
| | + Pique 22 21
| + Categories 23 20
| + NBA 14 24 23
| | + NBA 15 25 23
| | | 23456789
Nivel 3 4 5 id parent
El array de parent
lo reconstruyo de la siguiente manera:
var array = [
{id: 1,parent:"#" ,text:"FCB"}
,{id: 2,parent:1 ,text: "Members"}
,{id: 3,parent:2 ,text: "Lionel"}
,{id: 4,parent:2 ,text: "Pique"}
,{id: 5,parent:1 ,text: "Sports"}
,{id: 6,parent:5 ,text: "Football"}
,{id: 7,parent:6 ,text: "Members"}
,{id: 8,parent:7 ,text: "Pique"}
,{id: 9,parent:6 ,text: "Categories"}
,{id:10,parent:9 ,text: "UEFA 14"}
,{id:11,parent:10 ,text: "Teams"}
,{id:12,parent:11 ,text: "Team 1"}
,{id:13,parent:12 ,text: "Members"}
,{id:14,parent:13 ,text: "Puyol"}
,{id:15,parent:13 ,text: "Iniesta"}
,{id:16,parent:11 ,text: "Team 2"}
,{id:17,parent:9 ,text: "UEFA 15"}
,{id:18,parent:17 ,text: "Members"}
,{id:19,parent:18 ,text: "Xavi"}
,{id:20,parent:5 ,text: "Basketball"}
,{id:21,parent:20 ,text: "Members"}
,{id:22,parent:21 ,text: "Pique"}
,{id:23,parent:20 ,text: "Categories"}
,{id:24,parent:23 ,text: "NBA 14"}
,{id:25,parent:23 ,text: "NBA 15"}
]
El árbol de children
necesita al menos estas 2 propiedades:
{
text : "string" // node text
children : [] // array of strings or objects
}
Reconstruyo manualmente el array con children
:
var array = [
{text:"FCB",children:[
{text: "Members",children:[
{text: "Lionel"}
,{text: "Pique"}
]},{text: "Sports",children:[
{text: "Football",children:[
{text: "Members",children:[
{text: "Pique"}
]},{text: "Categories",children:[
{text: "UEFA 14",children:[
{text: "Teams",children:[
{text: "Team 1",children:[
{text: "Members",children:[
{text: "Puyol"}
,{text: "Iniesta"}]}]}
,{text: "Team 2"}]}]}
,{text: "UEFA 15",children:[
{text: "Members",children:[
{text: "Xavi"}]}]}]}]}
,{text: "Basketball",children:[
{text: "Members",children:[
{text: "Pique"}]}
,{text: "Categories",children:[
{text: "NBA 14"}
,{text: "NBA 15"}]}]}]}]}
]
Convirtiendo de parent
a children
:
La siguiente función recorre cada elemento y por cada elemento vuelve a recorrer el array para buscar el elemento padre y luego insertarlo como hijo.
function hacia_children(array){
var salida = []
var por_procesar = []
for(var i in array){
for(var j in array){
if(array[i].parent==array[j].id){
if( array[j].children==undefined ){
array[j].children = []
}
array[j].children.push( array[i] )
}
}
if( array[i].parent=="#" ){
salida.push( array[i] )
}
por_procesar.push(array[i])
}
for(var i in por_procesar){
delete por_procesar[i].id
delete por_procesar[i].parent
}
return salida
}
Por último elimina la propiedad id
y la propiedad parent
... De esta manera solamente queda text
y children
.
La propiedad children
es un array de objetos. Si un padre no tiene tal propiedad, la agrega y va generando la lista de hijos.
El array que devuelve solo contendrá los elementos que su parent
sea "#"
, es decir, los de primer nivel.
Ejemplo de conversión de parent
a children
(ver en Página completa):
var array = [
{id: 1,parent:"#" ,text:"FCB"}
,{id: 2,parent:1 ,text: "Members"}
,{id: 3,parent:2 ,text: "Lionel"}
,{id: 4,parent:2 ,text: "Pique"}
,{id: 5,parent:1 ,text: "Sports"}
,{id: 6,parent:5 ,text: "Football"}
,{id: 7,parent:6 ,text: "Members"}
,{id: 8,parent:7 ,text: "Pique"}
,{id: 9,parent:6 ,text: "Categories"}
,{id:10,parent:9 ,text: "UEFA 14"}
,{id:11,parent:10 ,text: "Teams"}
,{id:12,parent:11 ,text: "Team 1"}
,{id:13,parent:12 ,text: "Members"}
,{id:14,parent:13 ,text: "Puyol"}
,{id:15,parent:13 ,text: "Iniesta"}
,{id:16,parent:11 ,text: "Team 2"}
,{id:17,parent:9 ,text: "UEFA 15"}
,{id:18,parent:17 ,text: "Members"}
,{id:19,parent:18 ,text: "Xavi"}
,{id:20,parent:5 ,text: "Basketball"}
,{id:21,parent:20 ,text: "Members"}
,{id:22,parent:21 ,text: "Pique"}
,{id:23,parent:20 ,text: "Categories"}
,{id:24,parent:23 ,text: "NBA 14"}
,{id:25,parent:23 ,text: "NBA 15"}
]
function hacia_children(array){
var salida = []
var por_procesar = []
for(var i in array){
for(var j in array){
if(array[i].parent==array[j].id){
if( array[j].children==undefined ){
array[j].children = []
}
array[j].children.push( array[i] )
}
}
if( array[i].parent=="#" ){
salida.push( array[i] )
}
por_procesar.push(array[i])
}
for(var i in por_procesar){
delete por_procesar[i].id
delete por_procesar[i].parent
}
return salida
}
var array_children = hacia_children(array)
console.log( array_children )
$(function() {
$("#jstree_try").jstree({
"core" : {
"themes": {
"responsive": true
},
"data" : array_children
}
})
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/jstree.min.js"></script>
<div id="jstree_try"></div>
Convirtiendo de children
a parent
:
La siguiente función primero copia el array
en salida
, para no modificar el array original.
function hacia_parent(array){
var salida = JSON.parse(JSON.stringify(array))
var id = 0
for(var i=0;i<salida.length;++i){
salida[i].id = ++id
if(salida[i].parent==null){
salida[i].parent = "#"
}
if( salida[i].children && salida[i].children.length>0 ){
for(var j in salida[i].children){
salida[i].children[j].parent = salida[i].id
salida.push(salida[i].children[j])
salida[i].children[j]=null
}
}
delete salida[i].children
}
return salida
}
Entonces va recorriendo el array salida
agregando los parámetros id
y parent
.
Mientras lo recorre va moviendo el hijo del elemento actual al final del array, es decir, el children
lo agrega al final y luego asigna al hijo como null
.
Esto sirve para desempaquetar el array, aplanándolo de a poco. Al agregar el elemento al final, esto hará que sea parte del recorrido del array, y cuando no queden más hijos, dejará de recorrerlo, quedando todos los elementos en el primer nivel.
Muestro el proceso de cómo funciona de manera simplificada:
Primer paso:
- (índice del
for
) Primer elemento.
Segundo paso:
- Primer elemento.
- (índice del
for
) Segundo (hijo de primer elemento)
Tercer paso:
- Primer elemento.
- Segundo (hijo de primer elemento)
- (índice del
for
) Tercero (hijo de Segundo)
Ejemplo de conversión de children
a parent
(ver en Página completa):
var array = [
{text:"FCB",children:[
{text: "Members",children:[
{text: "Lionel"}
,{text: "Pique"}
]},{text: "Sports",children:[
{text: "Football",children:[
{text: "Members",children:[
{text: "Pique"}
]},{text: "Categories",children:[
{text: "UEFA 14",children:[
{text: "Teams",children:[
{text: "Team 1",children:[
{text: "Members",children:[
{text: "Puyol"}
,{text: "Iniesta"}]}]}
,{text: "Team 2"}]}]}
,{text: "UEFA 15",children:[
{text: "Members",children:[
{text: "Xavi"}]}]}]}]}
,{text: "Basketball",children:[
{text: "Members",children:[
{text: "Pique"}]}
,{text: "Categories",children:[
{text: "NBA 14"}
,{text: "NBA 15"}]}]}]}]}
]
function hacia_parent(array){
var salida = JSON.parse(JSON.stringify(array))
var id = 0
for(var i=0;i<salida.length;++i){
salida[i].id = ++id
if(salida[i].parent==null){
salida[i].parent = "#"
}
if( salida[i].children && salida[i].children.length>0 ){
for(var j in salida[i].children){
salida[i].children[j].parent = salida[i].id
salida.push(salida[i].children[j])
salida[i].children[j]=null
}
}
delete salida[i].children
}
return salida
}
var array_parent = hacia_parent(array)
console.log( array_parent.map(x=>JSON.stringify(x)) )
$(function() {
$("#jstree_try").jstree({
"core" : {
"themes": {
"responsive": true
},
"data" : array_parent
}
})
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/jstree.min.js"></script>
<div id="jstree_try"></div>
Convirtiendo el array original
Para este array, es necesario que Members
, se tome como hijo del elemento actual, y luego los elementos del array de Member
serán hijos de Member
.
{"id":"1", "idType": "1", "name": "FCB", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": ""},
{"id":"2", "idType": "2", "name": "Football", "Members": [{"name": "Pique"}], "idParent": "1"},
{"id":"3", "idType": "2", "name": "Basketball", "Members": [{"name": "Pique"}], "idParent": "1"},
{"id":"4", "idType": "3", "name": "UEFA 14", "Members": [{"name": "Test"}], "idParent": "2"},
{"id":"5", "idType": "3", "name": "UEFA 15", "Members": [{"name": "Carlos"}], "idParent": "2"},
{"id":"6", "idType": "3", "name": "NBA 15", "Members": [], "idParent": "3"},
{"id":"7", "idType": "4", "name": "Team 1", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": "4"},
{"id":"8", "idType": "4", "name": "Team 2", "Members": [{"name": "Lionel"}], "idParent": "4"},
Tomamos como ejemplo el elemento que tiene id
con valor 7. Originalmente es como lo siguiente:
{"id":"7", "idType": "4", "name": "Team 1", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": "4"},
Luego Members
pasa como hijo, es decir, su idParent
será el id
, que es 7. Se le agrega la propiedad children
, que luego será quitada.
{"id":"7", "idType": "4", "name": "Team 1", "idParent": "4"},
...
{"id":"4", "idType": "2", "name": "Members", children: [{"name": "Lionel"},{"name": "Pique"}], "idParent": "7"},
Es momento de quitar valores
, pasando todos sus elementos al final del array, que en este caso son dos. Estos elementos serán hijos de Members
, es decir, su idParent
es el mismo que el id
de Members
.
{"id":"7", "idType": "4", "name": "Team 1", "idParent": "1"},
...
{"id":"9", "idType": ..., "name": "Members", , "idParent": "7"},
...
{"id": ..., "idType": ..., "name": "Lionel", "idParent": "9"},
{"id": ..., "idType": ..., "name": "Pique", "idParent": "9"}
Siguiendo esta lógica, se puede programar la función que convierte el formato original del array al formato de jsTree.
Aquí además cambio los parámetros idParent
por parent
y name
por text
, y al id
lo calculo mediante el id
del último elemento del array.
function formatear_jsTree(array){
var salida = JSON.parse(JSON.stringify(array))
for(var i=0;i<salida.length;++i){
salida[i].parent = salida[i].idParent||salida[i].parent||"#"
salida[i].text = salida[i].name||salida[i].text
delete salida[i].idParent
delete salida[i].name
var tipos = [
["2","Sports"]
,["3","Categories"]
,["4","Teams"]
]
for(var j in tipos){
if( salida[i].idType == tipos[j][0] ){
var buscar_padre = x=>{
return x.parent==salida[i].parent
&& x.text == tipos[j][1]
}
if( !salida.filter(buscar_padre).length ){
var elemento_nuevo = {
id: ((+salida[salida.length-1].id)+1).toString()
, text: tipos[j][1]
, parent: salida[i].parent
}
salida[i].parent = elemento_nuevo.id
salida.push(elemento_nuevo)
}else{
var padre = salida.filter(buscar_padre)[0]
if(padre){
salida[i].parent = padre.id
}
}
}
}
if( salida[i].Members ){
var elemento_nuevo = {
id: ((+salida[salida.length-1].id)+1).toString()
, text: "Members"
, children: salida[i].Members
, parent: salida[i].id
}
delete salida[i].Members
salida.push(elemento_nuevo)
}
if( salida[i].children ){
for(var j in salida[i].children){
var elemento_nuevo = {
id: ((+salida[salida.length-1].id)+1).toString()
, text: salida[i].children[j].name
, parent: salida[i].id
}
salida.push(elemento_nuevo)
}
delete salida[i].children
}
delete salida[i].idType
}
return salida
}
Esta función también genera las secciones a partir del idType
. Si la sección no existe, la crea, y si existe la busca por el nombre y además coincidiendo con el parent
.
x=>{
return x.parent==salida[i].parent
&& x.text == tipos[j][1]
}
- Si el
idType
es 2, genera la sección Sports.
- Si el
idType
es 3, genera la sección Categories.
- Si el
idType
es 4, genera la sección Teams.
La función generar_id
sirve para asignar un id
que no exista dentro del array. Lo que hace es obtener todos los id
del array, luego obtiene el máximo de esa lista numérica y le suma 1.
var generar_id = x=>1+Math.max( ...x.map(x=>+x.id) )
Nota: Ahora Members
aparecerá abajo porque siempre se ordena por abecedario.
Código sobre el array original (ver en Página completa):
var array = [
{"id":"1", "idType": "1", "name": "FCB", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": ""},
{"id":"2", "idType": "2", "name": "Football", "Members": [{"name": "Pique"}], "idParent": "1"},
{"id":"3", "idType": "2", "name": "Basketball", "Members": [{"name": "Pique"}], "idParent": "1"},
{"id":"4", "idType": "3", "name": "UEFA 14", "Members": [{"name": "Test"}], "idParent": "2"},
{"id":"5", "idType": "3", "name": "UEFA 15", "Members": [{"name": "Carlos"}], "idParent": "2"},
{"id":"6", "idType": "3", "name": "NBA 15", "Members": [], "idParent": "3"},
{"id":"7", "idType": "4", "name": "Team 1", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": "4"},
{"id":"8", "idType": "4", "name": "Team 2", "Members": [{"name": "Lionel"}], "idParent": "4"},
]
function formatear_jsTree(array){
var salida = JSON.parse(JSON.stringify(array))
for(var i=0;i<salida.length;++i){
salida[i].parent = salida[i].idParent||salida[i].parent||"#"
salida[i].text = salida[i].name||salida[i].text
delete salida[i].idParent
delete salida[i].name
var tipos = [
["2","Sports"]
,["3","Categories"]
,["4","Teams"]
]
var generar_id = x=>1+Math.max( ...x.map(x=>+x.id) )
for(var j in tipos){
if( salida[i].idType == tipos[j][0] ){
var buscar_padre = x=>{
return x.parent==salida[i].parent
&& x.text == tipos[j][1]
}
if( !salida.filter(buscar_padre).length ){
var elemento_nuevo = {
id: generar_id(salida)
, text: tipos[j][1]
, parent: salida[i].parent
}
salida[i].parent = elemento_nuevo.id
salida.push(elemento_nuevo)
}else{
var padre = salida.filter(buscar_padre)[0]
if(padre){
salida[i].parent = padre.id
}
}
}
}
if( salida[i].Members ){
var elemento_nuevo = {
id: generar_id(salida)
, text: "Members"
, children: salida[i].Members
, parent: salida[i].id
}
delete salida[i].Members
salida.push(elemento_nuevo)
}
if( salida[i].children ){
for(var j in salida[i].children){
var elemento_nuevo = {
id: generar_id(salida)
, text: salida[i].children[j].name
, parent: salida[i].id
}
salida.push(elemento_nuevo)
}
delete salida[i].children
}
delete salida[i].idType
}
return salida
}
var array_formateado = formatear_jsTree(array)
console.log(array_formateado.map(x=>JSON.stringify(x)))
$(function() {
$("#expected_jstree").jstree({
"core" : {
"themes": {
"responsive": true
},
"data" : array_formateado
}
})
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/jstree.min.js"></script>
<div id="expected_jstree"></div>