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

 时间:2024-10-12 19:19:03

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

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

2、新建一个html测试页面,引入必要的css和js文件<link rel="styleshe髫潋啜缅et" type="text/css" href="css/zTreeStyle.css"><script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script><script type="text/javascript" src="js/jquery.ztree.core-3.5.min.js" ></script><script type="text/javascript" src="js/jquery.ztree.excheck-3.5.min.js"></script>添加<ul id="treeTest" class="ztree"></ul>然后编写js代码,如图$.fn.zTree.init($("#treeTest"), setting, zNodes);这句是初始化树形结构的关键zNodes是节点数据,icon就是图标属性

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

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

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

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

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

5、下面再来设置自定义字体,酋篚靶高需要定义一个获取样式的js方法getFont,就是获取节点的font属性setting里面设置如下view多唉捋胝: { fontCss: getFont, nameIsHTML: true }fontCss是字体样式,nameIsHTML表示名字可以是html代码节点数据如图所示

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

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

ztree如何自定义图标和自定义字体
  • devc++如何导入visualc++项目
  • C#如何利用Directory类获取文件夹创建的时间
  • Arcgisengine10.2的安装方法/教程
  • 怎样激活中国联通帮帮卡?
  • 亮粉眼妆,2 分钟就能完成!
  • 热门搜索
    手抄报标题设计 我的青春我做主手抄报 关于读书手抄报图片 我让妈妈露笑脸手抄报 吸烟的危害手抄报 语文知识手抄报 卫生城市手抄报 中国板报网手抄报 中秋节手抄报的内容 安全手抄报的内容