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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 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
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
利用python发送和接收邮件
2016/09/27 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
python Scrapy框架原理解析
2021/01/04 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
应届护士推荐信
2013/11/16 职场文书
就业自荐书
2013/12/05 职场文书
决心书范文
2014/03/11 职场文书
高三英语复习计划
2015/01/19 职场文书
电信营业员岗位职责
2015/04/14 职场文书
文员岗位职责范本
2015/04/16 职场文书
网络妈妈观后感
2015/06/08 职场文书
高中同学会致辞
2015/08/01 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
详解Nginx启动失败的几种错误处理
2021/04/01 Servers