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