华山资源网

jQuery zTree如何改变指定节点文本样式
网络编程 2024/12/23 佚名
3 1

需求：打开页面后已经生成一棵带有节点的树，需要实时更新该树每个节点的状态，根据状态，改变节点的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 "#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在轮询一次以后再开始下次更新操作。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com