ZtreeCreator.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. /**
  2. * 构造Ztree 说明。
  3. *
  4. * 快速构造默认配置的ztree
  5. * new ZtreeCreator('treeId',url).initZtree(param);
  6. * treeId:树的Id,url:请求的url ,
  7. * initZtree(param,level,call);
  8. parma 异步请求提供参数,
  9. level展开层级(可略,默认展开全部),
  10. call 回调提供Ztree初始化对象
  11. 完整例子
  12. var ztreeCreator = new ZtreeCreator('groupTree',url)
  13. .setCallback({=beforeClick:beforeClick,onClick:zTreeOnLeftClick,onRightClick:zTreeOnRightClick})
  14. .initZtree(params,function(treeObj){groupTree=treeObj});
  15. * **/
  16. var ZtreeCreator = function(treeId,url,initJson){
  17. if(!treeId) alert("构造Ztree必须提供 treeId");
  18. this.treeId = treeId;
  19. var _treeObj;
  20. /**初始化树**/
  21. this.initZtree = function(param,level,callBack){
  22. if(!url && !_setting.async.url) alert("构造Ztree必须提供 请求地址!");
  23. if (jQuery.isFunction(param)) {
  24. callBack = param;
  25. param = {};
  26. }
  27. if (jQuery.isFunction(level)) {
  28. callBack = level;
  29. level = false;
  30. }
  31. if(!param) param = {};
  32. // 通过json初始化树
  33. if(initJson && initJson.length >0){
  34. pushJsonToBuildTree(initJson,level,callBack);
  35. return this;
  36. }
  37. //如果异步加载
  38. if(_setting.async.url){
  39. _treeObj=$.fn.zTree.init($("#"+treeId), _setting);
  40. return this;
  41. }
  42. //一次性加载
  43. $.post(url,param,function(result){
  44. if(!(result instanceof Array)) result =eval('(' + result + ')');
  45. pushJsonToBuildTree(result,level,callBack);
  46. });
  47. return this;
  48. }
  49. function pushJsonToBuildTree(json,level,callBack){
  50. _treeObj = $.fn.zTree.init($("#"+treeId),_setting,json);
  51. if(level){
  52. _treeObj.expandAll(false);
  53. expandTree(_treeObj,_treeObj.getNodes(),level);
  54. }
  55. else
  56. _treeObj.expandAll(true);
  57. if($.isFunction(callBack)) callBack(_treeObj);
  58. }
  59. this.getTreeObj = function(){
  60. if(!_treeObj) alert(treeId+"尚未初始化");
  61. return _treeObj;
  62. };
  63. /**设置树展示的标识key {idKey,pIdKey,name,title,rootPid}
  64. * idKey 默认 id
  65. * pIdKey 默认 parentId
  66. * name 默认 name
  67. * title 默认 name
  68. * */
  69. this.setDataKey = function(keys){
  70. if(!keys) return this;
  71. if(keys.idKey) _setting.data.simpleData.idKey = keys.idKey;
  72. if(keys.pIdKey) _setting.data.simpleData.pIdKey = keys.pIdKey;
  73. if(keys.name) _setting.data.key.name = keys.name;
  74. if(keys.title) _setting.data.key.title = keys.title;
  75. if(keys.rootPId) _setting.data.simpleData.rootPId=keys.rootPId;
  76. return this;
  77. }
  78. /** 设置选择框的方式默认没有选择框
  79. * 如果需要选择框,不需要级联 则传 true
  80. * param true or { "Y": "p", "N": "s" }
  81. */
  82. this.setCheckboxType = function(type){
  83. _setting.check.enable = true
  84. if(type instanceof Object){
  85. _setting.check.chkboxType = type;
  86. }
  87. return this;
  88. }
  89. /**这里支持Ztree 所有的回调方法,请查API
  90. * eg:传入参数{beforeClick:beforeClick,onClick:onClick,beforeCheck:beforeCheck}
  91. **/
  92. this.setCallback = function(callBack){
  93. if(callBack instanceof Object)
  94. for(call in callBack){
  95. if(!$.isFunction(callBack[call])) alert(call+" :is not a function");
  96. _setting.callback[call] = callBack[call];
  97. }
  98. return this;
  99. }
  100. /** 异步加载 */
  101. this.setAsync = function(conf){
  102. _setting.async = conf;
  103. return this;
  104. }
  105. /**是否显示图标配置项**/
  106. this.setShowIcon = function(call){
  107. _setting.view.showIcon = call;
  108. return this;
  109. }
  110. /**设置一些特殊的值请参照 Ztree _setting 格式 ***/
  111. this.setSetingParam = function(param){
  112. if(param instanceof Object)
  113. for(p in param){
  114. _setting[p] = param[p];
  115. }
  116. return this;
  117. }
  118. /***
  119. * isShowIn,被显示在某个元素下面,比如 input框,做成累似comboTree的样子
  120. * width,height 设置出现 那个 combox的宽高
  121. * TODO 如果是input 设置 autoSetValue = true , 扩展回显和自动填值功能。
  122. */
  123. var _isShowIn,_menuContent;
  124. this.makeCombTree = function(isShowIn,width,height){
  125. height = height? height:300;
  126. width =width ? width:163;
  127. _menuContent = treeId+"MenuContent";
  128. _isShowIn = isShowIn;
  129. var menuContent ='<div id="'+_menuContent+'" style="width:'+width+'px; height:'+height+'px;overflow-y:scroll; position:absolute;z-index: 9999;display:none;background-color:#F5F5F5">'
  130. +'<ul id="'+treeId+'" class="ztree" ></ul></div>';
  131. $("#"+isShowIn).after(menuContent);
  132. $("#"+isShowIn).bind("click",this.showMenu);
  133. return this;
  134. }
  135. // 可以添加一个目标对象,如果是添加了点击事件的,则默认
  136. this.showMenu = function(target){
  137. if(!target || target.currentTarget) {
  138. target = $(this);
  139. }
  140. var btnOffset = target.offset();
  141. $("#"+_menuContent).css({left:btnOffset.left + "px", top:btnOffset.top + target.outerHeight() + "px"}).slideDown("fast");
  142. $("body").bind("mousedown",onBodyDown);
  143. }
  144. this.hideMenu =function(){
  145. hideMenu();
  146. }
  147. var onBodyDown = function (event){
  148. if (!(event.target.id == _isShowIn || event.target.id == _menuContent || $(event.target).parents("#"+_menuContent).length>0)){
  149. hideMenu();
  150. }
  151. }
  152. var hideMenu = function(){
  153. $("#"+_menuContent).fadeOut("fast");
  154. $("body").unbind("mousedown", onBodyDown);
  155. }
  156. /**_setting 私有 配置项**/
  157. var _setting = {
  158. data: {
  159. key:{
  160. name: "name",
  161. title: "name"
  162. },
  163. simpleData: {
  164. enable: true,
  165. idKey: "id",
  166. pIdKey: "parentId",
  167. rootPId:0
  168. }
  169. },
  170. async: {enable: false},
  171. edit: {
  172. drag: {isCopy:true},
  173. enable: true,
  174. showRemoveBtn: false,
  175. showRenameBtn: false
  176. },
  177. view:{
  178. nameIsHTML: true,
  179. selectedMulti: true,
  180. showIconFont:true,
  181. showIcon: null
  182. },
  183. check: {
  184. enable: false,
  185. chkboxType: { "Y": "", "N": "" }
  186. },
  187. callback:{
  188. beforeClick: null,
  189. onClick: null,
  190. onRightClick: null,
  191. beforeDrop: null,
  192. onDrop: null
  193. }
  194. }
  195. /***设置展开层级*/
  196. function expandTree(treeObj,nodes,level){
  197. var thelevel=level-1;
  198. for(var i=0;i<nodes.length;i++)
  199. {
  200. var node =nodes[i];
  201. treeObj.expandNode(node, true, false, false);
  202. if(thelevel>0 && node.children && node.children.length>0)
  203. {
  204. expandTree(treeObj, node.children,thelevel);
  205. }
  206. }
  207. }
  208. };