zTree根据数据项自定义图标问题

最新推荐文章于 2022-07-04 11:56:52 发布
最新推荐文章于 2022-07-04 11:56:52 发布
阅读量394 收藏
点赞数 1
分类专栏： 前端jq插件 文章标签： zTree 自定义图标 zTree根据动态数据显示自定义图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39872084/article/details/102838466
版权

首先区分zTree API中

treeNode:{

  • icon
    不区分折叠/展开图标

  • iconClose
    用于父节点，折叠时图标

  • iconOpen
    用于父节点，展开时图标

  • iconSkin
    通过样式类名设置图标
    可包含情况：
    1、父节点折叠时
    2、父节点展开时
    3、子节点（无children的节点）


    }
    所以，在为子节点设置自定义图标是要用iconSkin,使用icon/iconClose/iconOpen对子节点无效

番茄&辣椒酱
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
zTree自定义状态图标实现
10-17
本实例详细讲述了如何通过zTree实现满足项目需求Tree数据分层显示要求，通过zTree灵活的自定义属性，轻松完成Tree的改造
ztree自定义图标(iconSkin，iconClose,iconOpen)
a13697013326的博客
08-01 3277
设计图: 先放上ztree的api:http://www.treejs.cn/v3/api.php 首先是ztree的初始化: js文件的初始化 ​ var obj = [ { name: '福建省', id:1, iconOpen:openurl, iconClose:closeurl...
ztree点击树节点前的展开图标分级加载下拉树
duansamve的博客
10-23 584
onExpand：用于捕获节点被展开的事件回调函数，这个是关键。 <ul id="share-to-department-modal-tree"></ul> var fileTreeSettingForShareToDept = { check : { enable : true, chkboxType : { "Y" : "", "N" :...
【zTree】将zTree节点前的展开收起图标（加减号）改为三角形图标
qq_32886245的博客
12-17 5696
zTree是jQuery 树插件，官网地址。 新需求：把树节点前的加减号图标，改为三角形图标；去掉图标；去掉连接线； 修改前与修改后对比 去掉图标；去掉连接线 参考地址：http://www.treejs.cn/v3/demo.php#_103 按照官网文档在setting里配置就行，代码如下： var setting = { view: { selectedMulti: ...
vue ---ztree 修改ztree的图标
m0_60522381的博客
09-14 2180
由于数据量大简单的iview的tree或是el的tree加载数据造成页面卡顿，前端操作不流畅。 基于vue-giant-ztree修改，添加类似图标⬇️ 获取icon代码方法--------借鉴大佬的经验拿到了自己项目所需的图标 在ztree引用只需如下几个文件 ztree对应的vue文件 <template> <div id="z-tree" class="flex-col"> <div class="wrap flex-1"&..
ztree添加自定义图标
笑到世界都狼狈的博客
05-25 3859
ztree默认自带的是编辑和删除的图标，但是在做项目的时候遇到需要“添加”的图标，百度好久找到了解决方法，如下 <script> var scanTypeTreeSetting = { view: { addHoverDom: addHoverDom,//添加图标事假 } ...
ztree点击展开/收缩 按钮分级加载，解决数据量过大加载缓慢
weixin_42959607的博客
11-30 4680
有些项目的组织机构足足有六七万多条数据，加载十分缓慢，所考虑做成分级加载。 由于本项目的ztree的树节点的点击事件已经被占用（加载组织人员），所以考虑使用ztree的 展开/收缩 （onExpand）按钮点击事件，即树前面的三角形按钮。（关键属性：isParent） 加载第一级节点tree方法，效果如下图（第一次只查询父节点为null或者0的节点。此处应注意在将数据库查询到的数据转换为ztre...
ztree自定义tag
最新发布
04-10
ztree自定义tag
ztree添加自定义控件
04-28
ztree3.1插件，根据项目需要，添加了一些需要的控件，比如增、删、改等，数据库是oracle10g。如有疑问请给我留言。
js树插件zTree获取所有选中节点数据的方法
12-12
本文实例讲述了js树插件zTree获取所有选中节点数据的方法。分享给大家供大家参考。具体分析如下： 由于刚接触Tree方面的东西。在网上看到了zTree，是中国人写的。所以API肯定是中文的。而且评论也很好。所以尝试用...
jQuery插件zTree实现获取一级节点数据的方法
10-20
主要介绍了jQuery插件zTree实现获取一级节点数据的方法,结合实例形式分析了jQuery插件zTree针对节点的遍历与获取操作相关技巧,需要的朋友可以参考下
ztree树插件自定义图标----支持字体图标
lixiaonaaa的博客
10-25 2209
zTree是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。 这是ztree插件得官方介绍，我本人也是非常喜欢这个插件，灵活好用，几乎做的每一个项目都有用到它。但是久而久之，我发现ztree的一个缺点，就是它的自定义图标只能用图片，不能支持字体图标。首先使用图片，修改很不灵活，其次也比较浪费资源。 也是由于项目需要，所...
jQuery树形控件zTree使用小结
weixin_30535167的博客
08-25 996
作者：Fonour 字体：[增加减小] 类型：转载 时间：2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法，zTree树插件的基本使用方法，感兴趣的小伙伴们可以参考一下 0 zTree简介 树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的...
jquery Ztree v3.5 实例2 自定义显示在节点前的图片
wunity的博客
01-11 560
转载地址    http://blog.csdn.net/moneyzhong/article/details/10088313 最终显示效果如下： 代码如下： html>      head>title>title>head>      script type="text/javascript" src="jquery-1.10.2.js">script>      s
zTree -- jQuery 树插件 使用方法与例子
qq_35286826的博客
09-03 1107
https://segmentfault.com/a/1190000004536774简介 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。网址：http://www.ztree.me/v3/main.php#_zTreeInfo上面的网址里有ztree的详细介绍、Demo 演示、API 文档、入门指南 以及下载。这里不再赘述。使用说明 1、下载ztree文件 将需要使用的 z
前端树形图 -- zTree -- jQuery 树插件的做法
kvhur的博客
07-10 1238
完整内容参见：http://www.gbtags.com/gb/share/5716.htm   zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 zTree 是开源免费的软件（MIT 许可证）。所以完全免费，可以随便使用，没有任何版权问题。 zTree文档 zTree插件的优点： zTre...
06zTree - 自定义图标（iconSkin 属性）
阿甘兄
04-22 3105
效果图：（注意ICON的图标会变化） 点击展开后变化： 代码 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Custom Icon Skin </TITLE> <meta http-equiv="content-type" content="text/html; cha...
【若依(ruoyi)】ztree 自定义图标（iconSkin 属性）
sayyy的专栏
07-04 1808
参考 https://treejs.cn/v3/api.php
zTree 自定义 icon 点击后失效的问题
weixin_45461609的博客
05-15 485
项目场景： 尚硅谷 —— 尚筹网项目 问题描述 zTree 自定义 icon 点击后失效。 此时的 addDiyDom 如下： addDiyDom: function (treeId, treeNode) { var icoObj = $("#" + treeNode.tId + "_ico"); if (treeNode.icon) { icoObj.removeClass().addClass(treeNode.icon); } } 原因分析： 通过源码
ztree 自定义响应显示数据
06-14
要自定义 ztree 的响应数据，需要在后端返回 JSON 数据时，按照 ztree 的数据格式进行组装。具体来说，ztree 的节点数据格式如下： ``` { "id": "节点唯一标识符", "pId": "节点的父节点唯一标识符", "name": ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值