如何动态给节点增加title属性或者修改提示信息值?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何动态给节点增加title属性或者修改提示信息值?相关的知识,希望对你有一定的参考价值。
参考技术A 对于zTree树控件,节点的默认提示信息title是节点的name,也就是默认显示节点的名称。你认真了解zTree,不难发现主要是key值在作祟:\\x0d\\x0a\\x0d\\x0a view sourceprint?\\x0d\\x0a 1.var setting = \\x0d\\x0a 2.data: \\x0d\\x0a 3.key: \\x0d\\x0a 4.title: "s"//这里的s表示节点内的s属性\\x0d\\x0a 5.,\\x0d\\x0a\\x0d\\x0a 这里的key内的title默认指向的就是name属性,或者为空,为空的时候也会默认为name属性。\\x0d\\x0a 针对这位朋友的问题,其实方法很多:\\x0d\\x0a 1、在后台构造属性\\x0d\\x0a 在ajax页面内从数据库拿到数据list过后通过new的形式给最终返回的json对象构造一个属性t出来。然后修改setting内key的title指向属性值为t即可。\\x0d\\x0a 返回的json对象数据为:\\x0d\\x0a\\x0d\\x0a view sourceprint?\\x0d\\x0a 1.var zNodes =[\\x0d\\x0a 2. id:1, pId:0, name:"节点搜索演示 1", t:"节点提示信息1", open:true,\\x0d\\x0a 3. id:11, pId:1, name:"关键字可以是名字", t:"节点提示信息2",\\x0d\\x0a 4. id:12, pId:1, name:"关键字可以是level", t:"节点提示信息3"\\x0d\\x0a 5.];\\x0d\\x0a\\x0d\\x0a 修改setting内对应的key值\\x0d\\x0a\\x0d\\x0a view sourceprint?\\x0d\\x0a 1.var setting = \\x0d\\x0a 2.data: \\x0d\\x0a 3.key: \\x0d\\x0a 4.title: "t"//这里的s表示节点内的s属性\\x0d\\x0a 5.,\\x0d\\x0a\\x0d\\x0a 2、动态修改树节点的属性\\x0d\\x0a 当前台给zTree树对象赋值结束后获取所有树节点,然后逐个更新树节点的属性值,示例代码如下所示:\\x0d\\x0a\\x0d\\x0a view sourceprint?\\x0d\\x0a 01.$(document).ready(function () \\x0d\\x0a 02.$.fn.zTree.init($("#treeDemo"), setting, zNodes);\\x0d\\x0a 03.//获取树对象\\x0d\\x0a 04.var treeObj = $.fn.zTree.getZTreeObj("treeDemo");\\x0d\\x0a 05.//拿到所有树节点\\x0d\\x0a 06.var nodes = treeObj.getNodes();\\x0d\\x0a 07.//for循环逐个修改树节点属性\\x0d\\x0a 08.for(var i = 0;i第31天:动态生成节点-京东轮播图创建
一、获取节点属性
getAttribute()通过这个方法可以得到某些元素的某些属性
alert(demo.getAttribute("class"));
二、设置节点属性
setAttribute("属性","值");
div.setAttribute("class","demo");
三、删除节点属性
removeAttribute("属性");
demo.removeAttribute("title");
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>京东轮播图创建</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 width: 730px; 13 height: 454px; 14 margin: 100px auto; 15 overflow: hidden; 16 position: relative; 17 18 } 19 .circle{ 20 position: absolute; 21 left:50%; 22 margin-left: -50px; 23 bottom:10px; 24 } 25 .circle span{ 26 float: left; 27 width: 18px; 28 height: 18px; 29 border-radius: 50%; 30 background-color: pink; 31 text-align: center; 32 line-height: 18px; 33 margin-right: 10px; 34 cursor: pointer; 35 } 36 .circle span.current{ 37 background-color:blue ; 38 color: #fff; 39 } 40 </style> 41 <script> 42 window.onload=function(){ 43 var scroll=document.getElementById("scroll"); 44 var circle=document.createElement("div"); 45 circle.className="circle";//更改类名 46 scroll.appendChild(circle); 47 var ul=document.getElementById("ul"); 48 var lis=ul.children; 49 for(var i=0;i<lis.length;i++){ 50 var newspan=document.createElement("span"); 51 newspan.innerHTML=i+1; 52 circle.appendChild(newspan); 53 } 54 var child=circle.children; 55 child[0].setAttribute("class","current"); 56 57 58 59 } 60 </script> 61 </head> 62 <body> 63 <div class="box" id="scroll"> 64 <div class="slider"> 65 <ul id="ul"> 66 <li><img src="images/11.jpg" alt=""></li> 67 <li><img src="images/22.jpg" alt=""></li> 68 <li><img src="images/33.jpg" alt=""></li> 69 <li><img src="images/44.jpg" alt=""></li> 70 <li><img src="images/55.jpg" alt=""></li> 71 <li><img src="images/66.jpg" alt=""></li> 72 </ul> 73 </div> 74 <div class="circle"> 75 <span>1</span> 76 <span>2</span> 77 <span>3</span> 78 <span>4</span> 79 <span>5</span> 80 <span>6</span> 81 </div> 82 </div> 83 </body> 84 </html>
运行结果:
以上是关于如何动态给节点增加title属性或者修改提示信息值?的主要内容,如果未能解决你的问题,请参考以下文章
【求助】Dom4j 生成xml,节点增加属性时,属性值中有特殊字符,如何做到不转义