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插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery带控制按钮轮播图插件
Jul 31 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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python中日期和时间格式化输出的方法小结
2015/03/19 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python清空文件并替换内容的实例
2018/10/22 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
详解HTML5新增标签
2017/11/27 HTML / CSS
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
画展观后感
2015/06/17 职场文书
实用求职信模板范文
2019/05/13 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript