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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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中的函数嵌套层数限制分析
2011/06/13 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
php中文验证码实现示例分享
2014/01/12 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
Prototype String对象 学习
2009/07/19 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
python中format()函数的简单使用教程
2018/03/14 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
中东奢侈品市场:Coveti
2019/05/12 全球购物
最受欢迎的自我评价
2013/12/22 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
技校毕业生自荐信
2014/06/03 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
SQLServer之常用函数总结详解
2021/08/30 SQL Server
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技