edit_fun.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4. <TITLE> ZTREE DEMO - addNodes / editName / removeNode / removeChildNodes</TITLE>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
  7. <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
  8. <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
  9. <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
  10. <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
  11. <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>
  12. <SCRIPT type="text/javascript">
  13. <!--
  14. var setting = {
  15. view: {
  16. selectedMulti: false
  17. },
  18. edit: {
  19. enable: true,
  20. showRemoveBtn: false,
  21. showRenameBtn: false
  22. },
  23. data: {
  24. keep: {
  25. parent:true,
  26. leaf:true
  27. },
  28. simpleData: {
  29. enable: true
  30. }
  31. },
  32. callback: {
  33. beforeDrag: beforeDrag,
  34. beforeRemove: beforeRemove,
  35. beforeRename: beforeRename,
  36. onRemove: onRemove
  37. }
  38. };
  39. var zNodes =[
  40. { id:1, pId:0, name:"parent node 1", open:true},
  41. { id:11, pId:1, name:"leaf node 1-1"},
  42. { id:12, pId:1, name:"leaf node 1-2"},
  43. { id:13, pId:1, name:"leaf node 1-3"},
  44. { id:2, pId:0, name:"parent node 2", open:true},
  45. { id:21, pId:2, name:"leaf node 2-1"},
  46. { id:22, pId:2, name:"leaf node 2-2"},
  47. { id:23, pId:2, name:"leaf node 2-3"},
  48. { id:3, pId:0, name:"parent node 3", open:true },
  49. { id:31, pId:3, name:"leaf node 3-1"},
  50. { id:32, pId:3, name:"leaf node 3-2"},
  51. { id:33, pId:3, name:"leaf node 3-3"}
  52. ];
  53. var log, className = "dark";
  54. function beforeDrag(treeId, treeNodes) {
  55. return false;
  56. }
  57. function beforeRemove(treeId, treeNode) {
  58. className = (className === "dark" ? "":"dark");
  59. showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
  60. return confirm("Confirm delete node '" + treeNode.name + "' it?");
  61. }
  62. function onRemove(e, treeId, treeNode) {
  63. showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
  64. }
  65. function beforeRename(treeId, treeNode, newName) {
  66. if (newName.length == 0) {
  67. alert("Node name can not be empty.");
  68. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  69. setTimeout(function(){zTree.editName(treeNode)}, 10);
  70. return false;
  71. }
  72. return true;
  73. }
  74. function showLog(str) {
  75. if (!log) log = $("#log");
  76. log.append("<li class='"+className+"'>"+str+"</li>");
  77. if(log.children("li").length > 8) {
  78. log.get(0).removeChild(log.children("li")[0]);
  79. }
  80. }
  81. function getTime() {
  82. var now= new Date(),
  83. h=now.getHours(),
  84. m=now.getMinutes(),
  85. s=now.getSeconds(),
  86. ms=now.getMilliseconds();
  87. return (h+":"+m+":"+s+ " " +ms);
  88. }
  89. var newCount = 1;
  90. function add(e) {
  91. var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  92. isParent = e.data.isParent,
  93. nodes = zTree.getSelectedNodes(),
  94. treeNode = nodes[0];
  95. if (treeNode) {
  96. treeNode = zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, isParent:isParent, name:"new node" + (newCount++)});
  97. } else {
  98. treeNode = zTree.addNodes(null, {id:(100 + newCount), pId:0, isParent:isParent, name:"new node" + (newCount++)});
  99. }
  100. if (treeNode) {
  101. zTree.editName(treeNode[0]);
  102. } else {
  103. alert("Leaf node is locked and can not add child node.");
  104. }
  105. };
  106. function edit() {
  107. var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  108. nodes = zTree.getSelectedNodes(),
  109. treeNode = nodes[0];
  110. if (nodes.length == 0) {
  111. alert("Please select one node at first...");
  112. return;
  113. }
  114. zTree.editName(treeNode);
  115. };
  116. function remove(e) {
  117. var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  118. nodes = zTree.getSelectedNodes(),
  119. treeNode = nodes[0];
  120. if (nodes.length == 0) {
  121. alert("Please select one node at first...");
  122. return;
  123. }
  124. var callbackFlag = $("#callbackTrigger").attr("checked");
  125. zTree.removeNode(treeNode, callbackFlag);
  126. };
  127. function clearChildren(e) {
  128. var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  129. nodes = zTree.getSelectedNodes(),
  130. treeNode = nodes[0];
  131. if (nodes.length == 0 || !nodes[0].isParent) {
  132. alert("Please select one parent node at first...");
  133. return;
  134. }
  135. zTree.removeChildNodes(treeNode);
  136. };
  137. $(document).ready(function(){
  138. $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  139. $("#addParent").bind("click", {isParent:true}, add);
  140. $("#addLeaf").bind("click", {isParent:false}, add);
  141. $("#edit").bind("click", edit);
  142. $("#remove").bind("click", remove);
  143. $("#clearChildren").bind("click", clearChildren);
  144. });
  145. //-->
  146. </SCRIPT>
  147. </HEAD>
  148. <BODY>
  149. <h1>Edit Nodes - zTree methods</h1>
  150. <h6>[ File Path: exedit/edit_fun.html ]</h6>
  151. <div class="content_wrap">
  152. <div class="zTreeDemoBackground left">
  153. <ul id="treeDemo" class="ztree"></ul>
  154. </div>
  155. <div class="right">
  156. <ul class="info">
  157. <li class="title"><h2>1, Explanation of 'addNodes / editName / removeNode / removeChildNodes' method</h2>
  158. <ul class="list">
  159. <li>Use 'addNodes / editName / removeNode / removeChildNodes' method can also be achieved copy / move nodes.</li>
  160. <li>Method 'cancelEditName' is effective, only when edit the node name. Please use it when necessary, this demo doesn't show how to use the method.</li>
  161. <li class="highlight_red">Use setting.data.keep.parent / leaf attribute, you can lock the parent node and leaf node.</li>
  162. <li><p>Try to edit node:<br/>
  163. &nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="callbackTrigger" checked /> Whether trigger the callback when execution removeNode() method.<br/>
  164. &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="addParent" href="#" title="add parent node" onclick="return false;">add parent node</a> ]
  165. &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="addLeaf" href="#" title="add leaf node" onclick="return false;">add leaf node</a> ]
  166. &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="edit" href="#" title="edit name" onclick="return false;">edit name</a> ]<br/>
  167. &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="remove" href="#" title="remove node" onclick="return false;">remove node</a> ]
  168. &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="clearChildren" href="#" title="make child nodes to empty" onclick="return false;">make child nodes to empty</a> ]<br/>
  169. remove log:<br/>
  170. <ul id="log" class="log"></ul></p>
  171. </li>
  172. <li class="highlight_red">How to use 'zTreeObj.addNodes / cancelEditName / editName / removeNode / removeChildNodes' method, please see the API documentation.</li>
  173. </ul>
  174. </li>
  175. <li class="title"><h2>2, Explanation of setting</h2>
  176. <ul class="list">
  177. <li>Same as 'Basic Edit Nodes'</li>
  178. <li class="highlight_red">Lock the parent / leaf node status, need to set setting.data.keep.parent / leaf attribute, see the API documentation for more related contents</li>
  179. </ul>
  180. </li>
  181. <li class="title"><h2>3, Explanation of treeNode</h2>
  182. <ul class="list">
  183. <li>Same as 'Basic Edit Nodes'</li>
  184. </ul>
  185. </li>
  186. </ul>
  187. </div>
  188. </div>
  189. </BODY>
  190. </HTML>