整合ztree的一些功能和demo演示

ztree官网上有详细的API和演示demo，这里就不详细介绍了，只对用到的一些功能进行说明一下。

1、用到的几个js文件

jquery-1.4.4.min.js（jQuery的核心js）

jquery.ztree.core-3.5.js（ztree的核心js）

jquery.ztree.excheck-3.5.js（ztree的复选框功能js）

jquery.ztree.exedit-3.5.js（ztree的编辑功能js）

2、用的css文件

zTreeStyle.css（只有这一个css文件，控制ztree样式，当然可以在这个文件里扩展自己需要的样式）

3、用到的图片

zTree v3.x 将主要图标都合并为一个图片，利用图片切割方式显示图标

4、数据定义

use the simple data format（{"id":1, "pId":0, "name":"test1"}）

5、页面demo代码如下：

1. <link rel="stylesheet" href="css/zTreeStyle.css" />

2. <script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>

3. <script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>

4. <script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script>

5. <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

6. <SCRIPT type="text/javascript">

7. var dragId;var zTree_Menu;

8. var setting = {

9. view: {

10. addHoverDom: addHoverDom,

11. removeHoverDom: removeHoverDom,

12. selectedMulti: false,

13. showLine: false,

14. selectedMulti: false,

15. showIcon: false

16. },

17. edit: {

18. enable: true,

19. showRemoveBtn: setRemoveBtn,

20. removeTitle:"删除分类",

21. renameTitle:"编辑分类",

22. drag: {

23. prev: true,

24. next: true,

25. inner: false

26. },

27. editNameSelectAll: true

28. },

29. data: {

30. simpleData: {

31. enable: true

32. }

33. },

34. callback: {

35. beforeDrag: beforeDrag,

36. beforeClick: beforeClick,

37. beforeEditName: beforeEditName,

38. beforeRemove: beforeRemove,

39. beforeRename: beforeRename,

40. onRemove: onRemove,

41. onRename: onRename,

42. beforeDrop: beforeDrop

43. }

44. };

45. //采用简单数据模式 (Array)

46. var zNodes =[

47. { id:1, pId:0, name:"拖拽 1"},

48. { id:11, pId:1, name:"拖拽 1-1"},

49. { id:111, pId:11, name:"拖拽 1-1-1"},

50. { id:12, pId:1, name:"拖拽 1-2"},

51. { id:121, pId:12, name:"拖拽 1-2-1"},

53. { id:122, pId:12, name:"拖拽 1-2-2"},

54. { id:1221, pId:121, name:"拖拽 1-2-2-1"},

55. { id:123, pId:12, name:"拖拽 1-2-3"},

56. { id:1231, pId:123, name:"拖拽 1-2-3-1"},

57. { id:1232, pId:123, name:"拖拽 1-2-3-2"},

58. { id:1233, pId:123, name:"拖拽 1-2-3-3"},

59. { id:2, pId:0, name:"拖拽 2"},

60. { id:21, pId:2, name:"拖拽 2-1"},

61. { id:22, pId:2, name:"拖拽 2-2"},

62. { id:23, pId:2, name:"拖拽 2-3"},

63. { id:3, pId:0, name:"拖拽 3"},

64. { id:31, pId:3, name:"拖拽 3-1"},

65. { id:32, pId:3, name:"拖拽 3-2"},

66. { id:33, pId:3, name:"拖拽 3-3"}

67. ];

69. function beforeDrag(treeId, treeNodes) {//用于捕获节点被拖拽之前的事件回调函数

70. return false;

71. }

72. function beforeEditName(treeId, treeNode) {//用于捕获节点编辑按钮的 click 事件，并且根据返回值确定是否允许进入名称编辑状态

73. var zTree = $.fn.zTree.getZTreeObj("treeDemo");

74. zTree.selectNode(treeNode);

75. return true;

76. }

77. function beforeRemove(treeId, treeNode) {//用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作

78. var zTree = $.fn.zTree.getZTreeObj("treeDemo");

79. zTree.selectNode(treeNode);

80. return confirm("确认删除 分类 -- " + treeNode.name + " 吗？");

81. }

82. function onRemove(e, treeId, treeNode) {//用于捕获删除节点之后的事件回调函数

84. }

85. function beforeRename(treeId, treeNode, newName) {//更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作

86. if (newName.length == 0) {

87. alert("分类名称不能为空.");

88. var zTree = $.fn.zTree.getZTreeObj("treeDemo");

89. setTimeout(function(){zTree.editName(treeNode)}, 10);

90. return false;

91. }

92. return true;

93. }

94. function onRename(e, treeId, treeNode) {//用于捕获节点编辑名称结束之后的事件回调函数

96. }

98. var newCount = 1;

99. function addHoverDom(treeId, treeNode) {//用于当鼠标移动到节点上时，显示用户自定义控件

100. var sObj = $("#" + treeNode.tId + "_span");

101. if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;

102. var addStr = "<span class='button add' id='addBtn_" + treeNode.tId

103. + "' title='添加分类' onfocus='this.blur();'></span>";

104. sObj.after(addStr);

105. var btn = $("#addBtn_"+treeNode.tId);

106. if (btn) btn.bind("click", function(){

107. var zTree = $.fn.zTree.getZTreeObj("treeDemo");

108. zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});

109. return false;

110. });

111. }

112. function setRemoveBtn(treeId, treeNode) {//父分类去掉删除功能

113. return !treeNode.isParent;

115. <span style="white-space:pre"> </span>}

117. function removeHoverDom(treeId, treeNode) {

118. $("#addBtn_"+treeNode.tId).unbind().remove();

119. };

121. function beforeDrag(treeId, treeNodes) {//拖拽时执行

122. for (var i=0,l=treeNodes.length; i<l; i++) {

123. dragId = treeNodes[i].pId;

124. if (treeNodes[i].drag === false) {

125. return false;

126. }

127. }

128. return true;

129. }

130. function beforeDrop(treeId, treeNodes, targetNode, moveType) {//拖拽释放后执行

131. if(targetNode.pId == dragId){

132. return true;

133. }else{

134. return false;

135. }

136. }

138. function selectAll() {

139. var zTree = $.fn.zTree.getZTreeObj("treeDemo");

140. zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");

141. };

143. $(document).ready(function(){

144. $.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化ztree

145. zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");

146. $("#selectAll").bind("click", selectAll);

147. });

149. </SCRIPT>

150. </head>

151. <body>

152. <div class="widget-box">

153. <div class="widget-title"> <span class="icon"> <i class="icon-th"></i> </span>

154. <h5>分类管理</h5>

155. </div>

156. <div class="widget-content tab-content" >

157. <!--分类管理开始-->

158. <div class="content_wrap" >

159. <div class="zTreeDemoBackground ">

160. <ul id="treeDemo" class="ztree"></ul>

161. </div>

162. </div>

163. <!--分类管理结束-->

164. </div>

165. </div>

166. </body>

167. </html>

以上代码可以直接运行，不过需要下载相关js、css和图片，可以直接到ztree官网下载。

--------------------- 本文来自 黄爱岗 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/huangaigang6688/article/details/27237119?utm_source=copy

文章来源: 整合ztree的一些功能和demo演示