ztree如何自定义图标和自定义字体

ztree如何自定义图标和自定义字体

平常在使用树形结构的时候，ztree是一个非常不错的选择，比自己实现树形结构要方便很多。ztree还为我们提供了很多定制化的功能，下面就来介绍下如何自定义图标和自定义字体

没有ztree插件库的，可以先在百度上搜索ztree，一般第一个就是官网地址，下载之后解压复制到项目目录中

新建一个html测试页面，引入必要的css和js文件

添加

然后编写js代码，如图

$.fn.zTree.init($("#treeTest"), setting, zNodes);这句是初始化树形结构的关键

zNodes是节点数据，icon就是图标属性

打开浏览器访问html测试页面，如图可以看到树形结构成功显示，并且每个节点前面都有对应的icon图标

点击根据点关闭下级节点之后，可以发现图标的颜色发生了变化。这里是因为该节点设置了iconOpen和iconClose对应展开和关闭2个不同的图标

下面再来设置自定义字体，需要定义一个获取样式的js方法getFont，就是获取节点的font属性

setting里面设置如下

view: {

fontCss: getFont,

nameIsHTML: true

}

fontCss是字体样式，nameIsHTML表示名字可以是html代码

节点数据如图所示

刷新浏览器查看页面效果，可以看到第一个节点有蓝色背景色，同时字体是白色。第二个节点的名字是html代码同样可以设置html样式。第三个节点字体是红色。第四个节点是默认的样式，做对比的。