如何动态给节点增加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属性或者修改提示信息值?的主要内容,如果未能解决你的问题,请参考以下文章

JQUERY方法给TABLE动态增加行

【求助】Dom4j 生成xml,节点增加属性时,属性值中有特殊字符,如何做到不转义

html如何实现鼠标悬停显示文字,鼠标移走文字消失。

LabVIEW中如何动态改变控件位置?

linux系统的vps进ftp时文件属性不能修改为777,怎样给账户增加这个权限

dtree节点的属性如何设置?为啥点击后不能跳转?