jQuery zTree如何改变指定节点文本样式


Posted in jQuery onOctober 16, 2020

需求:打开页面后已经生成一棵带有节点的树,需要实时更新该树每个节点的状态,根据状态,改变节点的ICON和FONT样式。

说明:找了一下,基本上都是说加载时指定颜色的,加载时指定颜色的用法,在官方示例中就有说明:

示例:显示自定义字体的树

<SCRIPT type="text/javascript"> 
  <!-- 
  var setting = { 
    view: { 
      fontCss: getFont, 
      nameIsHTML: true 
    } 
  }; 
  var zNodes =[ 
    { name:"粗体字", <span style="color: #ff0000;">font:{'font-weight':'bold'}</span> }, 
    { name:"斜体字", font:{'font-style':'italic'}}, 
    { name:"有背景的字", font:{'background-color':'black', 'color':'white'}}, 
    { name:"红色字", font:{'color':'red'}}, 
    { name:"蓝色字", font:{'color':'blue'}}, 
    { name:"<span style='color:blue;margin-right:0px;'>view</span>.<span style='color:red;margin-right:0px;'>nameIsHTML</span>"}, 
    { name:"zTree 默认样式"} 
  ]; 
  function getFont(treeId, node) { 
    return node.font ? node.font : {}; 
  } 
  $(document).ready(function(){ 
    $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
  }); 
  //--> 
</SCRIPT>

示例:自定义图标 -- icon 属性

<SCRIPT type="text/javascript"> 
  <!-- 
  var setting = { 
    data: { 
      simpleData: { 
        enable: true 
      } 
    } 
  }; 
  var zNodes =[ 
    { id:1, pId:0, name:"展开、折叠 自定义图标不同", open:true, iconOpen:"../../../css/zTreeStyle/img/diy/1_open.png", iconClose:"../../../css/zTreeStyle/img/diy/1_close.png"}, 
    { id:11, pId:1, name:"叶子节点1", icon:"../../../css/zTreeStyle/img/diy/2.png"}, 
    { id:12, pId:1, name:"叶子节点2", icon:"../../../css/zTreeStyle/img/diy/3.png"}, 
    { id:13, pId:1, name:"叶子节点3", icon:"../../../css/zTreeStyle/img/diy/5.png"}, 
    { id:2, pId:0, name:"展开、折叠 自定义图标相同", open:true, icon:"../../../css/zTreeStyle/img/diy/4.png"}, 
    { id:21, pId:2, name:"叶子节点1", icon:"../../../css/zTreeStyle/img/diy/6.png"}, 
    { id:22, pId:2, name:"叶子节点2", icon:"../../../css/zTreeStyle/img/diy/7.png"}, 
    { id:23, pId:2, name:"叶子节点3", <span style="color: #ff0000;">icon:"../../../css/zTreeStyle/img/diy/8.png"</span>}, 
    { id:3, pId:0, name:"不使用自定义图标", open:true }, 
    { id:31, pId:3, name:"叶子节点1"}, 
    { id:32, pId:3, name:"叶子节点2"}, 
    { id:33, pId:3, name:"叶子节点3"} 
  ]; 
  $(document).ready(function(){ 
    $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
  }); 
  //--> 
</SCRIPT>

可以看到每个NODE都有一个FONT的属性,和NAME同等级。可以通过设置FONT来指定其文本样式。

通过第二个示例可以看到,还有一个ICON属性。可以通过设置ICON属性来设置更改后的图标。

应用:实时更新树状态ICON和FONT样式

$(document).ready(function(){ 
  $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
  zTree = $.fn.zTree.getZTreeObj("treeDemo"); 
  rMenu = $("#rMenu"); 
  setTimeout("updateDev()",1000);  // 在初始化树之后,开始更新状态,就别用setInterval了 
}); 
var baseImgPath = "<%=basePath%>img/";   // basePath是通过JSP获得的系统根路径,不用相对路径 
function updateTree(){ 
  toDwr.getAllCode(function back(values){ 
    if(null != values && ""!=values){ 
      for(var code in values){ 
        <span style="color: #ff0000;">var node = zTree.getNodeByParam("id", code, null);</span> // 每个树都有编号,通过编号找节点 
        if(null != node){ 
          <span style="color: #ff0000;">node.font={'color':'red'};</span>      // 设置文本样式,这里设置文本颜色 
          <span style="color: #ff0000;">node.icon=baseImgPath+"monitor.png";</span> // 设置节点图标 
          zTree.updateNode(node);       // 更新该节点 
        } 
      } 
    } 
    setTimeout("updateTree()",1000); 
  } 
}

备注:

这里使用DWR进行异步交互,返回需要更新的列表编码。实际应用中可以根据实际情况,返回响应对象,并根据对象的属性判断到底更新为那种样式。

这里不建议使用 setInterval,建议采用setTimeout在轮询一次以后再开始下次更新操作。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 #jQuery
jquery简易手风琴插件的封装
Oct 13 #jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 #jQuery
jQuery实现二级导航菜单的示例
Sep 30 #jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 #jQuery
jQuery实现带进度条的轮播图
Sep 13 #jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 #jQuery
You might like
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
Python集合操作方法详解
2020/02/09 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
java代码实现空间切割
2022/01/18 Java/Android
24年收藏2000多部退役军用电台
2022/02/18 无线电