html - Iconos de Font Awesome para nodos de árbol Webix

css tree

Question

Webix se integra con Font Awesome . Pero, ¿cómo se pueden utilizar los iconos de Font Awesome en lugar de los iconos de carpetas / archivos predeterminados en los árboles para diseñar nodos individuales?

Esto es lo que he intentado:

http://webix.com/snippet/52251623

• template solo funciona en el nivel del árbol
• $css mantiene el icono de carpeta / archivo existente
• no hay ninguna propiedad de icon documentada para árboles , sin embargo, establecer uno hace algo ... cambia el icono de carpeta en un archivo uno, cuando el nodo tiene hijos.

Answer 1

Para un solo árbol será como el próximo

webix.ui({
view:"tree",
type:{
folder:function(obj){
if (obj.$count)
return "<span class=''webix_icon fa-folder''></span>";
return "<span class=''webix_icon fa-file''></span>";
}
},
data:tree_data
})

Puede verificar la muestra aquí - http://webix.com/snippet/0f3d85c3

Si desea compartir este comportamiento entre varios controles de árbol, puede definir el tipo personalizado una vez

webix.type(webix.ui.tree, {
name:"awesome",
folder:function(obj){
if (obj.$count)
return "<span class=''webix_icon fa-folder''></span>";
return "<span class=''webix_icon fa-file''></span>";
}
});

y luego usar tipo: "impresionante" para aplicar el estilo

webix.ui({
view:"tree",
type:"awesome",
data:tree_data
})

Ejemplo - http://webix.com/snippet/79dbe741