html - Webix 树节点的 Font Awesome 图标

Question

Webix 与 Font Awesome 集成。但是如何使用 Font Awesome 图标而不是树中的默认文件夹/文件图标来设置单个节点的样式？

这是我尝试过的：

http://webix.com/snippet/52251623

• template仅适用于树级别
• $css保留现有的文件夹/文件图标
• 没有记录有关 trees 的属性，icon但是设置一个会做一些事情......当节点有子节点时，它会将文件夹图标更改为一个文件。

Answer 1

对于单棵树，它将像下一个

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
})

您可以在此处查看示例 - http://webix.com/snippet/0f3d85c3

如果您想在多个树控件之间共享此行为，您可以定义一次自定义类型

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>";
    }
});

然后使用 type:"awesome" 来应用样式

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

示例 - http://webix.com/snippet/79dbe741