zTree>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

x

本来想自己敲一个zTree的例子的>>>

但是一想zTree文档做的这么好,直接拷贝过来一个得了...

哈哈>>>

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title> ZTREE DEMO - addHoverDom / removeHoverDom / addDiyDom</title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <link rel="stylesheet" href="diydom_data/demo.css" type="text/css">
  7. <link rel="stylesheet" href="diydom_data/zTreeStyle.css" type="text/css">
  8. <script type="text/javascript" src="diydom_data/jquery-1.js"></script>
  9. <script type="text/javascript" src="diydom_data/jquery.js"></script>
  10. <script type="text/javascript" src="diydom_data/jquery_002.js"></script>
  11. <script type="text/javascript" src="diydom_data/jquery_003.js"></script>
  12. <style type="text/css">
  13. .ztree li span.demoIcon {
  14. padding: 0 2px 0 10px;
  15. }
  16.  
  17. .ztree li span.button.icon01 {
  18. margin: 0;
  19. background: url(../../../css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent;
  20. vertical-align: top;
  21. *vertical-align: middle;
  22. }
  23.  
  24. .ztree li span.button.icon02 {
  25. margin: 0;
  26. background: url(../../../css/zTreeStyle/img/diy/4.png) no-repeat scroll 0 0 transparent;
  27. vertical-align: top;
  28. *vertical-align: middle;
  29. }
  30.  
  31. .ztree li span.button.icon03 {
  32. margin: 0;
  33. background: url(../../../css/zTreeStyle/img/diy/5.png) no-repeat scroll 0 0 transparent;
  34. vertical-align: top;
  35. *vertical-align: middle;
  36. }
  37.  
  38. .ztree li span.button.icon04 {
  39. margin: 0;
  40. background: url(../../../css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent;
  41. vertical-align: top;
  42. *vertical-align: middle;
  43. }
  44.  
  45. .ztree li span.button.icon05 {
  46. margin: 0;
  47. background: url(../../../css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent;
  48. vertical-align: top;
  49. *vertical-align: middle;
  50. }
  51.  
  52. .ztree li span.button.icon06 {
  53. margin: 0;
  54. background: url(../../../css/zTreeStyle/img/diy/8.png) no-repeat scroll 0 0 transparent;
  55. vertical-align: top;
  56. *vertical-align: middle;
  57. }
  58. </style>
  59. </head>
  60.  
  61. <body>
  62. <h1>添加自定义控件</h1>
  63. <h6>[ 文件路径: super/diydom.html ]</h6>
  64. <div class="content_wrap">
  65. <div class="zTreeDemoBackground left">
  66. <ul id="treeDemo" class="ztree" style="-moz-user-select: none;"><li id="treeDemo_1" class="level0" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_1_switch" title="" class="button level0 switch roots_open" treenode_switch=""></span><a id="treeDemo_1_a" class="level0" treenode_a="" onclick="" target="_blank" style="" title="hover事件显示控件"><span id="treeDemo_1_ico" title="" treenode_ico="" class="button ico_open" style=""></span><span id="treeDemo_1_span" class="node_name">hover事件显示控件</span></a><ul id="treeDemo_1_ul" class="level0 line" style="display:block"><li id="treeDemo_2" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_2_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_2_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="按钮1"><span id="treeDemo_2_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_2_span" class="node_name">按钮1</span></a></li><li id="treeDemo_3" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_3_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_3_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="按钮2"><span id="treeDemo_3_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_3_span" class="node_name">按钮2</span></a></li><li id="treeDemo_4" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_4_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_4_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="下拉框"><span id="treeDemo_4_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_4_span" class="node_name">下拉框</span></a></li><li id="treeDemo_5" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_5_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_5_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="文本1"><span id="treeDemo_5_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_5_span" class="node_name">文本1</span></a></li><li id="treeDemo_6" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_6_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_6_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="文本2"><span id="treeDemo_6_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_6_span" class="node_name">文本2</span></a></li><li id="treeDemo_7" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_7_switch" title="" class="button level1 switch bottom_docu" treenode_switch=""></span><a id="treeDemo_7_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="超链接"><span id="treeDemo_7_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_7_span" class="node_name">超链接</span></a></li></ul></li><li id="treeDemo_8" class="level0" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_8_switch" title="" class="button level0 switch bottom_open" treenode_switch=""></span><a id="treeDemo_8_a" class="level0" treenode_a="" onclick="" target="_blank" style="" title="始终显示控件"><span id="treeDemo_8_ico" title="" treenode_ico="" class="button ico_open" style=""></span><span id="treeDemo_8_span" class="node_name">始终显示控件</span></a><ul id="treeDemo_8_ul" class="level0 " style="display:block"><li id="treeDemo_9" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_9_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_9_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="按钮1"><span id="treeDemo_9_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_9_span" class="node_name">按钮1</span><span class="demoIcon" id="diyBtn_21" title="按钮1" onfocus="this.blur();"><span class="button icon01"></span></span></a></li><li id="treeDemo_10" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_10_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_10_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="按钮2"><span id="treeDemo_10_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_10_span" class="node_name">按钮2</span></a><span class="demoIcon" id="diyBtn_22" title="按钮2" onfocus="this.blur();"><span class="button icon02"></span></span></li><li id="treeDemo_11" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_11_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_11_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="下拉框"><span id="treeDemo_11_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_11_span" class="node_name">下拉框</span></a><select class="selDemo" id="diyBtn_23"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option></select></li><li id="treeDemo_12" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_12_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_12_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="文本"><span id="treeDemo_12_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_12_span" class="node_name">文本</span></a><span id="diyBtn_24">Text Demo...</span></li><li id="treeDemo_13" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_13_switch" title="" class="button level1 switch bottom_docu" treenode_switch=""></span><a id="treeDemo_13_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="超链接"><span id="treeDemo_13_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_13_span" class="node_name">超链接</span></a><a id="diyBtn1_25" onclick="alert(1);return false;">链接1</a><a id="diyBtn2_25" onclick="alert(2);return false;">链接2</a></li></ul></li></ul>
  67. </div>
  68. <div>
  69. <input type="button" id="id_update_text" value="更新文本>>>" onclick="test()" />
  70. </div>
  71. <div class="right">
  72. <ul class="info">
  73. <li class="title">
  74. <h2>1、实现方法说明</h2>
  75. <ul class="list">
  76. <li>利用 setting.view.addHoverDom / removeHoverDom / addDiyDom 这几个参数的配置可以很容易的实现自定义控件的功能</li>
  77. <li class="highlight_red">添加自定义控件,请务必掌握 zTree 节点对象的命名规则,以保证正常添加 DOM 控件</li>
  78. <li class="highlight_red">如果添加标准的 select / checkbox / radio 等,请注意适当调整 zTree 的布局 css,保证 zTree 能正常显示</li>
  79. </ul>
  80. </li>
  81. <li class="title">
  82. <h2>2、setting 配置信息说明</h2>
  83. <ul class="list">
  84. <li>使用 setting.view.addHoverDom / removeHoverDom / addDiyDom 属性,详细请参见 API 文档中的相关内容</li>
  85. </ul>
  86. </li>
  87. <li class="title">
  88. <h2>3、treeNode 节点数据说明</h2>
  89. <ul class="list">
  90. <li>对 节点数据 没有特殊要求,用户可以根据自己的需求添加自定义属性</li>
  91. </ul>
  92. </li>
  93. </ul>
  94. </div>
  95. </div>
  96. <script type="text/javascript">
  97. <!--
  98.  
  99. var IDMark_Switch = "_switch",
  100. IDMark_Icon = "_ico",
  101. IDMark_Span = "_span",
  102. IDMark_Input = "_input",
  103. IDMark_Check = "_check",
  104. IDMark_Edit = "_edit",
  105. IDMark_Remove = "_remove",
  106. IDMark_Ul = "_ul",
  107. IDMark_A = "_a";
  108.  
  109. var setting = {
  110. view: {
  111. addHoverDom: addHoverDom,
  112. removeHoverDom: removeHoverDom,
  113. addDiyDom: addDiyDom
  114. }
  115. };
  116.  
  117. var zNodes =[
  118. {id:1, name:"hover事件显示控件", open:true,
  119. children:[
  120. {id:11, name:"按钮1"},
  121. {id:12, name:"按钮2"},
  122. {id:13, name:"下拉框"},
  123. {id:141, name:"文本1"},
  124. {id:142, name:"文本2"},
  125. {id:15, name:"超链接"}
  126.  
  127. ]},
  128. {id:2, name:"始终显示控件", open:true,
  129. children:[
  130. {id:21, name:"按钮1"},
  131. {id:22, name:"按钮2"},
  132. {id:23, name:"下拉框"},
  133. {id:24, name:"文本"},
  134. {id:25, name:"超链接"}
  135. ]}
  136. ];
  137.  
  138. function addHoverDom(treeId, treeNode) {
  139. if (treeNode.parentNode && treeNode.parentNode.id!=1) return;
  140. var aObj = $("#" + treeNode.tId + IDMark_A);
  141. if (treeNode.id == 11) {
  142. if ($("#diyBtn_"+treeNode.id).length>0) return;
  143. var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' >&nbsp;</span><span class='button icon03' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></span>";
  144. aObj.append(editStr);
  145. var btn = $("#diyBtn_"+treeNode.id);
  146. if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
  147. } else if (treeNode.id == 12) {
  148. if ($("#diyBtn_"+treeNode.id).length>0) return;
  149. var editStr = "<span class='button icon04' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></span>";
  150. aObj.after(editStr);
  151. var btn = $("#diyBtn_"+treeNode.id);
  152. if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
  153. } else if (treeNode.id == 13) {
  154. if ($("#diyBtn_"+treeNode.id).length>0) return;
  155. var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' >&nbsp;</span><select class='selDemo ' id='diyBtn_" +treeNode.id+ "'><option value=1>1</option><option value=2>2</option><option value=3>3</option></select>";
  156. aObj.after(editStr);
  157. var btn = $("#diyBtn_"+treeNode.id);
  158. if (btn) btn.bind("change", function(){alert("diy Select value="+btn.attr("value")+" for " + treeNode.name);});
  159. } else if (treeNode.id == 141) {
  160. if ($("#diyBtn_"+treeNode.id).length>0) return;
  161. var editStr = "<span class='test' id='diyBtn_" +treeNode.id+ "'>Text Demo...</span>";
  162. aObj.append(editStr);
  163. } else if (treeNode.id == 142) {
  164. if ($("#diyBtn_"+treeNode.id).length>0) return;
  165. var editStr = "<span id='diyBtn_" +treeNode.id+ "'>Text Demo...</span>";
  166. aObj.after(editStr);
  167. } else if (treeNode.id == 15) {
  168. if ($("#diyBtn1_"+treeNode.id).length>0) return;
  169. if ($("#diyBtn2_"+treeNode.id).length>0) return;
  170. var editStr = "<a id='diyBtn1_" +treeNode.id+ "' onclick='alert(1);return false;' style='margin:0 0 0 5px;'>链接1</a>" +
  171. "<a id='diyBtn2_" +treeNode.id+ "' onclick='alert(2);return false;' style='margin:0 0 0 5px;'>链接2</a>";
  172. aObj.append(editStr);
  173. }
  174. }
  175.  
  176. function removeHoverDom(treeId, treeNode) {
  177. if (treeNode.parentTId && treeNode.getParentNode().id!=1) return;
  178. if (treeNode.id == 15) {
  179. $("#diyBtn1_"+treeNode.id).unbind().remove();
  180. $("#diyBtn2_"+treeNode.id).unbind().remove();
  181. } else {
  182. $("#diyBtn_"+treeNode.id).unbind().remove();
  183. $("#diyBtn_space_" +treeNode.id).unbind().remove();
  184. }
  185. }
  186.  
  187. function addDiyDom(treeId, treeNode) {
  188. if (treeNode.parentNode && treeNode.parentNode.id!=2) return;
  189. var aObj = $("#" + treeNode.tId + IDMark_A);
  190. if (treeNode.id == 21) {
  191. var editStr = "<span class='demoIcon' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'><span class='button icon01'></span></span>";
  192. aObj.append(editStr);
  193. var btn = $("#diyBtn_"+treeNode.id);
  194. if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
  195. } else if (treeNode.id == 22) {
  196. var editStr = "<span class='demoIcon' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'><span class='button icon02'></span></span>";
  197. aObj.after(editStr);
  198. var btn = $("#diyBtn_"+treeNode.id);
  199. if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
  200. } else if (treeNode.id == 23) {
  201. var editStr = "<select class='selDemo' id='diyBtn_" +treeNode.id+ "'><option value=1>1</option><option value=2>2</option><option value=3>3</option></select>";
  202. aObj.after(editStr);
  203. var btn = $("#diyBtn_"+treeNode.id);
  204. if (btn) btn.bind("change", function(){alert("diy Select value="+btn.attr("value")+" for " + treeNode.name);});
  205. } else if (treeNode.id == 24) {
  206. var editStr = "<span id='diyBtn_" +treeNode.id+ "'>Text Demo...</span>";
  207. aObj.after(editStr);
  208. } else if (treeNode.id == 25) {
  209. var editStr = "<a id='diyBtn1_" +treeNode.id+ "' onclick='alert(1);return false;'>链接1</a>" +
  210. "<a id='diyBtn2_" +treeNode.id+ "' onclick='alert(2);return false;'>链接2</a>";
  211. aObj.after(editStr);
  212. }
  213. }
  214.  
  215. ///主要是这段代码>>>很容易>>就是一个思路>>>哈哈>>>刚开始一直再查找zTree 的文档>>>没找到,后来一看源码才想到这么简单的问题>>>那时候已经进了zTree的圈出不来了>>>
  216. function test() {
  217. //alert("xx");
  218. //要更新的节点>>>id
  219. var test_id = 24;
  220. var z_tree = $.fn.zTree.getZTreeObj("treeDemo");
  221. var update_node = z_tree.getNodesByParam("id", test_id)[0];;
  222. update_node.name = ">" + Math.floor(Math.random() * 10) + ">";
  223. //updateNode不可以更新自定义标签>>>毕竟自定义的>>>
  224. z_tree.updateNode(update_node);
  225. console.log(update_node);
  226. //这里可以直接用文本的id = "diyBtn_24"来更新>>>我遇上的情况这种文本比较多.通过name或者class来控制的>>>..
  227. $("#" + update_node.tId).find("span").last().text(">" + Math.floor(Math.random() * 10) + ">");
  228. }
  229.  
  230. $(document).ready(function(){
  231. $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  232. //触发>>>更新>>>
  233. //$("#id_update_text").off("click");
  234. //$("#id_update_text").on("click", function () {
  235. //})
  236. });
  237. //-->
  238. </script>
  239. </body>
  240. </html>

思路很简单>>>

但是刚开始陷入了zTree的文档里面了{想从里面找到接口>>>}

后来跳出来一看这么简单的问题>>>

下面贴上我拷贝zTree官网的demo↓文件>>>好吧,找到怎么上传文件再贴    /手动尴尬

x

zTree更新自定义标签>>>的更多相关文章

  1. 一个简单的jsp自定义标签

    学到了一个简单的jsp自定义标签,后面有更多的例子,会更新出来: 例子1: 步骤: 1.编写标签实现类: 继承javax.servlet.jsp.tagext.SimpleTagSupport; 重写 ...

  2. 写一个可插入自定义标签的 Textarea 组件

    - “插入自定义标签是什么鬼?” - “比如你要插入一个<wise></wise>的标签...” - “什么情况下会有这种需求?” - “得罪了产品的情况下...” 一.需求背 ...

  3. day056-58 django多表增加和查询基于对象和基于双下划线的多表查询聚合 分组查询 自定义标签过滤器 外部调用django环境 事务和锁

    一.多表的创建 from django.db import models # Create your models here. class Author(models.Model): id = mod ...

  4. python 全栈开发,Day70(模板自定义标签和过滤器,模板继承 (extend),Django的模型层-ORM简介)

    昨日内容回顾 视图函数: request对象 request.path 请求路径 request.GET GET请求数据 QueryDict {} request.POST POST请求数据 Quer ...

  5. Django模板自定义标签和过滤器,模板继承(extend),Django的模型层

    上回精彩回顾 视图函数: request对象 request.path 请求路径 request.GET GET请求数据 QueryDict {} request.POST POST请求数据 Quer ...

  6. OneBlog开源博客-详细介绍如何实现freemarker自定义标签

    前言 OneBlog中使用到了springboot + freemarker的技术,同时项目里多个controller中都需要查询一个公有的数据集合,一般做法是直接在每个controller的方法中通 ...

  7. ASP.NET Core 中文文档 第四章 MVC(3.6.2 )自定义标签辅助类(Tag Helpers)

    原文:Authoring Tag Helpers 作者:Rick Anderson 翻译:张海龙(jiechen) 校对:许登洋(Seay) 示例代码查看与下载 从 Tag Helper 讲起 本篇教 ...

  8. [JSP]自定义标签库taglib

    自定义标签的步骤 自定义标签的步骤大概有三步: 1.继承javax.servlet.jsp.tagext.*下提供的几个标签类,如Tag.TagSupport.BodyTagSupport.Simpl ...

  9. [Java] JSP笔记 - 自定义标签

    自定义标签的创建步骤: 自定义标签的四大功能: 自定义标签的类结构: 在 1.0 中呢, 可以将 <body-content> 的值设置为 JSP, 2.0中则不允许在自定义标签体中出现j ...

随机推荐

  1. 动态改变APP图标

    一.iOS动态更换App图标(一):基础使用 该功能应用的场景 1.白天/夜间模式切换,在切换App主色调同时切换App图标. 2.各类皮肤主题(淘宝就可换肤),附带App图标一块更换. 3.利用Ap ...

  2. C#面试题(转载)

    原文地址:100道C#面试题(.net开发人员必备)  https://blog.csdn.net/u013519551/article/details/51220841 1. .NET和C#有什么区 ...

  3. C++ 匿名namespace的作用以及与static的区别

    匿名namespace的作用以及它与static的区别 一.匿名namespace的作用 在C语言中,如果我们在多个tu(translation unit)中使用了同一个名字做 为函数名或者全局变量名 ...

  4. ubuntu安装odbc及(mysql驱动)

    一.安装odbc apt-get install unixodbc 如果需要用到编译的头文件之类的 apt-get install unixodbc-dev 二.安装mysql驱动 apt-get i ...

  5. Socket网络编程--小小网盘程序(4)

    在这一小节中实现了文件的下载,具体的思路是根据用户的uid和用户提供的文件名filename联合两张表,取得md5唯一标识符,然后操作这个标识符对应的文件发送给客户端. 实现下载的小小网盘程序 cli ...

  6. python中的生成器函数是如何工作的?

    以下内容基于python3.4 1. python中的普通函数是怎么运行的? 当一个python函数在执行时,它会在相应的python栈帧上运行,栈帧表示程序运行时函数调用栈中的某一帧.想要获得某个函 ...

  7. Java Web项目中连接Access数据库的配置方法

    本文是对前几天的"JDBC连接Access数据库的几种方式"这篇的升级.因为在做一些小项目的时候遇到的问题,因此才决定写这篇博客的.昨天已经将博客公布了.可是后来经过一些验证有点问 ...

  8. spark 解析非结构化数据存储至hive的scala代码

    //提交代码包 // /usr/local/spark/bin$ spark-submit --class "getkv" /data/chun/sparktes.jar impo ...

  9. [GPU] DIY for Deep Learning Workstation

    Link: jcjohnson/cnn-benchmarks Ref: Build a super fast deep learning machine for under $1,000 Graphi ...

  10. 【Latex】常用工具包

    字体篇: \usepackage{color} {\color{red}{Hello World!}} 表格篇: 1.resizebox \begin{table*}[!htb] \centering ...