当前位置:网站首页>【若依(ruoyi)】ztree 自定义图标(iconSkin 属性)
【若依(ruoyi)】ztree 自定义图标(iconSkin 属性)
2022-07-06 02:41:00 【sayyy】
前言
- ruoyi 4.6.0
- JQuery zTree core 3.5.12
创建 iconSkin
.ztree li span.button.ico2_ico_open{
margin-right:2px; background-position: -147px -21px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico2_ico_close{
margin-right:2px; margin-right:2px; background-position: -147px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico2_ico_docu{
margin-right:2px; background-position: -147px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico2_ico_open
:支节点展开状态的样式.ztree li span.button.ico2_ico_close
:支节点折叠状态的样式.ztree li span.button.ico2_ico_docu
:叶子节点的样式.ztree li span.button.<iconSkin 名称>_ico_open
:<iconSkin 名称>
可自定义iconSkin ico2
:.ztree li span.button.ico2_ico_docu
的图标设置成与.ztree li span.button.ico2_ico_close
的图标一致
使用iconSkin方式1:
var setting = ...;
//js中节点数据:
var zTreeNodes = [
//父节点展开 折叠时使用相同的图标
{
name:"父节点1", iconSkin:"diy01"},
//父节点展开 折叠时分别使用不同的图标
{
name:"父节点2", iconSkin:"diy02"},
//叶子节点个性化图标
{
name:"叶子节点", iconSkin:"diy03"}
];
//zTree 初始化
$.fn.zTree.init($("#tree"), setting, zTreeNodes);
使用iconSkin方式2:
var treeObj = $.fn.zTree.getZTreeObj("tree");
var treeNodes = treeObj.transformToArray(treeObj.getNodes());
treeNodes.forEach(treeNode => {
if (!treeNode.isParent) {
/* 将叶子节点的iconSkin设置为:ico2 */
treeNode.iconSkin = "ico2";
treeObj.updateNode(treeNode);
}
});
参考
https://treejs.cn/v3/api.php
边栏推荐
- [Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 12
- Pat 1084 broken keyboard (20 points) string find
- 如何精准识别主数据?
- [postgraduate entrance examination English] prepare for 2023, learn list5 words
- Large scale DDoS attacks take Myanmar offline
- 2.13 simulation summary
- [Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 6
- Advanced technology management - what is the physical, mental and mental strength of managers
- Network Security Learning - Web vulnerabilities (Part 1)
- Zero foundation self-study STM32 - Review 2 - encapsulating GPIO registers with structures
猜你喜欢
Which ecology is better, such as Mi family, graffiti, hilink, zhiting, etc? Analysis of five mainstream smart brands
Easy to use js script
2022 China eye Expo, Shandong vision prevention and control exhibition, myopia, China myopia correction Exhibition
Blue Bridge Cup group B provincial preliminaries first question 2013 (Gauss Diary)
[Digital IC manual tearing code] Verilog asynchronous reset synchronous release | topic | principle | design | simulation
Reset nodejs of the system
Black high-end responsive website dream weaving template (adaptive mobile terminal)
RobotFramework入门(一)简要介绍及使用
解决:AttributeError: ‘str‘ object has no attribute ‘decode‘
QT release exe software and modify exe application icon
随机推荐
Elimination games
Microsoft speech synthesis assistant v1.3 text to speech tool, real speech AI generator
Atcoder beginer contest 233 (a~d) solution
Redis skip table
C语言sizeof和strlen的区别
2022 eye health exhibition, vision rehabilitation exhibition, optometry equipment exhibition, eye care products exhibition, eye mask Exhibition
Patch NTP server at the beginning of DDoS counterattack
Day 50 - install vsftpd on ceontos6.8
Introduction to robotframework (I) brief introduction and use
剑指 Offer 30. 包含min函数的栈
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 9
Pat 1084 broken keyboard (20 points) string find
Bigder: I felt good about the 34/100 interview, but I didn't receive the admission
大厂镜像库
Universal crud interface
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 7
2345文件粉碎,文件强力删除工具无捆绑纯净提取版
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 15
Redis cluster deployment based on redis5
构建库函数的雏形——参照野火的手册