async_edit.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4. <TITLE> ZTREE DEMO - async & edit</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.min.js"></script>
  9. <!-- <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>-->
  10. <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
  11. <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
  12. <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
  13. <SCRIPT type="text/javascript">
  14. <!--
  15. var setting = {
  16. async: {
  17. enable: true,
  18. url:"../asyncData/getNodes.php",
  19. autoParam:["id", "name=n", "level=lv"],
  20. otherParam:{"otherParam":"zTreeAsyncTest"},
  21. dataFilter: filter
  22. },
  23. view: {expandSpeed:"",
  24. addHoverDom: addHoverDom,
  25. removeHoverDom: removeHoverDom,
  26. selectedMulti: false
  27. },
  28. edit: {
  29. enable: true
  30. },
  31. data: {
  32. simpleData: {
  33. enable: true
  34. }
  35. },
  36. callback: {
  37. beforeRemove: beforeRemove,
  38. beforeRename: beforeRename
  39. }
  40. };
  41. function filter(treeId, parentNode, childNodes) {
  42. if (!childNodes) return null;
  43. for (var i=0, l=childNodes.length; i<l; i++) {
  44. childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
  45. }
  46. return childNodes;
  47. }
  48. function beforeRemove(treeId, treeNode) {
  49. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  50. zTree.selectNode(treeNode);
  51. return confirm("Confirm delete node '" + treeNode.name + "' it?");
  52. }
  53. function beforeRename(treeId, treeNode, newName) {
  54. if (newName.length == 0) {
  55. setTimeout(function() {
  56. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  57. zTree.cancelEditName();
  58. alert("Node name can not be empty.");
  59. }, 0);
  60. return false;
  61. }
  62. return true;
  63. }
  64. var newCount = 1;
  65. function addHoverDom(treeId, treeNode) {
  66. var sObj = $("#" + treeNode.tId + "_span");
  67. if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
  68. var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
  69. + "' title='add node' onfocus='this.blur();'></span>";
  70. sObj.after(addStr);
  71. var btn = $("#addBtn_"+treeNode.tId);
  72. if (btn) btn.bind("click", function(){
  73. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  74. zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
  75. return false;
  76. });
  77. };
  78. function removeHoverDom(treeId, treeNode) {
  79. $("#addBtn_"+treeNode.tId).unbind().remove();
  80. };
  81. $(document).ready(function(){
  82. $.fn.zTree.init($("#treeDemo"), setting);
  83. });
  84. //-->
  85. </SCRIPT>
  86. <style type="text/css">
  87. .ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
  88. </style>
  89. </HEAD>
  90. <BODY>
  91. <h1>Editing Dynamic Tree</h1>
  92. <h6>[ File Path: exedit/async_edit.html ]</h6>
  93. <div class="content_wrap">
  94. <div class="zTreeDemoBackground left">
  95. <ul id="treeDemo" class="ztree"></ul>
  96. </div>
  97. <div class="right">
  98. <ul class="info">
  99. <li class="title"><h2>1, Explanation of editing dynamic tree</h2>
  100. <ul class="list">
  101. <li>1) This Demo is based on the "Advanced Edit Nodes" to modify, and open to drag and drop functionality, can be compared with that demo.</li>
  102. <li>2) At the same time set the editing mode and dynamic mode can be achieved editing dynamic tree.</li>
  103. <li class="highlight_red">3) zTree improved editing capabilities in dynamic mode, if the parent node hasn‘t loaded the child nodes, it will first load the child nodes before it add child node.</li>
  104. </ul>
  105. </li>
  106. <li class="title"><h2>2, Explanation of setting</h2>
  107. <ul class="list">
  108. <li class="highlight_red">1) Use editing features, please refer to "Normal Drag Node Operation" & "Basic Edit Nodes" demo of the instructions.</li>
  109. <li class="highlight_red">2) Use dynamic loading, please refer to "Dynamic Tree with Ajax" demo of the instructions.</li>
  110. </ul>
  111. </li>
  112. <li class="title"><h2>3, Explanation of treeNode</h2>
  113. <ul class="list">
  114. <li>No special requirements on the node data, please refer to "Dynamic Tree with Ajax" & "Normal Drag Node Operation" & "Basic Edit Nodes" demo of the instructions</li>
  115. </ul>
  116. </li>
  117. </ul>
  118. </div>
  119. </div>
  120. </BODY>
  121. </HTML>